Website Redesign
For my HCI/UX master’s graduation project, I chose to redesign an internal resource website used by the staff at St. Christopher’s Hospital for Children. The site hosts many handouts, forms, and links to information useful to care for patients.
Status: In Progress
Project Overview
My Role: UX Researcher & UX Designer
Team: Solo
Timeline: 6 months
Objectives
- Determine an information organization system.
- Develop a website layout that decreases the time needed to find a resource.
- Simplify content creation process to ensure design consistency through website.
The project had the following constraints:
- The website must continue to be hosted in WordPress.
- There was a budget of $0.
- The website must be constructed in a manner that allows easy handoff to non-technical people to update and maintain.
Original Website
SOFTWARE: WordPress
Initial Analysis
GenPeds is a simple information resource website. However, the site is disorganized and thus, confusing to navigate.
Problems Identified:
- No Site Hierarchy
- Lacks Proper Navigation
- Inconsistent Page Layout
- Inconsistent Text Formating
- Random Colors Usage
- Incomplete Features
Research
Survey
58 participants
Conducted online (Google Forms)
8 questions (multiple choice, open ended)
Focus Area: Site Use, Likes, Dislikes, & Wants
“The site feels like one long document.”
“It’s hard to find what you’re looking for. You have to view the site from Dr. Taylor’s eyes.”
“Honestly, I don’t even know half of what’s on there. I just know exactly where the forms I usually use are.”
User Interviews
9 participants
Conducted in-person, over the phone or through video conference
Major Themes: Usage, Ideas, Issues and Misc.
Resource Inspection
Analyzed the current site and resources (over 500 in total).
Reduced the number of topic pages from 24 to 7, keeping the most used and combining related pages or those with few resources.
Conducted a Card Sorting activity on each page to determine subpages.
Developed a site hierarchy from Card Sorting results.
Site Hierarchy
- Home
- Index
- CUC Visits
- Well Visits
- Sicks Visits
- General Health
- CUC & SCHC
- Labs
- Insurance & Rx
- Reportable Diseases
- Misc. Forms & Referrals
- Mental Health
- Neurodevelopmental Disorders
- Trauma & Grief
- Behavior
- Depression & Anxiety
- Newborn
- Breastfeeding
- Medical Diseases & Conditions
- Safety
- Adult Health & Postpartum
- Benefits / Resources / Programs
- Teens & Sexual
- Teen General
- Pregnancy
- Sexual Health
- CPC
- MLP & SW
- Medical Legal Practice
- Social Work / Family Resource Guide
- Articles & Data
- CUC Programs
- SCHC Programs
- Community Programs
- Behavioral Health
Low-Fidelity Wireframes
Initial Design
GenPeds is a text heavy website. Initial wireframes were designed to determine what type of structure the users’ prefered when navigating through patient resources. Inspiration was taken from Google Docs and Gmail.
Users were asked about their preferences after viewing the following two design flows.
Preferences Analyzed:
- Page Layout
- Navigation
- Type of Information Displayed on Each Page
The feedback gathered helped transition to a high fidelity prototype.
Testing
Usability Testing
The high-fidelity prototype was evaluated using task-based usability testing and the system usability scale (SUS) survey.
Task-based Usability Testing:
- Performed using Maze
- 27 participants
- 3 tasks
- Evaluated on success rate and duration
- Task 1 – Email:
- 77.3% success rate
- 19.3s avg. duration
- Task 2 – Search:
- 41.2% success rate
- 20.5s avg. duration
- Task 3 – Locate:
- 86.7% success rate
- 30.3s avg. duration
System Usability Scale Results:
The high-fidelity prototype was then updated based on these results leading to the final design shown below.
Updated Design
Software: Figma
Website Walkthrough
The following images walk through the general flow of the website. Not all screens are pictured.
To explore the prototype more, click here.
Design System
Home Page
Sub Topic Page
Search Page
Resource Page
Next Steps
Implement Figma design in WordPress
I want to update St. Chris’ website so they are able to find the resources they need and provide patients with better care.
Create tutorial on content creation
I want to ensure there is a resource to refer to demonstrating how to make use of my WordPress templates and approriately tag future resources so the website updates automatically rather than doing the process manually.
Have additional questions?
I’m here to help. Let’s talk.