Redesigning the MHS Storefront
MHS sells psychological assessments, training tools, and resources for professionals in mental health, education, public safety, and corporate fields. Their products help measure things like emotional intelligence, behaviour, and other key psychological factors.
Context
Role
Product Owner/Lead Designer, Secondary Research Facilitator, User Interface Designer, Accessibility Frontrunner
Problem
The MHS storefront struggled with poor navigation, disorganized listings, and an outdated design that frustrated users and caused high drop-off rates.
As Product Owner, I led a redesign to improve navigation, accessibility, and usability, aligning the design with user needs and business goals. Using wireframes provided by UX management, I was tasked with refining and building out the designs. I focused on improving usability and accessibility while making sure the final design meets user needs and business goals.
The Original Storefront: Not for Everyone
Confusing navigation: Users struggled to find what they needed due to a lack of clear structure and intuitive pathways.
Drop Off Rates: Analytics showed high drop-off rates before purchase, indicating friction. With 90% of paying users being return customers, the design prioritized them without accommodating new users.
Outdated design: The interface looked dated and didn’t inspire confidence or reflect a modern shopping experience.
Accessibility issues: Key features weren’t inclusive, creating barriers for users with diverse needs.
Problem
The Original Storefront - A Mobile Misstep
Poor breakpoint optimization: Caused sections to stack awkwardly, disrupting the flow and usability.
Small touch targets and inaccessible elements: Made navigation frustrating for mobile users.
Visual elements didn’t adapt well: This left content cramped or misaligned on smaller screens.
Accessibility shortcomings: Missing labels and poor contrast, created barriers for mobile users.
Problem
New Storefront Design
Modernized Layout: Clean, user-friendly design for easier navigation.
Improved Navigation: Streamlined menus and categories for quick access.
Enhanced Visuals: Updated imagery and design elements for a fresh look.
Optimized User Flow: Simplified shopping process for better usability.
Mobile-Friendly Design: Fully responsive for seamless use on all devices.
The solution
New Mobile Design
Mobile-Friendly Design: Fully responsive for seamless use on all devices.
No loss of functionality lets users access the same features and information from any screen, any time.
The solution
Here's what changed, and why.
Let's breakdown some of the key features implemented into this new storefront design, and talk about why they were added to ultimately contribute to the new incoming experience on MHS.com
Product Introduction and Page Anchors
Page anchors let users quickly jump to sections, reducing scrolling and improving navigation for a smoother shopping experience.
Updated Product Display and Filters
New card designs allow the storefront to display up to 4x more products on screen, maximizing visibility.
Brand-new filters enable users to quickly narrow down options by category, certifications, or price, streamlining the shopping experience.
This was achieved through close collaboration with our Shopify developer, leveraging existing product data to implement effective filtering.
Updated Details
Product details, previously scattered across pages, are now consolidated into a tabbed "Product Details" section, housing key features, resources, and training and certification info for quick access.
Product Ordering Details
For products requiring specific training or certifications prior to purchase, a dedicated section provides clear instructions on who to contact and how to start the process, so users can easily meet these requirements.
Related Products
I implemented a "Related Products" section that dynamically displays supplementary items to the user’s current selection.
Certification
I added a certification notice section at the top of the storefront for products requiring specific certifications.The notice only appears for products with this specific use case.
My main goal was to figure out what a better, high-fidelity storefront could look like for MHS’s large product catalogue. Through primary and secondary research, I worked to pinpoint what was working and what wasn’t, focusing on fixing user pain points and improving usability and accessibility. I intended on using previously gathered primary research findings regarding the storefront (from the research team) to inform any design decisions.
Research Goals
Research
To inform the redesign, I conducted a competitor analysis to identify industry standards and uncover opportunities to differentiate
the storefront.
Design Process
Weekly Manager Touchpoints
During the design process, I scheduled 30-60 minute weekly touchpoints with my manager to review the project's progress and ensure alignment with stakeholder expectations. Each week brought new design progression.
Stakeholder Presentation
I proposed the redesigned storefront to key stakeholders, including the VP of Revenue, Marketing Manager, UX Manager, and Chief Financial Officer. The presentation highlighted the identified issues, proposed solutions, and expected outcomes and was able to secure their feedback and approval.
Weekly Developer Touchpoints
Once the design was approved by management, I held 30-60 minute weekly touchpoints with developers to discuss technical feasibility, ensure project deadlines will be met, and address any challenges.
GitHub Reviews
In addition to regular touchpoints, we used GitHub to review development progress, track updates, and address issues collaboratively.
If you made it this far,
Thank you for viewing this case study, please feel free to view some of my other projects!
© 2025 Andrew Russell. All Rights Reserved.
Toronto, ON, Canada