Can I Park Here?
Breaking through the confusion of Chicago's parking regulations.
My Task

Transform a set of UX wireframes into high-fidelity mockups ready for development for the city of Chicago.
Platform

iOS iPhone.
Deliverables

Visual competitive analysis, mood boards, style tiles, logo, mid-fidelity mockups, high-fidelity mockups, micro-interactions, interactive prototype, style guide.
Tools

Sketch, Photoshop, Illustrator, Principle, InVision, Google suite, Snazzy Maps.
The Challenge

Chicago is renowned for its ambiguous parking rules which can change on a whim depending on numerous factors — including snow level, time of day and event schedules. Keeping track of these rules is made no easier by the confusing, misleading and often non-existent signage.
A common sight and source of much bemusement for drivers of Chicago
Can I Park Here? was the concept conceived by a UX team at DESIGNATION. The idea came about in response to their research which revealed that confusion with parking rules was a widespread problem for Chicago drivers.

Their solution was a mobile application which leverages device location services to pinpoint users exact GPS coordinates. These are then cross-checked against official city of Chicago data to determine the parking eligibility of their current location.

Additionally, users are able to check parking eligibility based on custom time ranges and view full parking schedules for a particular spot, as well as saving locations to their favourites list.

I worked on a team with two other UI Designers, a Creative Director and Project Manager. Over four weeks we adopted an agile workflow based on Google Ventures design sprint. I collaborated closely with my team on overarching tasks during the discovery phase and then we applied the findings individually to create our own visual design solutions.
With so many overlapping tasks, I quickly learnt the importance of thorough sprint planning
Refining the concept

After thoroughly studying UX wireframes, problem statement, user personas and user stories, I met with my team to discuss initial impressions and any concerns. We proposed two major changes to the original concept.
1. Change the navigation

The original wireframes were designed to use a hamburger menu. Mobile design best practice guidelines stipulate that any fewer than three navigation items should be displayed in a bottom tab bar. Furthermore, as the context of use is likely to be in a car, any reduction of clicks and easier accessibility of navigation items would be of crucial importance to users.

2. Change the name

We felt that Can I Park Here? was too long and the app would benefit from a shorter, punchier name. After brainstorming multiple possibilities we proposed changing it to Park Radar. We felt this name accurately encapsulated the overall purpose of the application, as well being catchy and memorable.

We raised both proposed changes with our project manager in the first instance, and then subsequently with the UX team. Everyone agreed that the overall experience of the user would benefit from these refinements and so we were given the green light to proceed.
Discovery

We proceeded to take an in-depth look at various existing companies in Chicago's parking assistance industry for inspiration.
Key takeaways:

  • Spot Hero's use of subtle micro-interactions on the map was an effective way to hold users attention and encourage engagement.

  • We noticed a lack of clear visual hierarchy in the design of ParkChicago and took note to avoid this by presenting information in steps rather than overcrowding one screen.

  • Parqex and ParkWhiz were successful in incorporating elements of fun and personality in their interface through clever illustration and overall playful, unique themes

In addition to analysing the visual direction taken by direct competitors, we took a look at some out-of-category companies for further inspiration.
Key takeaways:

  • Divvy (a popular local bike sharing scheme) were of particular interest to me, being that they are another initiative of the City of Chicago. I was particularly inspired by the way that they were able to craft their own fresh, unique image while still remaining true to official government banding.

  • Uber and Lyft gave me a valuable reference for working with maps. I was inspired by their techniques for creating engaging map interactions, and how they managed information on top of the map in a readable, effective manner while maximising screen real estate.
Narrowing the scope

The current basis for all decisions up until this stage was primarily the UX problem statement and user personas. While these served as an excellent insight into the background and basis of the product, we created our own set of guiding principles with emphasis purely on the use of the visual design techniques, and how we could use these to best meet the needs of Park Radar users.

Keep it simple
Strike a visual balance of imagery and information by keeping maps at the forefront and avoid overcrowding individual screens with too much information.
Make it friendly
Speak to the drivers like a human and avoid legal jargon. The design will have subtle hints of Chicago to remind the user that it displays offical city data.
Give direction
Give parking spots clear visual importance, using colour to drive interaction.

Style exploration

I created three divergent mood boards for inspiration and used these as the basis for corresponding style tiles. My intention was to experiment with, and get rapid feedback on multiple visual directions without the time burden of creating a complete set of mockups for each.
Left to right: style direction one, two and three
Style direction one, while it did feel official, also came off as quite cold, un-engaging and somewhat dated.

Style direction two was well received, with overall feedback indicating that it was a creative approach which successfully addressed the core needs of the users while adding a good dose of character and uniqueness.

The divergence of style direction three was appreciated, however it did raise concerns over significant disconnect with the client image, and lack of suitability across the wide target demographic.

We decided to proceed with style direction two. The dark UI created clear contrast between the map and the areas where parking was available. Additionally, the overall aesthetic played well off the radar theme that came with the name "Park Radar".

.
Logo

With the style direction decided, and visual design principles in place I began looking at ways I could best represent Park Radar through a logo mark. I wanted something simple, memorable and also representative of the city of Chicago, parking and navigation in general. I sketched a number of possible ideas and narrowed it down to six concepts.
Some early sketches of potential logo concepts
I tested these with my peers and creative director, and we decided to move forward with the "wheel" concept. People liked its simplicity and appreciated the subtle reference to Chicago through the city's iconic six-point star flag in the wheel spoke.
The first challenge I faced when moving from paper to digital was how to construct the six-point star. I achieved this by creating a single "navigation needle" shape, duplicating it twice with one copy at a 120° angle and other at -120° and finally aligning the centre points. Using compass needles to construct the star was an effective way to further reenforce the overall navigational aspect of the product.
I incorporated the wheel and conducted further tests. The six-point star shape was so well received on its own that we decided to remove the wheel and focus on the star. I went through a series of revisions before a landing on the final result.
Original concept
North-East facing needle appears to be floating over others.
First revision
Dropped the opacity of each needle to 77%.
Second revision
Placed the star over a pure white background of the same shape.
The final result produced a pleasingly detailed 3D effect at the centre point of the star, and overall aligned nicely with my initial vision for the logo.
High-fidelity mockups

When it came to designing high-fidelity mockups I was well prepared because of the earlier work I'd put in to tackling wireframe issues, putting design principles in place, and deciding on an overall style direction.
Typography
I chose to exclusively use the Apple system typeface San Fransisco UI in various weights and sizes throughout the design. This decision was based on the following factors:

  • Its size-specific letter shapes and dynamic character spacing enable easy legibility at all sizes. This aligned with the importance of users being able to easily and quickly read information on screen.

  • Its modern look and feel suited the overall aesthetic of the application well.

  • It is highly regarded as a reliable, versatile digital typeface which performs smoothly on iOS devices.
Colour

In accordance with my original style tile, I kept the colour palette to a minimum, primarily using only shades of grey with a bright "neon blue" accent colour to highlight legal parking zones. This proved to be highly effective in drawing the users eye to exactly the right places.

The only exception to this is three special association colours which I introduced to aid in easy recognition of parking results. Red for no parking, yellow for conditional and green representing unconditional parking.


Screens

I went through numerous revisions of screens over the course of two weeks. Each new iteration was driven by my own exploration and experimentation, feedback from my team mates, advice from creative director, and discussion with others in the wider DESIGNATION and 1871 community.

The wireframes

My first action was to go back to the original UX wireframes, both as a refresher and to start thinking about best to incorporate visual design techniques in a way would best suit the end users of the application.
First iteration

For my first iteration of screens, I eliminated colour and focused purely on visual hierarchy, layout and typography. During my exploration I identified and raised three recommendations to further enhance the concept.

Moved "save location" button from result modal and incorporated as a "star" icon in the search bar. On top of cleaning up the result card, having it next to the address is a more common design pattern.
Designed a "tabbed result card" concept, with separate tabs for the result, any conditions, and full schedule. This allowed for a much cleaner, more scannable card, especially when conditions are associated.
Redesigned the time selection and display interaction to enable quick and easy selection of the the most common parking times.
Second iteration

For the second iteration, I built upon the previous screens, this time incorporating the full colour palette

In this revision I designed a new concept for the calendar/timeline view. The original version of this screen received some criticism for its complexity and ambiguity. It also required the user to scroll through the screen in order to see an entire day.
Third iteration

The main focus for my third revision was on the result cards. While the previous version was well received, the problem wasn't quite solved yet.

Motivated by the desire to create a seamless, natural interaction, demanding the least possible mental energy from users, I designed an interactive card approach. The idea being that result cards can be swiped off the screen to return to the map, and when tapped on they expand to show the full schedule.

While this approach can carry the burden of a higher initial learning curve, once understood, the interaction becomes second nature. I based this directly on the understanding that users need to be able to operate the interface quickly and easily on the go, with only a quick glance at the screen.

In addition to the cards being interactive, I also centred them and added a dark overlay to the rest of the screen, eliminating all background noise and further enabling fast recognition.

Final iteration

My final iteration was entirely focused on further honing the result cards.

  • Tightened up copy by using shorter, punchier two word descriptions over full sentences.

  • Colour coordinated descriptions with the overall message.

  • Included the timeframe for which the message is applicable.

  • Increased size of the "parking sign" illustrations.

  • Removed conditions from the yellow result card in favour of having them exclusively reported through the calendar/full schedule view.
The final result
Loading page, result pending and address search screens
Result cards for unconditional, conditional and no parking
Time picker, calendar/full schedule view and saved locations
I created a prototype using Principle to demonstrate a common user flow. The video below represents the interaction of a driver who's made a trip to downtown Chicago, pulled over somewhere near their destination, and wants to know the eligibility of parking there.
Future considerations
Given the tight timeframe of this project, not everything could be addressed. For future iterations, I would recommend the following:

  • Investigate colour coding the lines on map the same as the result cards (red, yellow and green), making it clearer to the user where they can park from glancing at the map.Currently only blue highlights are used on the map to indicate legal parking zones (which may or may not include conditions).

  • Look into incorporating notifications to the user of any changes to parking regulations in their saved locations.

  • Explore how the application will handle paid parking zones. It is currently unclear how these will represented in the application..
Reflections

While my finished product was very well received, the main criticism was that the overall visual direction didn't align closely enough with the client. This was justly pointed out by two of the guest critics during my final pitch. I did make strides to incorporate elements of the city of Chicago — using blue as the primary accent and brand colour — however this ultimately feel short. I learnt in future to be more mindful of the image that the client needs to portray, and never to let my own personal design tastes overrule what is best for the project.

I find the most daunting (and exciting) thing about coming up with a visual language from scratch is the sheer amount of possible directions it can go. It's moments like these where I really appreciate a well defined design process to add structure and direction to what can quickly become a hazy landscape, filled with subjectivity and unfounded assumptions.

Writing this case study has given me a real appreciation for just how much work my team and I got done in four short weeks. For many of us (myself included) it was the first time going through the process from start to finish in an in-person context. We learnt quickly that we had to rely on each other not only for collaboration in the early discovery stages, but also for the duration of the project as extra pairs of eyes and simply moral support at times. I am certain I could not have done it alone.

Overall my finished product is a labour of love, a symbol of my extensive growth as a designer, and a piece of work that I am proud of.

Phone: +44 073 9948 9025
E-mail: glen.oakes@gmail.com
Made on
Tilda