Brief

We worked with The Ocean Observatories Initiative (OOI) to improve the overall experience of using their data portal site. The site allows users to access data, analye, plot and download the data for their own use. However, it suffers from a set of usability issues. The project could roughly divide into four parts: survey, usability evaluations, sketch and wireframing, and usability testing. In the end, the new design improved information architecture, look and feel.

Duration

4 months

Team

1 UX Designer, 1 Poject Manager, 1 Developer

Create and Distribute Survey

At the beginning, in order to roughly understand users’ feeling and needs of website, we created a survey on Qualtric and distributed it after OOI workshops, including of biology and geology sessions, which were held for users learning website system.

There were four main sections of the survey, including demographic information, website usability with five-scale rating system (strongly disagree- strongly agree), feedback of three main pages of website (homepage, data access page and plotting page) and general advice.

After distributing survey, we got several responses and analyzed them afterward. Generally speaking, users had negative experiences using the website, which included inefficient workflow, poor navigation and insufficient instructions and guidance. Other issues were like the inappropriate color scheme, unreliable data plotter, unexpected pages orientation, unclear annotations on the plotting graph.

Heuristic Evaluation

Developed by Nielsen in 1994, there are 10 principles used in heuristics evaluation to help identify usability problems in a holistic view. Hightlights were the most serious problems.

1. Visibility of system status
   • Keep informing users status and provide appropriate feedback within reasonable time.
2. Match between system and the real world
   • Speak the users’ language, and make information appear in a natural/logical order.
3. User control and freedom
   • Support undo and redo
4. Consistency and standards
   • Keep consistency of words, design to identify the same thing.
5. Error prevention
   • Provide good error messages and avoid tricky choices
6. Recognition rather than recall
   • Make objects, actions, and options visible.
   • User should not have to remember information from one part of the dialogue to another.
7. Flexibility and efficiency of use
   • Allow users to tailor frequent actions.
8. Aesthetic and minimalist design
   • Dialogues should not contain information which is irrelevant or rarely needed.
9. Help users recognize, diagnose, and recover from errors
   • Expressed in plain language (no codes)
   • Precisely indicate the problem and constructively suggest a solution.
10. Help and documentation Provide help and documentation.
    • Help information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

Cognitive Walkthrough

We used another usability method, Cognitive walkthrough, to evaluate the website. We asked four questions in each step to help us identify usability problems.

1. Will the user try to achieve the right effect?
2. Will the user notice that the correct action is available?
3. Will the user associate the correct action with the effect to be achieved?
4. If the correct action is performed, will the user see that progress is being made toward solution of the task?

Task

Find the changes of seawater PH value of the Oregon inshore surface mooring with the seafloor multifunction node in the past three year, and make a line plot and download as PNG image.

Steps:

1. Search and selects the instrument “Seawater PH”
2. Find “Platform Name: Oregon inshore surface mooring” with “Seafloor multifunction Node”
3. Plot the data
4. Select time for X-axis, PH for Y-axis
5. Select time period and line graph
6. Plot data and download as PNG image

The results found that users would get confused starting from step 3.

Wireframing

The current design of OOI data portal website has basic structure, there are many function provided to meet different users’ needs. However, after the evaluation, its design need to be modified to reach a more delicate level. Based on the findings from heuristic evaluation and cognitive walkthrough, and the feedback from users’ survey, I created a new visual design for the website. Some of blue colors used as the theme color were from current site. The design direction focused on providing clear look and simpler navigation to users.

Usability Testing

We ran an usability testing on a workshop held by OOI, which focused on marine chemistry. Moreover, we picked one of use cases created in Cognitive Walkthrough, and tested users with current website and new design prototype through paper prototyping. In order to let users get used to “think aloud” activity, we set up an exercise first. We also did pre-interview and post-interview to know users’ feelings, workflow and suggestion. Overall, it took 30-40 minutes in the process. In the end, there were 11 users completed the test, including 8 novices and 3 experienced users. And 3 of them were undergraduate students who had no oceanography knowledge, 6 of them were workshop participants and 2 of them were OOI data team members.

After doing the usability testing, the results from novices and experienced users were similar. Identified problems can be divided into three main categories:

• Poor look
• Poor navigation
• Unorganized Content

For the new design, users overall thought it was cleaner and simpler to navigate, however, users had different opinions on new homepage because it simplified too much information.

Final Design

Change Look & Feel

Improve Information Hierarchy

Summary

In this project, we identified many usability issues on the website through a survey, usability evaluations and an usability testing. The goal of new designs was to provide clear instruction, simple navigation and clean layout. In the end, we changed the layout of homepage, arrays page and plotting page to refresh users’ eyes, and reorganized the data to improve users’ working efficiency.