UX Case Study: Parking with Easy-Park

Introduction

One of the most frustrating aspects of being a college student in the US is trying to find parking on campus, especially for those who commute to and from a university. It feels like one has to get up extra early in order to have a chance in finding a parking spot and even then it is not a guarantee. This is why my team and I decided to make a prototype for a proposed app on Figma that would try to solve that issue on our campus. We decided to name our app Park-Easy, and it is supposed to help students, faculty, and visitors alike find a parking spot more reliably throughout our university’s campus. My case study will be about the design process of our app, the results that we gathered from users testing our app, and about the final version of our app.

Research

Our app was made as a result of a college project that had multiple steps. Every classmate, including myself, was tasked by our professor to ask three other college students throughout our campus to do an interview to ask them if there are any changes or improvements that they would like to have in our university. This could be anywhere from the physical design of our university, or it could be anything about the academics themselves. Eventually I would ask three other students for an interview who commute instead of live on campus, which thankfully didn’t take me too long to accomplish. Once they agreed to the interviews, they would all tell me, without exception, that the first thing that came to mind for them was how difficult it was to find parking spots reliably. Some of them told me that at times they would be late for their classes despite waking up early because they still couldn’t find a parking spot. This was something I understood very well because I have been through that myself, so I made sure to have parking frustrations as the main focus of the next part of this project.

Here are some of the direct quotes I gathered from the students I interviewed. I can most certainly relate to all of these sentiments.

After gathering responses from three students, our next task was to create two fictional, but realistic personas that would best represent the characteristics, tasks, and needs based on the responses from the students we interviewed. The creation of these personas proved to be extremely helpful for what was to come next because it helped my team and I better envision what sort of app we should make and how we should make it. After the personas were complete, our professor grouped up my classmates based on similar findings from the interviews, and sure enough, I was placed in a group with two other classmates who made note of the fact that the people they interviewed also mentioned frustrations with parking on campus.

This is one of the fictional personas I’ve created for this project. This and all other created personas have their own demographics, attributes, frustrations, and proposed solutions to their frustrations.

As a team, we worked very well together. We made sure to assign each other different parts of our project so each of us could contribute our fair share, and this is why I think we worked extremely well. We also shared each other’s created personas and decided to use some of them for our prototype. As a team member, I always made sure to pitch in some ideas that I thought could be helpful for our project, and I made sure to seek feedback from my team members about my ideas or progress in the project. I also welcomed communication within our group in order to reduce any confusions and to finish the project as smoothly as possible. Admittedly, while the responses I gathered from the students I interviewed were very helpful, I was unsure that they would be enough to create an app. But once me and my team grouped all of our responses together, I realized that the information we had was more than enough to work with.

Sketches and Wireframing

Before we started to design our app prototype, we each discussed ideas on what sorts of features our app might need based on the responses we received from our interviewees by creating a style guide. This style guide served as a blueprint for everything that defines our app, from what color scheme our app should have, to how professional the tone of our app should be.

This is a section of our style guide. We each discussed how we want the welcome message to be like, and with the help of this chart, it helped us come to a conclusion on how we wanted the final version of the welcome message to look like.

We also made some task flows and user flows, as shown above, for some of our created personas in order to have a roadmap on what to design for our app. This served as a guide and helped us keep our design as user-friendly as possible by helping put ourselves in the shoes of this created persona. This user flow shows the different kinds of decisions our created persona would make when using our app to pay for the closest available pay-to-park lot near his class. We then concluded that this app shouldn’t just be for students, but for faculty and visitors as well because finding parking spots in our campus can be difficult for all, but especially for students.

After creating the task and user flows, the next step was to draw some wireframes for the interface of our app. One of my group members took on the task of drawing the wireframes, and it served us incredibly well.

Get Basoalal’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Here are our wireframes. My group member did a very good job in envisioning the design of our project, and these wireframes were instrumental in helping us with the final version of our project on Figma.

Prototyping and Iteration

Once the wireframes were drawn, it was then our task to design the app itself on Figma while using the wireframes as a guide. Since it was my first time ever using Figma, I struggled with learning some of the features that it had to offer at first. For example, I was unfamiliar with some of the key bindings, like the key binding that allows one to make something into a frame or component. I quickly realized however that as powerful as Figma is, it is also quite easy to learn. It took only a couple of YouTube guides for me to understand how to begin designing and prototyping at a beginner’s stage on Figma, and that is something I love about it; the ease of use and understanding. Below is the end result of our prototype.

Here is the home screen of our app. It’s precise, to the point, and matches the tone and color scheme of our style guide.

We then decided to divide three out of the four buttons amongst ourselves, with each person responsible for designing the screen that appears when a user clicks on the button. Since this is a prototype and because there were only three of us, we only had time to design three of the four button’s screens. I was assigned the “Parking Lot Information” button, and the “Pay for Parking” and “Lot Closure Calendar” were assigned by my other two group members. We did not have time to work on the “Estimate Travel Time” button.

When users click the “Parking Lot Information” button, they are greeted with this screen. It’s a static map of our university’s main campus, found in the official website of our university. Then, I color coded each of the visible parking lots based on parking availability.

Here’s an example of what happens if a user clicks on a parking lot. Lot G1 is green, which means that there are many open spaces available for parking. I made sure that once a user clicks on a parking lot, they would be greeted with an overlay with the information they need.

As shown above, when a user clicks on Lot G1, the overlay tells them how many spaces are available, as well as what permit is required to be able to park in that parking lot, which is reserved only for faculty. There’s a total of three different permits, and I made sure that the three letters that represent the permits were easy to read.

Here’s another example. Lot H2 is red, which means that there’s not a lot of spaces left for parking. This lot also allows all three types of permits, reserved for visitors, students, and faculty.

Thankfully I didn’t have a lot of issues with the design process. However, I wanted to design a filter for the parking permits because one of the test users who did use our app mentioned that a filter for my button would be a great addition, and I completely agree. I just didn’t have enough time to design it, and when attempting to make a filter, it seemed a bit complex. I also attempted to allow users to be able to exit out of the “Please select a parking lot” handle, like with the overlays, but I had issues trying to make it work. Nonetheless, I am happy with the result of my assigned button. I also made sure that if users click on either that back button on the upper left, or if they click on the home button, that it would take them to the home screen. The profile and settings map currently do not work.

This is how the section I worked on looks like on Figma.

The next and final part of our project was to have a usability test. Each group would have classmates from other groups come test the app prototypes that each group worked on. As classmates used our app, I and one of my group members decided to take notes on how they felt about it, and how usable they thought it was in order to make any additions or improvements for our prototype if needed, while another group member walked the users through the app. Most of the responses we received from users was that they thought that the app as a whole was easy to use and done pretty well, with some things here and there that might need to be added. Some of the new additions that users wanted to be added was a feature that let users know that they have to click on a parking lot, which is why I placed the “Please select a parking lot” handle, and another was a filter for the permits that I mentioned earlier.

We also made a customer journey map that described the actions and experience for each user that tested our app.

My team and I each did a customer journey map for a user, and the one above is the one I did. However, we were not able to finish our customer journey maps in time. They did prove to be useful though, because without them we wouldn’t have made the changes to our app that we did make.

Outcomes and Lessons Learned

Overall, this was a very important experience for me. As someone who wants to work as a user interface designer, learning how to use a powerful tool like Figma and being able to make a prototype with a team was completely worth it. This experience also taught me how to be a team player even though I have always been a team player since the beginning, which says a lot. There is a lot that I still have to learn, but I know that this experience has set me on the right path. I really enjoyed working with such a wonderful team and I hope to continue working on such projects in the future.