LEAD DESIGNER

Creating an onboarding experience to invest online

APRIL 2023 - MAY 2023
MonMex screen with the 5 steps of the process to open an account
NDA ⚠️
In compliance with the non-disclosure agreement I signed, I have omitted sensitive data and won't be mentioning the client's name. I also have altered the design a little bit so no piece of information is compromised. All information in this case study is my own and does not reflect the views of Icalia Labs nor the client of this product.

MONMEX Onboarding

Overview
MonMex is a brokerage house that has been operating for over three decades. MonMex has an existing app where their clients can track and manage their investments. But people can not create an account and start investing from it. You can only access the app if you are already a client. Otherwise you need to contact an advisor.

I was tasked to create an onboarding experience for people that wish to invest at MonMex. It is basically to digitalize all the processes that are done with an advisor so people can start investing online and do not need to go (physically) see an advisor to start investing.

The design for the onboarding experiences were built in a week during a remote design sprint.
Role
Led the design of this project during the design sprint.
Outcome
Integrated an onboarding experience to an existing app. MonMex liked the work Icalia Labs did so much that they extended the contract.
Collaboration
1 Project Manager
1 Product Designer
Multiple stakeholders
Project Details
Problem
MonMex’s current app does not allow people (who are not currently clients) to create an account and start investing. People have to contact an advisor, fill out a lot of forms and sign a contract manually. This is a competitive disadvantage in this digital era since most of MonMex’s competitors allow people (future clients) to create an account and start investing online without ever having to meet physically with someone.
Goal
Design and integrate an onboarding experience that allows users to create an account and start investing from MonMex’s app, translating some of their in-person procedures to digital. Increase customer acquisition and reduce potential customers dropping off on the process.
Design criteria
STYLE
Since MonMex already has a working app, the onboarding experience needs to go along with the current interface aesthetics and overall branding of the company.
EASE OF FOLLOWING
The onboarding experience requires a series of procedures (by regulations) that could be daunting and hard to follow. The experience has to take out the complexity of these procedures and bring clarity to the user. Ending with a process that is clear and easy to follow.
TRANSPARENCY
Personal information about the user is going to be required for the onboarding experience. It is important to let the user know why that information is required by having the privacy policies and terms and conditions on hand.
DESIGN SPRINT
Kickoff
To kickoff the design sprint, part of Icalia’s team and MonMex’s team had a short meeting to introduce each other. In this meeting it was also explained what is a design sprint, how it works and what would be the deliverable at the end of the sprint, as well as the follow up steps after the sprint.
Day 1 - MAP
Map out the problem and pick an important area to focus.
Ask the experts + “How Might We”
The first activity of day 1 consisted of interviewing experts from MonMex, listening to what they had to say and capture HMWs when hearing something interesting.

The interviews with the experts were one by one, each session was 30 minutes long, and the facilitator (in this case the project manager) led the conversation and conducted most of the questions. There were 4 people capturing the answers of the experts into HMWs, 2 stakeholders from the MonMex team, 1 product designer and me (lead product designer).

These are the HMWs collected from the sessions with the experts:
HMWs captured in sticky notes, ordered by person
Organize HMWs
The second activity of day 1 was to prioritize and organize the HMWs in categories. For this, we took our HMWs and organized them in categories.

After the HMWs were organized, we voted on the ​​opportunities we considered the most important. Each person had 5 votes.

In the following image the categories in which the HMWs were organized can be seen, as well as the top 3 most voted HMWs.
HMWs captured in sticky notes, ordered by person
Goals
The third activity of day 1 included determining what were the short term and long term goals after we finished the design sprint. 

We separated the goals by time, goals in 6 months, 1 year and 5 years. And after that we voted on the one that we considered the most important in each time frame. 

These are the most voted goals:
Goals in 6 months, 1 year and 5 years
Make a map
The last activity of day 1 consisted in combining our ideas into one single flow. For that we took our most voted HMWs and arranged them and complemented them in a flow that made sense.

After having the flow we voted on one target customer and one event that would represent the main focus on the experience.
Map showing the focus area: Fill out KYC
Day 2 - IDEATE
Sketch out competing solutions on paper.
Lighting demos
The first activity of day 2 was to look for great solutions (similar to what we were trying to solve) from a range of companies. Capture good ideas with some screenshots and add any thoughts with sticky notes.

During this activity the team reviewed a wide variety of solutions, not only single screens but full flows from some companies.
Lighting demos solutions
Solution Sketches
The rest of the day we worked on the solution sketches. To get to them we started by getting some sheets of paper and writing down notes about what was on our brain regarding the problem. The notes were personal and were not shared.

Following the notes we did the crazy 8 activity, each person sketched 8 ideas, 1 per minute. This activity was really fun to do with the team because of the time limitation. The crazy 8s results were not shared.

After these two small activities it was time to work on the actual solution sketches. Everybody on the team dedicated 45 min to work on their solution sketches, one solution per sheet of paper, and the concept had to be super clear and self explanatory. The sketches were shared the following day.
Day 3 - DECIDE
Make decisions and turn your ideas into a testable hypothesis.
Art museum + Speed critique
We started day 3 by taking 20 min to look at all the concepts on the solution sketches silently. After the 20 min we created a heatmap by adding dots to the ideas we liked. There was no limit on the number of dots we could use.

Following the heatmap the team discussed standout ideas in a structured way.
Solution sketches heatmap
Divide winners from “maybe-laters.”
It was time to move the sketches with the most votes together and decide if they fitted in a single prototype.

The team decided that the sketches fitted together and moved on adding more sketches to build a more complete prototype draft.
Most voted solution sketches
Use a TASK to plan your prototype
The third activity of day 3 was to plan the prototype by creating a task flow. We started by defining the goals, then deciding the opening scene for that goal and at the end deciding the steps needed to get to the goal.
Tasks prototype
Fill out the storyboard
The last activity of day 3 consisted in using the task flow and the solution sketches to complete our storyboard and be ready to create the prototype.

To start we took the flow step by step and separated them. Then we took the solution sketches and paired them with the step they fitted the best. We also added some additional steps.
Storyboard: task flow + solution sketches
Day 4 - PROTOTYPE
Hack together a realistic prototype.
Prototype
As a designer, day 4 was the day to shine. Me and the other designer focus the whole day on designing the screens required for the flow and connecting them to build the prototype.

Me and the other designer working on this project kicked-off the prototyping day with a short meeting to align our ideas, decide how we were going to proceed and divide the work.

We started by defining our UI kit (colors, fonts, logos, buttons, navigation bar, etc.) on Figma so we could work faster and our design would match. After that we went on our own way to work on the screens assigned to each of us.

Communication was key during this process. Each of us was mostly on our own but if we had questions we were always available for each other on slack and if it was necessary we jumped on quick calls.

After all day working on the screens assigned we had a meeting to pair-prototype all the screens and see if anything was missing.

We ended up with a prototype consisting of +40 screens that showcased the main flow perfectly.
Day 5 - TEST
Get feedback from real live users.
User testing
During the first part of day 5 the team met to prepare a guide for the user testing interviews. The facilitator was the one leading the user interviews and the designers participated as note takers, to hear feedback on the prototype first hand and also to troubleshoot if it was necessary.

We interviewed 5 people, all of them were current MonMex clients. The user testing consisted of giving them tasks and asking them to think out loud while performing the tasks. At the end we asked for additional feedback or any concerns.
User feedback
We collected the user feedback and ordered it by screen.
User feedback
SPRINT END
The following Monday the team had a meeting to present the results of the design sprint and to discuss the following steps.

During that following week me and the other designer worked on refinements to the prototype implementing the feedback from the user testing. At the same time the facilitator worked with project managers and developers on the user story mapping.

At the end of that week we presented the final prototype.
Final design
MONMEX SCREENSMONMEX SCREENSMONMEX SCREENS
Takeaways
Next steps
These are the future steps for MonMex:
  • Implementation
    Since the onboarding experience is fully designed by now, it is time to start planning the implementation of this flow into the existing app. The team had already started planning this by creating the user story mapping and bringing engineers to the conversation to start giving estimates and plan on the implementation
  • Test
    We got a lot of valuable feedback from the user testing during the design sprint, it would be suitable to conduct another round of user testing before development to test how these improvements made an impact on the user experience and also to gather more feedback and keep iterating on the product.
  • Update the design
    Given that there was an existing MonMex app designed before implementing the onboarding process, its design needs to be updated to match the design of the onboarding process. Even though the onboarding design matches the colors and branding of the existing app, it looks a lot more modern, clean and friendly.
What I learnedBeing part of a design sprint was a demanding, challenging and exciting experience. I learned a lot from the process and from the team. These are the highlights of my learning while designing MonMex:
  • Communication is key
    This project started having a miscommunication problem between the sales team and the client which left the client pretty annoyed after the first day of the sprint. After that we had to regroup and communicate with the client and explain the process better which left them more calm. Communication is very important at the moment of dealing with people who might not be very technical. And it is also important to have the openness for people to express their concerns even more in a remote setting. Communication was key during the whole sprint to keep the engagement of the team and also to work collaboratively to achieve a great prototype.
  • Anyone can contribute
    The people on the team came from different backgrounds and from different departments. Everyone’s opinion and point of view was essential to get the result we got. Listening to what everyone had to say gave me a wider perspective on what we were trying to achieve, and ultimately helped me achieve it.
  • The project defines the process
    The project will always define the process. No project has the same necessities nor starts at the same point another project does. It is ideal to have the process and methodology defined but keeping in mind that you probably will not always follow it 100%. The process will adapt to the necessities of the project.
  • Simplify complexity
    There are flows that can be really extensive, complex and confusing for the user. Our work as user experience designers is always to try to bring clarity to complexity. There are many ways we can achieve that and should always be looking for making the experience effortless and seamless.
  • User flows help untangle things
    Design sprints are an intensive process that require close attention during the whole duration of the sprint. And as a designer I had a whole day just to work on design things (screens and prototype). There exists certain pressure since the deliverable from the sprint is mostly the working prototype. You have to be willing to give your all in a process like this and the results are pretty rewarding.