Musely is a two-sided prescription skincare platform that sells remote treatments and connects doctors and patients online.
When I joined, Musely had recently pivoted from beauty tips platform to Rx skincare e-commerce where the majority of the design was a minimal viable product with overlap from the previous platform. I was hired with another designer to revamp the user experience. Here, I led the purchase flow redesign that spanned 1 year. Project resulted in a 24X conversion lift.
The purchase flow redesign was done in 2 stages:
quick & easy updates
complex changes
0-6 Months
WCAG compliant
Adaptive web design
Improve pain points
Remove clutter
Use market advantage
Went through several iterations in collaboration with company leadership and marketing to update the brand CTA color with a higher contrast.
Defined consistent text sizing throughout web and mobile devices.
Replaced the error-prone qwerty board with a number pad.
Replaced the scroll with a number pad and implemented autofill for the state selector.
Previous links led users away from the current web. Worked with the leadership and legal compliance staff to summarize content. By applying consistent signifiers and utilizing modal states, we kept user journey within the existing flow.
Worked closely with the Engineering Lead to keep the project within the scope.
Decluttered the page by removing the icons on top. Automated address input to reduce error and shorten checkout time.
Revised and added more error states for clarity.
Collaborated with the engineering team to collect and display ratings. Displaying ratings below each Musely product helped install confidence in the product’s efficacy.
6-12 Months
Product Detail Pages
Patient Questionnaire
Cart Page
Checkout Page
Removed unnecessary information. Moved the cart from the bottom to top and minimized cart when scrolling down. This maximized the screen space for convenient browsing.
Advocated adding a cart to accommodate design patterns users are accustomed to. As the product line grew, the new design allowed shoppers to add treatments outside of “select your treatment” page.
Reorganized order of information, updated edit icon to an explicit signifier, provided the ability to edit patient’s medical questionnaire, and redesigned the 60-Day Guarantee.
Conclusion
Improving the purchase flow was a large project that involved many reprioritizations and cross-team collaborations. Designing within time and technical limitations was a fun challenge to overcome, learning a lot along the way!
We had multiple projects parallel to this including marketing improvements and the product line increasing by two folds. With multiple facets advancing in conjunction, we were able to achieve a significant increase in conversion.