Project Overview

The Product: The BetterWay site is a healthcare company that provides an alternative way to perform blood tests.

The Problem: The BetterWay team did not have a website to showcase their services and specific approach to blood testing. Betterway allows patients to go to their local pharmacy for blood tests and only requires a small amount of blood to be drawn from their finger. The results are then delivered directly to their clinician. BetterWay needed a responsive website that allowed users to shop for different tests, input their insurance information, and find BetterWay service locations near them.

Team: UX designers

Responsibilities: Wireframing, creating a design system, component creation, sketching, mockups, prototypes, client communication, and presenting design ideas to key stakeholders.

Competitive Research

We started the design process by exploring and analyzing how competitors / appointment healthcare based sites positioned their user experience. This exercise allowed us to identify opportunities for differentiation and innovation for our client. The goal was to understand current healthcare web based industry standards, uncover gaps in the market, and gather insights and inspiration to create a unique and functional product for our client.

Design Style Tiles

We created Design Style Tiles to guide our UI decisions. These tiles captured the brand colors, typography, icon style, photography style, buttons, card styles, banner styles and more. Creating this baseline design helped us maintain consistency when creating components and applying styles to the pages.

Wireframes: Low Fidelity Wireframes

We we given content for each page in a Word document format. We employed low fidelity wireframing to explore design concepts, content placement and page composition before moving into high fidelity designs. This exercise allowed our team to quickly brainstorm layout ideas with low commitment. We presented these to our client, made iterations based on feedback and continued to push the design and the experience forward.

Desktop: Hi Fidelity Mockups

After the content and placement was approved in our low fidelity wireframes, we began creating the high fidelity mockups. These are a detailed, polished visual representations of the user interface. My role included creating high-fidelity mockups to bring the design vision to life and ensure that the final product met user and business need. This project was created in Figma.

Mobile: Hi Fidelity Mockups

Mobile screens are crucial for delivering a seamless user experience. In BetterWay, I designed a series of mobile screens to create an intuitive and visually appealing user experience maintaining consistency between desktop and mobile experiences.