UW MEDICINE
Creating a better visual design for the patient experience.
Project: Website
Role: Concept Development, Art Direction, UI Design
Firm: Jennergy, Inc.
Additional Credits: Junior Designer Sean Sommerville
The University of Washington Medicine is a nationally renowned teaching hospital providing world-class care for anyone in the Puget Sound region.
The firm had recently completed the visual rebranding of UW Medicine. Next, it was tasked to design a new website to deliver a modern, user-friendly experience that edged out its competitors.
Patient Experience Was Top Priority
User experience became an area of particular interest with such a large complex website. The website includes five major users, services patients, providers, researchers, students, and donors, and it had to be easily navigable for each user group. As a result, we worked closely with the client to create small-scale user testing prototypes. The testing demonstrated that user experience on high traffic pages improved, and tasks like finding services or booking appointments were now easier and quicker. Ultimately, we could confidently move forward with a site that would intuitively serve its users.
Goals:
• Update UI to reflect the new brand
• Create a unique homepage that tells the visual story
• Improve patient experience on mobile and desktop
• Create a style guide for the development team
Approach
As lead designer, I created the user interface, interaction concepts, and design. I coordinated with the client and oversaw the execution of all pages by the design team. In addition, I worked directly with the junior designers to guide the visual execution of the wireframes, prototypes, and website deliverables, as they were prepared for development.
UW Medicine was uniquely involved in the creative process, which allowed us to work directly with the UX designer. Based on the UX designer's wireframes, we used Adobe XD to create hi-fi wireframes, interaction prototypes, and visual interface designs, which would then be user-tested.
Prototypes of the home page interactions were presented to stakeholders and developers, along with examples of movements from similar websites to get approval before proceeding to hi-fi designs.
A Unique Home Page
During the initial UI design phase, it was determined by stakeholders that the home page needed to be unique, include feature stories, and be impactful to separate UW Medicine from competitors. The challenge was to make the homepage impactful and memorable while maintaining a good experience for the user groups.
We accomplished this by using areas of large impactful imagery and featuring stories that focus on the three of the five areas of UW medicine; patients, research, and education. We used a sticky navigation bar, along with a simple design to make navigation easy, no matter the user was on the website. Five action buttons were placed just above the fold, making quick access to areas that were determined to be key to patients. Interactive elements were used to subtly direct attention to the area of importance, such as feature stories.
Mobile Focus
The mobile format was designed in conjunction with the desktop site as we moved to each page. This ensured everything was translated and shared a similar experience.
Interior Pages
Interior pages were designed with clean and clear visuals to allow patients to easily navigate and get information.
Conclusion
The website was launched and the project was a success. A thorough style guide was provided to the client development team.
Unfortunately, the site was not fully developed according to the approved designs. Looking back, I think this would have been a great opportunity to create a more standardized design system to help guide the development of the website.
Overall, being able to work with an outside team was a great and valuable experience. While the site is a simplified version of the approved design, it accomplished the goal of providing an improved patient experience and better visual representation of the new brand.
