ParkIt by Team RockIt

ParkIt App

ParkIt is a mobile app that provides valet parking service for those who do not want to waste time when parking at UCSD. It saves time for those who in rush or those who do not want frustration when searching for parking spot.

ParkIt was designed along with 5 others (team RockIt) in a Cognitive Science course at UC San Diego. I conducted needfinding, interview, persona, storyboard and low to high fidelity prototype to rock this project.

Final Prototype can be found in : https://invis.io/JX8EYK4S3

User Research

My team spent a great amount of time to discuss our needs. After discussion we came out with valet parking service at UCSD. By analyzing pros and cons of this idea, we finally agreed to working on valet parking app.

After finalization, we wanted to know how our target users would think about our app idea. In order to figure out our realistic needs and personas, we went out to interview different groups of audience. With our interview guideline, we conducted interviews withUCSD students, faculty members, visitors, and professors.

Our interview guideline includes total five parts: introduction, background, design search, reflection, and closing. We asked questions that do not simply ask for yes or no answer to participants. With questions such as “How would you describe your experience with UCSD parking system? Why?”, we found that all these people had same frustration when finding a parking spot, no matter what kind of parking permit they have. No one wants to waste their time for parking.

Our next step was to do the competitive analysis. We searched and came to find Luxe, Uber, and Valetanywhere. My team examined the each app and analyzed features that each app has or lack of. By completing the competitive analysis, we found out that our app’s biggest advantage is that we provide service mainly in UCSD campus, which none of other apps does.

Personas

The next step was to create persona based on our interview results. We could find the pattern from the interviews and this helped us to represent our target user.

We first gave name to our persona to make process simple and quick. Then we focused on describing persona’s goal, frustration, and personality. To make a good persona, we maintained that our persona is realistic and reflects patterns from interview. Each persona is distinct and memorable. If we say one of name of our personas, we can recall that person and able to represent him/her. Since we created our personas, now we can apply them to user-center design process and begin to ask question such as “Kristy would love to use this feature, but would Alan use this?”

Storyboards

Now it is a time to bring life to our personas. Storyboard is basically a user story. By making a storyboard, we can visualize how users are going to use the app. Through this story, we, as designers, can have better insights of users.

The story begins with user encountering the incident. The user struggles and ends up with using the valet parking app and guess what? Problem resolved. Finally at the end, we show the change in user’s life. It is simple as that! While making the scenarios simple and easy to follow, we had to make sure that we focus on real users in real contexts. This is not a science fiction or magical story with broom and frog.

Our storyboards are based on the personas. We discussed each persona’s personalities and behaviors and imagined what kind of conflict would they encounter. For example, Kristy is a night time person. So she would often wake up late and use this app to be on time for her class. Alan prioritizes efficiency. So he would use this app rather than waste his time on finding for empty parking spot.

Low-Fi Prototype

In order to create a prototype that is user friendly, my group spent a great amount of time to go through each step. We visualized how an actual user will go through the app. The team agreed that the service would start with the user requesting a valet, the user would drop their car off at the valet driver’s location, and would be able to request their parked car at a later time.

quick workflow

We started with the simple workflow map. Then we worked on making a low fidelity prototype using Balsamiq.

low-fi prototype (Balsamiq)

User Testing and Evaluation

To validate our UX, we conducted an user testing. Before we start the testing, we ordered them to say their thoughts as they go through. We allowed participant to “click” the button as he/she goes through the app, dispensing the correct screen as they progressed. After the conduction, we asked several questions to check how participants felt about our app.

We took notes as we watched our peers interact with our designs. Then we came up with problems that we need to fix to improve UX.

  • Track system (user wants to know where the car is being parked)
  • Help page where users can see explanation of how to use our app
  • user wants to see the driver’s info

Getting feedback was really helpful, but we wanted to make sure our app is user friendly. So we checked the 10 usability heuristics. Underneath each heuristic, we listed all the elements of our app that the heuristic touched upon. For example, for Nielsen’s Error Prevention heuristic, we listed the possible errors the system could encounter, and began to think about the best way to prevent these errors:

potential errors they system could encounter

Based on this evaluation, we could make a design decision and give a shot for final prototype. Here are just some of the final design changes we ended up making to our prototype, along with the affected usability heuristic and reasoning behind the design change.

Design decisions we made and why we made them

Final Prototype

After final user testing, our team decided how to implement the revisions of our design. First, we decided on the color scheme for the consistent look of our app.

Teal, yellow, and shadows of grey. Fresh AND Trendy!

As for fonts, we decided on a combination of SofiaPro for general text, and Quicksand for the all-uppercase text to be placed on buttons. Advertised as a feminine typeface, SofiaPro’s minimalist design was the exact clarity and conciseness we were looking for. Quicksand presents itself as a more rounded, softer version of popular label fonts such as Arial or Monsterrat, tying itself neatly within our chosen design scheme.

Then we all started to design final screens by using Adobe Illustrator and SketchApp. For the best quality of our prototype, we used InVision app. This allowed us to make a smooth and high quality prototype for our project. It was more powerful and user-friendly tool than Balsamiq which we used for low-fidelity prototype.

Help screen overlay, “requested valet” screen, driver information page

Satisfied with our resultant prototype, Team RockIt is ready to blast off with the ParkIt valet service. In an effort to eradicate extensive parking fees and general inconvenience, Team RockIt aims to facilitate the day-to-day livelihoods of its clients, trapped in an otherwise unwinnable scenario.

Final Prototype can be found in : https://invis.io/JX8EYK4S3

Like what you read? Give Yubin Cho a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.