This project analyzes the UX/UI design of ParkMobile, a parking solution application. The basis of this project is finding an app or website related to a particular community and discovering ways of improving upon the product in order to benefit the selected community. As a UCLA student, I actively use ParkMobile to park on campus and have found the application quite beneficial to myself. However, with this project, I wanted to find ways to make ParkMobile useful not only in select locations like college campuses, but more broadly to a larger population of drivers.
With this UX design analysis, I'd like to contribute to the vast community of drivers in Los Angeles, whether locals or tourists, with the desire to make driving and parking in LA less stressful, more accessible, and safer for those who dislike this method of experiencing the city. I'd also like to help more people find affordable parking options across the city and visit places they might otherwise not have explored. Although ParkMobile is available throughout the United States in over 350 cities, I am focusing on Los Angeles because of the well-known dislike toward traffic, transportation, and travel within this city — I have lived here for 3 years and do not mind it as much as others, and I believe that ParkMobile has played a role in this. As a result, I’d like to ensure that other drivers in Los Angeles are also able to make use of ParkMobile so that they may have the peace of mind, when traveling through the city, that they can ultimately rely on ParkMobile to help them with their parking needs, and hopefully, make all Angelenos’ driving experiences a bit better.
Early on in this project, I chose to exclusively analyze ParkMobile, though I did consider possible competitors for the application to be Google or Apple Maps and other existing parking applications like SpotHero, ParkMe, and BestParking.
(1) The first step in the design process was to conduct an heuristic evaluation, which can be found here.
- An heuristic evaluation is a method of identifying usability issues in a particular product, website, or software based on its compliance to existing usability principles. There are 10 heuristics and each can be categorized by a severity ranking to illustrate which issues should be prioritized over others.
(2) After finalizing ParkMobile as my app of choice post-heuristic evaluation, I conducted a usability test with a user who fit my target demographic based on age and currently being a college student. The usability testing video is embedded below and additional materials can be found here.
- Usability testing involves having a user test a system and provide feedback. The process of usability testing includes background questions, pre-test questions, three tasks, post-test questions, system usability scaling and product satisfaction questions, and demographic information. The test was conducted on my phone and screenrecorded using my laptop.
This analytical portion of the process was quite interesting to me because I was able to learn the established frameworks that UX/UI designers follow when evaluating a product. Additionally, it was a new experience for me to conduct a usability test and work directly with a user to understand their thought processes while using ParkMobile and mobile apps in general.
The next step was to conduct user research via contextual inquiry. The two observation methods I employed include participatory observation and ethnographic research.
- Ethnographic research simply involves observing how people in UCLA Parking Structure 2 seem to be paying for parking.
- I conducted participatory observation research with a friend who fits my target demographic details.
The entire contextual inquiry project can be found here. The participatory observation video is embedded below.
<iframe src="https://drive.google.com/file/d/1XywoY38WOYZZt3z06I9ryTEVZK_Zgyo9/preview" width="640" height="480"></iframe>This portion of the design project aimed to collect and understand users' thoughts regarding the app and the "parking world" in general in a more freeform manner, though still guided by me via a script and specific questions. I enjoyed asking more contextual questions about the users' painpoints with current parking processes and desires to improve certain aspects.
In this step of the UX/UI design process, I worked on the personas and scenarios I wanted to target with my redesign of the application. I chose 3 user personas based on people who I thought to be relatively young and drivers in the Los Angeles area. Next, I identified an issue that each of the personas might face and created a scenario in which ParkMobile would help them fix their issue.
After ideating three scenarios, I proceeded to wireframe them by hand. Wireframing is the process of drawing out portions of an interface with buttons, search bars, and other tools depicted; when several wireframes are connected, that creates a wireflow. I also tested my hand-drawn wireframe with 2 users.
Initial Wireframe Overview PDF (Downloadable)
Later on, while creating my high-fidelity prototype, I also recorded the wireframing process which represent components of the larger wireflow.
Paying for Parking in 2 Zones
Closing a Notification
Getting Directions to LAX
The purpose of creating and testing this low-fidelity prototype was to verify whether or not the features that I created were helpful for and usable by the target user demographic.
Low-Fidelity Prototype & Testing
The purpose of creating this high-fidelity prototype was to visualize the functional and UX/UI-related improvements I wanted to make to the ParkMobile application in a format that users could easily test.
Interactive Prototype
Complete information about the high-fidelity prototyping process can be found here.
Throughout the research and designing process, I made various small changes here and there. All of these changes are documented at the ends of their respective sections — for example, the "High-Fidelity Prototype" section above, in the link with all information, has a description of how the wireflow for Task 2 changed significantly after I did a low-fidelity prototype test with one of my classmates.
After submitting my high-fidelity prototype, I went back and installed a plugin in Figma that would allow me to see where the colors I'd chosen were not fully compliant with accessibility standards. The plugin is called A11y - Color Contrast Checker:
This plugin checks the color contrast ratio of all visible text in a frame, and it provides feedback on whether it meets WCAG’s AA and/or AAA level compliance. It also provides color sliders that allow users to adjust the colors and understand how the corresponding contrast ratio changes in real-time.
Using this plugin, I edited:
- The "Find Parking" buttons on the "hollywoodpantages" screen in Interaction 2.
- The Arrived notification on the "arrived" screen in Interaction 3. For both of them, I increased the color contrast and turned the buttons and notification a much darker shade of green based on the following standards. While I was simply taking the standard ParkMobile green and using it for most of the design elements, it seems that for certain things like buttons or areas where the user must click, the color contrast should be extra pronounced.
Normal fonts (< 19px)
- AA compliant: 4.5:1
- AAA compliant: 7:1
<iframe src="https://drive.google.com/file/d/1S_dW755Rndb66zhFQVVPvdmzaInrnhWu/preview" width="640" height="480"></iframe>Large fonts (19px+)
- AA compliant: 3:1
- AAA compliant: 4.5:1
I really enjoyed and learned a lot from this UX/UI Design course. I came in with "product" knowledge, having heard of user research, certain types of shadow research methods, etc. but not really any hands-on product design experience. To me, the most interesting components of this project were definitely conducting user research like usability testing, contextual inquiry, and low-fidelity prototype testing because to me, the application is much more about the user experience than its technical capabilities. I definitely learned to keep an open mind during the research process and to incorporate edits into my work, especially when suggestions came from people with much more UX/UI experience than I have. I also learned that it's actually good to test out technical tools and not do things by hand (* ahem * low-fidelity prototype) and enjoyed my time using Figma. Overall, I'd like to encourage others to take this course and to say thank you to Prof. Cho for making it engaging and manageable for people without a design background!