Josh Magno, UI Designer

SpotHound

Helping people park in Chicago

 

SpotHound | Can I Park Here?

Branding and designing a
government-funded app! 

Client:
DESIGNATION Labs

Role:
UI Designer

Time:
4 Weeks

Platform:
Mobile App
Responsive Marketing Website

Tools:
Adobe Illustrator
Sketch
Proto.io

Deliverables:
Hi-fi mockups
Hi-fi prototype
Style guide

- Prologue

A previous UX team designed Can I Park Here? as a responsive website to simplify the Chicago parking experience since users’ primarily visited the city website to pay parking tickets and to understand parking rules. Can I Park Here? lets users know where and when parking is legal. After reading the UX research and studying the wireframes, a team of three other UI designers and I interpreted this student project as a city-issued mobile app.

Our main challenge?

Brand and design an interface to
boost drivers’ trust in Chicago.

My team wanted the app to clearly communicate whether or not a parking spot was legal, and for what period of time. We hoped to do this by designing an accessible, reliable, and understandable interface.

We didn’t have a direct client to speak with about the app, so we learned more about the app through the UX research; conveniently, the UX team who researched and developed the wireframes were still on site for us to work with while balancing team decisions and generating individual designs.

 

- CHAPTER I:
Taking Apart the UX Research

Or, The team redesigns wireframes!

The team got familiar with designing for the user personas created by the UX team; Naomi, who lives in the city wants to regularly find legal parking, and Matteo from the suburbs just wants fast and convenient parking.

Looking to Apple Maps and SpotHero as successful map examples, my team found successful UI patterns to implement in the the wireframe redesigns.

Move the menu: We moved the hamburger menu to the bottom of the screen: this makes accessing menu items easier on the thumbs.

Move the search fields: We decided to move the search bar to the bottom of the screen; for Naomi, immediate location information would be accessed first and time would be accessed second. The time window is collapsible and defaults to a search period of 1 hour.

Remove branding: We removed the “City of Chicago: Parking Services” and crest at the top of the page: users know what app they’ve accessed, and this opens up screen real estate.

Finally, the UX team had their own design principle that became a focus in my final approach:

Instill trust in the city of Chicago.

I wanted to create an app that really enforced the idea of trusting in not just the app, but Chicago itself. You’ll see how this plays out later in my designs.

 

- CHAPTER II:
Competition & Inspiration

Or, An abundance of apps!

We started looking at direct competitors like SpotHero, Meter Beaters, Parche, and Parqex to get an idea of patterns that did or did not work well in apps similar to SpotHound.

Use bright and bold colors:  vivid colors make the experience more interactive and interesting.

Use bright and bold colors: vivid colors make the experience more interactive and interesting.

Type in sans serif fonts:   sans serif fonts appear more casual and approachable.

Type in sans serif fonts:  sans serif fonts appear more casual and approachable.

For visual inspiration, we looked at Google Maps, Lyft, Sweep Around Us, and Waze. We looked at these since they all incorporate maps and/or driving directions, but didn’t directly compete with SpotHound. We focused on adopting a fun color palette from these apps as well as some more effective UI patterns.

Write with a warm and friendly tone:   a familiar tone of voice makes the app more approachable and personable.

Write with a warm and friendly tone:  a familiar tone of voice makes the app more approachable and personable.

Emphasize the city:  customizing the app to the city's parking information ensures that the app accesses accurate information.

Emphasize the city: customizing the app to the city's parking information ensures that the app accesses accurate information.

We noticed all successful apps used sans serif fonts, and bright/bold colors livened up an app to provide generally simple information. We took this information and made goals for SpotHound: we wanted to emphasize the City of Chicago to increase trust in the app and the city, make it friendly and informative, and overall make effective and enjoyable user designs.

 

- CHAPTER III:
Making Design Principles

Or, The team wrestles out some rules!

Throughout the design process, we want to make sure we were designing what app need to be instead of what we want it to be. To do this, we created design principles - which I realized were like rules - to hold our designs accountable in each design deliverable.

We struggled with creating these principles as a team; it could have been because it was the first set of design principles we made, or we were working on a team for the first time. These principles - however much they actually are or are not principles - were developed over the course of the entire project.

 

- CHAPTER IV:
Making Moodboards & Style Tiles

Or, Inspiration outside of Pinterest!

With these design principles in mind, we could start putting together inspirational pieces for a moodboard, and build style tiles to gave us a general idea of how the app would look and feel.

Keeping the idea of Chicago in mind, I created thematic moodboards that referenced the Chicago flag, the Chicago bears, and adventures in a concrete jungle as a metaphor for the parking experience.

The Chicago flag-themed moodboard and style tile was a favorite, so I continued with this approach in the final designs.

The other style tiles didn't evoke as much excitement or pride in Chicago.

 

- CHAPTER V:
Naming the App

Or, Choosing a name, fast!

Running short on time, my team and I looked to do a quick rename for the app. Can I Park Here? doesn’t roll of the tongue, and shortening it to “CIPH” sounds too much like a venereal disease. We brainstormed some names that referenced finding parking spots:

To choose a name quickly, we left the list to a user preference test. SpotHound won!

Even though this name hit a little close to one of the direct competitors (SpotHero) in the visual competitive analysis, my team left the name to a democratic vote. We stayed with SpotHound, and eventually learned to defend the name in future presentations.

 

- CHAPTER VI:
Logo-ing the App

Or, Manipulating mutts to mascots!

I pushed myself to generate as many variant logo ideas as possible, taking the name SpotHound literally and figuratively. Sketches included dogs, parking spots, parking meters, geometric interpretations of parking navigation signs, and just typography alone.

Ruff  sketches.

Ruff sketches.

Experimenting with typography!

Experimenting with typography!

Playing around with the hound.

Playing around with the hound.

S's and H's. One of my more proud perspective logos.

S's and H's. One of my more proud perspective logos.

I found users gravitated towards geometrically clean or adorable animal designs. In a preference test between the “S/H” and hound profile logos, a user mentioned how

“The S/H shape is super related to parking,
but the dog will allow you so much more
freedom to brand.”

Liking the idea brandability, I continued with the dog profile logo.

It’s also worth noting that a major point of feedback in our final presentation was, “If you choose a name like SpotHound and you don’t have a dog in it, people will be confused.” I’m happy with continuing with the hound as the mascot, and even hiding a parking spot in the collar.

I experimented with incorporating the Chicago flag colors from my color palette to the SpotHound logo. The winning design used black and blue.

 

- CHAPTER VII:
Final App Screens

Or, What iterations are red, white, and blue all over? And over? And over?

My high-fidelity screens went through several iterations since, according to peer feedback, details got get muddled in a primarily blue color palette. Originally blue icons turned red; specific uses of red changed so as not to be alarming and more of a call to action color. To help tie in the hound mascot, I placed it in the map’s central point.

In my iterations, I tweaked a map’s from Mapbox to keep the overall feeling ‘casual’ with my blue and red palette. Many changes came from playing around with the time card’s placement and how users like Naomi and Matteo would interact with it; I was mostly concerned with getting users to complete a search fast.

Move time: I relocated the time indicator to the bottom of the screen, and remove the total time counter.

Create cards: I condensed the search bar and time parameters into one card, and the menu items into a second card. These cards are interchangeable/swipable.

Code & condense the calendar: The calendar navigation shows different states that match the parking confirmation state, and a dragable indicator identifies exact moments when parking eligibility states change.

 

- CHAPTER VIII:
A Video of the Prototype

Or, Venturing into Proto.io

I focused on going through different user flows to highlight the different needs for Naomi and Matteo; Naomi would need long term parking in the future and Matteo would need short term parking immediately. Boiling down both user flows into simple actions, I realized the search option stayed the same.

This is the first project that helped me realize how much I like prototyping in Proto.io than through inVision since there are more opportunities for microinteractions and state changes.

 
 
 

- CHAPTER IX:
Making a Responsive Landing Page

Or, Advertising like Apple!

We wanted to promote SpotHound for the City of Chicago; visitors’ first opinions of the app would be the site, so I wanted the site to evoke the same trustworthiness and pride in the City of Chicago as the app does. I used the same colors, icons, typography, and maps to familiarize users with SpotHound’s aesthetic. This resulted in a fairly long scrolling page, but effective in conveying a large amount of information in one space.

 
 
 

- CHAPTER X:
Style Guide & UI Kit

Or, Preserving SpotHound

In the possible case the City of Chicago wanted to take me up on my app design - and seriously, the city needs it - I created a style guide to set parameters on the SpotHound brand. In a possible situation that any other city would want to adopt SpotHound, maps and icons could be updated to reflect official city colors.

Abridged version of the style guide and UI kit are below.

You can download PDF copies of the style guide I created for the app here and the UI kit here.

 

- Epilogue:
Project Takeaways

Or, Lessons learned, and looking to a hypothetical future

I’m overall proud with my version of SpotHound, given the drastic change in it being my first on site project and the shorter time frame. I learned the importance of pacing myself in a project like this

At the end of this project, I learned how stressful this process is, but to really trust it. More specifically as a designer, I want to focus on three key points:

  1. Question what I’ve been handed. UX research can drive design decisions as much as UI research can, and experimenting with more common UI patterns can better the mockups from wireframes.

  2. Decisions must be defended. In times when choices must be made the design principles and research can’t make it for the designer, make a choice and defend it.

  3. Pace, not race. I did a lot of things last minute, and it came from lingering on choices too long. Pacing myself better would have made for a more well rounded final design.

And if I had more time on this project? I would recommend the following:

While this project needs more testing and iterating, I’m proud I can safely hold up my design to design principles, the prompt, and the goals and say it fits the criteria and satisfies the ultimate user needs.