Skip to main content
Charlie ChaoWork

Legends Onboarding

Welcoming football fans to a new community.

Legends Onboarding preview
  • My RolesInteraction design and prototyping
  • CompanyAxiom Zen
  • Timeline2017 / 3 months

At 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.

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.

News-first onboarding

The initial direction for Legends was to serve news and encourage users to share them in group conversations. Hence, I designed a flow that lets new users sign up and personalize their feed upfront.

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

News-first onboarding flow

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.

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

Page export modal

A shift to chat-first experience

I revisited the onboarding after the team decided to priortize 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:

Intro → Sign Up → Welcome → Personalize → Enable notifications → Discover chats

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.

Intro flow

Above: 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.

See 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.

Below: The user is greeted with a bouncing football loading state before the welcome screen. I used Framer to code the animation.

Welcome flow

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 favourite club first. They may then optionally select other clubs to follow.

Right: Video 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.

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

Notification screen

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.

Chats flow

Above: 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.

Below: 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.

Chats recommendations flow

Impact

My internship 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.

Takeaways 🥡

  1. Designed a delightful onboarding experience for Legends, a social app for European football fans to engage in trending conversations.
  2. 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.