Product Design
UX/UI
Case Study
Context and
Problem
The first major task of the Design Team at Hyperfine was to complete the company’s rebranding and finalize the Brand Style Guide — see here. Once this was completed, it was glaringly obvious that the company’s website needed a major overhaul. It was not only out of date brand-wise, but suffered from unintuitive organization, navigation, and had low engagement rates.
User Personas
Many potential users were considered, but three main personas were identified:
Existing Customers: these users may visit to find product information, documentation, tutorials, and updates.
Neurologists and Other Medical Professionals: these users would be interested in learning more about the system, its capabilities such as imaging sequences, and upcoming events such as informational webinars.
Hospital Executives: these users would be a key stakeholder in the decision to purchase a system and would be looking for specifics regarding the costs and logistics of a purchase.
Process and
Development
The Design Team collaborated directly with the Marketing Team as they would be the primary drivers of website content and the owners of the site once finished.
The first step was to meet with Marketing to establish their goals, target audience, and messaging.
A general hierarchy structure of the site was created to identify top-level pages and their sub-pages.
Wireframes were created for each main page in Figma and eventually high-fidelity prototypes were made. These prototypes included interactions and any animations intended for the final site
Regular check-ins were made with the Marketing team to ensure alignment and to receive feedback.
Marketing team members were invited to view prototypes and leave comments and feedback.
After multiple rounds of reviews and revisions, an external software development team was brought in and hand-off was initiated. Figma prototypes along with a style guide and page components (buttons, drop-downs, cards, etc.) were made available to the software team.
Design and Marketing held regular check-ins with the software team to ensure that designs were being implemented as intended and to address any technical concerns.
After launch, and on regular intervals afterwards, teams met to discuss performance, metrics, and any needed updates, additions or changes.
Participants were presented with two prototypes for A/B testing. Feedback sessions were held at the end to discuss struggles, successes, frustration, general opinions and potential future solutions.
Key Design
Decisions
The driving force behind the redesign was the brand. As a growing start-up, it was imperative to establish a strong brand and visual identity on the company’s website. A strong, yet flexible page layout structure was established.
On-Brand
New brand standards including color, typography and photographic style were applied.
A new grid layout was established to bring structure to pages, while still allowing for flexibility and variation.
Focused Navigation
Top-level navigation was reduced from eight down to five; more in-line with UX best practices.
Pages were organized to allow users to find what they needed quicker and more intuitively. Icons were assigned to each page to bring visual interest and aid identification.
Engaging Visuals
Photography was used extensively and most pages lead with a large hero image.
Product features were highlighted with carousels and cards. Videos were interspersed on appropriate pages. Upcoming events and webinars were prominently featured on the homepage.
Flexible Templates, Sections, and Components
Each section and component was designed with reusability in mind in order to reduce the time involved to bring new pages live. Templates could easily be reused on multiple pages while remaining adaptable to their individual content.
Outcome
Post-launch, regular check-ins were held to discuss performance and metrics. In the six months following the launch, the number of unique visitors increased by 25%. Engagement and repeat visitor numbers also increased, suggesting the updated site attracted a broader audience.