Mobile Onboarding

 

The Goal

We wanted to establish a basic onboarding sequence for new users, in addition to a system we could use moving forward to introduce new features. The intent of our onboarding was to provide a basic orientation to Merchants new to the mobile app so they were aware of the features available to them.

 
 

The Audience

The first iteration of onboarding targeted new Merchant users of the app. Onboarding was triggered by the first-time launch of the mobile application, therefore, we focused on communicating the mobile app's basic features and functionality. The second version included a plan for introducing new features as added. These screens would be seen by all users within the effected markets where the feature was being released.

 
 

Constraints

The original proposal included animated illustrations that would assist us in educating users how they could interact with the UI. Unfortunately animations were out of the scope of the project's initial timeline and have yet to make it back into the roadmap. 

 
 

Design Process

We wanted to be able to use the same onboarding experience across markets and product types so we needed to make a dynamic solution. The plan was to have screens enabled and disabled as appropriate for users depending on what products they were using with Groupon. Therefore we had a base foundation made up of content seen by everyone, and then additional screens added when necessary.

In the beginning I explored two possible onboarding structures. The first was the traditional slideshow style with text and illustrations that briefly described the most important features of the app.

The second was an overlay that showed the features and description in context.

 
 
 

Option 1: Illustrated Slideshow

Option 2: Contextual Overlay

 
 
 

Our need for a dynamic solution made the contextual option more difficult to implement. For the sake of easier maintenance and organization we moved forward with the illustrated slideshow. 

For the illustrations I created stylized versions of the UI in order for the set to work cross Merchant type and market. I worked with a copywriter to finalize the headlines and descriptions on each screen.

Onboarding was released on tablet first. Then I created a new set of illustrations
representative of the mobile phone app. The release of onboarding on the phone followed soon after.

 
 
 
Tablet_Onboarding_Structure.gif
 
 
mobile_onboarding.png
 

Status

The onboarding illustrations, copy, and screen order are updated as necessary. They are revisited as UI is tweaked, new features are added, and as the visual evolves.