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


Participatory Design

Heuristic Evaluation

Task Analysis

Persona Creation

Think Aloud


Usability Testing

Document Review


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


  • Very low image/text ratio

  • No videos, figures, and charts

  • Informative and persuasive language

Competitive Analysis

Competitive 1.PNG
Competitive 2.png




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


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



  • Easy navigation

  • Informative content


  • Small text font size

  • Poor usage of visualizations

  • Low quality images

  • Long navigation bar



Semi-formal interviews in interviewees' offices


With who

  • institute senior policy analyst

  • two health researchers as potential users to

With who


  • 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


Task Analysis


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


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


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


  • 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


& natural dialogue



Speak users'


Minimize users'


Clearly marked


Usability Criteria

Help &



Good error messages

Prevent errors

UAR example

Heuristic Evaluation.PNG

Participatory Design/Low Fidelity Prototype


  • Involving users in the design process as collaborators

  • Understanding users' preferences in action


  • 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.

paper prototype.png

Think Aloud


  • Understanding what users think while they interact with the system

  • Allows quick fixes


  • 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