Redesign of Health Tech Company Website
Overview
Project: To redesign the website for Xferall, a health tech company that provides a mobile application to expedite hospital patient transfers
Role: Collaborated with Xferall’s leadership as the sole contractor, wearing the many hats of visual designer, project manager, brand strategist, and illustrator
Results: Delivered the website design on schedule, with client reporting being very satisfied with the redesign and receiving positive feedback on the new look from their clients
Two images of the website before the redesign on the left with two images of the redesigned website on the right side

Redesign Before + After

Project Challenge
How might we increase Xferall's customer base by effectively communicating the benefits of their product and their team of experienced experts?
Audience
The main users of the website are hospital/clinic administrators looking at Xferall’s product as a way to improve their transfer process.
Constraints
The redesign was scheduled to take 10 weeks. We worked from a SquareSpace template, which enabled the Xferall team to easily edit content as well as publish regular blog entries.
Simplified screenshot of the Xferall application data screen

Custom Illustration for Redesign

Developing the Brand’s Visual Style
After reviewing the former website’s design, I decided to begin the project by developing a design style guide that would support the company’s distinct brand by bringing in new design elements.
Defining Brand Adjectives
I asked the leadership to respond to a questionnaire about their core values and a list of adjectives to describe their brand. These adjectives informed how I chose elements for the design style guide.
A list of specifications for fonts, colors, and buttons for website redesign

Style Guide

Style Guide
Colors: I added bright and warm colors to the color palette to support the brand’s adjectives: high tech, casual, insightful, and fast. I also looked at the color contrast to ensure all color combinations met WCAG 2.1 AA guidelines for accessibility.
Vertical Rhythm and Modular Scale: To bring a sense of order and unity to the type, I chose a scale of 3:4 for the font size proportions and a vertical rhythm for the line height based on 1.5 rem.
Font Size: I listed the font sizes in rem, so that type will change based on the user settings and maintain the same proportion in size and spacing.
The process page from the redesigned Xferall website with an inserted sketch representing the proposed custom illustration

Illustration Sketch in Early Website Draft

Layout & Custom Graphics
I applied the design style guide decisions to the SquareSpace template and then placed Xferall’s written content along with rough sketches of the proposed illustrations for review before creating the final versions.
The final gif animation based on the sketch in the previous image of the process page

Final Animated Illustration (Created as a Gif)

File Optimization
This final graphic was created as an animated gif file which allowed the file size to remain small and not add to the website loading times.
Planning for Updates
To enable Xferall’s front-end developer to update data in the custom graphics as needed, I created the infographic as a coded SVG file with CSS animations.
Testing
I tested the website in a variety of browsers, on mobile and desktop. This simple step showed me that my SVG animations were being interpreted differently across various browsers, so I was able to make changes to the code to prevent these glitches.

Video of Data Infographic (Created as SVG Animation)

Outcome
At the end of the 10 weeks, I delivered the website design on schedule, and the Xferall team was able to publish it soon after. Six months after the launch, they reported being very happy with the redesign and receiving positive feedback on the new look from their clients.
They have also been able to use the design style guide for the website as inspiration for redesigning the UI for their mobile application product, bringing greater strength and consistency to their brand’s voice.
↑Back to Top