UX/UI designHealthcare website migration

  • Successful migration of 25,000 page website.
  • Improved site ease of use, consistency, and appearance.
Problem definition
  • Role: Web designer/usability analyst working with a business analyst, three back-end developers, and four marketing team members.
  • Healthcare system with more than 100 clinics, 10+ hospitals and multiple affiliates wanted to improve the user experience and implement a new brand during migration of a large website to a new content management system (CMS).

Consistency for the win


Guided team to establish web strategy and analytics goals.


  • Design audit
  • Stakeholder interviews
  • Design research
  • Code research


Web design system creation and documentation.

  • Identified design system needs.
  • Created responsive templates for layouts and components.
  • Implemented “Green = go” task-based design.
  • Unified 4 navigation systems into one.

Page templates

Illustration of org chart of master template drilling down to six layout templates.

Responsive design plan

Illustration of how an individual layout changes from desktop to tablet to mobile breakpoints.

Featured content component

Illustration of seven versions of a feature box in four columns and two rows including default, task, stacked, tip, related links, call to action, and alternate.

Find a provider component

Three side-by-side versions of a find a provider box including specialty radio buttons, enter location and gender dropdown plus annotation on the right explaining whether an item is always or optional.


Extensive documentation to plan for the migration including

  • Requirements
  • Wireframes
  • Page and content mapping
  • Code mapping

Site documentation

Four portrait-orientation annotated wireframe pages in a row including one for the home, hospital/business unit, careers, and locations map pages.

Transition of tabs to left nav

Two cropped pages including text and before and after webpage designs mapping tabs to left navigation.


Moved pages with tables and inline styles to modern, consistent, function-based code that can be easily updated in the future.

  • Coded responsive framework, templates and components in HTML and CSS.
  • Compared code with using out-of-the-box frameworks (too much code)
  • Sent code to outside consultant for review.

HTML & CSS documentation site

Allina Health webpage entitled Code for Ektron with linds to layouts in the left nav and page content.

Quality Assurance (QA)

Part of a 4-person team to go through content and design of every page twice to find and clean up remaining issues after external vendor migrated data to new system.


  1. Anticipate change, including expansion and contraction of content.
  2. Build in time to improve past code when adjusting to accommodate new functionality.
  3. Document everything, including exceptions, questions, and what's left to do or figure out.
  4. Incremental improvements are much easier that a full site code switch.


melanie at melanieclarke dot com