ForOurLastNames
Mobile Onboarding
Designing a web application’s onboarding process mobile-first and improving the overall user experience.
Client
ForOurLastNames
Role
UI/UX Designer
Duration
3 months
DIsclaimer
This project is under NDA; therefore, you may notice that certain information is withheld or images are blurred from this case study. I'd love to share more about this project in a portfolio review!
Context
One summer, I had the opportunity to join a fintech startup, ForOurLastNames (FOLN), as a UI/UX design intern. For the 3 months that I was there, I was tasked with designing the onboarding process for their existing fintech product.
Under the same name, ForOurLastNames, the product, is a web application that offers gamified financial education to new generation wealth-builders, such as college students and/or beginning entrepreneurs. Being only available as a website, I helped design a conceptual mobile version of the app.
My project pertained to creating mobile screens for the user's onboarding flow and improving the overall experience of joining the app for the first time.
Understand the existing design
Before beginning the design process, I thought it would be best to familiarize myself with the current onboarding by signing up for the application and becoming a new user.
I observed that ForOurLastNames (FOLN) asks new users to create an account, subscribe to one of two paid plans, fill out three different sections pertaining to their personal information, their current income/education status, and their financial goals and interests, and receive an Financial Freedom Pathway * that’ll help them achieve their goals.
* Financial Freedom Pathway
FOLN’s educational course of modules surrounding a financial topic or goal, such as managing student loans
or investing.
Sign up
Subscribe to a plan
Three sections of questions
Receive prescribed FFPW*
Introductory screens of app
Dashboard
Subscribe to a plan
Three sections of questions
.jpg)
.jpg)
.jpg)
Receive prescribed FFPW*
.jpg)
Introductory screens of app
What could be improved?
From what I experienced, the onboarding flow was definitely straightforward and simple to understand. However, there were areas that could be improved on, especially since the process had to be designed for mobile devices.
Issues
Some questions were confusing or not clear enough
Navigating through sections was not apparent nor user friendly
Design was visually lacking
The process is lengthy and similar to filling out a form
Solutions
Reword questions and answer options for better clarity
Make the design more intuitive
Add visual elements for a friendlier design
Restructure and reduce the process to be less form-filling
Learn best onboarding practices
To enhance my design ideas and guide my process in creating a new onboarding experience, I researched best practices through various articles and blogs. This led me to discover several mobile apps that utilized effective onboarding flows. To fully understand their design decisions, I took a step further and explored them firsthand as a new user.
I learned that good onboarding...
I found that most mobile apps will...
-
Reintroduces the benefit the app brings
-
Keeps registration simple
-
Personalizes and makes the onboarding interactive
-
Introduces functionality through walk-throughs
-
Rewards completion to encourage habits
-
Break down questions into separate screens
-
Reintroduce benefits of the app
-
Walk them through features with rewards to encourage habit-forming
One question at a time
(Monarch Money)
Reintroduce benefits
(Zogo)
Habit-forming activities
(Duolingo)
Sketching + Wireframing
Considering everything that I had learned, I started sketching some initial concepts of the onboarding, as well as conveying those ideas through low-fidelity wireframes.
I had hoped to improve the onboarding experience by...
-
Letting the user know in advance what to expect from the experience and giving them explanations for why we’re collecting their data
-
Transforming fill in the blanks into direct questions to the user
-
Adding tooltips to explain financial terms they may not be familiar with
-
Including a walkthrough tutorial for the user’s first module
​
Alongside these sketches and wireframes, I made a tentative user flow diagram to explain the journey.
Sketches
Wireframes
Proposed User Flow
Usability Testing
After reviewing these deliverables with my design team and supervisors, I updated them according to their feedback and suggestions and applied FOLN’s style guidelines to prepare them for usability testing.
From the 3 usability tests that I conducted with college students, I received both positive and negative feedback. The positives were that it was very easy to understand and navigate, it was very hand-holding and not intimidating. While on the other hand, there were issues ranging from small design suggestions like the font is too small to bigger concerns like the redundancy or lack of clarity for certain questions in the onboarding. Since receiving both this and peer feedback, I had been iterating to address these issues.
“The introductory pages are nice; it helps me know what to expect for each section”
- Tester #1
“It doesn’t make it seem intimidating or anything.” - Tester #1
“It’s pretty straightforward. I’m guided really well and not really confused about any of these processes.” - Tester #2
“Some fonts were a little small to read”
- Tester #2
“I’m not really what ‘broad swings’ in this question means..” - Tester #2
“Some of the questions sound similar to each other…” - Tester #3
Prototype
Reflecting the feedback given, I made the necessary changes to the mockups and continued to further iterate as I reviewed and maintained communication with my supervisor. In regards to future steps, there is definitely room for more testing and iterations to consider.
Key improvements
My objective for this project was to design ForOurLastNames’s onboarding for its mobile platform, but also to improve the overall experience for new users. While it may appear that the mobile onboarding is similar to its website counterpart, there are major improvements due to changes in the product’s design. The intended outcome is to provide an increased understanding of the onboarding process and what it’s asking for, ease in progressing, and enhanced appeal for the app’s learning activity.
Increased user understanding
I improved users’ understanding of the process by adding title pages. This lets the user know what to expect in advance and why the following data would be helpful to improving their experience with the app.
Every ask for data is reworded into more clarified and direct questions to the user, and answer choices are made to be simpler, familiar, and more flexible to their preferences ; thus, preventing confusion with what the onboarding is asking the user for.
“Is Educational Attainment as in what I have already attained or what I am currently attaining?” - fellow intern
.jpg)
Clarified!
“Not sure what some of the terms mean such as “Net worth” and “Liquid”, would be helpful to have an information icon & pop-up to clarify what these terms exactly mean” - fellow intern
.jpg)
.png)
Informative tooltip
Ability to opt out
Easier to manage
I’ve made onboarding easier to manage by breaking down sections into individual direct questions. This will make the process more approachable and interactive to the user.
Goals Section
.jpg)
.jpg)
Enhance appeal and encourage engagement
Incorporating visuals to Financial Freedom Pathways makes each course more memorable and get users excited to learn.
To jumpstart their engagement, I designed a first module activity and a tutorial. Walking them through their first module reduces confusion when trying the feature for the first time and it encourages them to continue learning, especially when xp points are awarded upon completion.
Lessons Learned
I learned a lot from this internship project, but mainly these three things:
1. Study and research
It’s best to do research on the product you’re trying to design and to really learn what the standards or best practices are. Don’t assume that you know what something should look like. In this case, it was the standard onboarding flow that I had to learn.
2. Make user-centered Design
Consider every use case when you’re designing so that potential users are able to test multiple routes and help prevent oversight early in the design phase.
3. Ask for feedback
Consistently asking for feedback allows you to continue improving your designs, and it keeps you and the stakeholders on the same page throughout the process.
As I evolve in my career, I will continue to keep these ideas in mind and build on them.