Project Spark - Smart Form Web Application Concept Design Challenge

Welcome to HeavyWater - Smart Form Web Application Concept Design Challenge.

We need your help to come up with a UX solution for a survey-based web application that helps users to assess financial information and eligibility for purchasing homes.

Round 1

Submit your design for a checkpoint feedback.

01. Smart Form Flow (Desktop)
01.01. Onboarding / Session
01.02. Form Template
02. Style Guide

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Submit your design for final review including checkpoint feedback.

01. Smart Form Flow (Desktop and Phone)
01.01. Onboarding / Session
01.02. Form Template
02. Style Guide

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Objectives

• To create UI screens (responsive web application - desktop and phone).
• To create a Style Guide.
• To provide a seamless flow to complete user goals.

Project Background

• The purpose of this project is to create a responsive web application that behaves as a smart form that can display different questions/fields depending on the user’s answers. This needs to be generalized to different question types (i.e. multi-select, single select, yes/no, input text, etc) and to different user journeys. The outcome of this is to create a design system to build the template for various user journeys and a prototype for both mobile and desktop devices.
• This form will become a web-application that should be compatible with any device (desktop, tablet or mobile). The form will ask a series of questions to assess the user’s financial background, timeline, and eligibility for purchasing a home. The number of “questions” or data points needed to complete the form can range from 50-100, depending on the complexity of the application. For example, if the user is applying with a co-borrower, twice the information is required for assets, income, and credit history.
• In this challenge, you will not be required to include all 100 questions, but instead, you must create a template (form interaction) and style guide for all of the question types, how these questions will be presented dynamically, and how the user will navigate between questions and sections.

Workflow

• [Out of scope] Banks and real state clients of us will configure surveys, customizing them to their branding and information needs.
• [Out of scope] When a potential end-user is ready to apply for a pre-approval, they will receive a link through email or through the client’s home page, which will lead them to complete the smart form process.
• The final end-user will go through an interactive form filling questions.
• There should be a way to authenticate or save users’ progress.
• Once the form is complete, the user receives upfront pre-approval results.

Screens/Features
01. Smart Form Flow (Desktop and Phone)

• For this design exercise, we won’t display all the questions but a set of them (unique enough) that allows developers to create pages and components by reusing your design framework (style guide).
• This client-facing app needs to handle some sort of authentication mechanism for abandoned sessions (open to suggestions).

01.01. Onboarding / Session

• The client lands to the app for the first time, what should the user see?
• In case a user abandons an on-going session in the middle of question #14, how could she retrieve the latest status? By creating an account mandatory? By creating some authentication mechanism as a first step? What would you suggest considering the flow of the main goal (filling questions) doesn’t get interrupted abruptly?
• In case it is a returning user from a recovered session, how would you display this scenario?
• What is the most natural approach to communicating progress to the user? Is it completion time? Amount of pages? Prev/next buttons?

01.02. Form Template

• The pre-approval flow should be divided into “sections” that are grouped by the nature of the questions. Categories:
  • Timeline
  • Personal Information
  • Desired Property
  • Real Estate
  • Assets 
  • Income
  • Credit and Declarations
  • Pre-Approval Results
  • Note: we expect to see an interaction design for each tab/category.
• A question or data field can have the following types:
  • Yes/No
  • Input text
  • Could require error validation
  • Different input types:
    • Currency
    • Percentage
    • Address
    • Social Security Number
    • Phone
    • Email
  • Multi-select Dropdown
  • Single-select dropdown (if number of answers >= 5)
  • Single-select buttons  (if less than or equal to 4 answers)
  • Checkbox (consent)
• Some questions will only be displayed depending on the answer to the previous question
  • For example, one question asks: Are you applying for this loan with another applicant? (Yes/No question type) 
  • If Yes, you need to ask for the following data:
    • Co-applicant First Name
    • Co-applicant Middle Name
    • Co-applicant Last Name
    • Co-applicant Email
  • If the user changes his or her answer to from Yes to No, the other co-applicant questions should disappear. 
  • See slides 2 and 3 for an example of this :
    • https://docs.google.com/presentation/d/1oSmqQ9AahjhQiLQ0YOypnELHVPuszsgUX52Te0MLAmM/
    • Note: use these slides as a means of understanding the requirements; feel free to take the design / visuals in your own direction
• Users should know which section they are currently on, which sections they’ve completed, and which sections remain
• A user should not be able to navigate to the subsequent section until they have completed all sections prior (see slide 7 for example of this)
• The questions within the same section should be revealed vertically as soon as a question is answered; a user should only have to click next or continue in order to start a new section. At the start of a new section, a user should only see one question. The next question is revealed once you answer the previous question. See an example of this here: https://mojomortgages.com/ (click “new mortgage” to open the calculator).
• Questions that you’ve answered previously are saved; if you navigate to a previous section, you can review your answers.
  • If a user leaves the site, they can log in and are directed through the app to review and edit their submissions.
  • This could be presented in a summary or some kind of expedited view with edit options
• If you modify your old answer to a question that changes the sequence of required questions, the user is directed to answer these fields
  • For example, if the user changes the answer to “Are you working with a real estate agent” from “No” to “Yes”, the next set of questions to get the real estate contact information should be displayed
• If a section is incomplete or an answer has an error, the error message must be obvious (build this error handling into the design components).

02. Style Guide

• The style guide must include a collection of reusable components, guided by clear standards, that can be assembled together to build this or other form-based interview (question text, headers, and error messages and answers can be mocked).
• Create a page (or several) to showcase all the different elements and components contained in the design to be used for development/code guidance purposes. See example 1 | example 2.
• Dimensions: 1366 width px. Height up to you.
• Required information (at least):
  • Color palette.
  • Font family.
  • Typography: headings, titles, body, labels, caption, etc.
  • Layout/composition: disposition of UI elements, overlays, navigation, etc.
  • UI elements: buttons, toggles, dropwdowns, etc.
  • Questions/replies interaction: you must capture unique question types and their interaction in the form of components (e.g. yes/no, multi-select, input text, dropdown, etc).
  • States: represent states for components (active, hover, disabled, etc).
  • Failure handling: error/warning dialogs, form error display, etc.
  • Templates: desktop, tablet (out of scope), phone layouts.

Screen Specifications

• Desktop: 1366px width. Height as much as needed.
• Phone: 750px width. Height as much as needed.
• Apply mobile-first design principles to smooth out the transition to the future tablet version.
• Make sure your work is in a vector format, for retina scaling and high fidelity.

Branding Guidelines

• Use a logo placeholder. Ignore the “webank” or any HeavyWater elements from the provided resources. This is meant to be something brand new.
• Fonts and colors are open to suggestions. They should be in line with the Google Material Design Guidelines (typography, layout, navigation, components, etc) - mandatory! 

Design Assets
Folder: https://drive.google.com/open?id=1Vq-GK1ypuHKAiQQgL-IJeCxUaVHAGMPl.

• Data Sample: form and questions example. Note that the questions with dependencies should only be displayed if the dependency/dependencies are met.
• Journey #1: user journey example.

Inspiration
DO NOT COPY any of the following references, they are meant to be inspiration only.

• Asana & GMail: we like the simplistic approach of these products. Very clean UI, straightforward actions (important ones).

Target Audience
People interested in buying a home.

Judging Criteria

• How intuitive is the user journey?
• Does it move the user as quickly as possible through the application?
• Are mobile-first principles properly applied to your solution?
• Cleanliness of your graphics and design (clean and minimalist).
• Reusability of material components.
• Clearly defined question and answer types.
• Section templates that can be used for every section (header, subtext).

Final Deliverables

• All original source files.
• Files should be created in Adobe Photoshop, Adobe XD or Sketch.
• Numbered/Ordered JPG screen files.
• Marvel Prototype
  • We need you to upload your screens to Marvel App.
  • Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30093586
  • Do not use the forums to request for MarvelApp.
  •  Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
  • You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).

Stock Artwork (Illustrations, Icons, Photography)

• Stock artwork is allowed for this challenge.
• Make sure to declare all your assets properly or you might fail screening.
• You don’t want to fail screening? Read this.