Nav.it - Discovery Function Design

About
Nav.it is an early-stage startup on a mission to help everyone build a future of health and wealth. The technology transforms their customers' lives, inviting them to work towards successful money management and connecting their emotions with their spending habits.

My Role
As a UX designer, I designed the 'Discovery' feature for Nav.it, which optimizes users' financial journeys. While aligning with Nav's financial and gamification attributes, the feature delivers personalized financial knowledge and maximizes engagement with discovery content, ultimately enhancing the user experience.
Team
1 Design Manager
2 UX Designers
1 UI Designers
Duration
5 weeks
‍
Client
Nav.it
‍
‍
‍

Design Prompt

Design the Nav.it Discovery feature which can optimize the users financial journey with Nav.it.
Using a gamification design solution for maximizing discovery content engagement.

Competitive Analysis

To create a better understanding of the products and the market, we have conducted a competitive analysis of over ten financial products currently available in the market. Following our research, we have identified several issues that need to be addressed

·Lack of educational content: Many of these financial products do not provide sufficient articles aimed at popularizing financial knowledge and making it accessible to a wider audience.
·Poor reading experience: The user experience while consuming content on these platforms leaves much to be desired, with suboptimal design, layout, and readability.
·Limited incorporation of gamification features: We have observed that only a few products in the market have integrated gamification elements, which can make learning about finance more engaging and enjoyable for users.

User Data Reanalysis

As Nav.it has already been launched, we aimed to expedite the process and obtain precise user insights by contacting the design lead of Nav.it for their user research data. Nav.it generously shared their comprehensive user research data with us, which we meticulously examined and performed a thorough secondary analysis on. This enabled us to gain a deeper understanding of the users' pain points and requirements.

After analyzing the data, I've identified the following key financial pain points among young people in the United States:
·Emergency savings: Many young Americans lack an emergency fund, a crucial safety net for unexpected expenses like medical emergencies, job loss, or urgent car repairs. Without this financial cushion, they may rely more on credit cards or loans, leading to increased debt and financial instability.
·Student loan debt: A significant number of young Americans graduate with student loan debt, which can be overwhelming and take years to pay off.
·Limited savings: Many young people, especially recent graduates, have not yet established a habit of saving, resulting in minimal savings or emergency funds.
·Financial literacy: Young Americans often lack fundamental financial knowledge, leading to poor financial decision-making and management.
·Credit card debt: It is not uncommon for young people to accumulate credit card debt, especially when they lack a solid understanding of interest rates and responsible credit use
‍

How might we leverage discoverable content to motivate users to take action toward financial management?

Brainstorm

In light of our earlier research and competitive analysis, our team conducted brainstorming sessions to discuss and optimize product features and visual design.

Subsequently, I meticulously categorized and summarized these findings for a more comprehensive understanding.

Design Principles

Our team co-created four design principles to serve as the core values to design discover function.

Information Architecture

The primary function of Discovery

To motivate young people by encouraging them to read economic and financial-related fundamental knowledge, thus fostering a basic understanding of personal finance management.

Happy Path

Emergency fund

In the subsequent design phase, I chose the emergency fund as an example. I identified and detailed the Happy Path, outlining the optimal user journey through the various steps of interaction with the product.

Test & Iteration

During the testing phase, I initiated a stakeholder test to evaluate the product's entire workflow. I then collaborated with Nav.it's product leader to identify areas needing adjustments and refinements. Following this, I carried out a usability test, utilizing user feedback to iterate and improve both the visual and logical aspects of the product.

Part 1: Stakeholders Review

Test Result Summary

‍Reordered the quiz page:
In the original version, the quiz function was designed to save users' time by providing customized reading based on their answers. After the stakeholder review, it was suggested to move the quiz section to the end of the reading page and turn it into a test of users' comprehension of emergency fund-related knowledge, which encourages users to take saving actions.
Divided the guideline into WHAT, WHY, and HOW sections:
Instead of organizing the guideline by article chapters, the iteration divided the guideline into three parts: WHAT, WHY, and HOW. This change helps to better classify the content and improve the reading experience.
Added a reward mechanism after the quiz:
For every correct answer, users will receive positive feedback in order to motivate them.
Limited the length and sources of quiz questions:
Each part of WHAT, WHY, and HOW will have one question with a limited number of characters.

Part2: Usability test

Test goal

●How clear is users' understanding of the Discovery features and what discovery represents?
●In what stages of the experience do users encounter issues and sources of confusion?
●How does the user eventually get to take action of auto-savings?

Iteration

Reading Guideline

Problem 1: complexity about swipe flow & missing article information

●Replace gradient background with more informative illustrations
●Provides a quick introduction to the article

Before
After

Reading Page

Problem 2: Expecting better reading experience& two buttons lack priority

●Offer an increased number of tags related to the article content
●Provide additional explanations for key information
●Implement a page design better suited for longer articles.

Before
After

Quiz Page

Problem 3: Low flexibility and lack of fun make users lack passion to complete quiz

●Revise question and answer formats to enable faster user responses
●Implement a switch to view all quizzes at once
●Offer prompt rewards to encourage user engagement.

Before
After

Achievement

Problem 5: The achievement information and emotion are not obvious

●Incorporate clear point-based rewards to motivate users to complete quizzes
●Streamline text and create a more focused information layout

Before
After

Final Concept

Recommend the emergency fund

●Design the Discovery feature after users finish their daily check-in, delivering personalized financial article recommendations tailored to their individual needs.
●Employ a collection of  illustrations crafted by UI desiger to enhance the overall visual appeal.
●Guide users through clear, step-by-step instructions for discovery function experience.
●Capture and maintain user attention by emphasizing game mechanics.

Read the guideline

●Offer users a reading guideline, allowing them to swiftly grasp the overall content of an article by swiping left or right.
●Divide articles into distinct chapters, enabling users to efficiently decide where to begin reading based on their financial knowledge, ultimately maximizing time savings.

Read the article

●Utilize tags to indicate article length in advance, aiding users in better time management. Combine text and visuals to enhance reading engagement and enjoyment.
●Highlight key points within articles to emphasize crucial content.
●Incorporate a direct entry point to set up an emergency fund, increasing the likelihood of users taking action.

Complete Quiz

●Generate three questions based on article content to deepen users' understanding and retention of essential knowledge points.
●Strengthen reward mechanisms to motivate users to complete quizzes.
●Enable users to quickly navigate back to the specific chapter and location within the article that corresponds to each question.

Earn rewards

●Employ a game-like reward system with virtual props to motivate users to complete quizzes.
●Emphasize empowering users to take action and apply their newly acquired knowledge.

Design Guidelines

I have added some new colors and content to the design guideline, which has now been updated in the Nav team's Design Guideline.

Measure  Success

Takeaways & Next step

Takeaways

Multiple iterations and critiques help us explore the right direction.
Sometimes we can't predict how users will experience our journey, but the test will tell us the answer.
The first industry UX design project in the US.
Learn cooperation from different UXD.
Learn to apply different UX tools to broad sceneries.

Next step

Get feedback from users based on their situation.
Customized reading content for different users.
Explore more rewarding ways to increase engagement in the quiz process.
Update features according to the user's feedback.

Don't be a stranger! Feel free to drop me a line via email.
© 2023 Kexin Zhang. All rights reserved