Hero.png

Starbucks Onboarding Tracker

New Starbucks mobile app users aren’t discovering all the features. How can we re-factor the UI to educate users on all the functionality within the app to promote mobile ordering?

 

Role

Designer

Tools

Sketch, Framer

 

Evaluating the existing design

After kicking off the project, product and design sat down together to identify key points of friction via a heuristic evaluation and available data. At a high level, the existing UI presented with a few challenges that led to poor discoverability of features and lack of engagement:

  1. Key content was hidden behind taps (to see all content, users need to tap between several pivots).

  2. Customers didn’t realize those tap targets were actually tap targets (lack of clear affordances).

  3. The images and text description didn’t do an effective job communicating desired actions or value proposition to customers.

With these factors combined, 70% of users weren’t progressing past the first call to action (of the three).

Existing Design.png

Addressing design problems

Onboarding.png

With clear UI issues in hand the UI was refactored item-by-item:

  1. To make sure all content was visible, each call to action was broken out into its own always-visible container.

  2. To make the content more clearly actionable, each CTA was turned into a button. This also made the content much more accessible for screen-readers!

  3. Copy was updated to be more clear and to describe the the direct value to users.

Gettin’ users to click on stuff

With basic UI friction addressed, I completed another design pass focused on adding delight to encourage engagement and task completion.

Best practices for user onboarding include progress bars, however with our existing Starbucks Rewards tracker this seemed too distracting. I decided to bring in a little bit of delight via micro-animations for checklist completion.

Handoff & delivery

This feature was Animation was identified as a key component of the experience, and with each native platform implementing the animations differently it was imperative for crisp and clear documentation. The following guidelines were developed to facilitate implementation of animations regardless of platform.

For non-componentized design elements, I worked with the accessibility team to create a specific spec for native accessibility implementation!

Card Accessibility.png

Impact & future considerations

The updated onboarding tracker was shipped as an A/B test with the existing experience. Side-by-side there was a significant increase in engagement with the new design with the majority of users. 

However, while users were clicking through to the desired actions, they weren't completing the actions at a significantly higher rate compared to the existing design. Why could that be?

One of the areas of opportunity unaddressed by this design is providing more context for the users once the CTA has been triggered. The existing flow launches the user directly into a screen with no other contextual information, which can be jarring if you weren't paying super close attention to what you clicked on (and who is these days). Given further time to explore and implement, I'd look into adding some contextual information (e.g., an overlay) on each CTA screen.