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 +POTOTYPING+PROJECT MANAGEMENT
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.
We discovered the user's difficulties in gathering information while using the website. Since over CDC website has data-rich content, we found challenges in prioritizing the information tag. We also found COVID- 19 section is a little busy, overwhelming, or just has too much information.
Addressed responsiveness of the CDC website including complex global navigation and section-specific categorization.
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.
User group interview
Participant interview notes
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.
Annotation: Usability & heuristic analysis
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.
COVID- 19
Symptoms
Cases & impact
High risk group
Social issues
General news & info
Other pandemic situation
All on-going pandemic
Social issues
Outliers
Here is our methodology executed via three re-structuring rounds followed by grouping.
Round 1: Analyzing current home page of the website
Round 2: Brainstorming and creating categorization
Round 3: Navbar categorization and brainstorming for creating navbar content.
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.
Analyzing card sorting from round 2 and further developing organization of information
Analyzing card sorting from round 3 for wire-framing.
Site navbar for lo-fi testing.
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.
First navbar prototyping variation
Second variation (Navbar prototype): Copy variation
Second variation (Navbar prototype)
Another variation of navbar
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
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.
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.
