Novus

A mobile-first responsive web application that fosters a community of money-smart individuals by connecting young professionals with highly qualified financial advisors through video chat and direct messaging.

novus blue splash screen.png

Role

UX Research & UI Design

CareerFoundry Course Project

Approach

Design Thinking

Tools

Adobe XD

Balsamiq

Google Forms

Optimal Sort

Usability Hub

defining goals

The Problem

Individuals need a way to connect with a financial expert so they can accomplish their financial goals with ease and feel confident in their overall financial well-being.

money helpers.png

Only 26% of individuals feel confident in their financial wellness.

Finance wellness.png

I conducted a survey using Google Forms and asked participants if they felt confident in their financial wellness. I found out that people would feel more confident facing important financial decisions with the support of a financial expert.

Finance Learning.png

80% of individuals like to learn about finances by reading blog articles.

Individuals like to learn about finances by reading blogs (80%), talking with peers (73.3%), talking to parents (26.7%), reading books (20%) and other ways (26.7%).

understanding users

Surveys & Interviews

The first step to building Novus was to get a better understanding of the needs and goals of users. I conducted qualitative and quantitative research in the form of surveys and interviews. I used Google Forms for the survey and met with people from my target audience via Zoom for interviews.

I wrote out three research goals before scripting my interviews and survey in order to pinpoint the needs of users. My goals were to get a better understanding of people’s attitudes towards finances; to find out how, and if, people currently receive financial assistance; and to determine which financial topic(s) people want to learn about I wanted to decide whether or not to include a variety of topics or focus on one topic.

Research Analysis
Research-Analytics-for-Portfolio.gif

designing with empathy

User Persona

To build empathy while creating my app I used the information from my initial research to sketch out a persona for Novus. I referred to my affinity map to outline needs, goals, motivations and frustrations of users. I created Samantha, to give a realistic view of users.

Samantha.jpg

32 years old

Recently engaged

Resides in Austin, TX

Works as a Marketing Specialist

"I want to make wise financial decisions as my fiancé and I combine our finances and plan for a family. I would feel more at ease to meet with a finance expert."

Meet Samantha

Goals & Needs

• The ability to quickly browse through expert qualifications before scheduling a call.

• An easy way to schedule appointments with experts to keep organized.

Motivations

• Regularly reads finance blogs that have peaked her interest in learning more about finance

• Samantha needs to budget for upcoming wedding and family planning

Frustrations

• Poor quality video-calls interfere with good communication.

• Finds Amex app user friendly and great for monitoring accounts, but wants an app with more tools.

Everyday Activities

• Samantha works 9-5 each weekday

• Samantha leads group fitness classes twice a week

• Samantha is very active on social media and posts weekly

• Samantha studies finance by watching YouTube videos and reading finance blogs

Device  Usage

Desktop Devices

Mobile Devices

Social Media

C9736B72-365C-47D4-A473-4C6DCCAEBA9A_4_5
A62C5297-F743-48FA-BC35-0AACD3A82458_4_5
B5179841-E291-4080-80C1-6B6515E0E42D_4_5
F1CEFA90-DCB6-479F-99B8-F730D2DC7A34_4_5
2388C468-536F-4C43-93E3-9FE87B9F184B_4_5
User Journey Map

Creating a user journey map helped me to visualize Samantha navigating through Novus. It helped me flesh out user flows and also helped guide me in deciding which features to include.

Samantha.jpg

Demographics

• Samantha, 32

• Marketing Specialist

• Austin, TX

Scenario

Samantha wants to use Novus to quickly browse experts and view their qualifications. She wants to browse and book a call in one session.

Choose a topic

Browse experts

Book a call

Wait

• Make a list of finance topics

• Decide which topic to learn more about

"What is the most important topic for me to focus on right now?"

• Open app

• Read expert profiles

"I hope I can find someone that has experience assisting people with my specific goal."

• View expert availability calendar

• View drop down of available times

"I hope this expert is available at a time that is convenient."

• View call confirmation screen

• Close app

"I should set myself a reminder so I am prepared for this call."

User Journey

• Allow users to select topics during onboarding

• Match users with qualified experts based on selected topics

• Provide a small list of 3-5 experts for users to browse

• Offer a calendar for easy scheduling

• Give user the option to receive push notifications as a reminder for upcoming calls

organizing content

Refining the Sitemap

Once I had a better understanding of my users, I was ready to map out the layout of my app. I iterated my sitemap twice with the help of Optimal Sort. I recruited participants to complete an open card sort and analyzed the results using the Similarity Matrix and Dendogram. I focused on the organization of My Profile and My Settings. I added FAQ, Tech Support, Notifications and Feedback.

Similarity Matrix
similarity matrix.png
Dendogram
Dendogram.png
Sitemap
sitemap.png

sketching solutions

Rapid Prototyping

Once I had an understanding of user needs and organized the information architecture of my app, I began sketching out wireframes of the app's main features using Balsamiq. I made sure to refer back to the business goals and used my user persona and user journey to keep my app aligned to user goals.  I used rapid prototyping method to sketch out my ideas. 

Paper Sketches
A44E86FE-8411-4C4E-A066-E77C3308C7F1_1_2
6F36A252-6044-4976-B643-46264D4B5CB9_1_2
08C0E43D-B8F4-4335-B51F-FBAE472511C9_1_2
Mid-Fidelity Wireframes
MID-FIDELITY SKETCHES@2x.png
SKETCHES 2@2x.png

usability testing

Moderated Usability Testing

My design has gone through multiple iterations. The first round of iterations were based on usability testing with 8 participants. Test sessions were 10-20 minutes long and were a combination of moderated remote and moderated in-person testing. The goal of this study is to assess the learnability and satisfaction for first time users. Users were be observed on their ability to complete basic initial functions such as logging in and scheduling appointments.

participants.png
Rainbow.png
Design Network as Stakeholders

In addition to usability testing, I reached out to my network of experienced designers. Since I am working solo on this project I viewed my network as stakeholders and made adjustments based on their feedback. I was sure to design screens that aligned with WCAG, Gestalt psychology and visual design principles.

5.jpg
4.jpg
3.jpg
Evolution of the Calendar

Of all of my app screens, the appointment scheduling page experienced the most changes throughout usability testing. I made sure the time selection dropdown was the full width of the calendar and included a legend so users know the meaning of the colors within the calendar.

1.jpg
2.jpg
calendar sketch.jpg

reflection & future planning

I most enjoy the iterative phase of the design thinking process. It is very satisfying to see the design come to life in the form of wireframes.  I enjoy engaging in the user's vision when the design is put to test during usability testing. 

The greatest lesson I have learned is that perfection is not the initial goal. The design will evolve over time and adjustments will be made more than once. I am very open to feedback and I make sure to keep the business goals as well as user goals in mind throughout the entire process.

One thing I would do differently during this project is to use the survey as a way to recruit testers. I sent out the survey around the same time I scheduled interviews. Next time I will make sure to include a questions that invites survey participants to discuss their responses in more detail during interviews.

Most users were very satisfied with the simple design and easy navigation through Novus. Feel free to click to the final prototype linked below.

"The interface is very clean & designed with simplicity."

"This design makes a serious topic feel friendly & professional!"

money man.png

View Clickable Prototype >

Functional Features:

• Onboarding

• Sign Up

• Call Scheduling

novus blue splash screen.png