REAL System Website

Web UX/UI Design

To protect patient privacy, images featuring or portraying patients have been blurred or replaced with stock photos.
Scrollable Desktop Preview
Scrollable Mobile Preview

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

Increasing Engagement

Increasing engagement with the main call-to-action (CTA) was a cross-functional effort with marketing and SEO specialists. On the design side, I changed the button color to red to draw attention, better align with brand colors, and enhance visual contrast.

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.
Green Thumb
REAL TherapyView