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.

Brief

MHS makes psychological assessments, training tools, and resources for professionals in mental health, education, public safety, and corporate fields. `

Users struggled to find information due to inconsistent layouts, unclear product organization, and poor accessibility, resulting in confusion and reduced confidence while browsing.

Problem

Project Goals

Timeline and Stakeholders

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.

Target Users

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.

Old Design

Product Overview

MHS sells psychological assessments, training tools, and resources for professionals in mental health,

Quick Reference Guide

MHS sells psychological assessments, training tools, and resources for professionals in mental health,

Product Purchase

MHS sells psychological assessments, training tools, and resources for professionals in mental health,

Attached Files

MHS sells psychological assessments, training tools, and resources for professionals in mental health,

Research

Competitive Analysis

To better understand how our users currently navigate starting side projects and the associated pain points, I conducted user interviews with the help of 2 designers with 4 participants, ranging from students driven to learn to startup owners whose companies began as side projects.

Affinity Diagram/Mapping

To better understand how our users currently navigate starting side projects and the associated pain points, I conducted user interviews with the help of 2 designers with 4 participants, ranging from students driven to learn to startup owners whose companies began as side projects.

Ideation Post Brainstorm

To better understand how our users currently navigate starting side projects and the associated pain points, I conducted user interviews with the help of 2 designers with 4 participants, ranging from students driven to learn to startup owners whose companies began as side projects.

Product Framework

To better understand how our users currently navigate starting side projects and the associated pain points, I conducted user interviews with the help of 2 designers with 4 participants, ranging from students driven to learn to startup owners whose companies began as side projects.

Final
Outputs

To better understand how our users currently navigate starting side projects and the associated pain points, I conducted user interviews with the help of 2 designers with 4 participants, ranging from students driven to learn to startup owners whose companies began as side projects.

Designing the Product

FIRST ITERATION

Product Browsing and Purchasing

To better understand how our users currently navigate starting side projects and the associated pain points, I conducted user interviews with the help of 2 designers with 4 participants, ranging from students driven to learn to startup owners whose companies began as side projects.

Product Discovery

To better understand how our users currently navigate starting side projects and the associated pain points, I conducted user interviews with the help of 2 designers with 4 participants.

Product Certification Prompt

To better understand how our users currently navigate starting side projects and the associated pain points, I conducted user interviews with the help of 2 designers with 4 participants.

Key Takeaways

Research Methods

To better understand how our users currently navigate starting side projects and the associated pain points, I conducted user interviews with the help of 2 designers with 4 participants, ranging from students driven to learn to startup owners whose companies began as side projects.

Insights & Takeaways

• We offer a [brief explanation of how your product or service helps your customers]. Our process is [simple/efficient/convenient] and [positive adjective] for you.
  

• We offer a [brief explanation of how your product or service helps your customers]. Our process is [simple/efficient/convenient] and [positive adjective] for you.
  

• We offer a [brief explanation of how your product or service helps your customers]. Our process is [simple/efficient/convenient] and [positive adjective] for you.
  
  

Future Phase

To better understand how our users currently navigate starting side projects and the associated pain points, I conducted user interviews with the help of 2 designers with 4 participants, ranging from students driven to learn to startup owners whose companies began as side projects.

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