Love at first launch × An onboarding experience

Love at first launch × An onboarding experience

Love at first launch × An onboarding experience

Timeline
3 weeks  ◍  2017

Timeline
3 weeks  ◍  2017

Company
Hopscotch.in

Company
Hopscotch.in

Role
Usability Testing, Design, Prototyping

Role
Usability Testing, Design, Prototyping

In brief

Hopscotch.in, a discovery-based online shopping platform, offers curated children’s merchandise to mothers in India.

When a user launches the Hopscotch app for the first time, surfacing the most relevant collections and products helps engage the user and in turn improve the conversion rate. Through data, we found a significant drop off in the onboarding flow. With the redesign of the onboarding experience, I wanted to set the user up for success from the moment they launched the app.

I was the Product Designer on the team and worked alongside a project manager and four developers. My role included user research, usability testing, creating wireframes, visual designs, and prototypes.

The redesigned experience reduced drop-off in user onboarding from 10% to 2%.

I presented this case study at the Google Developers Group DevFest, Mumbai 2017.

Background

When a person installs our app that means our promotion and marketing efforts were successful. The person knows about the app and has the intention to use it. All we needed to do was retain the user and that started with a good onboarding process.

The onboarding for first-time Hopscotch users relied heavily on personalization in order to surface the most relevant collections and products for the user. To display personalized content on the homepage, the previous onboarding flow asked users about their child's details and provided vague information as to how it would enhance their experience.

onboarding_old_flow_v2

Research

Looking at the onboarding click-through data of our user base, I concluded that a significant number of the users were cautious about the information they provided about their children. Some users would drop off while others would provide false information. To verify the data and gather qualitative information I conducted a guerrilla usability testing session with 8 users from our target audience who had never used the mobile app before. Of the 8, three users had never used the Hopscotch platform before. Through 15-minute informal sessions, I observed how users interacted with the app and incorporated the think-aloud method of testing in order to hear their thoughts as they went through the onboarding flow.

The usability test confirmed what our data indicated.

01. Participants were guarded while providing information about their child upfront.

02. Participants were unaware that the details they entered in the onboarding impacted the type of collections they saw on the homepage. 

03. Participants shopping for their relatives’ and friends’ children in addition to their own children couldn't find relevant collections on the homepage.

04. Participants didn’t know how to view or edit the information they entered in the onboarding flow as the details they had entered were hidden away in the Account page on the app.

Design principles

Based on the findings I generated 3 key principles to keep in my while designing the new onboarding experience. 

Strategy

The research clearly indicated that asking the user for their child's name and date of birth was being intrusive. These details were earlier asked in the onboarding not only to display relevant collections for the user but also to use this information for increasing customer delight by sending birthday wishes and gift cards on their child's birthday. The research helped us quickly realize that privacy was of utmost importance and we needed the new design to reflect that. 

Getting rid of the names was simple, but we still needed to know the age of the child in order to provide personalized content. Through conversations with the merchandising team, I discovered that they sourced product types based on 3 major age segments Infant, Toddler, and Child. With this information in hand, I felt confident about simplifying the onboarding user flow.

onboarding_merchandising_segments_3

Design process

Through an iterative design process, I quickly moved between paper and digital prototyping, testing prototypes with users, and collaborating with the product manager to ensure that business objectives were met. Every major iteration on the design was discussed with the technology team to ensure the design was implementable in the technology sprint. 

onb_wireframe_test1_v2

Wireframe design 1 - Onboarding bottom sheet on app launch

onb_wireframe_test2_v2

Wireframe design 2 - Onboarding overlayed on the homepage

I tested 2 interactive low fidelity prototypes with users to understand the effectiveness and usability of my design response. The 1st option worked best with users. With the wireframe finalized, I handed over the design and clickable prototype to the developers so they could plan their development sprint. 

I moved on to the visual design of the screens. The bottom sheet against the launch screen wasn’t very engaging, nor did it position our company as a fashion-forward online retailer. I connected with the Creative team who periodically runs photoshoots for our private label brands. With their help, I used video footage in the onboarding flow to better represent our company as an aspirational fashion destination for kids.

Design response

The new design was created to be:

Conversational  |  The user is asked to provide their child's information in a casual, conversational manner, with prompts like Who are you shopping for today?.

Safe  |  Instead of providing their child's date of birth, the user can select their child's age from broad age groups such as 0-2 years, 2-6 years and  6+ years.

Quick  |  In 2 quick taps, the user can jump into the shopping experience with relevant collections loaded based on the selected gender and age group.

Engaging  |  The background video grabs attention, delivers emotions and helped reinforce the company's brand.

Flexible  |  On the homepage, the user can view and modify the gender and age group selected to shop for multiple children.


 

 

  

     

The new onboarding flow

The new onboarding flow

Old vs. new comparison

Use the slider to compare the two designs

Impact

The redesigned experience reduced the drop-off in user onboarding flow from 10% to 2%. New user acquisition increased as a result and this helped the company reach its growth targets. As a result of the homepage filter, the conversion rate increased by 24%. The app launch video helped improve our brand perception and further positioned the company as a premium fashion brand.

Reflection

While gender-neutral parenting is widely acknowledged in the US and the UK, this form of parenting is nascent in India. Millennial mothers in urban India have started adopting gender-neutral ways to raise kids over the past two years[1]. If I had the chance to revisit this design, I would like to explore a non-binary option to make the shopping experience more inclusive of a spectrum of gender identities.

More projects

Be(Spoke)Project type

Be our guestProject type

Distracted drivingProject type

Homepage redesignProject type

© 2019 Dolcie Dass

© 2019 Dolcie Dass

Connect over Email or LinkedIn.       

© 2019 Dolcie Dass

Connect over Email or LinkedIn