S.J.Zhang
 
 
ParkAmigo Cover.png
 
 

startup

ParkAmigo

ParkAmigo lets you reserve parkways or find them on demand. While your car is parked, why not explore what’s nearby and have your car cleaned while you enjoy. If you have a parkway vacancy, list it on ParkAmigo and make money.

 
 
 
 

 Responsibilities

Restructure App UX Flows

Refine App UI Details

Refine Website Details

Redesign App Screenshots

Tools

Sketch App

Adobe Photoshop

InVision

Time

2018.11 - Present

 
 
Rectangle Gradient.jpg
 
 

Background 

After a successful initial launch, the platform met some obstacles on government regulations. While the company continue to work with different governments, it decided to expand on service offerings and redesign the Apps experience. I am redesigning the App’s UI/UX and working with the founder on product strategies.

 
 
 

Primary Interaction

Before I was brought on board, the company explored options of offering new services, like restaurant discounts around the parking location and eco-car wash while your car is parked. I advised that in order to refine the experience, we need to trim it down, do parking really well first.

Below is the current user flow on entering the app, which confuses the user of the App’s main purpose:

 
 
Old Primary Interaction Journey.png
 
 

UI Refresh 

There are contrast issues and buttons are inconsistence. However, instead of fixing all the small problems, the UI theme doesn’t look 2018, period. Fortunately, I was encouraged to redesign the theme from ground up. I started with the main screen, where the our primary interaction happens.

 
 
 
UI Redesign.png
 
Screen Shot 2018-12-08 at 10.27.59 AM.png
 
 

Interaction Redesign

When a user enter the app looking for a parking space nearby, they want to see a map as soon as possible with nearby availabilities. So we decided to remove the “choose” screen from the flow and have the parking tab active by default.

To focus on parking, we decided to combine all the local experiences into an explore tab. For our users, the best experience flow is opening the app, find nearby parking, book it and park it. The search bar enables users to pre-book other locations, however, it doesn’t justify the amount of full-width space it takes on the top.

I tried a few layouts turning the search bar into floating element, while keeping the search category selection area. Then I realized the search category selection should actually be filters. Users may want to see if there are fuel stations nearby when they look for a parking spot, so multiple selection needs to be on at the same time.

To reflect they are filters, I moved them to the bottom of the screen. They are no longer bundled into the search function, and easier to reach.

 
 
 
 
 
 

 Restructuring

The next step is rearranging the information architecture. For users who have one single purpose with us, find parking, the map is the most important. See where you are currently, the availabilities nearby, and make a quick decision. All other functions should come after there. Parking Status tab can be eliminated. Once a user started parking with us, the main interface turns into the “Parking Status” interface, and once the parking is finished, it turns back into the map interface.

Since we have user from two sides, people who only use the app for parking shouldn’t be forced to always see the tab of a page designed for hosts. We agreed that My Driveway should be tucked away in the side menu.

 
 
 
Screen Shot 2018-12-09 at 1.24.00 AM.png
 
Screen Shot 2018-12-08 at 10.27.59 AM.png
 
 

Result

The process redesigned ParkAmigo’s main interface as a map-based app. Upon opening, the first view you see are the availabilities of parking near you. All the other functions are moved into the side menu.

 
Map View Display.png
 
 

List a Driveway

ParkAmigo has a two-sided market. Adding a driveway to the platform needs to be a smooth, guided experience. Since we removed the menu tab bar at the bottom in favor of parking customers, the function is now in the side menu. Below shows how it would first appear in the sign up process. Of course, most users will skip at this stage, but it’s important to keep it in their head, so they can add one later if they have vacant driveway.

 
 
Redesign Misc Copy.png
 

Redesigning is happening…

 
 

Onboarding

After exploring new features like Car Wash and Local Experience, the App needs to narrow down to its key functionality. My first task when I started working with ParkAmigo, was to redesign the primary interaction. That being the core offering of the App, the best place to conclude and communicate its core value is at the onboarding experience.  

 
 
Rectangle Copy 2.jpg
 
 

Before

Since we are trimming down on extra features and focus on parking, the four pages below are no longer fitting. As we re-themed the UI above, the onboarding slides naturally need to follow.

 
 
 
 

Redesign

It’s onboarding slides’ job to communicate the main purpose of the App and emphasize what value we can bring to the users. In our case, that is, find a parking spot easily. I was inspired by UX researcher Girish Rawat’s article on App Screenshot’s best practice and started applying the same principles to ParkAmigo’s onboarding slides.

 
 
 
 
 

I tweaked the gradient background into a less saturated shade combination, so it’s easier on eyes. I introduced a subtle tone of turquoise and kept the gradient rich and eye-catching.

 
 
 

*Continue with Facebook option had been discarded in the live App.

*The screen in the phone mockup have not been updated as we are finalizing the map view’s design.

Onboarding 1.jpg