Preview image of the Btwn the Lines application created for this case study.

Btwn the lines

Creating an end-to-end parking application to help reduce the stress and confusion around parking in big cities.

Introduction

One major problem within bigger cities is the congestion of cars and the confusion around where one can park when they’re out in areas with minimal parking. We want to create an application that allows users to easily find areas they can park near them, book spots within their preference, and allow the possibility for cashless payments.


Role
I contributed to the overall design process and oversaw aspects related to user flows, wireframes, rapid prototyping, and usability testing.

Additionally, I conducted user research and contributed in synthesizing research findings to produce viable ideas.

Project Scope
The project was completed in 4 weeks with weekly meetings with my mentor for guidance.

Tools
Figma, Google Forms, Maze, Zoom

Cars parked in a parking garage.

Design goals and objectives

My goal here is to create a new app concept constrained to its MVP.

For this application, I want to create a clean and simple application aiming to reduce stress and anxiety when it comes to finding out where one can park in big cities.

Scope and Focus

Within 80 Hours I will…

  • Research the subject matter to build a data-driven application useful to users.

  • Creating branding guidelines for the app and company.

  • Strategize the MVP - pinpoint the area that I am going to solve for.

  • Ideate solutions for the MVP.

  • Test the MVP.

The Process

Research

  • Competitive Analysis

  • User Research

  • Creating a Persona

  • User Scenarios

UI Design

  • Logo Design

  • Creating a UI Kit

Interaction Design

  • User Flows

  • Wireframes

Iteration

  • High-Fidelity Prototypes

  • Usability Testing

  • Test Interpretation

  • Priority Revisions

Researching the Problem Space

Within the research phase I want to:

  • Understand any current pain points in finding parking in big city areas.

  • Discover the current methods users have to find parking.

  • Learn how we can develop a solution that may reduce stress around parking.


Competitive Analysis

I researched websites and applications that focus on helping users find parking. Helpful takeaways and inspiration from my research are that…

  • Users want to see and book parking spots based on their pay rate preferences.

  • Users want to see available parking areas based on their immediate search.

  • Users like the benefit of having discounts when booking through applications.

Secondary Research

63% of nearly 6,000 U.S. drivers surveyed reported that they avoided driving to shopping sites, airports, leisure or sports centers, and other destinations due to parking challenges.

In 2017, it was reported that motorists spend an average of 17 hours per year searching for parking.

Searching for a parking spot can lead to unforeseen personal and emotional problems. It was reported that nearly two-thirds of U.S. drivers reported feeling stress while trying to find parking.

Creating a Persona

"It's difficult to know where I can park if I'm in a downtown area. Signs can be so confusing... parking can also just take a long time to find, you can easily spend about 30 or more minutes to find parking especially if you are in an area you're not familiar with. It's so stressful and confusing if you don't plan ahead of time!"

- Persona (Violet Parker)

My persona focuses on a user who generally likes to plan ahead at any chance she gets. Parking for this user comes with many stress factors: finding parking in general, signs causing confusion, and being downtown during prime times elevate the stress for her.

User Research

When it comes to the normal processes for finding parking within a big city:

  • 4 users stated that they utilize Google in some form or fashion. It was said that Google maps would show if the destination you are going to has on-site parking, if it doesn't then most of the users will look around the destination to see if there are any parking garages nearby.

  • Generally, all participants in my user research stated that they will look for parking ahead of time. This reduces the stress of finding parking.

    • Users are mainly aiming to get insight into pricing rates of parking and try to see the distance parking lots or garages are in relation to their destinations.

User Scenarios

As a UX Designer, it's important to create applications and projects that look decent but the readability, overall flow, and experience for the user will always be a priority over design for me. To help me get into the mindset of the user, I created a few user scenarios to work off of to prepare myself for the design phase.

  • I want to be able to search within an app to find various reliable options for parking near my destination.

  • I want to search, find, and book a parking spot, in a garage or lot, all in one application.

  • I want an app that can provide discounted rates for parking spots when signing up as a member.

  • I would like to be notified of how much time I have remaining in the booking I reserved.

As a user…

UI Design

When it came to creating branding for the application, I wanted to make my brand and application stick out from other parking applications. I wanted to create a design around a parking meter while keeping the design as a whole minimal yet easy to interpret to users. For my color scheme, I wanted to utilize colors that leaned towards calming the user. Parking in big cities or new cities is such a stressful task that I wanted the colors used to reduce any emotions or feelings of those who opened the application.

Four Logo Mockups for the Between the Lines Application

Interaction Design

User Flow

For this case study, I created 2 user flows.

  • A searching process

  • A booking process

When creating my user flows, my main goal was to space and section out each area in a way that wouldn't be overwhelming to those utilizing the application.

User flow for the search process.

User flow for the booking process.

User flow for the booking process.

Low-Fidelity Wireframes

For the layout and flow of my wireframes, my main goal was to create an application that could help take a stressful task and make it easy and efficient for anyone utilizing it. I wanted to separate all processes into their own screens to avoid any chance of overwhelming the user and I also wanted to create a flow that was easy to understand, especially for a new user.

Iteration and Implementation

Within this prototype, you can sign in or create an account, search and filter your parking, and book and monitor your parking spot!

The Prototype

Testing Objectives

The main objective for the first usability test on this case study was to:

  • Observe how users felt about the overall flow and design of the app.

  • Discover how users felt when going through the search process.

  • Discover how users felt about the booking process. (Was it easy to understand and did it feel overwhelming in any way?)

Summary of the Findings

  • Number of participants: 5

  • Average time spent with each participant: ~20 minutes

  • Time for each participant to complete all tasks/scenarios: less than 10 minutes

Next Steps

The app in small places could use some fine-tuning. With some features, it may benefit from adding tutorial popups to help them better understand some features (selecting the booking times feature) or it may be worth looking into more user-friendly options for selecting times. It could also be worth looking into creating an "offline mode" navigation system. This could be a feature that could download directions to a spot booked, just in case the user loses network connection or reception while inside a garage. After these changes are implemented it is always worth re-testing the flows and changes to see how users feel about the revisions to the application.

What I’ve Learned

When building out an application, you really learn that consistency is key. Making sure that details from big to small match across various screens and processes is something that I tried to keep note of when building all features within this app. Details matter. In terms of hierarchy, I always want to make sure that the content within the products I create is well organized so that it doesn't cause any confusion to the user. For hierarchy, this comes down to both information architecture and visual hierarchy. I wanted to make the flows within every screen clear and easy to understand for all users. With the help of my mentor, I was able to learn a little more about visual hierarchy and creating consistency from screen to screen. I've also been more aware of how to make sure my application is accessible in many ways, from the motion of animations to checking if color contrasts pass at all levels!

Let’s create together!

MORE CASE STUDIES

Adding a feature to Discord to help elevate the stream experience amongst friends.

Discord

The Bloom

Restructuring a local cafe’s website to help create a more efficient ordering process.

Premise Health within Dell Tech

Examples of UX Writing created during my time with Premise Health.