PROJECT
AutoShip Program - Mweb
SUMMARY
Concept & design an exclusive Mobile Website experience for Quidsi's optional auto-recurring order program "AutoShip".
​
ISSUE
The AutoShip program was initially built with a desktop web focus. However, mobile websites became more important due to email marketing being opened by users on their phones. The issue was on the mobile websites, AutoShip would force a user from mobile web view to desktop view... on their phone.
​
One reason was the desktop first design process. A second reason was AutoShip on desktop had a separate cart experience. Mobile web was not designed for a 2 cart system so it required mobile browsers to push users to the desktop view.
SOLUTION
This project aimed at providing an exclusive Mobile Web experience for on-boarding new users and for allowing order management for existing users.
​
I identified 4 primary solutions to include:
• Single cart checkout - 1x and AutoShip items checkout at the same time
• New AutoShip items ship at the time of purchase
• AutoShip management with all options across desktop & mobile web
• Create a dedicated AutoShip landing page
PLATFORMS
Mobile/Tablet Web
​
ROLES
Research & Analysis
UX & UI Design
Prototyping
User Testing
Spec & Documentation
QA Beta Testing
​
TOOLS
Wipeboarding
Paper Prototyping
Fireworks
InDesign
invision
POP
Silverback
LO-FI SCREENS
UX SPEC
The depth of this project translates directly through the UX spec sent to the dev team.
CONCLUSION
The new AutoShip Mobile Web experience was an immediate success. Upon launching, there was a 2% increase in AutoShip orders consistently over a 5 month period. The number of total AutoShip active orders climbed from 1225 to 1750 within 6 months of launching the Mobile Web experience.
​
Additionally, active order management increased seeing a rise in "Add in a 1x item" to meet the shipping minimum. Analytics also showed a rise in AutoShip order management logins and clicks into the order management screens.
​
Overall, this was a full UX cycle project from idea to user flows, wireframes to prototypes and then to development. I've never had this much hands on access to all key stakeholders and it amounted in a promotion from Sr UX Designer to UX Design Lead. Whooo!
PAPER SKETCHING
With buy-in & positive feedback on the user flows, I began to sketch out my ideas for specific pages and high impact areas.
MOBILE & TABLET WEB
USER FLOWS
Before a pixel was pushed on the design side, I put a lot of effort to research and concept the user flow for the Mobile Web experience. With learnings from the Desktop version, I mapped out how a user would interact with AutoShip.