Project Overview
SaaS Platform suffering from slow growth due to low visual appeal
A 4-month redesign of XYZ Corp's ecommerce platform. Our cross-functional team of 8 (2 UX designers, 1 UI designer, 2 developers, 1 product manager, 1 data analyst, 1 marketing specialist) dedicated 2,560 hours to this $300,000 project.
impact
+110 YoY ARR growth rate
primary objective
Increase product ARR
my role
Lead Product Designer
duration
2023 Q1-Q4
"I’ve had the pleasure of meeting very few designers as talented and considerate as Oliver. His designs are remarkable and truly connect with our target audience, fostering engagement and loyalty for our product."
Christian Christensen ・ CPO @ MapsPeople
the problem
How might we elevate our platform to stand out in the market and secure more deals?
XYZ Corp's e-commerce platform was experiencing a 65% cart abandonment rate, translating to an estimated $2M annual revenue loss.
Analysis revealed that 70% of abandonments occurred during the checkout process, with users citing a 'complicated and time-consuming' experience.
The problem disproportionately affected mobile users (80% of our traffic) and was particularly acute for first-time customers.
Solving this issue was projected to increase revenue by 30% and improve customer retention by 25%.
Research
Significantly improving the platform's perceived aesthetics by designing an expansive and compelling design system
Our research phase included:
20 in-depth user interviews (10 frequent users, 10 abandoned cart users
Analysis of 10,000 survey response
Heatmap and session recording analysis of 100,000 user session
Competitive analysis of 5 leading e-commerce platform
Review of 1,000 customer support tickets
Key findings
80% of users found our payment options limited compared to competitors
Mobile users spent 40% more time on checkout than desktop user
First-time users were 3x more likely to abandon carts than returning customer
70% of users expressed frustration with form field error Competitors offering guest checkout had 20% higher conversion rates
These insights led us to prioritize mobile optimization, expanding payment options, implementing guest checkout, and improving form validation in our redesign.
Ideation
This effort had a high impact on the YoY growth rate for MapsPeople; a +61% growth since the previous years
Our ideation phase consisted of
2-day design sprint with all 8 team member
3 rounds of crazy eights exercises, generating 192 rough concept
An async Miro board where team members contributed ideas over a wee
A 4-hour workshop with key stakeholders to review and build upon initial concepts
We used dot voting to narrow down to the top 5 concepts, which we then evaluated against our research insights and project goals.
The winning concept, 'SingleSwipe Checkout,' emerged as the frontrunner for its potential to dramatically simplify the mobile checkout experience.
User Flow
This effort had a high impact on the YoY growth rate for MapsPeople; a +61% growth since the previous years
We mapped out the entire user journey from product discovery to post-purchase. The checkout process, our primary focus, was reduced from 7 steps to 3:
1. A Cart review (with edit capabilities)
2. A Shipping and payment info (with smart defaults and guest checkout option)
3. Order confirmation
Key improvements:
Implemented a slide-out cart a-ccessible from any page
Integrated a 'buy now' button for single-item purchases
Added progress indicators to provide context within the flow
Designed a persistent floating 'help' button linked to live chat
A/B testing of the new flow against the old showed a 45% reduction in time-to-purchase and a 30% decrease in cart abandonment rate
Wireframing
This effort had a high impact on the YoY growth rate for MapsPeople; a +61% growth since the previous years
I created wireframes for 12 key screens, focusing on the 3 core checkout steps. Starting with low-fidelity sketches, we iterated through mid-fidelity grayscale wireframes to high-fidelity mockups.
Key decisions:
- Moved the price breakdown to a collapsible section, reducing visual clutter
- Implemented a sticky header with cart summary for easy reference
- Designed expandable sections for shipping options and payment methods to simplify the visual layout
- Created a simplified mobile view with a single-column layout and larger touch targets
I conducted 3 rounds of internal reviews and 2 rounds of user testing on the wireframes, iterating based on feedback. The final wireframes achieved a 90% task completion rate in usability tests, compared to 60% for the original design.
Prototyping
This effort had a high impact on the YoY growth rate for MapsPeople; a +61% growth since the previous years
I used Figma for our prototyping process, creating three main prototypes:
1. Low-fidelity clickable prototype for initial user flow validation
2. Mid-fidelity prototype with basic interactions for internal review
3. High-fidelity prototype with micro-interactions and real data for final user testing and stakeholder approval
Key features of our final prototype:
- Fully responsive design simulating both mobile and desktop experiences
- Real-time form validation with inline error messages
- Animated transitions between checkout steps
- Integration with sample product data to create realistic scenarios
I conducted 5 rounds of user testing with iterative improvements between each round. The prototype was also used in two stakeholder presentations, where I demonstrated the full user journey from product selection to order confirmation.
Visual Design
This effort had a high impact on the YoY growth rate for MapsPeople; a +61% growth since the previous years
Our visual design phase focused on creating a clean, trustworthy, and easy-to-use interface:
- Color Palette: We refined the brand's existing colors, ensuring all color combinations met WCAG AAA standards. We introduced a softer blue (#3B82F6) as the primary action color to inspire trust and calmness during checkout
- Typography: Adopted Inter for its excellent readability on screens. We established a clear typographic hierarchy with 6 text styles for consistent information display
- Icons: Designed a custom icon set of 30 icons, focusing on universally recognizable symbols to aid quick comprehension
- UI Components: Created a comprehensive UI kit with 50+ reusable components, ensuring consistency across the platform
- Responsive Design: Developed adaptive layouts for mobile, tablet, and desktop, with special attention to touch targets on mobile devices
We conducted an A/B test of our new visual design against the old, resulting in a 28% increase in user-reported ease of use and a 15% decrease in time spent on the checkout page.
User Testing
This effort had a high impact on the YoY growth rate for MapsPeople; a +61% growth since the previous years
Our user testing strategy included:
1. 5 rounds of moderated usability testing (8 participants each round
2. An unmoderated usability study with 100 participants using UserTesting.com
3. An testing of key features with 10,000 live users
4. 2-week beta testing period with 500 loyal customers
Key metrics:
- Task completion rate
- Time-on-task
- Error rate
- System Usability Scale (SUS) score
- Net Promoter Score (NPS)
Findings and Actions
- Round 1: Users struggled with form field validation. Action: Implemented real-time validation with clear error messages
- Round 2: 30% of users missed the guest checkout option. Action: Increased visibility and explanation of guest checkout
- Round 3: Users wanted order summary always visible. Action: Added a sticky order summary on desktop and collapsible summary on mobile
A/B testing revealed that the new design reduced average checkout time from 4 minutes to 90 seconds. Beta testing resulted in a 40% increase in our NPS score.
Quote from user testing: 'This new checkout is so fast, I almost forgot I was spending money!' - Sarah, 28, frequent online shopper
Iterations and Refinements
This effort had a high impact on the YoY growth rate for MapsPeople; a +61% growth since the previous years
Our design went through 3 major iterations: Iteration 1: Focus on simplifying the checkout flo4 Reduced steps from 7 to 3 Introduced a progress indicatoE Result: 15% reduction in cart abandonment Iteration 2: Improving mobile experienc9 Redesigned for a single-column layout on mobil9 Increased touch target sizeA Implemented collapsible sections for order summary and payment optionA Result: 25% increase in mobile conversions
Iteration 3: Enhancing trust and security perceptio" Added security badges and explanation/ Improved error messaging and form validatio" Introduced a persistent chat support optio" Result: 20% increase in first-time customer conversions We also explored a radical single-page checkout design, but user testing showed it overwhelmed users with too much information at once. We ultimately discarded this approach in favor of our final 3-step process.
Final Design
This effort had a high impact on the YoY growth rate for MapsPeople; a +61% growth since the previous years
Our final design, 'SwiftCheck,' revolutionizes the checkout experience+ (F One-page overview with collapsible sections for shipping, payment, and order summar1 %F Real-time form validation with inline error messageA !F Guest checkout option prominently displaye5 8F 'Express checkout' with digital wallet integratioD F Persistent chat support buttoD F Mobile-first design with large, easy-to-tap buttons and inputA F Clear security indicators and trust signals throughout The new design reduces the average checkout time by 60% while increasing the sense of security and trust. It directly addresses the cart abandonment issues identified at the project outset by simplifying the process and providing constant support and reassurance to users.
[Include high-quality screenshots or an embedded interactive prototype here] Our responsive design ensures a seamless experience across devices: [Include screenshots showing the design on mobile, tablet, and desktop] Accessibility features include High contrast mod, Screen reader compatibilit Keyboard navigation support Performance optimizations resulted in a 40% reduction in page load time, crucial for our mobile users with varying network conditions.
impact
This effort had a high impact on the YoY growth rate for MapsPeople; a +61% growth since the previous years
Three months post-launch, 'SwiftCheck' has exceeded all expectations, ( Cart abandonment rates decreased by 35% (goal: 30%. ( Mobile conversion rate increased by 50M ( Average checkout time reduced from 4 minutes to 80 secondA ( Customer satisfaction score improved from 3.2 to 4.8 out of C ( 70% of users now opt for guest checkout, up from 20M ( Support tickets related to checkout issues down by 60M ( Overall revenue increased by 25% compared to the same period last year User Testimonial: 'The new checkout is so fast and easy, I actually enjoy shopping here now!' - Mark S., repeat customer The project has been featured in UX Booth and received an Honorable Mention on Awwwards for e-commerce design. [Include a data visualization showing key metric improvements]
Lessons Learned
This effort had a high impact on the YoY growth rate for MapsPeople; a +61% growth since the previous years
Key lessons from the 'SwiftCheck' project. 6 Underestimated the complexity of integrating multiple payment gateways, leading to a 2-week delay. In future, I'll involve engineering teams earlier in the payment feature design process# 6 The cross-functional 'war room' approach, where all team members worked in the same space for key phases, dramatically improved communication and problem-solving speed# 6 Regular user testing (every 2 weeks) allowed me to catch and fix issues early, saving time and resources in the long run# B6 I initially focused too much on desktop, underestimating mobile usage. Future projects will be mobile-first from day one# 6 The design system we created midway through the project significantly sped up our workflow. I'll start with a basic design system in future projects# 6 Learned the importance of designing for edge cases early. Several late-stage issues could have been avoided with more comprehensive initial user flow mapping. These insights have already informed my approach to the upcoming account management redesign project.
next steps
This effort had a high impact on the YoY growth rate for MapsPeople; a +61% growth since the previous years
Based on the success of 'SwiftCheck' and ongoing user feedback, our roadmap includes: Short-term (Next 3 months)% "- Implement minor UI tweaks based on heatmap analysiG - Add support for 3 new payment methodG - Optimize page load times, aiming for a 20% improvement Mid-term (3-6 months)% "- Develop a 'one-click reorder' feature for returning customerG - Create a mobile app based on the success of our responsive web desig8 - Implement an A/B testing framework for ongoing optimization
Long-term (6-12 months) ! Expand to international markets, adding multi-currency support and localizatio ! Integrate AI-powered product recommendations in the checkout proces< ! Develop a loyalty program to increase customer retention These plans aim to further reduce friction, increase conversion rates by an additional 15%, and expand our user base by 30% over the next year. Potential challenges include technical complexity in international expansion and ensuring GDPR compliance for the AI recommendation system.
© 2024 Oliver Odgaard®
hi@odgaard.design
🧢