Improve UH Maps Mobile Interaction

October 3, 2021


The University of Houston is a public university to help students pursue their learning, discovery, leadership, and engagement. This project was to find opportunities to present parking capacity, accommodate multiple location services, and enhance the overall experience.

University of Houston - Maps
Core Responsibilities

I am the lead UI/UX designer, responsible for designing and developing an interactive prototype and user interface, and to conduct user testing.


From start to finish, the project took approximately 3 months. Two to three teams of 10-12 people including representation from marketing, development, and map committee.

Additional Context

Pandemic started during the project. Director left the company shortly after the project began. No baseline metric on the existing UH maps. University was very decentralized.

Targeted Audience

All Students, Visitors, Faculty, Staff, Alumni, Donors, and Professionals.


The UH maps used a third-party software called MapBox that offered audiences the means to find different location services. MapBox was a developer's tool to build mapping, navigation, and search experiences within the UH campus. The mapping technology included the bootstrap framework as a graphical user interface (GUI). The GUI is one of the module components that reused on another platform.

The map had been published without any user research to determine usability, applicability, and possible improvements. Upon joining the team, my responsibility was to perform user research to identify user's objectives, assess UI issues, prototype, design, & validate through user testing.

Current UH Maps Framework
Old Map - UI
User Interface
Old Map - Options
Menu Options
Old Map - Garage Selected
Detailed Information


After I gathered and established the requirements and objectives, I took the following steps:

Current UH Maps Interaction
Old Map - UI
Initial Screen
Old Map - Options
Menu Options
Old Map - Options More
Additional Options
Old Map - Garage
Selected Option
Old Map - Garage Selected
Selected Location
Old Map - Garage Selected Detail
Detailed Information

I explored and navigated the maps to determine the questions to ask. I conversed with peers and random users, asking questions about their existing experience using the maps.

Define the Problem

Once I synthesized their feedback and available data, I identified patterns that needed to be addressed.

I determined 3 main objectives to solve based on the requirements and assessment I gathered:

Optimized UH Maps Interaction
New Map UI
Initial Screen
New Map Explore
Explore Options
New Map Parking
Parking Options
New Map Walking
Walking Options
New Map More
More Options
New Map Parking Options Pin
Selected Option
New Map Parking Garage List
Parking List View
New Map Parking Garage Detail
Detailed Information

I worked to find the best solution from sketching ideas, low-fidelity to the high-fidelity screen. Design considerations include:

User Testing

I determined the metrics, number of users, and performed user tests to validate the possible solution.


Student Participants


Scenarios & Tasks


I developed usability testing to gathered data using 5 participants and 5 tasks using Adobe XD (limited functionality), desktop/laptop instead of mobile devices, no baseline metrics to compare against existing UH maps.

Scenario 1
  • Goal: Locate options to eat on-campus
  • User Task: You want to find a place to eat on-campus, identify the options that are available. 
  • Task Time: Average: 56.6s / High: 180s / Low: 9s 
  • Pass: 80% 
  • Difficult Rating: 1.8 (1 easy-5 hard)
  • Observation: One person commented that the word “Explore” was not something she associated with food
  • Recommendation: Keep as is
Scenario 2
  • Goal: Find a list of parking garages on UH campus
  • User Task: You’re on the way to visit UH campus and needs a place to park. Find a list of parking garages that you can choose from.  
  • Task Time: Average: 19.8s / High: 45s / Low: 8s 
  • Pass: 60% 
  • Difficult Rating: 2 (1 easy-5 hard)
  • Observation: Color indicator related to district was a bit confusing. User did not understand the purpose until they saw the connection to the building name. Two users interpreted scenario & task differently between visitors and garages.
  • Recommendation: Clarify the difference between Visitor parking and Garage since visitor can park in the garage
Scenario 3
  • Goal: Identify the number of parking space available
  • User Task: Prior to getting to UH, you want to make sure there’s enough parking available in a garage. Identify the number of parking spaces available in a garage. 
  • Task Time: Average: 11s / High: 20s / Low: 7s 
  • Pass: 100% 
  • Difficult Rating: 1 (1 easy-5 hard)
  • Observation: No major issue
  • Recommendation: Keep as is
Scenario 4
  • Goal: Identify the menu option that will let you share your location with a friend
  • User Task: You’re meeting a friend on campus. You have arrived and are currently parked in a garage, but your friend hasn't arrived and is lost.  Identify the menu option that will let you share your current location with your friend. 
  • Task Time: Average: 44.4s / High: 84s / Low: 12s 
  • Pass: 60% 
  • Difficult Rating: 3.8 (1 easy-5 hard)
  • Observation: Everyone went to the “More” option and was looking to share from the list view rather than the detail page. Some users couldn’t find the geolocation button (menu covered it). One person mentioned no drag and drop pin to view and share location 
  • Recommendation: Add the share in the More option and list page. Add share & move geo button above the menu or below the search bar.
Scenario 5
  • Goal: Locate alternative modes of transportation available to you
  • User Task: You’re on UH campus and you need a way to get around other than walking. Locate information about different modes of transportation available to you. 
  • Task Time: Average: 13.2s / High: 26s / Low: 8s 
  • Pass: 100% 
  • Difficult Rating: 1.8 (1 easy-5 hard)
  • Observation: One user commented that the "More" option associated as a configuration or setting. One has identified the alternative transportation, but he was looking for shuttle transportation
  • Recommendation: Add Shuttle in the alternative modes of transportation.


Ideally, establishing the baseline metrics on existing maps would have allowed a viable comparison against the new solution, but time and resources were limited.

Transportation methods and terminology were the key improvements needed based on feedback. Shuttle, geolocation button, pin-drop view, and share options were the missing items user sought. Terminology used is also important issue that was uncovered. In this case, the "Explore" option was not something a user would associate with food, and the "More" button correlated as an additional configuration or setting.

Our analysis provided clear line of sight to gaps, which will help us navigate future iterations, provide evidence-based improvements, and formulate educated recommendations. By testing, we are able to minimize assumptions, focus on end-users' perspective. This process also help to inform our next step: extend UI/UX from mobile to desktop version.

Like What you See?
Let's Chat

    crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram