@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 prototype 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.

Video Above: 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:

Simplified Sitemap

Because their current product line is limited, yet many potential products are under review, the sitemap I proposed only considered the customer end, while the vendor side can be developed later. They needed a functioning website quickly, as @AL21 was debuting its brand and products at the ADLM conference in one month's time.

This decision provides a flexible foundation that can evolve, ensuring the website scales efficiently over time as new features and products are added.

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 Design

Building wireframes with a mobile-first mindset offers several advantages for this project.

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

  • User-friendly experience: Smaller screens encourages me 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: Wireframe workflow for purchasing a product.

Build, Discuss, Refine & Repeat

Over the week, I held regular meetings to review designs, workflows, and usability pain points through internal testing. The insights from different eyes greatly helped refine the experience.

Pictured above: Team added notes and critiques.

Prototype

Adaptive Design

While building the prototype, I simultaneously developed the design library. I chose not to build the library beforehand due to time constraints and the priority of refining the UX. Since design components can easily be updated later, it was more efficient to do both tasks at once rather than waiting for a fully built library before starting.

Pictured above: Design library and link to mobile prototype.