<Home

CDC Re-Imagined

Re-designed the "COVID- 19" section of the Center for Disease Control & Prevention (CDC) to improve a few broken User Experiences, including navigation.

CLIENT UC BERKELEY CLASSROOM PROJECT

MY ROLE RESEARCHER +POTOTYPEING+PROJECT MANAGEMENT

Overview

This project was initiated during the early stage of the COVID-19 pandemic. We studied the CDC's website architecture, navigation, and graphical interface of the COVID-19 section. Our goal was to enhance visitor's experience through research on user's needs and wants. In the end, we re-design the RWD experience including navigation.

Selecting Right User Group

User path study of web content

Our research started with studying the content of the website. We also studied the user's engagement and how they process the site's information.

— We conducted two sets of user interviews. First, started with understanding the user path.

Initially, our assumption was to include users from different age groups in our research. However, we quickly evolved the idea to stay focused on the users who are impacted most like students, elder adults. The idea here is to design objectives and create targeted research.

— The second set of interview focussed on two broader criteria:

Why the user visits the website, and Observing how users navigate through pages.

Annotation: Usability & heuristic analysis

The following are the concise pointers we looked at while doing usability and heuristic analysis.

• Consistency in elements: Easy for users to follow platform conventions means whether different words, situations, or actions.

• Aesthetic and intuitive design: Creating a balance between information shared and how it is processed by the user. Also avoiding irrelevant information.

• Preventing error: We documented each of the errors carefully while interviewing the user.

Navigation analysis

We analyzed the current navigation to analyze how users navigate through the website for a specific task. Our observation helped us to hone critical user flows and information architecture. We also ran the navigation test with users with a series of current site pages to observe the "hit zones".

Developing understanding information architecture of current CDC website

We studied current content categories then started organizing navigation by putting them in a familiar location. We also minimized the COVID-19 nav-section from four to two broader menus categories and further regrouping the items.

Here is our methodology executed via three re-structuring rounds followed by grouping.

Information Architecture

Card sorting and organizing the information

We started with card sorting techniques to create information architecture. In this process, we organize topics into distinct categories that make sense.

— Our initial blueprint focussed on displaying card sorting content visually so that it shows the blueprint of the navigation design structure.

— Studies provide user insight for website material and intuitive content grouping.

— It also provides a great foundation to create navigation elements.

Navbar Prototyping

Initial navbar prototyping

After card sorting and developing an initial information architecture (IA) we started creating visual content for prototyping. Navigation plays a pivotal role in how users interact and use our website. IA prototyping is a route user can get from point A to point B in the least frustrating possible way.

Responsive Layout Grids

We moved to the next step to create layout grids to define structure, hierarchy, and rhythm in the design. We followed column grids for web applications. Here grid splits the frame into evenly spaced vertical fields and further objects are aligned here. These grids are typically made of 12 columns which are further divided into halves, thirds, fourths, and sixths to design a responsive screen for various devices

Creating visual balance for device mediums

Further, we started experimenting to make the responsive design to create fluid design layouts that expand and contract to fit the device’s viewport. Typically CSS media queries are used to style target devices such as display type, width, height, etc.

Conclusion & future opportunities

Key learnings

• I learned to experience through shuffling elements around the page to ensure a usable experience across devices with various screen sizes.

• Managing the content when transitioning from a bigger screen to a smaller screen or vice versa so that users can easily glance around the page without scrolling much.

• I developed a better understanding of navigation, gesture, form, and touch.