UX DESIGN PORTFOLIO
Luka Price
CASE STUDY
APP ONBOARDING FLOW
THE TASK
As part of my Product Designer course at Uxcel, I was challenged to design an onboarding flow for a dating app, Happn. Happn is a dating app that shows people who have been present in the same location with you at some point in time.
There are multiple dating apps out there (e.g. Hinge, Tinder, Bumble) and with competition to attract single users to sign up, it’s important to make Happn’s USP stand out early on in the app to attract new users. It’s also important that the onboarding journey is easy to use to avoid users dropping off during sign up.
SKILLS/TOOLS
-
JustInMind
-
Figma
-
Figjam
-
User flow mapping
-
Wireframing
-
Prototyping
PROCESS
-
Research Happn, what the app is about, their branding and their competitors.
-
Create a user journey map.
-
Create low fidelity wireframes in JustInMind
-
Create high fidelity wireframes in Figma
-
Prototype these wireframes
-
Review, make necessary adjustments
USER FLOW MAP
The user journey mapped out of details required to sign up to Happn.
With so many fields to fill in to be able to make a profile on the app, it’s important that the step to input this is easy to use and not overwhelming for a user.
WIREFRAMES
Communicating the USP at the start
When the user first uses the app, they see a sliding carousel explaining the benefits of signing up simply with a sentence and attractive imagery. And the on-brand yellow lines to animate as the carousel scrolls to show continuity in the app experience.
When the user clicks 'Sign Up', they are then taken to this screen.
Since the location permission is pivotal to the app’s USP and core functionality, it made sense for this to be the first step in the onboarding flow.
I added imagery behind the screen to help users dream about what dates they can have if they enable location permission.
Easy onboarding flow
After location sharing, the sign up journey is split into 3 stages:
1. Information needed to own a Happn account, with Apple and Google sign in shortcuts for a more seamless sign up and future log in process.
2. The minimum profile information needed to be able to find matches.
3. Additional information including images and interests to add to the profile.
Easy onboarding flow - alternative design
Instead of filling out 3 separate sections, an alternative design presents user with a visualisation of what their profile will look like straight after making an account (step 1 on the previous slide). They can fill in the gaps via the pencil icons on each section.
In a similar style to website builders such as Squarespace, a user can pick images, and prompts to fill in that will show on their profile. That way they only fill in what they want people to see and they can see straight away how it looks on their profile.
