REAL System Website

Project Overview

REAL^® System is a virtual reality (VR) physical and cognitive rehabilitation tool by Penumbra, Inc. A software update necessitated a refresh of web content and provided an opportunity for the web design team to enhance the overall website experience.
‍
My Role
As the lead web designer, I spearheaded the redesign of the homepage, setting the tone for the rest of the website. The design decisions established on the homepage informed updates made to other pages, ensuring a unified look and feel throughout the site.

Team
‍The project team included two web designers, a web developer, the Integration Marketing VP, and a brand designer.

Project Timeline
‍Six weeks, October–November 2022

‍Project Goals

Strengthen brand consistency
Enhance user experience
Increase engagement
Improve performance

Challenges & Constrains

Limited development time
‍The developer allocated to our project had limited availability, requiring thoughtful selection of design changes.

‍No user research budget
‍Lacking a budget for user research, my design decisions were informed by heuristics and Google Analytics data. I conducted informal user research with Penumbra employees unfamiliar with the site to gather quick feedback on usability.

Emphasis on speed
‍A/B testing showed higher engagement with faster site loading times. While I experimented with subtle animations, engaging videos, and custom web fonts, their impact on load time was deemed too significant by stakeholders.

Strengthening Brand Consistency

Cohesive Colors and Imagery

To resolve inconsistencies with other marketing materials, I collaborated with the brand designer to establish web colors that met brand expectations and WCAG accessibility standards. I shifted from vague icons and product-centric images to human-centric photography, reinforcing the brand’s focus on people.

Style Guide

I developed a digital style guide to facilitate the handoff from designers to developers, incorporating spacing guidelines that minimized the need for design revisions during production.

Enhancing User Experience

Mobile-First Approach

I implemented a mobile-first design strategy to streamline development, and established rules for content stacking at smaller breakpoints to ensure responsiveness. These rules are illustrated in the hero images at the top of the page. The previous design had figures that were intended to have responsive placement, but in practice, those figures would float or disappear unexpectedly. To remedy this, I replaced the hero image with a rectangular collage that would simply change placement at different breakpoints.

Clearer Links

To address low engagement with links, I redesigned them to be more intuitive, using buttons or underlined blue text.

I also refined the text on buttons to clarify their destinations, moving away from generic "Learn More" prompts.

Improving Information Hierarchy

Given more time, I would restructure the site’s information architecture to enhance usability based on web traffic analysis. I recommended consolidating, removing, or differently grouping pages to streamline user navigation.

Replacing (Or Keeping) Carousels

Despite carousels being heuristically recognized as detrimental to user engagement, my proposal to replace them with an emotionally impactful video featuring patient journeys for social proof was scrapped due to SEO considerations and development constraints.

Proposed Solution

Implemented Solution

Improving Performance

Speed was of utmost priority because of its strong correlation with better engagement, as seen in previous A/B tests for the site. Accessibility became a higher priority not only because I advocated for it, but also because of its impact on SEO rankings. Based on Lighthouse performance data, the revised site successfully achieved both reduced load time and better accessibility.

Results

Key Performance Indicators

The redesigned homepage outperformed its predecessor with significant increases in first-time visitors, views, and engagement with the main CTA.

What I Learned

Business objectives may override design and user experience considerations.
While the design constraints were frustrating at times, they were also helpful in guiding my decision-making.
The final implementation of my design could be limited by available developer resources.