@AL21
E-commerce Website
Role: Senior UX Designer / Project Lead
Duration: 1 Month
Completed: Sept 2024
Tools: Figma, Photoshop, Illustrator, WordPress
Skills: Project Management, UX Research, Interaction Design, Usability Testing, Prototyping, Front-End Implementation
Challenge
CorDx — a global leader in IVD diagnostics — was launching a consumer-facing e-commerce brand called @AL21 for household medical devices. With a hard deadline tied to their ADLM conference debut, I had one month to research, design, prototype, and help build a site that could establish a new brand identity, earn user trust, and function as a fully operational storefront.
The Problem
The existing @AL21 website had three critical failures. First, clicking any product redirected users to the CorDx parent store — breaking the purchase flow entirely. Second, the brand messaging was unclear, making it impossible for users to understand what @AL21 was or why they should trust it. Third, the visual design didn't reflect @AL21's identity, undermining confidence in a product category — home medical devices — where trust is everything.
These weren't cosmetic issues. For a brand launching at a major industry conference in 30 days, this site would be the first impression for potential customers and retail partners alike. A full overhaul was necessary.
Video Above: Browsing @AL21 Website
Research & Discovery
Information Architecture (IA)
Understanding @AL21
Business Goals
To ground the design in real user needs, I conducted secondary research and stakeholder interviews to define the target audience: home caregivers, health-conscious consumers, and individuals managing ongoing medical needs at home. Across these groups, three pain points emerged consistently:
Trust gaps: Users are skeptical of unfamiliar medical brands online and look for clinical credibility signals (certifications, clear usage instructions, return policies).
Product comprehension: At-home diagnostic devices require more explanation than typical consumer products — users need to understand how and why before they'll buy.
Support access: Users want clear paths to customer service before, during, and after purchase.
These findings directly shaped three design priorities: visible trust signals on product pages, rich product education content, and prominent support access throughout the site.sion about product functionality.
Concerns about safety or effectiveness
Customer support.
Competitive Analysis
I analyzed direct competitors (Omron, iHealth, Withings) and indirect competitors (Amazon Health, CVS) to identify what builds trust in health e-commerce. Key takeaways:
Social proof is non-negotiable: Top performers feature verified reviews, star ratings, and user-submitted photos prominently on product pages.
Certifications front-and-center: FDA clearance, CE marks, and clinical study references appear above the fold on leading health brands.
Education as conversion: Brands like iHealth use explainer videos and comparison charts to reduce purchase hesitation — the equivalent of a pharmacist recommendation.
The opportunity for @AL21: most competitors inherited clunky UX from medical/clinical backgrounds. A clean, consumer-grade shopping experience with embedded credibility signals would be a differentiator.
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.
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.
Pictured above: Team added notes and critiques.
Prototype & Presentation
Adaptive Design
While building the mobile prototype, I simultaneously developed the design library at the same time. I chose not to build the library beforehand due to time constraints and the priority of refining the UX first. Since design components/tokens 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 Prototype.
Building the Site
Learning WordPress
With the prototype approved, I stepped into the WordPress backend to help implement the design. This is outside a typical UX scope, but the timeline required it — and having built the prototype myself meant I could translate design intent accurately without a handoff gap. I prioritized core user flows first (product browsing, checkout, account creation) before refining visual polish, mirroring the same "function before form" approach used throughout the project.
The live site launched in time for the ADLM conference debut. View @AL21.com →
What I Learned
Outcome & Reflection
The redesigned @AL21 site launched on schedule for the ADLM conference in September 2024, replacing a broken, brand-inconsistent experience with a functional, trust-forward storefront. The project moved from research to live site in under four weeks.
A few things I'd approach differently with more time: I would have recruited external users for at least one round of moderated usability testing rather than relying entirely on internal critique. And I would have pushed to define success metrics upfront — conversion rate, cart abandonment, session duration — so the launch could be evaluated against clear benchmarks rather than just "it works."
What this project reinforced: Constraints don't just limit design — they clarify it. Every decision I made (scoping the sitemap, building the library in parallel, stepping into WordPress) came from asking "what does this product need to succeed right now?" That question is one I bring to every project.