overview

Our client (www.sfdph.gov) was a website maintained by the local government dedicated in protecting and promoting the health of the city of San Francisco.

The website was created 15 years ago, since then only the content has changed, and it is managed with very limited resources. The design patterns are very outdated. SFDPH has grown over time, using many different templates, and now the concern is that they don’t ‘family’ together and users find navigation confusing. Overall, the current look of the homepage does not serve as a trust creating factor during the first-impression.

Role
UX Designer: team of three, alongside 2 other UX Designers.

Project Manager

Timeline
Initial project: 2 week sprint

Methods
Information Architecture, Content Strategy, Competitive/Comparative Research, Heuristic Evaluation, Usability Testing, Wire-framing, Prototyping, Visual Design

Challenge

Total Overhaul

As a step toward converging many sites to one consistent look and feel with a reduced set of templates, SFDPH needed a website analysis and overhaul consistent with the new SFGov template. The original website suffered from extremely high bounce rates and a confusing navigation.

SFDPH wanted a full evaluation of the experience, recommendations for improving it, and an overall solution on making it easier to use.

Design Process

Research. Ideate. Information Architecture. Design. Test. Iterate.

Our design process began with researching and understanding the reasons why users were bouncing and what the website was being used for to begin with. We then collaborated as a team to redesign the content and information architecture in order to create a better experience for their users. I led creating final visuals for our delivered prototype.

Research

Users can’t find what they are looking for

To determine the redesign goals, first we got to know the website, our client and the users (& their needs). Here are some of our main findings:

• The information architecture and the applied navigation systems are confusing, navigation choices are not logical.

• The main users flows are not intuitive and the critical paths are not clear.

• The language is very high level and hard for users that have a lower reading level.

• Link names and button labels don’t match the content and sometimes lead to dead pages.

• The design of links is not consistent and it is not obvious what is clickable.

• Accessibility is an issue, for example the contact information on the homepage consists of three images instead of text.

• There are many layers of inconsistent menus making it very difficult for the user to navigate and easily become lost.

Website Analytics

Why was the old website underperforming?

To answer this question I started by analyzing the web analytics data. My analysis revealed that:

• The site is mainly used on mobile devices. This means users are restricted to the amount of internet they have. We need to be aware of using large photographs and videos that will take up a lot of user data (constraint).

• New visitors were able to find the website but they were not staying long.

• The website had a high bounce rate and low engagement metrics.

• Traffic sources, search keywords, and landing page reports provided insight into the kind of information visitors were looking for and helped to identify the website's content gaps.

• The sites most viewed pages were deeply buried in deep hierarchies making it difficult for the most common users to find what they need.

• Mobile reports showed that almost half of users were viewing the site using a mobile device. Being that the site was not responsive and did not render correctly on small screens, this was a significant usability problem.

Facilitated User Testing

What do the users think?

We recruited users who met the website’s target demographic to test the existing website. Users were given 2 specific tasks. We tasked our users with finding the 2 most visited pages on the SFDPH website so we could understand the frustrations of the most typical user.

Top insights:

• The site contained too much text and was overwhelming to look at.

• 4/5 users gave up before finishing the tasks because they could not find what we asked them to.

• Users were confused and frustrated with the navigation. They were especially frustrated that the navigation constantly led them off of the website or to a 404 page.

• Users needed a faster and more navigable way to find what they needed.

• The content of the website does not reflect the terminology the users expect.

Information Architecture

How can we make our website less confusing and easier to use?

We needed to make sure that the information is set up in a way that makes sense to the SFDPH users so they can find what they need quickly and easily. Otherwise, they’d most likely leave your site and go somewhere else (high bounce rates). According to content strategy best practices we wanted to narrow the top-level menu navigation down to 5 categories. So, we conducted an open card sort with 20 users where our users were given 40 secondary links and asked to organize them into 5 categories with labels and titles.

The results of the card sort helped us choose our top 5 menu categories: Programs & Services, Wellness, Medical Care, Permits & Forms, and About. It also helped us sort content and completely remodel the Information Architecture.

Heuristics & Design Patterns

Using standard design patterns to reduce cognitive strain.

If people are already familiar with how objects on an interface will act, it saves them from thinking about what to do next. Reducing the need for people to think too much is important, if you would like them to stay on the website and keep them as users. After redesigning the websites information architecture we wanted to continue to make the website as easy to navigate as possible. By using common heuristics and design patterns we are able to eliminate any extra thought and decision making making it feel natural to users. Since the current website had almost no method of navigation we researched 50 content heavy websites and found that they all used similar cues and heuristics. Here found that they were all using:

1. Breadcrumbs

2. A table of contents

3. Sorting/filtering options

4. Icons and Images

5. User Feedback section

LOGICAL FLOW

Finding the easiest path for our users

I mapped out the flow model for typical user paths to accomplish major tasks. It was important that the user was able to get where they needed to from different paths. It was necessary to give our users many paths to complete a task on a content heavy website. From our research we discovered that users take different paths in order to complete a task. This showed us, that users do not all think the same.

Sketches

Ideation Phase

Our team rapidly generated ideas, pulled out common threads and successful features. In this phase we established the main navigation and discovered how to implement design heuristics using the SF.gov template.

New design system

Deconstructing a website from the bottom up

Now that we figured out a way to reorganize this content heavy website we knew that our client wanted the site to be needed follow the same template and style guidelines as SF.ORG. Our client did NOT have access to the templates or style guides so I had to deconstruct the SF.ORG website to create them. The site was brand new and only consisted of a couple primary, secondary and tertiary pages. From the very small amount of information I was given I was tasked in finding a way to fit our content heavy website into a someone else’s minimalistic design.

Style Guide

Understanding accessibility

I deconstructed the SF.gov website and created a style guide so that we could begin designing our website. Without knowing why SF.gov made any specific design decision, I began pulling color, style and typography. While I was deconstructing the website I started to notice they were not always practicing typical and accessibly design patterns. Our client made it very clear that the website should be easy to read and that it needed to be accessible to all people.

VALIDATION

Saving users time

One of the main reasons people were bouncing from SF gov was that it took too long to complete a task. We asked 5 users who had never seen the original SFDPH.gov or our redesign to complete the same task. We performed these tests with our desktop and mobile prototypes. The redesign saved users 4min 30sec on average and cause much less confusion and frustration.

Final Design

Reflection

Getting out of my comfort zone

This project was particularly challenging for me because it challenged me to get out of my comfort zone. Coming from a Graphic Design background, I was used to creating my own designs. In this case, we were asked to reorganize and redesign a content heavy website while following the design guidelines of a preexisting website. Our client did not have a template, style guide or any information about why the SF.GOV design decisions were made. In order for us to use their template I had to deconstruct the entire website so that we could model our sight after theirs.

I am very proud of this project because it pushed me to get out of my comfort zone and understand the importance of Information architecture, user feedback, and content strategy. The redesign was well received and our client plans to begin implementing our design within the next year.