- 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.
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.
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.
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.
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:
- Make the experience visually appealing.
- Prime the user to turn on notifications.
- 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:
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.
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:
Between the Facebook login and the welcome screen is a brief and fun loading animation that I created to lighten the user's mood.
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.
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.
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.
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.
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.
- Designed a delightful onboarding experience for Legends, a social app for European football fans to engage in trending conversations.
- Developed Page Export plugin to let my team share flows with annotations easily.
- Learned how to take product ownership and keep the project focused in the face of shifting value propositions.