Hilltop Institute Website Redesign & Usability Testing

 

Background: The Hilltop Institute at UMBC conducts research and evaluate health and wellbeing of vulnerable populations with a team of clinicians, attorneys, social scientists, and programmers. Hilltop institute performs health system research such as public health and Medicare on behalf of local and government agencies, organizations, and foundations. 

 

Website: hilltopinstitute.org is the organization's main web presence.

Redesign goals

  • A more modern look

  • Easier desired information access for all type of users

  • Ensuring the usability of the interface

  • Persuading government agencies, foundations, and nonprofit organizations to delegate their research to Hilltop Institute.

What I did

Document Review 

Competitive Analysis

Contextual Inquiry

Interviews

Participatory Design

Heuristic Evaluation

Task Analysis

Persona Creation

Think Aloud

Prototyping

Usability Testing

Document Review

Purpose

identifying the content of the existing version of website and its type of language.

Findings

  • Very low image/text ratio

  • No videos, figures, and charts

  • Informative and persuasive language

Competitive Analysis

comp3.png
Competitive 1.PNG
Competitive 2.png

Purpose

Design

Inspirations

observing similar institutes (according to language, audience and websites' purposes) to obtain  design inspirations.

  • More use of pictures and images on home page

  • Use of Information Visualization techniques

  • Familiar concise terms in navigation bar

Contextual Inquiry

How/Purpose

observing two potential users interacting with the existing website interface to identify what does/doesn't work well with existing design.

Findings

Strength

  • Easy navigation

  • Informative content

Weakness

  • Small text font size

  • Poor usage of visualizations

  • Low quality images

  • Long navigation bar

Interview

How

Semi-formal interviews in interviewees' offices

How

With who

  • institute senior policy analyst

  • two health researchers as potential users to

With who

Purpose

  • identify the goals of the redesign

  • identify the target audience characteristics

  • identify users' first impressions 

Questions from client were focused on

Institute's characteristics 

and its mission

Target audiences' characteristics

Website goals

Any aspirational website

What must be added to / removed from / or maintained on the UI

The expected output

of this project

Design preferences

Questions from users were focused on

What they liked about the current UI

What they did not like about the current UI

Their first impression of the UI

Preferred changes to the UI

Persona Creation

Personas are created to  get an idea about the prospective users based on the information gathered from the client over the interviews

Persona.PNG
Persona2.PNG

Task Analysis

How

Five high level tasks were chosen to apply textual hierarchical task analysis

Purpose

Shows the number of steps and amount of effort users must take to do each task and achieve the related goal

Task Analysis.PNG

Heuristic Evaluation

Purpose

Identifying both positive and negative aspect of the existing UI from experts' standpoint

How

  • By two independent evaluators (i.e. me and one other expert 

  • Based on Nilsen’s ten Heuristic criteria in Usability Aspect Reports (UARs)

  • Individual UARs were then aggregated into a final UAR including severity ratings and solutions

Simple

& natural dialogue

Consistency

Feedback

Speak users'

language

Minimize users'

memory

Clearly marked

exits

Usability Criteria

Help &

Documentation

Shortcuts

Good error messages

Prevent errors

UAR example

Heuristic Evaluation.PNG

Participatory Design/Low Fidelity Prototype

Purpose

  • Involving users in the design process as collaborators

  • Understanding users' preferences in action

How

  • Brainstorming with the user about major usability problems found in previous steps

  • Use of "Gap Filling" technique in brainstorming to fill the gap between the current state and the goal state

  • Paper prototyping to create an interface using papers, sticky notes, and tapes.

  • The participant explained his ideas and, I applied them on the paper prototypes.

Think Aloud

Purpose

  • Understanding what users think while they interact with the system

  • Allows quick fixes

How

  • Defined five tasks based on the usability issues I found

  • Recruited two participants

  • Asked them to do the five tasks on the paper prototypes while they think aloud

  • Redesigned the paper prototypes based on the think aloud findings

High Fidelity Prototype

High fidelity prototypes were made using Axure to create an intractable interfaces running on digital devices.

There were 2 iterations of the prototypes and that helped to fix the obvious errors in the design and refine it.

high fidelity.png

A/B Testing/Usability Study 

  • I Prepared a test plan to describe the procedure, research questions, all the required materials, equipment, and steps to do a usability study.

  • The test plan was designed based on A/B testing principles to compare the prototype with the existing UI.

  • During a usability study, I asked users to do specific tasks defined by prepared study protocols. Some metrics (e.g. time, number of failures, number of successes, etc.) were measured to answer defined research questions.

  • I ran a pilot study to ensure the study design works well in answering the research questions.

  • Then, I revised the test plan based on issues found in the previous step.

  • Four participants were recruited for the main study 

Main findings comparing the prototype with the existing UI 

Higher task completion rate on the prototype compared to the current UI

Lower task completion time on the prototype

Higher usability scores achieved for the prototype