![](https://framerusercontent.com/images/K2cZQl8T3e752HmpOK7jOP8Fk.png)
Feb 2022
UI/Ux
Case study
![](https://framerusercontent.com/images/BA0ubnyHL7wjSiZ29MiLJ7yaIQ.png)
![](https://framerusercontent.com/images/K7Ol9W2hi5SvNRnDt8SmLGEgE.png)
![](https://framerusercontent.com/images/3fLSxppV5aGrJTq7rynYyE.png)
![](https://framerusercontent.com/images/XJb5ShFFIVPTQK0jsJutcgBM0s.png)
![](https://framerusercontent.com/images/NeyzCDraIrHzC03mRsd3t5zRA9c.png)
App design
Parking mobile App
Because of Taiwan's narrow territory and dense population, we often encounter the problem of not finding a parking space, or finding a parking lot but no parking space. In this era of race against the clock, people focus on faster and more intuitive operation methods to help users quickly find the most suitable parking space when driving
Design background
Design Target
E-parking
![](https://framerusercontent.com/images/YxYAj0jdFlGBBZFDA1IDgCCQ.png)
![](https://framerusercontent.com/images/1z3WYDl4O1VCodOxQO6FOndcJHQ.png)
![](https://framerusercontent.com/images/vyzb2e3Iz2fGBpAfcdzKdvsk2Dg.png)
Remindful
usability
Faster
![](https://framerusercontent.com/images/ICXLcT10pazatH51vxP44YuxTu8.png)
![](https://framerusercontent.com/images/aiNW1zhx9PhRsTsLLIwp14NVjZQ.png)
800m
Lane 25,Zhangchun St
Finish
7 mins
2.4km .4:32 PM arrive
P
07:10
LTE
![](https://framerusercontent.com/images/RVEueqKeLHYePakBTOESXghrO9s.png)
P
![](https://framerusercontent.com/images/jCM0pJ0BBddKDzesiLZclJYsDg.png)
8 weeks
Duration
Figma
illustrator
photoshop
Tool
My role
Idea
Research
UX/UI Designer
Over 50 pages
Screens
02
Competitor analysis
04
persona
03
Empathy map
05
Journey map
07
Information Architecture
08
Flow chart
09
Wireframe
06
User flow
11
Mock-up
10
Ui design
W1
W0
W2
W3
W4
W5
W6
W7
W8
UX research
01
Design flow and timeline
Is there any parking lot nearby?
Is the parking lot still available?
Want to park my car somewhere safe
My girlfriend is waiting for,need to park quickly
Think
Say
How much will it costs per hour?
Is it secured?
How long does it park?
Will it accept online payment?
Drive car
Use the phone or touch screen
Check Google map when driving
Parking the car
Find where you park
Pay for the parking
Complex interface creates distraction
Lots of cars near tourist attractions
Forget where I parked it
Reduce accident happen
Save lots of time
Reduce unnecessary overhead
Tired
Frustrated
Unsure
Anxious
Feel lucky for finding parking space quickly
Feel Irritated if find no parking space
Do
Pain
Gain
Feel
Empathy map
![](https://framerusercontent.com/images/kNQxb5XfpY8guY506eiilVdOhKQ.png)
As a driver,I want to park my car as soon as possible,so that I will not let my parents wait me too long.
![](https://framerusercontent.com/images/ScwJjK4kIfwHlVtPGi6U5SnT6To.png)
As a driver,I want to have a easy and fluently UI interface,so that I can patiently to drive.
![](https://framerusercontent.com/images/jJiDXa20T1jJAuiyGVJerbQidcA.png)
As a driver,I want someone tell me where i park it,so that I will not lost the direction.
![](https://framerusercontent.com/images/1rQMV697kc5ij2CGKV8eS9OUrg.png)
As a parking lot owner,i want my parking lot has online pay ,so that driver can left quickly.
User story
Persona
![](https://framerusercontent.com/images/QaQCNOS3mP2twYwMcUimvyd0.png)
![](https://framerusercontent.com/images/rPuZHtLbQXdLSp6CghaG1GvgEM.png)
Abby Beatrice
Age: 35
Status: marriage
Location: taipei,taiwan
Insurance solicitor
Beatrice is an insurance salesman , She usually goes to work from Monday to friday, but the company is next to the main road in the city center. Unless She leaves an hour early, there will be no parking space in front of the company, so he can only circle around the roadside to find a parking space, but he is often late because of looking for a parking space,she hopes to have an app to tell him where there will be more parking spaces nearby.
To find availbal parking lot as soon as possible
Help her to find her car
Too much time to find parking space
She always forgets where her car is parked
She can only focus on driving and cannot be disturbed by other information
Bio
Personality
Favourite brands
Frustrations
Motivations
Goals
![](https://framerusercontent.com/images/TUcGDUruhgie7Tjmu7dDn1scXA.png)
![](https://framerusercontent.com/images/uhep3GEJ6OaZzMtfQhIWcBdVg.png)
![](https://framerusercontent.com/images/car13DEu1DTULeWtHWOJTR6j4A.png)
Hush
Usability
Accessibility
Active
Specificity
Calm
Remindful
Forgetful
Nervous
Passive
Chill
Active
Driver Journey Map
Stages
Stage 1
Navigation
Connect bluetooth/
apple carplay
Connect bluetooth/
apple carplay
Merge parking app with the navigation app, allowing users to switch freely
Not knowing which navigation app to use, navigation system integration distracts driving
No information is provided to the user on whether there is a parking lot
Mark the nearby roadside parking section and ask whether to park in the parking lot or parking space when navigating to the destination
When parking in the city center, you often circle around aimlessly and have to re-enter to navigate to the parking lot
You often have to walk a long way to pay the fee. If there is only one machine, you have to queue up.
Because the input or selection time is too long, I am afraid of overtime, so I choose to go out on the road before navigating
If you can enter each attraction in advance, you can avoid having to enter it again every time
Often forget where you parked unless you have take picture.
After disconnecting by the car, the mobile phone records the departure track to find the car position
Through the license plate recognition technology, online payment with multiple parking lots
If a person is driving, he needs to be distracted and enter a halfway station, or wait for the red light to enter.
Set commonly used functions as buttons, and mark forward & opposite
Provide parking availability information when entering attractions or restaurants
Input with mobile phone or touch screen
Add a stop station while waiting for a red light
Find a nearby parking space or parking lot when you are nearing your destination
Find the payment machine and enter the car number to pay
After paying the fee, find car position
Leave the parking lot within 10-15 minutes and go to the next destination
Which navigation app do you use to navigate?
![](https://framerusercontent.com/images/gFP9TeKPcpMGL6oM27vuB1NXuFo.png)
I wonder if the spot has their own parking lot ? Let's go first!
I'll go around to find onstreet parking first. If not, I'll find a parking lot
Where do I pay?
Wow, there are so many people
I remember my car is parked in A17 of B2
I'll go out first and then navigate. Someone is waiting for my parking space
I'm looking for a gas station on the highway now, do I need to re-navigate or add a stopover?
Enter destination
View parking lots near your destination
Add a stop station (gas station, convenience store)
Find your car
Go to the payment machine to pay
leave the parking lot
Parking
Pay
Stage 2
Stage 3
Actions
Thinking
Emotions
Pain Point
Opportunities
![](https://framerusercontent.com/images/xx87Xdc5AT7y7rA0IhiFUQCGSFc.png)
![](https://framerusercontent.com/images/TdsWWdxKwBjoU4u3ubVvNOswGhk.png)
![](https://framerusercontent.com/images/4bncXyQq6MI557pm22hb8sOjh4.png)
![](https://framerusercontent.com/images/WkM1mSZL7uLcFskadnLMAG7E.png)
![](https://framerusercontent.com/images/l2cQFmnDJRNZtCHdLFAD9VYZiyo.png)
![](https://framerusercontent.com/images/SYe2S7BdTus1qjKY9kdkDzfkU.png)
![](https://framerusercontent.com/images/c2Qi0tW8LjBtuvVLSScC141mAc.png)
![](https://framerusercontent.com/images/xmzDyvqzoA8uLE9oHXgECjIHQjk.png)
![](https://framerusercontent.com/images/XkUiRD10sbkV4ql9t7DxlbK1bn0.png)
Wireframe
Lo-fi wireframe
![](https://framerusercontent.com/images/9VpCbv74Fx1pZqilUAKo92SbTS0.jpg)
![](https://framerusercontent.com/images/4Z2cILVMiXpRBp16uQCxAxwspY.jpg)
![](https://framerusercontent.com/images/Mg9V8630MhwN6JWOxRVOKhlxlLk.jpg)
Before starting Ui design, sketch the important interfaces in the functional map to make wireframe,and turn ideas and flow charts into actual interfaces to ensure the logic of later design
App screen
![](https://framerusercontent.com/images/Mpqggo8DQKHSYMPJqsrgLpUISQ.png)
![](https://framerusercontent.com/images/qYPc7oL3mUByq0rzdDKKwNcAM.png)
![](https://framerusercontent.com/images/ZlWVmA1uMZStXsdljm3mmHvzTyg.png)
![](https://framerusercontent.com/images/mf9Nzc4cnwbN2wnpGbAIjUaV4.png)
Enter security code
Please check your phone for a text message with your code
Send again
-
-
-
-
-
-
A parking app for driver who for is impatient and forgetful when driving
E-parking
![](https://framerusercontent.com/images/DDspnX3aoBMixSh0pKhEOgA3Am4.png)
Phone
iHeartRadio
Now Playing
E-parking
Podcasts
Messages
Maps
Music
07:10
LTE
![](https://framerusercontent.com/images/RVEueqKeLHYePakBTOESXghrO9s.png)
Onboarding
Sign up & Log in
![](https://framerusercontent.com/images/E0ZTHSd6UvblytK6alqCatjFAdc.png)
Parking lot setting
Filter
On-street parking setting
Avoid highway
Speed measurement
Show traffic flow
0.8 km
0.4 km
Parking space
Parking space
Spot
Spot
When you enter the spot or address, the parking lot or roadside parking space within the range you set will be displayed. After clicking, you can view the information of the parking lot.
You can choose according to the rate of parking you want, or choose according to the type of parking. When you want to add a rest stop on the way, you don't have to re-navigate, you can directly select the stopover you want to go from the side options
There is a filter in the upper right corner, you can choose whether you want to turn on these functions, here you can also set the distance of parking lot or street parking
![](https://framerusercontent.com/images/vr9V9uzWQ01H6CgIJhARreAwCQE.png)
![](https://framerusercontent.com/images/GZ3qEPNo5ERIPUW3locIdho2xlg.png)
![](https://framerusercontent.com/images/iZERP8beYlNnKSJPCkGHb5UPMk.png)
$30
1 hour /
![](https://framerusercontent.com/images/L4wzW5HmBgqz1TXTcKrNwEAVrYU.png)
1 hour / NT15
( 20 / 300 )
All
Parking lot
On-Street
7 mins
Lot 8 Parking
Other informations
2275 E Mariposa Ave, El Segundo, CA 90245
6:00 a.m~23:00 p.m | Mon-Sun
+1 213-742-7329
Online pay available
Height limit: 2.48m
Disabled parking spaces
Electric vehicle charging
Cancel
Start
![](https://framerusercontent.com/images/2l8Wvd7ZxGI14C39MVqUDToto.jpg)
![](https://framerusercontent.com/images/mpkcKAu4fkZTvd91YkUII48gc.png)
Navigation page
![](https://framerusercontent.com/images/EXElq47nmpy0GVoFq9Tq68Kaak.png)
![](https://framerusercontent.com/images/io5SJSiG15rO250YxeKQZQY0.png)
![](https://framerusercontent.com/images/Ol7JEkcEP0MIpDPe6pEfSfdyK8.png)
![](https://framerusercontent.com/images/iy0pNjNKZNsl6FEqqqnRvIcQgS0.png)
![](https://framerusercontent.com/images/qMtd2THgG73kGy7Uk4TAzoTvVb8.png)
![](https://framerusercontent.com/images/1FaEpDGZj9enF1SJNfq1y2hHjg.png)
Payment page
![](https://framerusercontent.com/images/UFdmo5Rrg72JzQyhmg9PDjhvw.png)
sec
min
hr
08 : 05 :07 am
13 : 42 :53 pm
2275 E Mariposa Ave, El Segundo,
CA 90245
2022/02/24
Parking location:
Lot 8 Parking
Parking time:
NT 75
Total
1 hour / NT15
B2
Floor
Seat
A17
Go to pay
![](https://framerusercontent.com/images/hy1IeeBnEikszCDrusI7iuvAzM.png)
![](https://framerusercontent.com/images/2ypxTkJD71JwFyq6ttMxIXFRDs.png)
Online payment can be paid by credit card, line pay or applepay to save the time of going to the payment machine to pay
Some stores offer discounted parking coupons, which can be redeemed by scanning the QR-code or entering the invoice number
When you enter your license plate number on the online payment page, your parking bill will be displayed, and you can check the parking time in any time.
![](https://framerusercontent.com/images/oXyjQndNBpoxjzxBXl1vrhVa9U.png)
![](https://framerusercontent.com/images/9WSY07Ayf2zEJVQH7FFEIlbPVo.png)
Remind you!
Pay
Cancel
You need to leave within 15 minutes after payment, otherwise you will be charged extra.
Cancel
Try Face ID Again
Try Again
Face ID
_
![](https://framerusercontent.com/images/5j5AQFa04BL41LWAxs0PAoWIOtg.png)
![](https://framerusercontent.com/images/q6q4KZhh9j6wBVhgzRLuQ0PnQgI.png)
![](https://framerusercontent.com/images/arjGHhkk0baI2DwWSfxPvEIk1U.png)
![](https://framerusercontent.com/images/wo3ljmN6uEN5U11XMklyJt5eNw.png)
![](https://framerusercontent.com/images/4jYeGFFTTEXmKw8t4DE6yMrqA.png)
![](https://framerusercontent.com/images/Tp9YeOh7jjpeEwx8FHPLpb1tqPs.png)
Personal page
![](https://framerusercontent.com/images/C0bQrpMZp0VgW4gHnZ9HKkW3XUQ.png)
3 Spots
2 parking lot
2022/02/26
travel plan 1
On the morning of February 28, I will go to Los Angeles and stop at several scenic spots along the way......
9:41
travel plan 1
Done
Spot
Parking
Spot
Parking
Spot
Parking
Spot
Parking
9:41
Lane 153,Deji Street
Dexiang St
Zhongming S Rd
Dai 630 St
Fude St
Fulin Road
Namping St
Xiang Yi St
travel plan 1
Done
4 Pennsylvania Plaza, New York, NY 10001
Parking
$30
$15
$20
$20
![](https://framerusercontent.com/images/VAlKUmpnsRq95MLpbtTo2px0q7E.png)
All
Parking lot
On-Street
![](https://framerusercontent.com/images/K2SI4cJ0bQD0MwzHf6SAtxUHOGY.png)
$30
1 hour /
If you don't want to enter spots for the whole trip, you can set up your travel plan and pre-set the location of your spots and parking lots before departure
![](https://framerusercontent.com/images/6sD802aMivCZOas9v8lOOmL8w.png)
![](https://framerusercontent.com/images/ISQVv9qAIhyimAG8MlTPnjUDjAs.png)
![](https://framerusercontent.com/images/cFStMFX2uux0oKy1Huyf2ln95g.png)
![](https://framerusercontent.com/images/zch1KRpPZepKh182uz3lgiGdcA.png)
![](https://framerusercontent.com/images/HVNfmcYiTdDNTj0WQHt9WB48BMs.png)
![](https://framerusercontent.com/images/rh4F8YiZl5AItywUbzS4lhI.png)
Thanks for watching and Like