Redesigning a Home Health Care Retailer’s Website
Project Summary
Client
The client is a large Canadian pharmacy with an accompanying home health care product business that has more than 50 locations across Canada.
Before engaging us to redesign the home health care website, it comprised of a PDF product catalogue completely inaccessible on mobile devices or via assistive technology.
Core Design Team
- Shannah Segal Design Director
- Linnea Vizard Design Strategist
- Adie Margineanu UX & Visual Designer
- Heather Moore Visual Designer
Activities
- Requirements Gathering
- Workshops & Co-Creation
- Information Architecture
- Wireframing
- Prototyping
- Visual Design
01
Project-Specific Goals
To design a responsive, accessible, and modern website that showcases the retailer’s product catalogue as well as store locations, flyer, specialized services, and funding opportunities.
02
Understanding the Problem Space and End Users
In order to understand business needs and user needs, and to get alignment on how these may intersect or diverge, we designed and delivered a 7 hour workshop with all the key stakeholders in the client organization.
We harnessed the collective knowledge in the room to create proto-personas, which are representative users that are informed by secondary research and client understanding of users rather than b primary in depth interviews and ethnographies.
Figure 2.1
Proto-persona workshop artifacts.
We created an empathy map for our most important proto-personas and we also prioritized the importance of specific features and offers to the different personas. We collectively brainstormed measures of success and ways to mitigate risk.
Figure 2.2
Once the proto-personas were written, we prioritized their importance to our client (left) - based on spending power and online engagement - and created an empathy map for her (right).
Figure 2.3
Some breakout activities included prioritizing website features using dot votes (left) and cores and paths, an exercise that helps flesh out the information architecture by brainstorming all the ways a user may arrive at and leave a specific page (left) .
The outputs of this workshop along with the competitive analysis and strategy work led by Linnea, served as the basis for the design phase.
03
The Design Process
The information architecture was a big part of the UX design for this website. All the products had to be migrated from the PDF catalogue and re-categorized and sorted in the new website navigation.
I worked closely with a client contact with considerable product expertise and knowledge to validate the information architecture.
Figure 3.1
Proposed Information Architecture for the site redesign.
I made a low fidelity click-through Axure prototype to demonstrate rudimentary page layout, some interactions for the new site, as well as the breakpoints for the large, medium, and small experience.
Figure 3.2
Various screens from the Axure prototype, including the home page at 3 different responsive breakpoints, a services page, a product landing page, and specific product page template.
Once the prototype was approved by the client, we produced a visual concept for the final design. We chose a very accessible and readable typeface and a fully accessible colour palette.
Figure 3.3
Design concept for the home page at large and small screen breakpoints.
Figure 3.4
Proposed navigation UI for the new website.
Figure 3.4
Product page UI design by Heather Moore.
04
Learnings
- AIf a timeline is too short for primary user research, spend some time with client contacts that understand the users best in order to design a solution that will address real need.
05
Impact
Users can now easily search and find the product information they need on the website, on any device.
Users can easily map the closest retail location using their own location.
The new website and responsive experience has breathed new life into the brand. Visit the live website.