Girls on the run - MD
Usability Evaluation | Prototype | Testing | Reporting
What
did I do?
Usability Evaluation of GOTR - Central MD website via data gathering, prototyping, methods of evaluation and testing.
&
Gathered data, applied various evaluation methods to create prototypes, test with eye tracking tool & other techniques. Finally, prepared a full report & one-page summary poster.
Why
did I do?
The client thinks websites is tacky, with too much information at once and lacks feedback.
Efforts were made to evaluate the website using standard evaluation technique to suggest improvements for better usability.
Specs
about the project.
By
For
During
Using
Skills
Individual
Jan '17 - May '17
Adobe Illustrator, Tobii-Pro,
Heuristic Evaluation, Participatory Design, Interviews, Graphic Design, Reporting & Field Testing.
HOW
Problem Description
This Usability Evaluation project was part of coursework HCC - 729: Human-Centered Design. This was a semester-long project for an NPO Girls On The Run - Central MD. The main objective was to evaluate interface of their main Central Maryland division website and come-up with improvements and it's prototype. This project basically involves various evaluation methods like Heuristic Evaluation, Semi-structured Interviews, Field Study, User Testing & Participatory Design. This project was under the guidance of Dr Amy Hurst
The final outcome of whole evaluation process was supposed to be presented in a full report and One-Page Summary Poster. The report talks about the approaches used for evaluation, testing and prototyping the interface. The report was generated using MS Word and Adobe Illustrator was used to create One-Page Summary Poster.
Tasks:
-
Data Gathering and Competitive Analysis.
-
Interview: telephonic Semi-Structured Interview with consent.
-
Contextual Inquiry: End User Inquiry.
-
The User, Task & Env. Analysis: HTA Diagram, Persona creation.
-
Usability Aspect Report: Heuristic Analysis.
-
Participatory Design : Gap Filling & Constructive Discussion.
-
Prototype Evaluation.
-
Prototype Testing: Test Plan, Peer-Testing, Pilot Test, Revised Test, Results & Summary
-
Full Report & One-Page Summary Poster.
Process
Data Gathering & Competitive Analysis:
-
Gathered data about the client and its website. Website's purpose and basic functionalities were understood.
-
Analyzed client's competitors: What's working and what's not, what can be adopted and improved!
Contextual Inquiry:
-
The focus of the Contextual Inquiry is to observe how users naturally interact with the By Their Side website in order to evaluate the site in terms of ease of use, clarity of content, discoverability, and overall level of interest with the site.
-
2 End-User were observed during the process.
-
Observations were documented
-
Findings were documented: Likes, Dislikes, Usability Challenges & Things that work well.
Stakeholder Interview:
-
A semi-structured Interview for Stake-Holders was planned on basis of finding from Contextual Inquiry
-
Client/Stake-Holder was interviewed on a telephone with consent to get insight.
-
Interview was documented
The User, Task & Env. Analysis:
-
Based on Stake Holder Interview, User audience was narrowed down to 4 groups: Kids, Parents, Donor & Stakeholders/
-
5 important task we short-listed and documented step-by-step.
-
HTA ( Hierarchical Task Analysis ) Diagrams were generated for a clear understanding of the task.
-
2 Personas were created based on user analysis: Parent & Donor.
Usability Analysis Report: (HE)
-
Heuristic Evaluation (HE) is used to identify a product’s common usability issues so that the problems can be resolved, consequently improving the user’s satisfaction and experience and raising the chances of a digital product’s success overall.
-
A usability expert performed a heuristic evaluation against a set of heuristics to identify usability issues.
-
13 flaws showed up as a result of the evaluation.
-
Only 2 of the flaws are available in "Details" to maintain the privacy of client's data.
 HTA |  Persona 1 |  Persona 2 |
|---|
Participatory Design:
-
Participatory designing (PD) as defined by Nielson, is about having a participating end user in the design process. The designer interacts with a pool of end users who are accessible any point in time to clarify their doubts and get various feedbacks.
-
The prototype helps initiate the new perspective which designer might now have understood from end-user or clients initially.
-
Low-Fi Prototype was created for PD using Paper and Stick-Notes.
-
Site as-it-is was shown first to Users and then Users were asked to suggest better layout by switching position of sticky-notes.
-
The whole Process was documented with demographics.
-
Gap-Filing and Constructive Discussion were the major processes used for PD to come-up with a good solution.
-
Participatory Design helped in solidifying my thoughts as well got me user-centric perspective.
-
The evaluation was documented.
 MockUp-1 |  MockUp-3 |  MockUp-2 |
|---|
Prototype Testing:
-
Test Plan: To begin with a plan was created based on the information we have from above-mentioned processes. The test was design based on Eye Tracking Tool Tobbi-Pro. We would plot gaze-map and heat maps using this tool to figure out which portion of the prototype was first to notice and more observed, respectively.
-
Pilot Test: A pilot test was carried out before an actual test with an end user and which lead to fine-tuning of the test.
-
Revised Test Plan: Based on the results of test plan was revised.
-
Results: Heat-Map & Gaze-Plot were sufficient to provide a strong basis for the usability issues.
 Gaze Plot - 15S |  Heat Map - 15s |  Heat Map - 7S |
|---|---|---|
 Gaze Plot - 7S |  CS - 7S |
Full Report & One Page Summary:
-
Full Report: Full Report contains details of each process from very beginning as well as usability evaluation results. It includes improvement suggestion for current User-Interface.
-
One Page Summary: Is alternative for the full report summarizing important facts and outcomes othe f evaluation study.
Takeaways
Learnings
-
Learned Data Gathering & Analytical Skills - Sketching, Typography, Color, Grids, Layouts, Image Manipulation, Visual Language
-
Learned Various Interviewing Skills - Semi-structured Interview, Participatory Design, Think out loud.
-
Learned Evaluation and Testing - Heuristic Analysis, Eye Tracking tool, Think-out-loud.
-
Learned Reporting and Summarization - Documentation and Poster.
Challenges
-
Heuristic Analysis: Interconnecting the data sheets and relating the usability problems.
-
Interviewing & Data Gathering - Selecting end user, scheduling interviews and collecting information from users.
-
Documentation: Putting everything together in one theme.