Essetia Health Website

Website UI Design and update of Ui Kit

Project Summary

Essentia Health is an integrated healthcare system serving patients in Minnesota, North Dakota, and Wisconsin. Headquartered in Duluth, Minnesota, Essentia Health brings together the strengths and talents of physicians and advanced practitioners dedicated to making a positive impact on people’s lives through their mission.

Essentia Health sought assistance from Perficient to redesign its current website to be responsive. My role was to focus on UI design, translating the color and visual concepts from the discovery team’s low-resolution wireframes into a cohesive design framework.

Information

CLIENT
Perficient - Essetia Health
ROLE
Lead UX/UI Consultant, Visual Designer
YEAR
2022

CHALLENGES

Revamp and launch the public-facing Essentia Health website on Sitecore, featuring an enhanced user experience with a modernized and optimized design.
moodboard with color that allow the site to bring the brand colors

Solution Highlights

  • We designed and developed a modern and responsive digital experience on Sitecore based on a flexible, component-based design system. Usability testing validated that the design templates we created were professional, pleasant, and clean.
Additonal images responsive page on the website

Implementation

Using an agile approach, we iteratively developed a global design systems theme:
  • Created a unique global design system for Essetia Health and stylistic elements: color swatches, typography styles, icons, shadows, grids, and columns.
  • Built basic elements for each brand and theme under the retail wireless platform.
  • Developed global components like buttons, inputs, cards, toggles, image holders, radio buttons, checkboxes, and modal components.
  • Each brand theme included unique components, in addition to the global components file.
  • Utilized the variation mode in the design tool to activate basic styles for each design system.

Results

To achieve a cohesive and visually appealing experience, we unified the visual language across the entire site. By creating a consistent design approach, we ensured that users could navigate the platform intuitively without confusion. The development of UI kits in a design system format further supported this effort.

These kits provided reusable components and design elements that can be easily applied throughout the site, ensuring consistency while allowing for flexibility in design updates. This structure not only simplifies the design process for future enhancements but also aligns with best practices in web development, making it easier for the Essentia Health team to maintain and update the site over time. 
Appointment center