MEDDLE

SERVICE
ROLE
TOOLS
PROJECT DURATION

app Onboarding Redesign, ios (INTERNSHIP)
Interaction Designer
Sketch, InVision, Pen & Paper
2.5 Weeks | dec 2017

Overview

Meddle is a dating app that offers an innovative approach to matchmaking. Finding someone you click with can feel like a full-time job, and you don't always have time for that. Meddle allows users to invite their most trusted friends and family members to be their Meddlers.

THE PROBLEM

My team was tasked with looking into Meddle's onboarding flow from the perspective of a single user, as they are seeing a drop-off. The onboarding process includes a number of requests that discourage new users from full completion, with the success rate of completed profiles being at only 41%.

the solution

Redesign Meddle's onboarding experience to be fun, engaging, and concise, in order to raise the success rate of completed profiles from 41% to at least 75%.

discovery

As the Interaction Designer on this project, my first move was to immerse myself in Meddle's current onboarding process. I studied the original onboarding flow inside-and-out, taking note of my own pain-points while moving through the process.

the original onboarding desigN

research KEY FINDINGS

During the discovery phase, I also worked very closely with Ian Keeber, my team's Researcher, studying his findings from competitive analysis as well as observing usability tests on the original app. Ian discovered that there were three major causes of user drop-off.

• Too many steps/information requests

• Confusing layout design

• Zero visibility on the app tutorial

At this stage, I also studied Nielsen’s usability heuristics to see how I could apply some of the principles to my onboarding redesign. Overall, I found that the following principles applied directly to optimizing the onboarding process:

• Flexibility and ease of use. During onboarding, we want advanced users to be able to move more quickly, while still giving enough guidance to inexperienced users.

• Aesthetic and minimalist design. Users don’t like to be overwhelmed by multiple requests in a single screen. Dialogues should not contain information which is irrelevant or rarely needed.

• Visibility of a system status. The user should have a clear understanding of what is going on at all times through appropriate feedback within reasonable time.

Determining the user

Towards the end of the discovery phase, our Researcher developed two personas that I then used as a tool through the rest of my design journey. 

Sophie is a 33 year old busy professional. She has a tendency to date the worst people who don’t treat her well. She wants to meet someone, but feels quite jaded about dating, and has felt frustrated by the constant barrage of low-effort guys on dating apps in the past.

Sketching & ideating

Using my team's key findings from research, with Neilsen's usability heuristics as my guide, I now had three defined goals for my new onboarding design:

1. reduce the number of steps & required information

2. minimize layout confusion

3. make the app easy to learn

With this in mind, I began sketching. Below are my early concepts.

wireframING

After receiving feedback from both my team and the client on my initial sketches, I quickly digitized them to create an MVP. In order to create a sense of order in my new design, I split the new onboarding flow into three movements: the sign-up portion, the app tutorial portion, and then ending with the profile setup portion.

sign-up (mvp)

This is the portion of the onboarding flow that more-or-less stayed the same as the original app, as it had minimal issues with users. The only updates I made were (1) the presentation of the branding elements and (2) separating the tutorial to give it it's own section (more on this later). All other functions stayed the same. As it is the industry standard, a user would sign-up to Meddle using their Facebook accounts.

tutorial (mvp)

Since Meddle has more functions than your average dating app, many questions regarding how the app actually worked came up during my team's usability testing on the original design. In the app's original onboarding flow, the tutorial was hidden, embedded in a carousel within the first page of the sign-up process. From observing usability tests that our Researcher conducted on the original design, I noticed that every single user didn't notice the tutorial/carousel of instructions on this page. This led to my decision to insert the tutorial as the second movement in the new onboarding experience. As you can see below, I also added a skip button on each page within the tutorial, giving more advanced users the ability to move quickly, while still giving enough guidance to inexperienced users. I also wanted to take this tutorial to showcase some branding elements to help pull the user in.

PROFILE SETUP (MVP)

Through usability testing, our Researcher quickly found that the profile setup portion of the onboarding flow caused the most confusion and drop-off in users. In the original design, multiple info requests are crammed into one page, and users were missing requests that were below the fold. This caused a lot of confusion, and I wanted to find a way to minimize this. In my new design, I simplified and kept it to one info request per screen, eliminating the scroll altogether. I also proposed to eliminate the survey like questions in the original flow, as our Researcher found that other popular dating apps were not requiring this type of information. Last, I added a progress bar in this movement in order to give the user visibility on how many more steps they have to go until profile completion.

testing & iterating

USABILITY TESTING

Using my new MVP, our Researcher conducted a round of usability tests with 8 users. I also assisted, running a usability test myself (see the photo on the right). With my updated design, confusion dropped significantly, as users were able to move through the onboarding process with minimal issues.

iterations

The one glaring piece of feedback we received from usability testing was that additional simplifying was needed. Users were still feeling that the flow was a little long and drawn out. In order to cut the number of steps, I removed the "photos" step, as a user's profile photo is already automatically scraped from Facebook integration. Another way I simplified was to combine the location and preference requests into a single screen. We had a lot of users asking why the map in the location screen was necessary, so we looked into it. Upon further research, my team realized that we didn't need the map there, as the app already requests a user's location. Another minor iteration that was made was was to allow users to skip the tutorial before actually starting it. My design solution was to simply add a ‘skip tutorial’ button to the first page of the tutorial screens.

final design / prototype

reflections

Through this onboarding redesign, I learned the value of participating in research as an Interaction Designer. It's one thing to just have your Researcher synthesize his own data/findings then hand it over to you, but if you as the Interaction Designer are able to observe or even participate, the knowledge you glean from doing so is absolutely invaluable. In Meddle's case, observing and even conducting my own Usability Tests was key in helping dictate my new design. From observing a user directly, I was really able to derive their pain and pleasure moments and, from there, find out how to minimize or enhance them.

Next Steps

With the onboarding portion complete, my next steps as the Interaction Designer for Meddle would include:

• More usability testing

• developing the onboarding flow for meddlers

• redesigning the swiping and messaging functionality