top of page
la cover.jpg

Project Overview




Focus and use evaluative design research skills to analyze the strengths and weaknesses of an website.

Goal

Explore ways to benchmark and evaluate interfaces. Understand preparation, execution, and synthesis for evaluative studies. Gain experience using remote research tools. Practice presenting findings in the form of a research report.

Tools

UserTesting.com, Google Slides, Google Sheets, Google Docs, Adobe Photoshop

Skills

Competitive analysis, secondary research, study design, moderated usability testing, unmoderated usability testing, interviewing, usability heuristics analysis, writing

Course & Instructor

Design Research
Purvi Shah

Timeline

5 weeks
Spring 2020

This is my slide deck presenting final research report

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Problem Statement

The goal of the site is to provide information about public transportation, and popular locations in Los Angeles. Users can check this site for transportation information and instructions.

The purpose of this project was to understand what IS and ISN’T working well about existing services, coming up with new data to understand who we are designing for and what we would potentially plan on designing.


It allows us to validate design ideas with the users and design more meaningful solutions for them.

Revision - Presentation - Betty Deng - O

Competitive Analysis




I collaborated with a classmate who was researching the website 511 and we compared LA public transit with 511. Both of the sites aimed at helping the users to get information about local transportation.

We wanted to know:

  1. Is this an independent website or a dependent page?

  2. How do users use this website?

  3. What are they doing well?

  4. What could they be doing better?

  5. What are people saying about them?

  6. What can we learn from them?

  7. What are the goals of the two services?

  8. What are the business objectives of the service?

  9. Who are the customers or users they want to serve?

  10. What is the most important goal those customers have that might be met by this service?

  11. What tasks do users need to accomplish to meet this goal?

Here are screenshots of the Google Sheets of our competitive analysis.

I found that compared with 511, LA public transit did better in visual design. T


The menu and navigation in 511 are much more helpful than LA public transit.

Heuristic Analysis

#1: Visibility of system status

The system doesn’t always keep users informed about what is going on. The tags lead users to a confusing searching page that has too many results.

#2: Match between system and the real world

The site leads users to other secondary websites like https://www.metro.net/, which works similar to Google Map.

#3: Error prevention

There is no error prevention (redo and undo). When users accidentally click on something wrong, the only way to go back is to reopen a new page of this site.

#4: Recognition rather than recall

Because all the information is listed on one single page, users need to take time scrolling down and memorize the location of the paragraph they want.

#5: User control and freedom

It doesn’t support undo and redo. Moreover, it is hard to go back to this page because The new tab directly covers the original page.

#6: Consistency and standards

The placement of pictures on this page is misleading. Each picture should be placed under the subtitles, but not above them.

For example, the main picture of the Metro Rail System is placed above the Subtitle. It might give the users an illusion that it belongs to the previous paragraphs.

#7: Flexibility and efficiency of use

The transition between different websites takes a bit of time. But in general, it still allows users to tailor frequent actions.

#8: Aesthetic and minimalist design

The colors (black, white, purple) and visual elements are clear and simple. The whole page is like a blog post, which fits the target users, tourists.

#9: Help users recognize, diagnose, and recover from errors

Error messages are expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

#10: Help and documentation

There is enough information on this page but it might be too much for a first-time user. It could be better if the contents are separated into different pages by a navigator.

Risks & Successes

Risks

  • This website is not a finished product. It has many incomplete functions and there are no error preventions for users. Users are likely to click on some links and fail to return to the original page of the site.

  • The information is comprehensive but too much for first-time users. When all the information is on the same page it becomes very text-heavy. The information is not classified, and there is no menu as a guide. Users might quickly exit the page during browsing.

Successes

  • The large blue banner on the top would leave users a deep impression. 

  • The visual design of the website is clean and it makes users comfortable to stay and read.

Usability Tests

I used UserTestin.com to do the three non-moderated testings.
I also did five in-person moderated testings. 

I wanted to know if users could get the information they need with this site, so I conducted 3 usability tasks asking them to find certain information on this page.

TASK #1: 
Find out how much it cost for a 1-Day Pass.


TASK #2: 
Download Metro Red Line Map & Schedule.


TASK #3: 
Answer the question: how many lines does the Metro Rail System have?

Through Usertesting.com, I set the requirements for participants. Participants need to have English reading skills before they can participate in this test.


After the three non-moderated tests, I watched each video recording and made a detailed record in Google Sheets. I also asked them to explain what impressed them, what they liked, what they didn't like, and what they wanted to change. 

Moderated Testing Notes.png

These are photos of the notes I took during the moderated testings

When conducting moderated testings, I sat next to the testers and observed how they reacted when they used this website to complete tasks. I took notes at the same time, recording their frustrations. In the end, I asked them questions to rate the reference value of this website. By observing the testers' completion of tasks and their subjective evaluations, I got five results of moderated testings.

When I summarized all the test results in Google Sheets, I paid attention to using different colors to categorize the feedback given by the testers.


  • I use red to symbolize the failure to complete the task and the negative evaluation.

  • I use green to represent the successful completion and the merits of the site described by the tester.

  • Finally, I use yellow to represent neutral, which means that the tester spent a certain amount of time completing the task, but in the end, the person can still get the required information and achieve the goal.

Classifying these data according to their positive and negative nature, I became more efficient in the final summarizing.

notes%20screenshot_edited.jpg
notes%20screenshot_edited.jpg

Results Analysis

Graphs & Diagrams






I synthesized the data of all the testings and then I made the following charts.


The first two charts visually reflect the number of people who successfully completed each test task.


The last two word clouds summarized the testers’ positive and negative comments on La Public Transit. Those words were selected from their quotes.

Summary

Key findings & Recommendations





Key findings


  1. Most of the users do not want to spend time reading long paragraphs. They would miss information without recognizing it.

  2. It is an efficient strategy to use colors to attract users’ attention.

  3. When there are no interactive menus or navigations, users tend to rely on the buttons or icons that appear at the top of the page.

Recommendations

  1. Redesign the navigators and the search bar on the top. Make both of them functional, never lead users to a bunch of unrelated results.

  2. Separate the information into different pages or chapters by an instructional menu.

  3. Using colors to indicate the links and make them obviously different from the basic text to show they are clickable.

  4. Remain the nice visual design including the colors, fonts, and line spacing.

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Revision - Presentation - Betty Deng - O

Reflection

This was the first time I had completed a large-scale design research. The most meaningful thing is that this project allowed me to focus on deep investigation and research.


I gradually learned to process the data into useful formats, making sense of the data and distilling data into insights. As an IxD designer, these basic investigative capabilities are indispensable. They help us to better understand the needs of users through in-depth research on how users experience and use the product.

After this valuable study, I will use my investigative skills in future projects to make the solutions I design more practical and meaningful for my users.

bottom of page