Mortgage 101 — User flow

The Experiment

The purpose of this experiment is to help first-time learn and search for the mortgage journey through simple interaction and animation. As shown in the user flow, the whole journey is created for three distinct scenarios: first-time homebuyers, refinancers, and equity loan seekers. The following prototype will give a detailed look in the first-time homebuyers scenario.

1. User selects “first-time homebuyers” on navigation menu

1. Navigation Screen

People are searching at the exact moment they need something and are looking for places that can meet their immediate need. — Lisa Gevelber, Google

Navigation allows the user to make selections based on their particular micro-moment. The navigation menu provides an instant solution that tailors to their present context. In this situation, the use is probably a first-time homebuyer who wants to learn about mortgage.

2. After reading short intro, user starts the journey

2. Subject introduction

After reading a short introduction of the chapter, user clicks the arrow to continue the specific learning journey.

3. User looks into what they are interested in and swipes to the next knowledge point.

3. Sub-page topics

The sub-page of each “micro-moment” covers a variety of topics. The user clicks into the topics they are interested in. The visual form was greatly inspired by kids flashcards games.

We are all just more experienced children. — Tom Greever

For many of us, learning with plain text is always boring. I looked into ways that help kids memorize and found that kids learn more quickly with fun and engaging games such as flashcards. Rather than forcing the user to learn, a flash card empowers them to make choices based on their preference and interests.

4. User is also able to look at other topics by selecting the navigation menu.

The  Process

  1. Based on the user flow, I created eight core screens in Sketch and write notes about potential animation and interactions on each page. This way I can focus on the technical side of Principle and eliminate worry about overall consistency across screens.
1. Sketch interface design + Overall Interaction Notes before importing to Principle

2. I spent quite a bit of time in Principle to make sure the transitions are smooth and the animations make sense. Because I can refer back to sketch notes regarding what motion I want from each screen, I can quickly learn the techniques on Youtube and make my own faster.

2. Crafting motion and interactions in Principle

Source link—-819cc2aaeee0—4


Please enter your comment!
Please enter your name here