@AL21

E-commerce Website

Role: XD Designer / Project Lead

Duration: 3 months

Completed: Sept 2024

Tools: Figma, Photoshop, Illustrator

Skills: Project Management, Research, Design, User Tests, Prototyping

Challenge

CorDx, a leader in IVD research, development, manufacturing, and supply chain, is looking to expand its brand into the e-commerce market for household medical devices under the name @AL21. My role is not only to build a website for selling products but also to create a platform that builds trust with both customers and sellers.

The Problem

The website currently does not function as intended and current products on the site redirects users to their parent company CorDx store page. The site lacks clarity in its messaging, has poor functionality, and doesn’t align with the branding objectives of @AL21. As a result, it fails to engage users or build trust with its target audience. Given these shortcomings, I consider the website in need of a complete overhaul to properly serve the brand’s e-commerce goals and differentiate it from CorDx.

Browsing @AL21 Website

Research & Discovery

Information Architecture (IA)

Understanding @AL21

Business Goals

Primary Objective: Establish @AL21 as a trusted brand for household medical devices, separate from but leveraging the credibility and market reach of CorDx.

E-commerce Focus: The website should drive product sales, build brand recognition, and differentiate @AL21 from CorDx, even though they share resources.

White-label Strategy: Since the products will be white-labeled from other suppliers, emphasize creating a seamless, trustworthy customer experience that aligns these products with @AL21’s brand identity.

User Research

Target Audience:

  • Individuals who seek medical care products for home use.

  • Caregivers looking for reliable and easy-to-use diagnostic tools.

  • Tech-savvy or health-conscious consumers who prefer online shopping for health-related products.

Customer Needs & Pain Points:

  • Confusion about product functionality.

  • Concerns about safety or effectiveness

  • Customer support.

Competitive Analysis

Competing Brands: Analyze both direct competitors (other companies selling at-home medical devices) and indirect competitors (general health and wellness e-commerce sites). For instance:

  • How do they present white-labeled products?

  • What kind of product reviews or testimonials do they feature to build trust?

  • What user experience elements do they offer to simplify buying health-related devices online?

  • Key Takeaways: Identify gaps or opportunities where @AL21 can provide a better user experience, such as superior customer service, clearer product descriptions, or a more personalized shopping experience.

Market Research

Industry Trends: My research shows that the home healthcare market has a compound annual growth rate of 7.96%, with demand steadily increasing as consumers seek more cost-effective alternatives to expensive hospital stays.

Global vs Local: Given CorDx’s expansive network, @AL21 will cater to both an international market and the US market.

Competitor Examples:

Sitemap & Product Categorization

I began by creating a sitemap, not only to organize the website’s content but also as a flexible foundation that can evolve as new features or product categories are added. This step is essential for ensuring that the website can scale efficiently over time without losing its usability. A well-structured sitemap provides clarity on how users will navigate the site, making it easier for them to find what they need quickly and effortlessly.

Designing an intuitive sitemap is a critical step before building wireframes, as it serves as the blueprint for the entire user experience. If the site’s structure is confusing or disorganized, it can frustrate users, leading to higher bounce rates and lower conversions. A logical, user-friendly sitemap, on the other hand, makes browsing and searching seamless, ultimately improving engagement and the likelihood of a successful purchase. By starting with a strong sitemap, we set the foundation for a smooth, scalable design process and a positive user experience.

Creating the "visual map" opened up a valuable discussion with the team, allowing us to address concerns and needs that I might have overlooked before starting the wireframes. We agreed to split the project, prioritizing customer experience first, followed by vendor experience later. Vendor needs were distinct and required further discussion.

Pictured above: Site Map for @AL21's new website.

Workflow for Features

Instead of designing screens for every possible outcome, which can be a massive drain on time and resources, I prefer approaching the challenge by focusing on feature needs. This method allows for continuous expansion as the project evolves. Key feature needs include:

  • Login, Log Out, Sign Up & Forget Username/Password

  • Product Search & Checkout

  • Filter & Category

  • Profile Page

  • Support

Pictured above: Customer Workflow & Needs

Design Process

Keep It Simple, Stupid (KISS)

Mobile-First Approach

Designing with a mobile-first mindset, and then scaling up to desktop, offers several advantages in today’s mobile-centric environment:

  • Simplicity: Limited screen size forces us to prioritize core actions and focus on what’s truly essential.

  • User-friendly experience: Smaller screens push us to create streamlined, task-oriented designs that enhance usability.

  • Efficient scaling: Once the mobile experience is optimized, scaling up to desktop becomes easier and more effective.

  • Responsive performance: A mobile-first approach ensures that the design is responsive and performs well across all devices.

Pictured above: Workflow for purchasing a product.

Build, Discuss, Refine & Repeat

Over the next two weeks, I held regular meetings to review designs, workflows, and usability pain points through internal testing. With each newly added feature and webpage, we repeated this process, saving variable elements—such as buttons, colors, and text—in a library that could be continuously updated as the project evolved.

Pictured above: Imagined teamwork with zero head-butting.

Adaptive Design

Once the design workflow for a task was complete, my next step was to scale up the elements for both tablet and desktop. This involved adjusting layouts, interactions, and visual hierarchy to suit larger screens while maintaining usability and consistency. Addressing these differences early ensured a seamless experience across devices and minimized future revisions. This approach also improved accessibility, meeting the needs of diverse users.

Pictured above: Designing breakpoints for different screen sizes & creating components. (Exampled: Homepage & Product Detailed)

Prototype

Adaptive Design

Once the design workflow for a task was complete, my next step was to scale up the elements for both tablet and desktop. This involved adjusting layouts, interactions, and visual hierarchy to suit larger screens while maintaining usability and consistency. Addressing these differences early ensured a seamless experience across devices and minimized future revisions. This approach also improved accessibility, meeting the needs of diverse users.