Hearsight

Taking an existing tool with a new brand and building new software from the ground up.

Architecture:

No items found.

Launch date: January 1, 2024

Live at: https://gethearsight.com

Role: Development Lead, UX designer/researcher

CONTEXT

Hearsight was one of my most recent projects as an independent designer and developer, and the goal was to simultaneously re-brand a the current product, create a new, cohesive user experience as well as build a seamless platform for the product. I worked with the Hearsight team on UX, branding design, hierarchy and color, trying to integrate this brand into a new subscriber portal that is attached to their new website. This was a project that allowed me to wear many hats and overcome numerous unique challenges as an independent, rather than having a whole team behind me. Anotther interesting factor for this project was that I was able to collaborate with an external design studio for some of the early stage branding.

Original website (Squarespace)

The first stage of UX research and design was a strong launching off point, identifying key areas of focus and evolving the pre-existing brand. I was originally not fond of the color palette as it was a bit of an unnecessary diversion from the original brand/site (see above), but through implementation of the brand guide I was able to reach a conclusion that I liked. See below for a bit of brand exploration:

Research and Findings (Figma)

Mood Board (Figma)

Color Use (Figma)

Hierarchy (Figma)

IMPLEMENTATION & CHALLENGES

The new brand package was a fun challenge to implement into a brand new software product. Since we were starting from a clean slate, it made it easier to create a new design system from the ground up with the new rules. I have done app refreshes in the past, but this was a great opportunity to build a much more stable foundation for the founding team than they had before, since they were pivoting software stacks.

Modified Moodboard V2 (Figma)

Combining the research with the new overall tone of the product, we were able to better discern how we would structure and display different content on the marketing site, and how we would communicate information to the users.

Palette Hierarchy (Figma)

Style Variables (Bubble Design System)

Hearsight Website (Bubble)

When it came to implementing the designs, I struggled with the two primary colors. The choice to have both Green and Blue be strong primary colors was a red flag for me, and I felt that it would confuse the users. I informed the founders that you typically want clickable items to be the same color so that users associate that color with an action. The external design agency wanted different colored buttons for different "moods". As a UX designer and developer, this triggered every usability and accessibility alert in my brain. We were able to work to a solution that satisfied all parties, by implementing a gradient on all CTA buttons on the site, and chose a more consistent UX pattern on the actual subscription portal.

Subscriber Portal - Development (Bubble)

For the subscriber portal, I went with a much cleaner UX, and limited management actions to the light blue and purchase actions with the light green. These choices have been working really great for our early user adoption and early revenue metrics, as well as layering in seamlessly with the newly launched Heasright iOS app.

LEARNINGS

My work with Hearsight was an exciting UX and logistical challenge. Layering a pre-existing brand into a new design system, creating a new software from the ground up, and layering a browser-based software tool in with a native experience was something I had not experienced before. I look forward to supporting the founders' continued success and taking my learnings from this project into future endeavors.

No items found.

Product Demos

Other projects: