Legends Onboarding

Getting football fans engaged in a new community.

Legends Onboarding hero

Info

  • My roles Interaction design, user research, prototyping
  • Company Axiom Zen
  • Date & duration Sep - Dec 2017 (4 months)

Overview

Axiom Zen is a venture studio that created CryptoKitties, ZenHub and more. As a product design intern, I collaborated with 3 other designers in the Legends team to create the interface for a mobile app that lets football fans get rich contextual updates and engage in trending conversations.

For four months, I designed the app's onboarding experience, player stats display and other product features.

Onboarding for football fans

Problem: Legends is a new social app for football fans with a small community. How might we help new users understand the app and start engaging in conversations?

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

A news-first experience

The initial direction for Legends was to be a news app for fans to get updates and share them in group conversations. The first version of onboarding was designed for this MVP.

Initial onboarding flowInitial onboarding flow
This flow has a simple intro, Facebook login and prompts for personalizing the feed before landing there.

On a side note, the above mock was generated using the Page Export Sketch plugin I created. It allowed my team to annotate artboards and showcase flows in design critiques.

Shift to a chat-first experience

The onboarding experience was revisited after the team realized that public chat groups should be prioritized to help build the community. Considerations for the second version include:

  1. How might we make the experience feel more delightful?
  2. How might we prime the user to turn on notifications?
  3. How might we get the user to engage with the community after sign-up?

With a refreshed visual style created by my teammate, I re-designed the flow to optimize for engagement in chats.

Chat-first flow chartChat-first flow chart
Flow chart for the chat-first onboarding experience.

Designing a better intro

The splash and intro screens went through several iterations to ensure fans grasp the value of the product. I used abstract graphics instead of in-app screenshots to give viewers a high-level sense of what the app is about.

  • Earlier iteration for the intro
    An earlier iteration with simplified copy and illustrations.
  • Final iteration for the intro
    The final version with transitions and a more detailed content that shows additional value the user would get from the app.

To demonstrate how elements animate as the user go through the intro slides, I created a Framer prototype for my team.

Walkthrough of intro prototype made with Framer.

Open Prototype

Welcoming gracefully

Albeit a short part of the flow, I designed a fun loading animation in-between Facebook login and welcome screen.

Welcome flow
Welcome flow with a brief loading transition.
A Framer prototype of the loading animation.

View Animation

Proactive personalization

The next part of the flow asks the user to choose their favourite club. This provides the primary signal for personalizing their feed and chats recommendations later. The app also asks for other clubs, which optionally serves as secondary signals.

Choose clubs flowChoose clubs flow
The user is asked for their favourite club and other clubs they'd like to follow.

Enabling notifications

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

Notifications flow
Priming the user for enabling notifications for the app.

Engaging with chats

After notifications, the user lands on the chats screen, where a message from Cassidy (our community manager) awaits. By tapping the chat, the user sees their first public chats recommendation based on their favourite club.

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

Chats and Cassidy chat screen
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.
Chats screen and recommendation cards
When the user returns to the chats screen, the app shows additional recommendations. Tapping Explore More brings up recommended chats in the form of swipeable preview cards.

Retrospective

Overall, the final onboarding design communicated the app well with our particpants in user testing. While we didn't get to test the Cassidy chat portion of the flow, the team was satisfied with the approach in getting fans engaged in public chats with the community.

Perhaps the most important takeaway I got from working at Axiom Zen was learning about ownership. As a designer, it's crucial to be fully accountable for one's own works with a clear vision of how to follow-through and address the unknowns. As such, in design reviews, I would always prepare myself to be able to fully articulate my rationales and come out with clear next steps. This mindset allowed me to design with intent and confident rather than being dependent on other's opinions.

Other Work

  • Listing Recommendations Interaction design for Compass
  • Legends Onboarding Mobile design for Axiom Zen
  • Intensive Care First Aid Freelance brand + web design
  • Lithium Community Mobile design