MOBILE DESIGN

Parking app

Overview


“AirBnB” for parking solutions

Context

This is a case study of a day’s sprint during a UX bootcamp at General Assembly, and we were asked to create a native app.

Scenario

A parent who has to park near their child’s school in order to walk their child in and pick them up.

Timeline

1 day for the researches and prototypes

1 week for the wireframes and UI

Team

4 people 

My role

Research as a team. Wireframes and UI design on my own

Tools

Sharpies, Post-its, Pen and Paper, POP app, Sketch, Adobe Illustrator/Photoshop, InVision, Keynote and Framer

Research and Analysis


Competitive analysis

We searched for competitors, dowloaded them on the Apple store. We created a competitor analysis list comparing 3 apps: ParkMe, ParkWhiz and Spot Hero.

We analyzed each competitor’s profile and main features.

We discovered that most of these apps do not provide a time scheduler, a direct contact with the owner of the parking spot and an account history.

What is the problem?

After gathering pain points from the competitors, we wanted to identify the main problem(s). We found that these apps did not provide a seamless experience that apps such as AirBnB or Uber provide.

Parents are sometimes in a hurry, juggling with house chores, work or appointments. They can get easily frustrated and as a consequence may end up parking in permit only streets or no-parking zones.


"They can get easily frustrated and as a consequence may end up parking in permit only streets or no-parking zones."


The 6 W's

We created a persona and different scenarios to identify the main pain points, goals, needs and potential solutions.

WHO are our users?

Parents who need to pick up and drop off their child at school. They are usually busy, are familiar with new technologies, use native apps.

WHAT our users do/use?

They shop online and use apps like Postmate to have food delivered to their home.

WHERE would they use the app?

They will book at home, at work, while driving, while walking.

WHEN would they use the app?

Users will book early in the morning before heading to school, at lunch time, in the afternoon, the night before school, or the weekend for the whole week.

WHY would they book a spot?

User’s main motivation is to avoid parking tickets and stress looking for a free spot.

HOW would they book a spot?

Parents would access the app from their phone and desktop.

What are the features?

We wanted to keep our app simple with easy access. Creating different scenarios, analyzing needs and goals helped us define the features in order of priority.

User flow and information architecture


Extending our user scenario

We role played a scenario using our busy mom user and created a user flow on the board before designing prototypes. From the user flow we uncovered more pain points. For instance, if the user has a last minute hitch, they would like to be able to send the booked parking spot to the person who will be taking the kids to school. This scenario brings up another problem:

How can we make sure that the person who is renting their spot is aware that the car parked at their spot is from the person who booked the spot?

 

We then made a quick prototype using POP app, taking pictures of our drawn screens which we presented to the rest of the class. We received feedback which helped me redefine the features.

Once the design sprint was over I decided to continue the challenge on my own. I extended my target to more users and created more users personas to uncover new pain points. When a user needs long term parking, they may park in a covered spot and knowing the size of the garage would be important. This prompted me to add an important feature (Selecting Indoor and Outdoor parking spots).

Information architecture

I redefined the initial information architecture based on the extended target.

Prototypes and wireframes


Prototypes

We received feedback on the first part of the prototype. The screen “Book/List” felt unnecessary and was adding an extra step. I decided to remove it when I created the wireframes. We decided to leave the “Voice navigation” feature on the side knowing that it would be something that would need to be incorporated down the line.

Wireframes

A few users mentioned that the “Extend” button was confusing: “extending time frame, repeating?”, “Should I press extend now in case I need it later?”

Some users were concerned that they would not park at the right spot. I decided to add pictures of the driveway/garage.

I also reduced the button “Share” to a smaller icon because at this stage user would be more prompted to contact the host. Sharing would most likely come once in the reservation. The icon would also appear in the reservation section. When sharing the booking, there will be an option to automatically let the owner knows that the spot has been transferred.

When I tested the 1st screen, the number of steps felt too much, especially since the main target may be busy while trying to book a spot. I made the map bigger so it requires less gesture from the user.

I ran an A and B test on the screen above. 70% of the users liked version A the best because it feels faster. One concern I would have with the slider is when the voice command would be implemented. The slider might not be the best option. Since I’m creating the app without the voice command for now, I decided to pursue with the slider version.

Visual design


UI kit

I created a color palette and icons. For the palette I used a combination of pastel tones with brighter tones and more subtle and dark colors for text.

Click testing

I conducted the test using VerifyApp. Four participants responded to the test.

Instructions

Users were asked to click on where they would find “more search” options.

Results

3 out of the 4 participants clicked on the “Filter” option. Filters will also be available in settings under the profile section.