Park Radar

Date: 2017
Services: Branding, Visual Design, UX

01. Back Story

Chicago is the third most populated US city with over 2.7 million citizens. Known for architecture and commerce, it is a prime city to live and work.

Yet, like many big cities, it has a known culprit – parking! Parking is a thorn in the sides of motorists. Knowing this, DESIGNATION issued a challenge to my UI team to design a fictional parking app that will find non-metered streets to park.

02. Knowing the Product

A UX team from DESIGNATION researched and tested underlying issues of the mobile version, although originally designed for the web. They provided wireframes to illustrate and replicate a mobile version.

CIPH Screens1
CIPH Screens2

Understanding the User

Within a three week deadline, we utilized the Google Design Sprint to get the ball rolling and keep us on track. To understand potential users, we did a few things:

1. Develop personas according to criterions like age, demographics, distance traveling, and much more.

2. Survey the competitive landscape to determine success, struggles, and opportunities available to leverage.

Case Personas
Visual Competitive Analysis#2

Analysis Takeaway

1. A few competitors suffer from text-heavy, feature rich interfaces that cause cognitive overload for the user.

2. Color palettes varied across the spectrum, from too much to too little. The visual hierarchy was almost not evident.

From this visual analysis, we chose to incorporate the simplicity and white space from Lyft and the minimal color of Spothero.

Guiding Stars

After initial research and further collaboration with the UX research team, we defined the following design principles to guide the rest of our process:

03. Design Process

Mood and Style Direction

With these principles in mind, I explored a few visual directions in the form of mood, style direction, and colors. I designed three divergent mood boards and style tiles respectively, which resulted in one cohesive mood board, style tile, and color palette.

Creating an Identity

With no name not yet created, we performed a mindmapping activity. The process involved scribbling random words, then further discarding irrelevant ones. From there we focused on a few words, discussed, and settled on the name “Park Radar”.

App Naming Process

I explored ideas around directions, a valet that found spots, or sonar type direction. However, simplicity was key to creating a clean, modern brand. From there, I condensed the sketches into the strongest concepts and put them in front of users to get feedback.

Sketchings to Vectorizing logo

I did iterations on the selected concept, which produced a sleek mark.

Logo Process to Final Logo Example

Reframing the Original

Turning our attention to the wire, we took a dive into the wireframes and discovered a few UX decisions. We made the UX team aware of the reason for these decisions.

1. Converting “Save Parking” into “Favorites” – This feature originally was logical since it was web based. But as an app, it’s simpler to have it as a bottom navigation because it mirrored the CTA transit app in saving information to local storage, thus eliminating the need for the “Save Parking” option. Additionally, it reduces the onboarding process significantly.

UX reframing

2. Removal of hamburger menu – Research revealed that the hamburger menu caused the map area to be undiscoverable for users. And as such a Tab bar navigation encouraged interaction vs. hidden menus.

UX - Hamburger Removal

3. Icons for Representation – Installing these icons proved valuable, due to the fact the search icon allowed the user to set time and date. The “P” sign shows only parked areas, while the “p with crossed line” denotes parking.

Icon Placement

04. Breathing life into the Design

Like a chef experimenting whipping up new recipes, a lot of trial and error is inevitable before perfection.  And as such, the app design process follows the same process. Here is an example.

Key Screens of Explorer Interface

Iteration of Explorer Screen – The map view is the most used screen. As such, it’s important that I maintained visual hierarchy with the colors because it provides quicker access to features by using familiar icons and positioning features.

What’s the Result?

After rounds of iterations, I arrived at my final designs. I presented these screens along with a prototype(Flinto):

Along with the prototype, the responsive website and mobile were created. With the design principles in mind, a visual hierarchy was developed by balancing the amount of text to images, and using simple icons, creating a friendly and recognizable theme.

05. What’s Next?

With the project wrapped up, I transitioned to the documentation of assets. I annotated the app screens as well as creating a style guide. The guide communicates how to apply the brand across any medium.

Brand Cover
Table of Contents
Brand Essence
Brand Voice
Park Radar Signature

Final Thoughts

Get feedback early and often

As a designer, one can become attached to a particular design or screen without seeking feedback. It’s amazing how a person’s feedback may push your design in a completely different direction.


Having an open and collaborative environment with teammates plays a huge role, as I learned that listening to feedback objectively improved my design decisions. Conversely, I learned to provide actionable constructive feedback. When there was a major issue, we had a group meeting to identify and solve the issue.

Don’t be afraid of the Unknown

I have learned not to allow the unknown deter me from taking on something new. Being forced to learn a new program like Flinto proved invaluable. It gave me the opportunity to overcome my fear of my inability to learn and adapt to a new program. It showed I must always be ready to step outside my comfort zone and diversify my skillset to accomplish a project.