UH Mobile Maps

October 3, 2021


The University of Houston is a public university to help students pursue 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 was 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. Three teams of 10-12 people represented from the marketing, IT dept, and map committee.

Additional Context

The 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 developers the tool to build mapping, navigation, and search experiences within the UH campus. The mapping technology works with the bootstrap framework as a graphical user interface (GUI) to bridge the additional interaction between the user and its technology.

Upon joining the team, the map was published without any user research to determine its usability, applicability, and improvements. My responsibility was to plan and perform user research to identify user 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 the requirements and objectives, I took the following process to uncover any issues and opportunities:

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 then conversed with peers and random users, asking questions about their existing experience when using the maps.

Define the Problem

Once I synthesized their feedback and available data, I identified issues that needed attention to solving the problem.

I determined 3 areas 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

Ideation & Design

I constructed to find the best solution from sketching ideas, and low to high fidelity screens. Design considerations include these subjects:

User Testing

I determined the metrics and quantity of users and performed user tests to validate the potential solution.


Student Participants


Scenarios & Tasks


I developed a usability testing strategy to gather information using five participants and five tasks using Adobe XD interactive prototype on a desktop/laptop instead of mobile devices. Again, there were no baseline metrics to compare against existing UH maps, but we now had a data point to guide the course of action and compare future iterations.

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 need 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. Users 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 spaces 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 the 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 is 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 main improvements needed based on feedback. During our user testing, our users frequently looked for a shuttle, geolocation buttons, pin-drop view, and share options. The terminology used was also a prominent issue to be re-evaluated. 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.

My analysis provided a clear line of sight to gaps, which will help us navigate future iterations, provide evidence-based improvements, and formulate educated recommendations. I minimized the assumptions by testing and focused on the end user's perspective. This process aimed to help us make an informed decision on our next step: extend UI/UX from mobile to desktop platform.

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