MOIA
MOIA
Ridesharing Mobile app
for Passengers
UX Design • UI Design • Design System
Get Started
Get Started
Overview
Overview
How I helped increase MOIA's conversion rate while ensuring security and usability
• by designing the signup flow for Android
• extending the Design System
MOIA is a ridesharing mobility service from Volkswagen.
How I helped increase MOIA's conversion rate while ensuring security and usability
• by designing the signup flow for Android
• extending the Design System
MOIA is a ridesharing mobility service from Volkswagen.
MY ROLE
UX / UI Designer
TEAM
Internal team: 1 Lead Designer, 1 Design Director, Development Team, 1 Product Manager
TIMELINE
4 months, 2019
TOOLS
Sketch, Jira
SKILLS I APPLIED
• iOS & Android - UI Design for cross platform native apps
• MVP feature prioritization
• Using user research to drive design decisions
• Atomic design approach in Design Systems
• Development hand-off & collaboration
• User testing - preference test
• Agile collaboration environment
SUCCESS METRICS
from Ca 41,000
to Ca 260,000
Registrations
4,8/5
Apple App Store &
Google Play Store
DESIGN SYSTEM IMPACT
80%
Decrease in onboarding time for designers
80%
Decrease in Development time
By April 2020, the fleet had 100 vehicles, which extended Hamburg's urban mobility with the help of MOIA's algorithm-based electric ridesharing concept.
From January 2019 to April 2020 the user registrations, and app store metrics were succesfully improved by approx. 85%.
SUCCESS METRICS
• Improved user registrations
• Improve app store ratings - for Apple App & Google Play Store
4,6/5
Apple App Store &
Google Play Store
Registrations
from 0 to
Ca 400
Cambridge Judge Business School - Accelerate Cambridge - UK, Panacea Accelerator - UK, Newchip Accelerator - U.S.
3 Accelerators
4,6/5
B2B agreements for the SDK solution from Health Insurance & Fitness Tech companies
Due to the market pull from the B2B end from interested companies, DocMe changed the focus from B2C to the SDK solution within its first year.
Problems
Designing the signup flow for MOIA solved more problems that manifested over the user testing and iteration phase.
#1
Longer signup flow
Before I delivered the user authentication flow there were more use cases that belonged in the onboarding flow such as the coupon offering for first- time users and the onboarding slideshow.
#2
User friction points
We also tested the MVP app flows which was helpful to uncover several issues.
#3
Security vs. customer engagement signup tradeoff
The development team went back and forth between using the OTP via either mobile or email authentication.
To address the mobile or email back and forth I considered quantitative and qualitative available research data.
#4
Lack of a seamless experience both on iOS and Android
Make our own app for both platforms, with a native feel to the system it’s on.
Opportunity
How might we help users achieve a
fast & secure signup for the
MVP launch?
Goals
When designing the solutions aspects such as the MVP goal, business requirements and user goals were considered
MVP launch goal
• launch the app app with the essential functionality as soon as possible for early users
• minimum functionality required for early users
• release the product as soon as possible
• gather feedback from users
• iterate based on the feedback
Business requirements
• increase registrations
• drive engagement & retention for the MVP app launch in Hamburg
User goals
• new users need a fast and secure user signup in order to use the app as soon as possible to order a ride-sharing car
• have a seamless experience both on iOS and Android
When designing the solutions aspects such as the MVP goal, business requirements and user goals were considered
Longer signup flow
→
Keeping the essential
I collaborated with the team in deciding the most basic features needed for the product to launch. The coupon offering and the onboarding slideshow were left out, at this stage. What was kept was only what allowed for the product to be deployed, excluding non essential features.
User friction points
→
UX improvements
Improving the UX, so that the signup process does not take longer than needed.
#1
Lack of numbers visibility when extracting the code
Before I delivered the user authentication flow there were more use cases that belonged in the onboarding flow such as the coupon offering for first- time users and the onboarding slideshow.
→
Solution
Using microcopy to address the code visibility issue
I iterated on the text to be clear & short while prioritizing
• welcoming the user
• purpose of using the code
• the actual code
This is a typical example of how mastering microcopy or writing clear & short texts can have a huge UX impact.
#2
Missing the code & switching between apps
We also tested the MVP app flows which was helpful to uncover several issues.
→
Solution
Implemented visual hierarchy & magic link
To address this I worked on iterating on the welcome email so that users spend the least amount of time scanning the email and getting what is needed - the code (OTP).
I implemented visual hierarchy to address the problem of needing to extract the code fast. And have also cut out out the clutter from the email.
#3
Security vs. customer engagement signup tradeoff
The development team went back and forth between using the OTP via either mobile or email authentication.
To address the mobile or email back and forth I considered quantitative and qualitative available research data.
→
Solution
Based on available data & business needs I designed the flow with the email authentication
• Email registration is also a good post-verification marketing channel that can be used beyond for just receiving the code to drive customer engagement & retention.
• Users can receive a welcome email during the sign-up process which encourages more engagement and retention.
• Users can still verify their phone number but at a later stage during the use of the app.
Design system
The goal was to make our own app for both platforms, with a native feel to the system it’s on. I reviewed how popular apps deal with designing components for both iOS and Android.
I progressed in creating our own custom version for Android - with a native cross-platform app approach.
Design iterations
Based on the user testing and iteration phase the I have refined the signup flow with fewer steps and necessary optimisations.
App Flow V1
App Flow V1
INITIAL FLOW
• Initially the flow included
-the onboarding slideshow (A2)
-the coupon offering for first-time users (A3)
• Also it had the phone number code authentication instead of the email authentication
App Flow V2
App Flow V2
REFINED FLOW
The refined flow omits the unnecessary and additional steps and instead focuses on the core flow and simplified A-B experience
Final designs
Opportunity
How might we help users achieve a
fast & secure signup for the
MVP launch?
SUCCESS METRICS
from Ca 41,000
to Ca 260,000
Registrations
4,8/5
Apple App Store &
Google Play Store
DESIGN SYSTEM IMPACT
80%
Decrease in onboarding time for designers
80%
Decrease in Development time
By April 2020, the fleet had 100 vehicles, which extended Hamburg's urban mobility with the help of MOIA's algorithm-based electric ridesharing concept.
From January 2019 to April 2020 the user registrations, and app store metrics were succesfully improved by approx. 85%.
Problems
Designing the signup flow for MOIA solved more problems that manifested over the user testing and iteration phase.
#1
Longer signup flow
Before I delivered the user authentication flow there were more use cases that belonged in the onboarding flow such as the coupon offering for first- time users and the onboarding slideshow.
#2
User friction points
We also tested the MVP app flows which was helpful to uncover several issues.
#3
Security vs. customer engagement signup tradeoff
The development team went back and forth between using the OTP via either mobile or email authentication.
To address the mobile or email back and forth I considered quantitative and qualitative available research data.
#4
Lack of a seamless experience both on iOS and Android
Make our own app for both platforms, with a native feel to the system it’s on.
Goals
When designing the solutions aspects such as the MVP goal, business requirements and user goals were considered
MVP launch goal
• launch the app app with the essential functionality as soon as possible for early users
• minimum functionality required for early users
• release the product as soon as possible
• gather feedback from users
• iterate based on the feedback
Business requirements
• increase registrations
• drive engagement & retention for the MVP app launch in Hamburg
User goals
• new users need a fast and secure user signup in order to use the app as soon as possible to order a ride-sharing car
• have a seamless experience both on iOS and Android
When designing the solutions aspects such as the MVP goal, business requirements and user goals were considered
Longer signup flow
→
Keeping the essential
I collaborated with the team in deciding the most basic features needed for the product to launch. The coupon offering and the onboarding slideshow were left out, at this stage. What was kept was only what allowed for the product to be deployed, excluding non essential features.
User friction points
→
UX improvements
Improving the UX, so that the signup process does not take longer than needed.
#1
Lack of numbers visibility when extracting the code
Before I delivered the user authentication flow there were more use cases that belonged in the onboarding flow such as the coupon offering for first- time users and the onboarding slideshow.
→
Solution
Using microcopy to address the code visibility issue
I iterated on the text to be clear & short while prioritizing
• welcoming the user
• purpose of using the code
• the actual code
This is a typical example of how mastering microcopy or writing clear & short texts can have a huge UX impact.
#2
Missing the code & switching between apps
We also tested the MVP app flows which was helpful to uncover several issues.
→
Solution
Implemented visual hierarchy & magic link
To address this I worked on iterating on the welcome email so that users spend the least amount of time scanning the email and getting what is needed - the code (OTP).
I implemented visual hierarchy to address the problem of needing to extract the code fast. And have also cut out out the clutter from the email.
#3
Security vs. customer engagement signup tradeoff
The development team went back and forth between using the OTP via either mobile or email authentication.
To address the mobile or email back and forth I considered quantitative and qualitative available research data.
→
Solution
Based on available data & business needs I designed the flow with the email authentication
• Email registration is also a good post-verification marketing channel that can be used beyond for just receiving the code to drive customer engagement & retention.
• Users can receive a welcome email during the sign-up process which encourages more engagement and retention.
• Users can still verify their phone number but at a later stage during the use of the app.
Design system
The goal was to make our own app for both platforms, with a native feel to the system it’s on. I reviewed how popular apps deal with designing components for both iOS and Android.
I progressed in creating our own custom version for Android - with a native cross-platform app approach.
Design iterations
Based on the user testing and iteration phase the I have refined the signup flow with fewer steps and necessary optimisations.
INITIAL FLOW
• Initially the flow included
-the onboarding slideshow (A2)
-the coupon offering for first-time users (A3)
• Also it had the phone number code authentication instead of the email authentication
REFINED FLOW
The refined flow omits the unnecessary and additional steps and instead focuses on the core flow and simplified A-B experience
Final designs
