Parking in DC

A carefree parking experience

Overview

  1. As DC’s largest parking service, Colonial Parking still doesn’t have an app. Its website doesn’t have a modern UI, and is extremely difficult to use on a phone.

  2. There’s no pre-booking feature on the site. Parking lots near university campuses are always crowded. Students will be late for not being able to find a parking spot.

  3. The company reached out to Georgetown’s professor who teaches UX Design, saying they are interested in developing an app and offering discounts to students.

Problem:

 Solution:

Design an easy-to-use app for Colonial Parking on which students can book a parking spot in advance & receive discounts.

Design Process

To better understand the user needs for gardening products and services, I conducted a user survey with different demographics.

Research

The insights I gained from surveys and interviews leading up to the persona. The main goal was to display those patterns and pain points, which allowed me to further empathize with users.

Persona

The user stories were then converted into user flows, to illustrate how the user would interact with the product and accomplish those goals.

User Flow

Wireframing

Initial Sketches on Miro

Low Fidelity Wireframes for User Testing

How does the discount work?

I designed a new label to show discounted prices for affiliated users. In order to be consistent and coherent on colors, when making the new discount label, I switched the color of “fill” and “stroke” on the regular label, and added a school sign.
By applying this method, the new label is not only easy to differentiate, but also matches the original style perfectly.
When you’re logged in with an affiliation account, available discounted prices will be shown on yellow labels with your school sign.
While I was creating the high-fidelity prototype, I was able to do a few user testing and A/B tests to validate the confusing instances.
After gaining valuable insight and feedback on the prototype, I made many changes to the design.

A/B Testing

Some users prefer to verify their ID through their affiliation emails, so I added a “verify by email” button on the Register page.

Update 1: Multiple verification methods

For users with visual impairments, it's hard to understand which page they are navigating.
So I reformed the navigation bar with a curvy design to help users better understand which page they are browsing.

Update 2: Accessibility

Some users did not understand they could slide up the page to see more detailed information.  So I decided to change the icon to an upward arrow to better indicate the functionality. 

Update 3: Better icon

Users want to save the parking code to their phone, so they pull out the code faster and don’t need to worry about internet connection when they’re outside.
So I added a “Add to Photos” button to make this process easier.

Update 4: Convenience

On the photo capturing page, there was no option for the user to go back if the user didn’t want to take the photo, so I added a backward arrow.
I also change the word on the button from “Register” to “Upload” to better indicate to the users that it is not the last step to register and give them more confidence in clicking it.

 

Update 5: Better annotation

I added more blocks for users who have multiple cars, and enabled the users to upload pictures of their own cars.

Update 6: For users who have multiple cars

Users prefer to use dark mode in dark conditions, so I created a dark mode for the app.

Update 7: Dark mode

Being one of the largest parking services in the DC area, Colonial Parking is an already established and renowned brand, so I decided to stick with its core brand color, and create a retro-style color palette.

Design System

High Fidelity Prototype

Final Clickable Product

Lessons Learned

Usability testing helped me a lot in understanding how real users interact with the digital product, and guided me in figuring out how to make changes based on the results. 

 

Importance of usability testing:

Accessibility affects all of us. When designing with accessibility in mind, we maximize the chances of everyone being able to properly use a product - regardless of ability, context, or situation. Visual, auditory, physical, speech, cognitive, and neurological disabilities should be taken into account when implementing accessibility measures.

Accessibility:

 More Projects