< Back to portfolio

Higi

Higi is a health and wellness service that seeks to provide people with a better way to track and achieve their personal well being. The service lets you collect and track you vital data through the use of higi stations (below), mobile apps, and other 3rd party devices. Community tools and challenges help keep you motivated and on track as you strive to achieve your "better."

What were we solving for

Higi came to us looking for help with the design of their health and wellness platform. Specifically, the team needed help with the design direction of their check-in kiosks, as well as the web portal that would support it and a number of other community features in the future. Work began on the kiosk system first because there was a hard stop on both the production and placement of kiosks in retail.

Time to launch was an essential component of the work, since the team had a number of early delivery obligations that they needed to meet in order to maintain funding and meet their profitability projections for the year.

Goals

Get Higi to market by finalizing product strategy and design in 5 key areas.

The Higi check kiosks
The Higi algorithm
Homepage and Portal Design
Support for connected things
Health challenges framework

The work

Leading the team

The Higi team already had a small, but talented, team of people working on parts of the design, but they lacked an overarching design direction to guide their efforts across the servicing system. My role on the Higi team was to help direct the design and customer experience, while also helping the team coordinate design work with their product pipeline and development sprints.

Visual of the different components of Higi that I was tasked with launching.
This is the basic structure of the team I led. For the duration of the engagement I was directly managing the design and community staff. Product and marketing were also direct contributors into the design process. The section above outlines the general schedule.

Architecture

By the time I jumped onto the team the designers and product managers already had some sense of the types of things they’d like to accomplish, and the engineering team had already completed some of the more foundational work for the technologies that would be available within the kiosk. In order to get things moving quickly I got the team to focus on architecting some of the various flows for the kiosk. We initially started with interaction models and state diagrams, both to help us identify and fill in gaps in the experience, and to get as much information over to the engineering team so we could start making calls on the hardware. As things progressed we moved into higher levels of fidelity, eventually getting to a state where work could be taken on more individually.

Workflows were used to both vet design decisions and determine the logic for the scoring system that people would use to track their well being and activity in the system. We also used his step to iterate on components of the health score algorithm.

Prototyping

Prototyping was done in multiple iterations, starting initially as a set of pages posted on a wall, where the team could post requirements and ideas. Mid-fidelity prototyping was done in PowerPoint, as it was accessible to the entire team and closely matched the types of linear flows required by the kiosk. Final iteration was done in Photoshop and divided between myself and the two other designers on the team, so we could quickly iterate and finalize production for the software engineering team.

Initial prototyping was done by hand using these templates. The team would add notes and rearrange the workflow as new opportunities and gaps were uncovered.
Once the general flow was stable the team moved to mid-fidelity prototyping in PowerPoint.
The team also shot and produced a series of video help content to assist first time users. This is an example of a prototype experience we used to evaluate what we shot on device.
The final set of iterations was on the visual and interaction design. Motion was storyboarded out in Keynote, and visual execution was split out between myself and the two other designers so we could iterate and execute quickly.
Some of the later iterations that we did on the kiosk's visual style.
A convenience sample of friends and family was used to inform direction mid-iteration. In total the team managed to squeeze in three rounds of testing. I moderated the initial round and we used the last two to give design and PM experience running them on their own.
These are the designs we landed on after multiple rounds of testing. A lot of refinement was done in order to emphasize clarity and better situational awareness. This was done to support the disproportionate amount of seniors currently leveraging blood pressure monitors.

Portal Design

Once the kiosk work was complete, the team began work on the web portal that would support it. In order to get something in market in or around the same time as the kiosks, the team focused on pulling together minimal executions for portal sign in, stat tracking, and basic challenge infrastructure.

The portal experience followed the kiosk, and took the same low-to-high fidelity approach. This is an example of the early signup page we stood up as marketing kicked up and kiosks started shipping to early customers.
Flows and interaction models were still used for heavier portions of the experience. This is an example of one I did for account creation.
Portal design was done in Balsamiq, another familiar tool for the whole team. Pages were mocked up and iterated on based on a sitemap that I produced, outlining all the sections of the experience we needed to cover.
The team met at the end of each day to coordinate work for the following morning. Project needs and feedback from internal and external stakeholders were collected by me throughout the day, and I would assign work based on our most immediate needs for the next morning.
High-fidelity wireframes for the signup flow. 1/3
High-fidelity wireframes for the signup flow. 2/3
High-fidelity wireframes for the signup flow. 3/3
Example of form field messaging and error handling for the sign in experience.
This is the final iteration on the portal design, following testing and iteration.
High fidelity wireframes for the authenticated profile page. This is where you'd track your scores, stats, and advice over time.
Same wireframe execution, but for vital statistics.
The lower portion of the page focused on comparatives. The animal facts were tossed in as FPO content for testing, but received so much positive feedback that we kept them in future iterations.
An example of the finalized visuals for the same section.
These are the final visuals we landed on for the portal page. The experience was largely brought into more alignment with the kiosk designs we had just finalized.
Challenges were added on to the portal experience after the kiosks had shipped out. This is a wireframe for check-in and other challenges sponsored by our partners.
The experience was eventually built out to include social and other community activities. This is an example of the achievements section that we went live with.

Outcome

The Higi kiosks were able to launch on time for delivery to the team’s early partners, essentially enabling the company to continue operations. The portal experience followed shortly after, allowing the devices to come online day one. I stayed on as a consultant with the team for the remainder of the year, largely to provide direction on new feature development, design team growth, and their mobile app development. Higi kiosks are now prevalent in a number of grocery and drug store chains across the US, including Whole Foods, CVS, Walgreens, Rite Aid, and Bartell’s. In 2022 the company was acquired by Babylon health, with the goal of further growth and expansion.

Back to portfolio

Higi

What were we solving for

Goals

The work

Leading the team

Visual of the different components of Higi that I was tasked with launching.

This is the basic structure of the team I led. For the duration of the engagement I was directly managing the design and community staff. Product and marketing were also direct contributors into the design process. The section above outlines the general schedule.

Architecture

Workflows were used to both vet design decisions and determine the logic for the scoring system that people would use to track their well being and activity in the system. We also used his step to iterate on components of the health score algorithm.

Prototyping

Initial prototyping was done by hand using these templates. The team would add notes and rearrange the workflow as new opportunities and gaps were uncovered.

Once the general flow was stable the team moved to mid-fidelity prototyping in PowerPoint.

The team also shot and produced a series of video help content to assist first time users. This is an example of a prototype experience we used to evaluate what we shot on device.

The final set of iterations was on the visual and interaction design. Motion was storyboarded out in Keynote, and visual execution was split out between myself and the two other designers so we could iterate and execute quickly.

Some of the later iterations that we did on the kiosk's visual style.

A convenience sample of friends and family was used to inform direction mid-iteration. In total the team managed to squeeze in three rounds of testing. I moderated the initial round and we used the last two to give design and PM experience running them on their own.

These are the designs we landed on after multiple rounds of testing. A lot of refinement was done in order to emphasize clarity and better situational awareness. This was done to support the disproportionate amount of seniors currently leveraging blood pressure monitors.

Portal Design

The portal experience followed the kiosk, and took the same low-to-high fidelity approach. This is an example of the early signup page we stood up as marketing kicked up and kiosks started shipping to early customers.

Flows and interaction models were still used for heavier portions of the experience. This is an example of one I did for account creation.

Portal design was done in Balsamiq, another familiar tool for the whole team. Pages were mocked up and iterated on based on a sitemap that I produced, outlining all the sections of the experience we needed to cover.

The team met at the end of each day to coordinate work for the following morning. Project needs and feedback from internal and external stakeholders were collected by me throughout the day, and I would assign work based on our most immediate needs for the next morning.

High-fidelity wireframes for the signup flow. 1/3

High-fidelity wireframes for the signup flow. 2/3

High-fidelity wireframes for the signup flow. 3/3

Example of form field messaging and error handling for the sign in experience.

This is the final iteration on the portal design, following testing and iteration.

High fidelity wireframes for the authenticated profile page. This is where you'd track your scores, stats, and advice over time.

Same wireframe execution, but for vital statistics.

The lower portion of the page focused on comparatives. The animal facts were tossed in as FPO content for testing, but received so much positive feedback that we kept them in future iterations.

An example of the finalized visuals for the same section.

These are the final visuals we landed on for the portal page. The experience was largely brought into more alignment with the kiosk designs we had just finalized.

Challenges were added on to the portal experience after the kiosks had shipped out. This is a wireframe for check-in and other challenges sponsored by our partners.

The experience was eventually built out to include social and other community activities. This is an example of the achievements section that we went live with.

Outcome