team of 4
Create a mobile app that connects to a website where checking, savings, and credit cards are located with the app.
Create a solution for adults in their 20s who have completed post-secondary education in the last 3-5 years and are in debt.
After we received a brief from our client, we began to do research about the problem space.
average amount of student loan debt in North America
average amount of debt owed by Millennials on credit cards
of Millennials that view financial success as not having any debt
Discover + Research
define the problem
• Must prioritize signing up over signing in
• Must be easily linked to banks website where checking, savings and credit cards reside.
• WCAG standards
• UI style guide
• Native app
Interaction and UI/UX Design
How might we help young professionals prepare for large expenses, so that they can manage their debt?
Ideate + Prototype
• Finesse the UI
• Another round or two of user testing
• Work with the software engineer team to begin the building process
Build + Deploy, Measure + Learn
Financials were stressful during major unexpected purchases
Very few used financial planning apps
trusted friends and family more than banks
are not as motivated to save for major life milestones
Holding funds for emergency expenses
Forecasting future financial expenses
Setting. goals given income and expenses
After doing user stories, we decided to focus on predicting as our primary theme. It gives the bank a competitive edge over other financial planning apps, AND it help Kelly prepare for the expenses that come with being a young adult.
Synthesis From Sketches
We decided to use a chatbot to build trust with the user, since we found that young professionals are less likely to trust banks. A chatbot implies the user is chatting with their friend.
We included a savings goal to encourage planning, since we found that young professionals weren’t thinking about long-term expenses.
We also included a visual map to make the future more tangible and immediate, because young professionals were often surprised by major expenses.
For this project, our team had to design the product by using the banks brand guideline. The design solution reflect the primary brand colors and using Avenir as a primary font.
We also followed WCAG, Web content accessibility guidelines, and meet AA+ compliance in our product.
As a lead designer of the team, I designed a wireframe of the product by applying the inspiration from our sketches and elements to display the required page that follows the user flow. We used this mid-fi wireframe to run user testing.
With our wireframe we did one round of testing with 6 users.
Below are our changes that we made from prototype 1 -> prototype 2
the team interviewed 7 people to gain primary research