Park Radar

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.

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”.

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.

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

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.

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.

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.

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.

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.

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.