Adie Margineanu

Interaction Design + Research

Design//


Redesigning a Home Health Care Retailer’s Website

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.

Proto-persona worksheets completed by our client and stakeholder participants, detailing proto-persona demographics and needs from the website.

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.

Whiteboard session prioritizing the importance of each proto-persona to our client and an empathy map brainstorming exercise detailing what the most important proto-persona is thinking, feeling, doing, and saying while using our client's service and website.

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).

Dot voting exercise sheets, showing how many different client stakeholders support having a specific feature (e.g. search) on the new website. Cores and paths exercise sheets completed by our client stakeholders.

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.

Information architecture diagram showing different levels of navigation, global utilities, and product catalogue categories.

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.

Axure prototype showing the layout and information hierarchy of several screens.

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.

Photoshop mockup showing the visual design concept for the desktop and mobile breakpoints of the website.

Figure 3.3

Design concept for the home page at large and small screen breakpoints.

Photoshop mockup showing the navigation on large screen.

Figure 3.4

Proposed navigation UI for the new website.

Photoshop mockup showing a product page for a blood pressure monitor.

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.

Explore other design projects More about me