VHC Website Redesign
Online navigation made easy
A platform where patients, volunteers, and donors can access information about the nonprofit organization offering healthcare services at no cost to uninsured and other underserved populations.
My Role
Product Designer​​
​Timeline
6 months
Deliverables
MVP
Research & Usability Testing
Information Architecture
Wireframes
Prototyping​
​UI animations
High-Fidelity Mockups
Design Documentation
Keywords
End-to-end Design
Large Complex System
Design Thinking
Cross-team Collaboration
User-centric Method​
Product Scaling
Not all patients are a fan of checking the provider's website before visiting doctors or scheduling an appointment. However, when they do, they take it seriously.
One Friday night in 2023 at 9pm, I received a text message from the executive director of Volunteer Health Clinic (VHC). She expressed her frustration and embarrassment after receiving a 30-minute call from a patient earlier that day. The patient had complained about the difficulty of finding information on our website. Doubtful at first, the director immediately visited the website after the call ended and admitted, "You know what made me feel even worse? She was absolutely right about the website! It's terribly difficult to navigate!"
​
"We've been considering updating our website, and now is the time. Can you help us redesign the website?"
​
And so we began the process.
Everyone is excited to see how the restructured and rebranded website will be put to good use.
​​​​
Our Mission
Building a user-trust product is a great extension of VHC's mission that setting up expectations and raising awarenesses. ​
This is a really BOLD mission!
And it takes more than a designer to achieve that.
​
Collaboration and Communication is the key​.
That's why we looped in people from engineering, marketing, content, volunteer relations from day 1.
When don't trust the website,​
People Make Calls
"What services do you provide?"
"What type of volunteers do you need?" "How can I donate?"
68%
of the phone inquiries
“What’s the pharmacy hours that I can pick up the prescription?”
"Am I eligible to see a doctor?"
"My last office visit was with Dr. Grayson 6 months ago.
Is he still working here?"
"I learned that you provide seasonal well-child exams.
Will you have it this year and when?"
21%
of the phone inquiries
"How can I get a copy of the lab result?"
"I’d like to follow up my volunteer application."
6%
of the phone inquiries
How empathic design can shape the world in a better way
​
During my week volunteering at the call center, I was struck by the emotional connections made over the phone. Reviewing the quantitative data later, I recognized that each number represented a moment of empathy. Empathy, I realized, is the superpower of a designer.
The Problem
People have trouble finding information on the website, leading them to call for help instead.
Finding User Goals and Directions
We conducted user research which gather both
qualitative and quantitative data to find out users' pain points and determine what user goals are, then to decide what to prioritize and improve.
​
We were able to drill down to the core user goals from research findings:
Timeline
4 weeks
Panel size
256 participants
Process
Step 1: Data gathering (focus group & survey)​
Step 2: Two rounds of workshops​
Step 3: Three co-design sessions
User Goal #1 -
Basic Information​
​"I can find the clinic information quickly and effortlessly."
User Goal #2 -
Timely Information
"I can stay informed about clinic updates by visiting the website."
Design for Trust
With the redesigned website, it's our responsibility to give the users the right paths and content to build up their trust.
What we believe
Guiding Principles
Keep it simple
​
Optimize for easy navigation rather than complex menus and links which distract users.
Inform at the right moment
​
Ensure the updates are shown in a timely and effective manner.
How we make decisions
Design Challenges
HMW build an "evergreen" IA so that users can move around and get work done effortlessly?
HMW manage long list so that users have immediate access to the information they need?
HMW get user's attention in the right way so that they stay informed?
What we aim to achieve
Success Metrics
To reduce phone call inquiries by 25% from the users regarding basic clinic information as well as timely information that reflected on website.
(plus, less volunteers needed, a win-win!)
To Increase in the number of website view rates by 40%.
Minimum Viable Product
Why not
Minimum Awesome Product
Even with tight timelines, I'm committed to delivering great products. I break down the requirements into manageable tasks and use a straightforward framework—High, Medium, and Low priorities—for project planning.
How to get more initiative in UX Design
​
MVP was not in the initial plan when VHC outlined the redesign scope.
​
We couldn't make a decision on the strategy about site map structure. I proposed to conduct a usability & A/B testing through MVP to gain insights. At first, the PM thought it was unnecessary, seeing it as a potential time-waster given the team's confidence in the project goals. To address this, I initiated a stakeholder meeting, including the PM and engineer, to advocate for early user buy-in and mitigate product risks. Eventually, we agreed to create a MVP for the Information Architecture to guide us how to move forward.
​
Throughout our collaboration, I've worked diligently to engage stakeholders to provide constructive feedback, and articulate my design decisions effectively when needed.
This "High, Medium and Low" framework helps us understand the scope of the project at a glance and I was able to map out the MVP for the site map quickly.
Build - Measure - Learn
​
I re-organized the current website in just two days using the above site map.
Then we conducted usability & A/B testing - we got very positive feedbacks that's awesome enough to move us forward!
"This is very straightforward! I know exactly where I am and where I'm heading to."
User Goal
​
I can find the clinic information quickly and effortlessly.
​​
​
​
I can stay informed about clinic updates by visiting the website.
Design Principle
Keep it simple.
Inform at the right moment.​​​​​​​​
Design Challenge
1. How might we build an "evergreen" IA?​​​​
​
2. How might we manage long list?
​
3. How might we get user's attention in the right way?​​​​
Design Challenge #1
How Might We build an "evergreen" information architecture (IA)?
Restructure
Information Architecture
Users only notice the information architecture when it's bad.
​
To build an awesome product, my bottom line is to make design invisible.
All users know is that they have a natural, efficient, and enjoyable digital journey.​​​ To achieve this, I restructure the website focusing on the
Organization System and Navigation System.
I use design patterns for user-centric design. The patterns are "evergreen" because they come from the ways people perceive and use digital interfaces.
Furthermore, I believe that IA should be designed for future scaling - to accommodate new content and data over time, and still serve to organize and hold everything without confusion. ​
​
ORGANIZATION SYSTEM
Keep Distance Short - Lean Strategy
​
Based on the MVP feedback, I've adopted a lean strategy, aiming to minimize the number of clicks required to navigate from the home page to the information page. My approach involves creating a flat site structure and reducing the levels of the site hierarchy as much as possible.
​
-
Categories of content that are clearly distinct from one another, with no confusing overlap.
-
Organization schema is complete - a place to find everything or put anything. Later in the process, IA should be able to expand to accommodate new data without things becoming confusing. ​​​​​​​​​​
Site Map BEFORE Lean
Site Map AFTER Lean
NAVIGATION SYSTEM
Clear Entry Points - Home Page Pattern​​​​​
​
Present only a few main entry points into the interface so the user knows where to start and not let them spend excess time being flustered, confused, or lost. Navigation, especially home page navigation, is a feature that has a long life cycle in the "evergreen" IA system.​​​​​​​
Design Pattern - Menu
​
-
No drop-downs on the navigation menu.​​​​​​​​​​
​
-
Trade-off: Longer navigation menu
Before:
Duplicated links that confuse users and it adds another layer of work for future update, which is not 'evergreen'!​​​​​​​​​​
Design Pattern - Cards
​
-
Display frequently accessed items as cards on home page for easy exploration.
Design Pattern - Footer
​
-
The complete sitemap footer makes the site more discoverable.
​
-
Accessibility: Static links within the footer that are easier to use with screen readers and they don't require fine pointer control.
Signposts - Subpage Pattern​​​​​​
Design Pattern - Selection Indicator
​
-
Color highlighted label on navigation menu.
Design Pattern - Page Title
​
-
Page titles are consistently positioned and styled across all subpages.
Design Challenge #2
How Might We manage longggg list?
'I don't want to scroll the page for minutes."
Technical Constraints
​
-
Loading times
-
Screen length
Design Lists -
It's all about details
We didn't realize the extent of information and how long the list is on this page until we lay them out. Working closely with the content team, we've refined the descriptions to make them as concise as possible while still conveying all necessary information. Despite these efforts, the list is still very long.
​
Users dislike endless scrolling, particularly on smaller devices like mobiles, and they expect immediate access to the information they need. They prefer to see an overview of lists upfront before selecting one or a few to explore further. We've explored various ideas on how to present a concise list while hiding the longer one.
​​​Exploration 1: Grid of Equals
Exploration 2: Titled Sections
Exploration 3: Two Panel Selector
Exploration 4: Accordion​
1
Grid of Equals
Using thumbnail grid to uniquely identify each list​
Short List: Image with headline
Long List: Info label with popover
2
Titled Sections
Giving each list a visually strong title and separate the sections visually​
Short List: Icon with headline
.png)
Long List: Open a modal panel
3
Two-Panel Selector
Consisting two side-by-side panels: a list of items and content of selected item​
Short List: Left panel
Long List: Right panel
4
Accordion
​Putting modules of content into a collinear stack of panels that users can close and open.​​​​​​​
.png)
.png)
Short List: Closed panels
Short List: Open secondary panels
Long List: Open panels
Grid of Equals
​​​​​
Idea -
Using thumbnail grid to uniquely identify each list.
​​​
​​​​​​
Why rejected -
Text data tends to be small and less important compared to the images which is on the contrary of our goal.
Titled Sections
​​
Idea -
Giving each list a visually strong title and separate the sections visually​​.
​​
​
Why rejected -
The modal panel (or otherwise a new page) is disruptive that cuts off all other navigation options from the user.
Two-Panel Selector
​
Idea -
Consisting two side-by-side panels: a list of items and content of selected item.​
​​​
Why rejected -
Lack the convenience of viewing multiple modules at the same time. Switching the item tabs back and forth can increase cognitive load.
4 Prototype Explorations​
Accordion
​
Idea -
Putting modules of content into a collinear stack of panels that users can close and open.
​​
​
Why accepted -
-
Hide content by default which meets our main goal - present a concise list while hiding the longer one.
-
Allow users to see more than one module at a time.
-
Clear visual hierarchy enables user to quickly scan the page for the information they are seeking and quickly navigate to the topic.
Chosen Solution Prototype
User Goal
​
I can find the clinic information quickly and effortlessly.
​​
​
​
I can stay informed about clinic updates by visiting the website.
Design Principle
Keep it simple.
Inform at the right moment.​​​​​​​​
Design Challenge
1. How might we build an "evergreen" IA?​​​​
​
2. How might we manage long list?
​
3. How might we get user's attention in the right way?​​​​
Design Challenge #3
How Might We get user's attention in the right way?
Solution?
When we discussed about the notification feature, the "pop-up window" idea came first to the PM and leadership team, and they were obsessed with it.
Early Stage Concept
Background Color: Contrast draws attention
Large Widow: Size matters
The expectation
No one likes to stop
During our research, we delved deeply to uncover real user behaviors, and the resulting data was quite surprising. For both options, only less than 20% users read the notification and then close the window. 15% of users subconsciously close the window but realized that they probably need to read what's going on. The majority - 65% of users just close the window without thinking. The average time users spent on the notification was less than 3 seconds.
​
Users often come to the site with a specific goal in mind, but then they hit a barrier that hides the content and force them to interact with something unrelated to their original intent before they can continue. Additionally, users often associate popups with negative emotions because of intrusive popup ads they encounter daily. ​
None of these lead to a positive feeling for the user. To build trust, it's crucial to create positive associations with our interface.
Finding alternatives
A better solution
Explorations
Iterate rapidly and quickly with various visual treatments.​​​​​​​​​
Banner
Notification on the side
"Message" alert
Well, I didn't use any of the above designs. The final decision was very close to the first "banner" option - I used the banner but instead of positioning it on the very top of the page, I placed it at the top of the user flow.​​​​​​​​​
Design Decisions
From Visual Style to Behavioral Patterns.​​​​​​​​​
​Visual Flow​
​
The notification is conspicuous because it's top-center where the user's visual flow starts.
​Visual Hierarchy​
​
The use of color and framing (outline) highlights the content which distinguishes it from other content.
Habituation​
​
It is placed inside the normal layout of the page, so the user will feel familiar with the site. Most importantly, it allows users to proceed with their tasks without blocking any content.
Deferred Choices​
​
It has a 'dismiss' button that's handy for users to quickly get rid of the notification and get back to the task. Plus, it helps us track the clicks when users see and interact with the notification.
The results
Turning it Around
Trust is vital when it comes to healthcare, and the new website's notification feature has earned mine. It delivers updates about changes and events with accuracy and transparency, which has reinforced my confidence in the VHC's commitment to keeping patients informed.
Bill T., VHC patient
Design handoff to Engineer
Design Documents
How we did you might ask?
Measure &
Celebrate Success
We focused on the success metrics
at the very beginning of the project.
​
​​​
And this is what we see after a month of launching the redesigned website:
- Less phone call inquiries.​
- Increase in the number of website view rates.
Phone Calls
1218
-42%
from the month before launching
Website Views
5,912
+100%
from the month before launching
Navigating the new website is a breeze! Finding information about the latest services has never been easier.
Tim G., VHC patient
The website has truly enhanced my volunteer experience. I appreciate how the website keeps me updated on events and impact stories, making me feel valued and inspired to continue making a difference.
Amy S., VHC volunteer & donor
Takeaways
​
The whole picture is always important
​
When exploring design options, I sometimes delved too deeply into the details. What I've learned is to take a step back for a clearer overview—constantly revisiting the problem statement and user goals. If we don't help users achieve their goals, we're not addressing the right problem.
​​
​
​
Articulate design decisions
​
Understand how to empower stakeholders by embracing their perspectives, especially when engaging with executives: it's crucial to present a visionary approach that illustrates short-term possibilities and long-term aspirations. When stakeholders recognize the thoughtfulness and intention behind our strategy, they are more likely to trust our vision.
​
​
​
Handoff design to engineer
​
It's definitely an iterative and constantly evolving process!
-
Never assume others can read your mind—more details are better.
-
I adjust slightly when working with different engineers but always encourage them to provide input.
-
Weekly demos are invaluable—I compare screenshots with the design, highlighting areas for improvement or correction.