Under Armour
Under Armour's
Onboarding
Flow
Onboarding Flow
Onboarding Flow
For this case study I will document my process of re-designing Under Armour' UI.
for this case study I will focus only on the onboarding, as well as highlight key screens through out the app.
*Due to an NDA I am unable to document all my work
For this case study I will document my process of re-designing Under Armour' onboarding flow, creating a more frictionless point of entry, resulting in increased signups and engagements.
*Due to an NDA I am unable
to document all my work
For this case study I will document my process of re-designing Under Armour' UI.
for this case study I will focus only on the onboarding, as well as highlight key screens through out the app.
*Due to an NDA I am unable to document all my work
Roles & Responsibilities
• UI Design
• Concept + Branding
• Collaboration
• Scalable Design system
• End to end product design
• Prototyping
• Design QA
• UI Design
• Concept + Branding
• Collaboration
• Scalable Design system
• End to end product design
• Prototyping
• Design QA
Challenges
Challenges
• Poor file management
• Poor documentation
• No component library/ Design system
• Poor file management
• Poor documentation
• No component library/ Design system
Goal
Goal
• Create a Seamless UX
• Craft a consistent UI
• Design for accessibility
• Create a Seamless UX
• Craft a consistent UI
• Design for accessibility
Kick-start
Kick-start
Kick-start
I started with a UI & UX audit, understanding the users journey & highlighting areas of improvement, some of the main outcomes were:
• Little to no user feedback
• Poor visual hierarchy
• Incorrect use of button states
To kickstart this project, I started with a UI & UX audit as well as a user flow to better understand the app, the apps strengths and were we
can improve.
• Little to no user feedback
• Poor visual hierarchy
• Incorrect use of button states
Competitors Analysis
Competitors Analysis
Competitors Analysis
I focused on Nike's onboarding flow and UI, I found user have a short and clear
user journey when onboarding. I used them as inspo to understand the latest trends/
I focused on Nike's onboarding flow and UI, I found user have a short and clear
user journey when onboarding. I used them as inspo to understand the latest trends/
I focused on Nike's onboarding flow and UI, I found user have a short and clear
user journey when onboarding. I used them as inspo to understand the latest trends/
Improved onboarding flow
Improved
onboarding flow
Improved onboarding flow
With the insight I gathered from the competitors analysis and current app,
I designed a more user friendly flow, one thats easy to use and improves the barrier to entry.
I focused on removing the fluff, and streamlining the sign up flow.
With the insight I gathered from the competitors analysis and current app, I designed a more user friendly flow, one thats easy to use and improves the barrier to entry. I focused on removing the fluff, and streamlining the sign up flow.
With the insight I gathered from the competitors analysis, I designed and improved user flow, while keeping in mind Airbnb's 3 click booking process
Stakeholder meetings
Stakeholder meetings
Stakeholder
meetings
After all my UX findings, I put together a deck to present to stakeholders, key user pain-points were:
• Users difficulty with logging in
• Overall app rating on different platforms
• Lack of error state and user feedback
• Customer satisfaction index
• Poor user retention
Some of my finding were based on reviews & app abandonment stats.
After all my UX findings, I put together a deck to present to stakeholders, key user pain-points were:
• Users difficulty with logging in
• Overall app rating on different platforms
• Lack of error state and user feedback
• Customer satisfaction index
• Poor user retention
Some of my finding were based on reviews & app abandonment stats.
After all my UX findings, I put together a deck to present to stakeholders, key user pain-points were:
• Users difficulty with logging in
• Overall app rating on different platforms
• Lack of error state and user feedback
• Customer satisfaction index
• Poor user retention
Some of my finding were based on reviews & app abandonment stats.
Wireframes
Wireframes
I then began wireframing and putting together ideas for the sign up flow, using best practice I:
• conducted a crazy 8's to spit fire ideas
• Kept it minimal, keep the focus on login/sign up
• used common patterns across different apps
I then began wireframing and putting together ideas for the sign up flow, using best practice I:
• conducted a crazy 8's to spit fire ideas
• keep the focus on login/sign up
• used best practice to make is usabile
I then began wireframing and putting together ideas
for the sign up flow, using best practice I:
• Kept it minimal, keep the focus on login/sign up
• used articles to guide my ideas
• conducted a crazy 8's to spit fire ideas
Design iterations
Design iterations
Like we always hear, design is never liner,
below I've highlighted a few iterations before hitting the sweetspot.
Like we always hear, design is never liner,
below I've highlighted a few iterations before hitting the sweetspot.
Like we always hear, design is never liner,
below I've highlighted a few iterations before hitting the sweetspot.
Final Iteration
Final Iteration
After many iterations and countless meetings, I ended up with the final designs,
which was easy to navigate and was a more accurate representation of Under Armour
After many iterations and countless meetings, I ended up with the final designs, which was easy to navigate and was a more accurate representation of Under Armour.
After many iterations and countless meetings, I ended up with the final designs,
which was easy to navigate and was a more accurate representation of Under Armour
Handover
Handover
Once all designs were approved by the relevant stakeholders,
I then put together a doc, highlighting all the necessary components, style guide
annotations and tokens to hand over to developers.
Once all designs were approved by the relevant stakeholders, I then put together a doc, highlighting all the necessary components, style guide annotations and tokens
to hand over to developers.
Once all designs were approved by the relevant stakeholders,
I then put together a doc, highlighting all the necessary components, style guide annotations and tokens to hand over to developers.
Design QA
Design QA
Before Launch, I did some design QA with the devs to ensure the built
of the app were consistent with designs.
Before Launch, I did some design QA with the devs to ensure the built of the app were consistent with designs.
Before Launch, I did some design QA with the devs to ensure the built
of the app were consistent with designs.
