Project

UX/UI designHealthcare website migration

Outcome
  • 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).
Solution

Consistency for the win

Strategy

Guided team to establish web strategy and analytics goals.

Discovery

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

Design

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.

Planning

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.

Code

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.

Recommendations:

  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.

Contact

melanie at melanieclarke dot com