Park Buddy
In the fall semester of 2022 I created a parking app prototype for my human computer interaction class. This was my first ever UX & UI project.
Overview
Timeline
3 months
Tools Used
My Role
UX/ UI
designer & researcher
Context:
Park Buddy is a parking app I made for my Human Computer Interaction class. This was my first time ever working on a UX/UI project. In this class we focused on human centered design and the fundamental UX/UI concepts.
⚡️Project Goal
Discover, define & create an innovative design for an interactive, human-computer, experience.
The purpose of this project was to find an existing issue people face and find a solution to improve it.
My Idea💡
Create a parking app that makes finding and paying for parking easier.
First thing that came to mind for me was the struggle of finding parking. When I plan outings with my friends our main concern is always "how is the parking going to be?" or "where are we going to park?"
Design Process
1.
Brainstorming
To narrow down my choices I started off with brainstorming and seeing what are everyday things I can improve with this app. I narrowed it down to three choices and ultimately chose the parking app.
Going into this I knew there was already existing parking apps so I had to find ways that would improve the user experience in them. This included thinking of common concerns like finding the location of where you parked your car, how safe the parking location is, i.e. break ins or robberies. After seeing most parking apps already offer efficient paying methods I moved my focus onto other issues like safety.
2.
Research
I interviewed some people and asked them questions related to finding parking, this included their main struggles and what they wish could be improved.
3.
Personas
For step three I created a user persona to better understand what kind of users would use this app and how I can improve it.
4.
Flow Chart
I created flow charts to help me visualize step by step what the user will go through when using certain elements of the app.
5.
Wireframing
This was my wireframe for my design, a rough lay out of my structure. Here I focused on designing a simple structure that was not too busy or complicated for users.
6.
Prototype
The next step after wireframing was creating the prototype for my app. This image shows all the flows and connected screens of my prototype.
7.
User Testing
Once my prototype was complete, we did an in class user testing activity where two of my classmates tested out my design. To the right is the feedback I received.
Final Design
Landing Page & Map
The first screen displayed is the landing page where the user is able to select what they would like to view, this includes: pay parking, find parking and my parking.
The second screen displays the map that shows available parking spots.
The third screen displays the map with available parking spots.
Select & Pay Parking
Once the user has selected their parking from the map page, the next screen displayed shows all the parking spot information.
The screen after that shows the parking spot and payment information.
Next the screen will display the confirmed parking spot with a live timer.
Reviews, Favorites & Widget
For these screens I added reviews, favorites and a useful widget. The first one is the reviews page where a user is able to look up parking spots and see their reviews and write a review for parking spot.
Next is the favorites feature, it was important to me to add this so users can view and keep track of their favorite spots.
Lastly I wanted to add a widget that made it simple for users to keep track on how much time they had left. This widget it is easily accessible on the lock screen and the user is able to press on it to add more time if necessary.
Takeaways
This was my first UX UI project and I have learned the key elements of UX design. Taking a human computer interaction course has been a great learning experience that has guided me through the necessary steps of design thinking and creating a user centered design. This project was a huge learning experience, once my designs were complete and I had a better understanding of what UX design is, I was able to go back and
re-evaluate on what I can improve next time to create a better user centered design.
What I would change
1.
Interactive Elements
Since this was first time using prototyping software like Adobe Xd I felt like I could have improved some interactive elements like the map and timer. I would have added an interactive map that is scrollable and moveable rather than just an image. The live timer was also something I wish I could have made work to get a live countdown of the time.
2.
Contrast
There is a few elements in my design that would not pass the color contrast test. I focused too much on the aesthetics of things to keep the color palette theme but in return there is some screens that are not as accessible because of the text color contrast.
3.
Reasearch
After conducting my first ever ux project and going through all the steps, I would definitely improve my research methods. I could have done more interviews and tested out other parking apps as well to really see what is missing to improve the experience of finding parking.
4.
Design
Overall I was happy with my designs but I did notice I focused too much on the aesthetics of the app rather than focusing on the issue I was trying to solve and improve. Next time I would definitely focus more on the feedback that the user interviews gave me and put more of that into my design.
