Mobile & Web Design - Learnberry
Designing the mobile app and progressive web app experience of the learning roadmap to financial literacy.
Role
Team
Responsibilities
Tools
Recognition
UX Designer
Matthew, Madatya, Thienkim, Wyleen
Competitive Research, User Interviews, Usability Testing, Wireframes, Sitemap, A/B Testing, Paper Sketching
Sketch, Miro, Skype, Gloomaps, Adobe XD, Adobe Illustrator
Semi-finalist of 2020 Sunstone Innovation Challenge
Learnberry is a FinTech startup and they wanted to design a single product that users can learn from and apply their knowledge to their own personal finances.
How do we create a product that would help learning about finances be more applicable to one’s own personal finances?
Competitive Research
We looked at existing competitors to see what drives their users to return to their product.
Banks
Checks personal account(s) and their total balance
Pay credit card balance
Clarity Money
Control budget
Manage expenses by linking bank accounts
Nerdwallet
Understand credit score
Find right credit card
Compare spending of this month to previous month
Mint
Compare monthly spending
Plan a budget
With these insights, along with asking our target audience what they looked for in an app, we began mapping out what features to include.
Wireframe Example
The research insight points at certain important features to include:
the user's bank accounts
the cash balance of all accounts
expenses for the month in specific categories
how much user is spending from the planned budget.
We ran an A/B test to compare versions of the Accounts section. We found that having a list of accounts instead of rotating cards is more intuitive for users.
Information Architecture
Before designing high fidelity wireframes, it was important to establish the essential parts needed for our MVP. Creating a sitemap also helps to see if there were any missing pieces to the user flow for the user to get to the desired goal.
Wireframe Flow & Annotations
For the stakeholders and development team, we wanted them to have a clear understanding of the product’s functionalities.
Usability Testing with MVP
We tested with our target audience to observe the user journey and compared it to the user journey we expected to see.
Our goal was to design something easy to use because our target audience may not be experienced with managing their finances. This usability testing with our MVP is to observe the user journey and compare it to our expectation.
Based on the results, we achieved this goal because:
Users found it clear to use
Users thought it was clean and simple in its basic form
Users didn’t have questions during the testing and were able to complete tasks on their own
These designs were dropped because the company wanted to direct the focus on the educational aspect of the product.
Redesign
Turning to the new focal point of the product, I began designing low-fidelity wireframes with minimal copy following Apple’s iOS guidelines.
We designed wireframes for the web so users entering Learnberry through a browser can be directed to the mobile app. I drafted a flow of the screens to show some of the functionalities.
Final Style Guide
Due to COVID-19 and unprecedented constraints, we have pivoted away from native mobile app design. Current design deliverables are underway for launch. Please stay tuned!
Further information excluded for non-disclosure purposes.