A Comprehensive UX And UI Design For A New Ecommerce Experience
My client, a newly launched healthcare e-commerce start-up, approached me with the challenge of creating their entire digital presence from the ground up. As a start-up, they had no existing website, branding, or digital assets. Their goal was to establish a fully functional e-commerce platform that would serve as their primary channel for selling healthcare products to both individual consumers and medical facilities.
With no pre-existing infrastructure, I was tasked with designing and building the entire online platform, focusing on creating a user-friendly, accessible, and visually compelling web application that could meet the needs of various user segments while reflecting the start-up’s brand identity.
Client
AccuMedica
Pseudonym until website is published, October 2024
Industry
Healthcare E-Commerce
Project Duration
3 Months
Role
Lead UX Designer
Scope
UX Research, Brand Development, Information Architecture, UI Design, Prototyping, Visual Design, Usability Testing
Final Deliverable
Figma Prototype including most-common use-cases, and comprehensive Design System for development
Action
Developing a Complete Brand Identity, Including a Comprehensive Style Guide
I led a brand workshop to define the start-up's mission, values, and target audience, creating a modern and trustworthy aesthetic. I then developed a comprehensive style guide with logo design, color palette, typography, and visual elements, ensuring consistent branding across all digital and marketing materials.
Brand Workshop
I facilitated a collaborative workshop with key stakeholders to define the company’s mission, values, and target audience. We used mood boards and visual inspiration to guide the brand’s development. The result was a modern, trustworthy aesthetic that conveyed reliability in the healthcare space.
Logo Design and Brand Assets
I designed a clean, minimalist logo that aligned with the brand’s values. The logo, color palette, and typography were crafted to evoke feelings of health, safety, and professionalism.
Comprehensive Style Guide
I documented all brand elements in a detailed style guide, including guidelines for logo usage, color schemes, typography, iconography, and tone of voice. This guide ensured consistency across the platform and marketing materials.
Action
Conducting In-Depth UX Research to Define User Personas and Map Customer Journeys
User Interviews and Contextual Inquiries
I interviewed potential users in clinics and homes to understand their interaction with healthcare products, revealing the need for trustworthy product descriptions and easy navigation.
Affinity Mapping
I organized insights from interviews into themes, such as the need for a streamlined checkout process and customer reviews. This helped prioritize features for the platform.
Persona Development
I developed personas such as Emma, 28, Individual Consumer, and Dr. James, 52, Healthcare Professional, to represent key user groups. These personas guided the design process.
Customer Journey Mapping
I mapped out the journey for each persona, identifying pain points and opportunities for improvement. This ensured that the design addressed specific user needs at every touchpoint.
Action
IA and UI Design
With the research insights and personas in hand, I moved on to structuring the platform and designing the user interface.
Sitemap Development
I began by creating a detailed sitemap that organized the platform’s content in a logical and user-friendly way. The sitemap was designed to reduce the number of clicks needed to find products and streamline the navigation experience.
Outcome: The new IA significantly improved user flow, making it easier for users to navigate the site and find what they were looking for.
Wireframe Creation
I started with low-fidelity wireframes that laid out the basic structure of key pages, such as the homepage, product categories, product detail pages, and the checkout process. These wireframes were then refined into high-fidelity versions based on stakeholder feedback and usability testing.
Outcome: The wireframes provided a clear visual representation of the platform’s layout, ensuring alignment with business goals and user needs.
High-Fidelity Mockups
Once the wireframes were finalized, I developed high-fidelity mockups that incorporated the brand’s visual identity, including color schemes, typography, and imagery. These mockups provided a realistic preview of the final product.
Tools Used: Figma was used to create pixel-perfect designs that stakeholders could interact with and review.
Outcome: The high-fidelity mockups were essential in gathering final feedback and ensuring that the design met both aesthetic and functional requirements.
Delivering an Interactive Figma Prototype Along with a Design System for Future Scalability
The final stage of the project involved delivering a comprehensive prototype and design system to ensure long-term success and scalability.
Interactive Prototype
I created a fully interactive prototype in Figma that allowed stakeholders and developers to experience the complete user journey. This prototype included all interactions, transitions, and animations, providing a near-final representation of the platform.
Outcome: The interactive prototype served as a detailed blueprint for development, reducing the risk of miscommunication and ensuring that the final product would align with the design vision.
Design System
To support the start-up’s growth and ensure consistency across future developments, I delivered a comprehensive design system.
Outcome: The design system empowered the client’s team to maintain the platform’s visual and functional integrity as it scaled, ensuring long-term success.
Result
The newly designed platform delivered significant results
The newly designed platform delivered significant improvements during its alpha release, even as development continues with a third-party agency. These early results, collected through preliminary research and testing, provide promising insights, including a focus on the mobile experience, the checkout flow, and other opportunities.
Metrics are approximate and based on very early user testing with a limited cohort of participants.
150s
Time/session
62%
Checkout Completion Rate
78%
Found the site easy to navigate
35%
Satisfaction with mobile performance :(
Tim delivered outstanding design for us in record time. From the start he was able to quickly understand our healthcare and medical e-commerce needs, and transform them into a beautifully intuitive user experience. Nothing short of impressive. Tim's expertise in UX/UI design truly shines through in every aspect of the site, which is the core of our business.
Sarah Collins
Director of Product Development
Wanna work together?
Get in Touch
Tim loves working with new clients with gnarly design challenges.