UI/UX Design

Designing for university student drivers to do all the mathematic works &  making on-campus parking without the stress and tickets.

TIMELINENovember, 2017 - February 2018

TOOLS USEDX-mind, Adobe XD, Illustrator, Photoshop, inVision
ROLEUser experience designer, Prototyper, Interaction Designer, Visual designer
Individual project


EasyPark is the product of a project aims at helping the University of Illinois at Urbana and Champaign students to locate available parking spots on campus and provide a user-friendly payment experience which can prevent unnecessary payment for parking.

According to the first round quantitive research, the majority of students encountered troubles, such as getting parking tickets. Once parking on campus, student drivers have a hard time to find a parking spot and usually ends up paying extra money. Therefore, further research was conducted to understand why target users faced those problems.

By conducting the qualitative research, I found out three key insights, which includes it takes time to find a spot even though there are available spots, people hate to pay an additional fee or lose money, and the current parking process is complicated for users. Those insights directed the design approaches. After ideations on three major issues, I did evaluations on the feasibility and practicability of each ideations. The final resolution was that a phone application called EasyPark which helps student drivers at the University of Illinois at Urbana and Champaign to find a parking spot more easily and avoid unnecessary payment.


University student drivers have a different lifestyle compare to the drivers who lived in big cities. However, they are sharing the same street parking system, which might cause inconvenience to student drivers. According to the News Gazette, the University of Illinois at Urbana and Champaign issued 16,926 parking-meter tickets in 2016, and the number of tickets issued every year stayed relatively steady over the past five years.Most of the tickets are issued in the campus area. This shows that the parking system that most of the cities are using might not be suitable for student drivers, especially UIUC student drivers.

“ In fiscal 2016, 7,396 parking-meter tickets were issued there, with just 202 coming in downtown Urbana. ”
“The UI lot with the most tickets is where you'd expect it to be: in front of the main library, where there were 1,472 tickets written in fiscal 2016.”

-The News Gazette, 2017
“When parking app first-time introduced into University of Illinois at Urbana and Champaign, according to the interviews from Daily Illini, a student said“Dealing with meters and parking hours can be a hassle. Some places don’t allow you to park at certain meters on certain days”

-The Daily Illini, 2010

Research Goal

The research goal is to identify whether a university student has troubles with street parking experience and what their troubles are. The research is divided into two parts, which are quantitive research and qualitative research. In the quantitive research parts, I conducted an online survey and media scan. In qualitative research part, I did interviews with individual and competitive analysis. The timeline for research is shown in the graph below.


I found out almost every university student drivers have to experience some inconvenience in street parking. And those experience brought some problems to their daily routine. The survey filtered the participants by the first two questions to make sure the participants are the University of Illinois at Urbana and Champaign’s student drivers. In the next two question is about the frequency of the student drivers drive to class and using street parking. Over 77% of the student drivers said they almost drive to school every day. And over 73% of them use the street parking every day.

In the next question is about to score the overall experience of street parking. The average score is a 4, while the highest is an 8 and the lowest is 0.

By doing the online survey on 27 testers, I found the two main problems for university student drivers are hard to find a spot in busy hours and unpredictable time using. 

Illustrated are the important survey data.


In order to better understand why the U of I student drivers are not satisfied with current street parking. By conducting three individual interviews with experienced University of Illinois at Urbana and Champaign student drivers to find out and learn more about their real opinions and feelings toward street parking.

The key information that I learned from the interviews are the following:
    • The parking progress is complicated, especially when students want to drive to class every day. The progress includes: find a parking spot and park, look at the meter to see when and how much they need to pay, calculate how much you need to pay, and then feed the meter coins. If you use the phone app to pay, which is also a popular way in university district, you need to do following: find a parking spot and park, reading the meter about the time and payment amount per hour, calculate how long you need to stay in one area, and then follow the app’s payment progress to pay.

    • Because this is a university district, so the city planning team back in times might not think about the parking problems, which cause today’s insufficient parking spots. Since the university is still expanding, the students and faculty members number are continuously growing. There is a great possibility of insufficient parking spots in the university district will be a serious question in the future. 

    • All of the three interview participants said they thought finding a parking spot is difficult and the unpredictable time using is the most annoying part of street parking. One of the participants said “I have experienced this many times. I ask the professor questions after class for about five minutes. And the parking enforcement gives me tickets just in that five minutes! This is just too annoying. I did pay for the parking fee and I am getting another ticket fee to pay.”

    • Although the university offers university parking lot, none of them ever considered about purchase a spot. The biggest reason is they think finding a parking spot takes time, but the university has enough street parking spots. And the second reason they mention is that the university parking spot is too expensive to afford for them.

    • All of the three interview participants mentioned that they prefer using a phone payment app than a meter in the interview, which is because they think phone application gives them a feeling of control. They can know exactly how much time left and they can extend the parking period by using their phone.

    • The time you need to pay for the parking and the payment amount is varied in different areas. That information is always inside the meter. They are really hard to read, and you might as well forget to read them. They have experienced paying extra five hours’ parking fee. And there is also a great possibility that after you pay for the parking spot and you remember you forget your homework in your apartment, and you need to drive back home to pick it up. At this time, you have to waste the money you paid already.

    • People hate to lose money, and they want to avoid additional payment, like tickets, wrong calculation, etc.
    • Although most of them think it is hard to find a spot, none of them feel unacceptable to it. They found out it might take time to find, but you still can have a spot to park your car.
    • The current parking progress needs to be simplified.



In order to understand the university student drivers and potential users, I did three personas, which allow me to design with a great relevance.

Competitive Analysis

In order to understand the existing product of street parking solution, I did a competitive analysis on eight popular parking related application.

The competitive analysis form includes eight existing parking phone applications. The first six of them are focusing on street parking, while the rest of them are more focusing on finding a parking lot, such as a parking lot of an apartment. All of the applications ask the users to enter how long they will stay in this spot and pay. 

The payment choices usually start at 20 minutes or 30 minutes. This is a waste of money if a person only going to stay for a short period of time. The user flow is simple and easy for users to understand for all of them. However, users need to enter about two or three numbers to locate the parking spot and then pay for it. This process increases the possibilities of mistyping problems, which will cause extra payment.

Five of the applications do not have the function that can give users an easier way to find a parking spot. But for the ones with this function, they are for users who want to park a longer period of time. Aesthetically, most of the applications need improvements. The style and the use of color are so old-fashioned.

In the University of Illinois at Urbana and Champaign district there are two major street parking payment applications, which are Paybyphone and Mobile Meter. Obviously, Paybyphone is more aesthetic. Both of them need users to enter the information to help the system locate the parking spot, and both of them do not have the ability to make it easier for drivers to find a parking spot. Recently, Mobile Meter has became monopoly since almost all of the parking spots could use Mobile Meter to pay. The parking flow of the Mobile Meter is down below.

1. None of the existing phone application can satisfied all of the key values.
2. It is important to keep the user flow simple and easy for the users.
3. Time-calculating can be a suffering for student drivers, but all of the phone applicaions are using this method.



I divided the ideations into three parts. The ones in yellow are focusing on the question of how to find a parking lot. The one in red is meant to focus on simplified the payment method. The ones in blue attempt to find a brand new way of parking.

[Y1]Installation in the parking space can help drivers to find an available spot.

[Y2]Phone app with time counting and calculation function.

[Y3]Phone app that can show where are empty spaces.

[R1]Scan QR code to park.

[B1]Installation in front of and behind the car and connect information with phone apllication to find available spots.

[B2]Robot officers, who can link your face with your license plate.

[B3]UAV with a camera to capture the license plate number.

[B4] Helping drivers to avoid waste parking space.

[B5] Cat officers. Cats with an electronic collar that can locate them. Taking advantages on cats’ characteristics, which is they love to stay underneath the car, especially during winter.
[B6] City system that can use the camera in the city to capture the license plate, users can pay monthly.
[M1]Different parking spots have a different payment period. With a different color on the ground, you do not have to read the little word inside the meter.


In ideation evaluation part, I used five key value to measure if each one of the ideas can meet the standard. The ones with purple dots mean that they satisfied this value.

I found out that none of them can meet every key value. Therefore, I decided to combine my ideas. The solution is a phone application that combines the function of timer counting and calculation; maps show where are empty spots, scan QR code to pard, and different parking spots with different colors on the ground.


The storyboard is about the progress and thoughts when a driver is using the Easypark, which is the final concept.

A student driver drives to classes one day and tries to figure out on the way there how much money he needs to pay. In the next scene, he realizes that he only gets two minuets until the class begin. Then he notices the EasyPark sign, which is a relief for him. He scans the QR code on the EasyPark sign and start the timer. He does not need to worry about getting a parking tickets.

Information architecture

The user flow diagram below demonstrates the possible path when user is using Easypark. There are three major flows, which includes the parking flow, report flow, and the login flow.

The first diagram is about the parking flow. When a user is using Easypark, the possible path is either beginning with finding a parking spot around me or scanning to park directly. Then the user needs to select a car and select the payment type. After all, information is received by the app, the user can start the timer. When the user has to leave the parking spot, he or she simply needs to stop the timer and pay. Then the receipt will automatically shows up.

The reported flow is in case of users forget to stop the timer and to help the system building reliable data. For users, if they find out that parking spots number they see is different with the parking spots number shows up on the app, they can use the report function. Users can simply click on “report” to enter the report flow. Then they need to check and enter the correct number of parking spots. After click on “finish,” the user report successfully and will automatically return to the main screen.  

The login flow divided into two parts, which are login and sign up. Users can log in by entering phone number and password. And sign up needs phone number, email, and password.

Low Fi Prototype & User test

I conducted three concept prototype evaluation sessions in which University of Illinois at Urbana and Champaign student drivers with a paper prototype and asked them a series of questions on how they feel about this parking app and if this solves their parking problems.

The structure of the interviews is semi-structured.  The most important questions are:
  1. Do you think this app solve your street parking problem?
  2. Do you understand each step?
  3. Is there any step make you feel you might have problems with?
  4. Is there any function that you feel you might not use?

This first-round prototype user testing results in two insights and based on the insights I made some improvements.

Insights and finding 1:
The most important finding of the user test is they mention that they do not think they would open the parking app at home. They are more willing to use a parking app to find a spot when they are facing difficulties in finding.
This means the main screen, which is about route planning, needs to be changed. Therefore, the main screen will change to “finding a spot near me.”

Insights and finding 2:
Participants feel they may forget to hit the “leave” button, which will cause them to pay extra money.
There is already a “report function” to prevent this happens. However, I decided to add one more function. The system will notice if you are leaving your parking spot and automatically asks you if you are leaving.

Wire Frame & 2nd Round User Test

The wireframe prototype is developed based on the insights and findings from the first round user test.

I conducted two wireframe prototype evaluation sessions in which University of Illinois at Urbana and Champaign student drivers with Adobe XD and asked them a series of questions on how they feel about the design and whether the user flow is complicated for them to understand.

The structure of the interviews is semi-structured.  The most important questions are:
  1. Do you understand how to use it when you first see it?
  2. Do you understand each step?
  3. Do you understand each icons?
  4. Where do you think needs more improvements?

This second-round prototype user testing results in new insights and based on the insights I made some improvements.

1. The original flow is “scan code - select car - select payment type - start timer - parking information - stop timer.” However, the user test participants mention that give the “start timer” a separate interface seems unnecessary.
2. Several icons are hard to understand either because of the size or the design.
1. “Start timer” is necessary, because you need to give users a notice that the timer is on from now. But I do agree that the “start timer” screen is needless. Therefore, I decide to cancel this screen and make a notification after the user enters car and payment information. When the notification shows up you can choose either start the timer now or go back to change the information.
2. Several icons need to be changed or re-designed.

Final Outcome

The final solution is EasyPark, a phone application that helps student drivers easier to find a parking spot and do not need to worry about to lose additional money.

︎Click to see interactive prototype

Part 1: Information entry
When the user open EasyPark, he or she has to login to an account to use the app. In order to login or sign up, you have to enter your phone number. After signing up, the user can enter their car and card information into the system for later use. But the user also can “do it later.”
The information entering not only can make it easier for users’ further parking or using, it also can make the parking lots information that users reported more believable. This application includes a report function; therefore, it is important to have the users’ proper contact information.

Part2: Parking 
When one wants to park their car using EasyPark application, they need to select a parking area first, and then to scan the QR code to start. Instead of entering three or four numbers to park your car, EasyPark makes the process easier and less misopperation for users to park. 
If the parking area has enough parking spot for you, then you can enter to the next step, which is to select a car and the payment type. After the system receives all your information, you will be able to start the timer. If you want to leave, simply click on the “stop timer & pay” to exit. The payment will automatically progress, and the receipt will show up on the screen. The timer function avoid drivers to calculate and predict how long they need to stay in one place and how much they need to pay. 

Part 3: Report
The report function is to correct the system’s information and also give drivers who forgets to stop the timer a chance to avoid losing money.
Every parking area has a report button, hits the button to enter the report flow. Simply typing how many available spots are there and confirm, then the report is successfully received by the system.

Part 4: Tools
The users can check their parking history, report history, notifications, and presettings in the menu bar. 

Visual Design

The target users of EasyPark are university student drivers and most of them are between 18 to 23 years old. The characteristics of this user group is young, passion, modern, energetic, open-minded, and etc.  Therefore, it is important to make the application modern and simple.

The parking time period of University of Illinois at Urbana and Champaign is usually between 8 a.m. to 6 p.m, which means the application usually used in day time. Therefore, the main color should be bright to make users easy to see.

The design choices of colors and icons can be checked below.


Future Vision

When I was designing this phone application, I also thought about this applications’ further design possibilities.

In the research I found out that the university population is expanding, and more and more students or faculties choose to drive to class everyday. The parking problem will become an issue in the future.

Therefore, I think giving EasyPark a function of sharing parking spot might help with this situation. For example, I buy a parking spot in university parking lot, and my class time is fixable. Then I can use this sharing parking spot function to re-rent my spot. Then the people who are not conflict with my time can share the parking spot with me. Then I do not need to afford the high university parking spot rate by myself.