Legends Football

APP ONBOARDING EXPERIENCE

Project Description

At NX3 Corporation, I had the opportunity to collaborate on a project with Axiom Zen, a Vancouver-based product studio. I worked closely with 3 other designers on Legends, a mobile app for European football fans to get rich contextual updates and engage in trending conversations.

Role: Interaction Designer

Tools: Sketch, Adobe Illustrator & Photoshop

Type: Client

Project Length: 12 Weeks

 

Design Process

Problem

Legends is a new social app for iOS that needs a vibrant community to succeed. How might we help new users understand the app and feel comfortable engaging in conversations?

Designing the onboarding was a challenge because we were finding a market fit for Legends. Therefore, the design had to change often to support shifting value propositions.

 
A low-fidelity screen flow that shows how the user can log in with Facebook, and pick their favorite teams and players before seeing the feed.

A low-fidelity screen flow that shows how the user can log in with Facebook, and pick their favorite teams and players before seeing the feed.

 

Showcasing Design With Ease

While working on the mocks, I needed a quick way to upload entire flows (such as the one above) in Material Gallery for my team to review. In Sketch, it takes manual work to frame what you want to export outside of an artboard. So, I developed a plugin called Page Export to save all artboards and annotations into one image.

The Page Export modal that lets designers customize their output for presentation.

The Page Export modal that lets designers customize their output for presentation.

A Shift to Chat First Experience

I revisited the onboarding after the team decided to prioritize public chat groups to help grow the community. For the 2nd version, I aimed to:

  1. Make the experience visually appealing.

  2. Prime the user to turn on notifications.

  3. Get them to engage with the community after sign-up.

Using a refreshed visual style from my teammate, I updated the flow with a growth mindset:

 
Legends Onboarding (III).png
 

Introducing with delight

The goal of the intro slides was to ensure the user grasped the value of the product. To do so, I had to make sure the copy was concise with relevant supporting graphics.

 
An earlier version of the flow that uses simple illustrations.

An earlier version of the flow that uses simple illustrations.

 

For the final version, I added more concrete imagery to establish a relationship with football fans using the app. To show the transitions, I created a Framer prototype for my team:

 
Walkthrough of the intro prototype.

Walkthrough of the intro prototype.

 

Welcoming Gracefully

Between the Facebook login and the welcome screen is a brief and fun loading animation that I created to lighten the user's mood.

Legends Onboarding (V).png

Proactive Personalization

Our research showed that most football fans have a primary club that they follow more closely than others. To serve the best personalized experience in Legends, we let them choose their favorite club first. They may then optionally select other clubs to follow.

 
Walkthrough of the flow for choosing clubs.

Walkthrough of the flow for choosing clubs.

 

Priming for notification

To help the user see the value of notifications from Legends, a permission priming screen previews the 3 types of alerts they can get.

 
Notification screen. When the user taps on Turn On Notifications, the iOS permission prompt will appear.

Notification screen. When the user taps on Turn On Notifications, the iOS permission prompt will appear.

 

Encouraging engagement with chat

The last stage of the onboarding is to have the user make their first interaction with the community. They land on the chats screen, where a message from Cassidy, our community manager, awaits.

Through a familiar messaging interface and interaction with a human face, we wanted this part of the experience to feel comfortable and organic.

The user is encouraged to tap in the first available chat with Cassidy. Opening the public Gunners chat lets the user preview the conversation before they join.

The user is encouraged to tap in the first available chat with Cassidy. Opening the public Gunners chat lets the user preview the conversation before they join.

When the user returns to the chat list, the app shows additional recommendations. Tapping Explore More brings up recommended chats in the form of swipe-able preview cards.

When the user returns to the chat list, the app shows additional recommendations. Tapping Explore More brings up recommended chats in the form of swipe-able preview cards.

 

Impact

My contract came to a close before I could do an extensive test of the onboarding flow from end-to-end. However, the team did conduct some remote user tests with our UK audience for up to the chat portion. Most of them understood the core value of the app and showed a willingness to use it. In the end, the team was satisfied with the design to pursue implementation.

 

Reflection

While working at Axiom Zen, I developed my confidence as a product designer by taking full ownership of my projects. I defined the project goals, specifications, KPIs and hypotheses in an overview document to keep me aligned with the North Star when making decisions to move the project forward. This disciplined approach worked well for me while designing a new and rapidly changing product like Legends.

Key Takeaways

  1. Designed a delightful onboarding experience for Legends, a social app for European football fans to engage in trending conversations.

  2. Helped developed Page Export plugin to let my team share flows with annotations easily.

  3. Learned how to take product ownership and keep the project focused in the face of shifting value propositions.