A mobile app designed to give residents and visitors of Chicago a transparent view into parking rules and regulations. 

Client

 Mock Project for DESIGNATION

Timeline 

4 x 1 week sprint

 

My Role

UI Designer

 


What is Spot Hound?

A mobile app designed to give residents and visitors of Chicago a transparent view into parking rules and regulations. This concepts allows users an opportunity to ensure their parking spot is safe at their leisure. A UX research team from DESIGNATION spent three weeks defining the parameters of the problem at hand for Spot Hound. They then passed their wireframes over to our team of 4 UI designers, to further research and individually tackle the design of the app.

THE CHALLENGE AT THE PARKING METER

Chicago has 1.5 Billion dollars in unpaid tickets from parking, red light and speed camera violations. City dwellers are all too familiar with the orange slip of paper that often greets them, quickly followed by a misunderstanding of what rule or regulation they violated.

The tension between the city and it's drivers has become increasingly worse, hence the debt the situation has resulted in. It’s no secret that parking entails: finding a spot, decoding parking signs on all sides of the block, and paying. This leaves citizens and visitors alike, frustrated and confused before they arrive at their destination. The UX research team crafted a solution that entailed leveraging city of Chicago parking data to determine if drivers current location has eligible parking.  

  Our team planned our individual deliverables in advance by utilizing a scrum board for each sprint. 

Our team planned our individual deliverables in advance by utilizing a scrum board for each sprint. 

The challenge at hand was to design a mock app for drivers to be able to find a parking spot successfully in real time, while simultaneously reducing frustration and parking tickets. My team worked diligently over four weeks to individually craft the design for this project. Utilizing the agile methodology broken into one week sprints, I was able to produce a competitive analysis, mood boards, style tiles, low and high fidelity mockups, an interactive prototype, and finally a style guide for further development.


Design Approach

We began our research by looking over and studying the UX wireframes to understand the framework of the design project at hand. 

Static Wireframe Flow 1 Copy.png
Static Wireframe Flow 1 Copy 2.png

I then met with the UX research team to walk us through the wireframes, and discuss questions or concerns that had risen from reading over the research. In order to fully transform the product into a responsive and reliable app, design decisions were narrowed down into two main changes to the original concept:

1. Move the Navigation

Users need easy thumb access. Upon logging in, users want to be able to see if they can or cannot park in a spot as quick as possible. Move the navigation to the bottom of the screen for easy thumb access.

Static Wireframe Flow 1 Copy 3.png

2. Evolve features from wireframes

Adopt the ‘sign in’ feature from the UX wireframes, but place the feature so it is not visible on the main screen upon entering.  

 

What’s out there?

After deciding on an approach, we conducted a visual analysis of competitors in the parking app landscape for inspiration. Giants in the space such as Spot Hero and Meter Beaters, currently set themselves apart visually by incorporating their recognizable brand color with a neutral map.

Aside from direct competitors, the team analyzed other app visual directions that incorporate a focus on not just parking but on navigation. Drawing inspiration from out of category was important, particularly for familiar  transportation apps commonly used on a daily basis.

With a better idea of what type of parking apps are on the market, we wanted to craft design principles to adhere to. These principles are reminiscent of core value Spot Hound should encompass within the end result.

 

Guiding Design Principles  

The visual inspiration, paired with landscape research allowed for us to narrow down a few key principles that help to define the process. We crafted three specific design guidelines to narrow the scope that would help to measure designs and iterations to come.

 

Fast Direction

Users will to be able to find out if parking is eligible in a spot as quick as possible, in as little clicks as possible. We set out to minimize the parking process to eliminate frustrations of drivers.

Keep It Casual

Utilize a familiar tone of voice to instill confidence in users, and nixing the legal jargon associated with parking.

Be Responsive

Communicate to users that we are pulling parking data in real time, and doing the heavy lifting for them. We will give cues to the user for a available parking using color and indication on the map efficiently.


Style Exploration

MoodBoards & Style Tiles

With the principles laying a nice foundation of direction on what we were aiming for, I assembled three mood boards. The moodboards helped set the tone for what kind of style tile I was set out to create while paving a path on color palette, typography, and feeling I wanted to achieve.

My creative director noted that the strongest of the three tiles that seemed to resonate with the brand the most was the navy blue with orange as a secondary color (Style Tile #1).

For my final style tile, I toned down the usage of orange honing in on the navy as neutral backdrop. Red and blue were brought in order to offer up alerts for parking that users could identify easily.  This style in particular embodied all of the qualities I wanted to showcase with Spot Hound as a modern responsive app.

 

Logo Design

I set out to create a logo for Spot Hound that would bring identity to the brand and set it apart from a typical government app. The team played around with several name ideas, and came up with a small list to user test. Spot Hound was the most favorable name for the app due to it’s light hearted nature and the nod to truly feeling like a hound when trying to spot a car in Chicago.

This led me down a path of exploring the meaning of the Spot Hound logo and what the brand the brand I was bringing to life should encompass. I wanted users to be able to see the logo and recognize the symbolism behind the image, and understand what the company was associated with off the bat.

The direction I took the brand in utilized Spot Hound as more of a metaphor, leveraging the idea of eliminating frustration for the drivers. I came up with a few sketches that played off of various different shapes and object. The logo that stuck out the most was the parking meter intertwined with a car to symbolize the parking meters that were sprinkled around the city on almost every corner and can still be synonymous with parking here in the city.  

 

Final Logo

orange logo.png

Mobile Application Logo

The final logo took many iterations and divergent rounds of critique to get just right. The logo direction I decided to take is a parking meter intertwined with a car. Logo in hand, I shifted gears to iterate on the wireframes that were passed down from the UX team.

High Fidelity Mockups

The design approach and stylistic decisions are cohesively strung together to create the high fidelity mockup screens for each key screen. The design decisions laid the groundwork for which functionalities I foresaw were going to evolve.

Wireframes

Before jumping into high fidelity screens, I crafted a series of wireframes with more depth and detail. These wireframe edits were important for the project because they shaped the product from the UX wireframes with the visual design decisions.

Spot Hound Wireframe Edits.jpg

The quick mid fidelity wireframing brought to light any initial issues because we were able to take a look at the core screens without branding and color added in. Features such as the hamburger menu and what options were nested within this menu led to a manipulation of key elements on the screen. Noteworthy changes I made to the UI to improve user experience:

1.  Easier Navigation

 I moved the navigation from the top of the initial wireframes to the bottom of the screen. A similar UI pattern utilized in Google Maps. This gave breathing room for users who were only coming to the app a few times, or only once as a visitor to Chicago.

Static Wireframe Flow 1 Copy 3.png

2.  Keeping the Chicago User In Mind

 I moved the navigation from the top of the initial wireframes to the bottom of the screen. A similar UI pattern utilized in Google Maps. This gave breathing room for users who were only coming to the app a few times, or only once as a visitor to Chicago.

sign in.jpg

3.  On Boarding for Efficiency

 An on-boarding was added for new users and wouldn’t appear after you’ve on-boarded once. Giving the user full advantage of the tool allows for a more efficient user interface experience.

This is when I realized that I needed to additionally craft a more robust on boarding. I spent the last week of Sprint 4 worked closely to accomplish the high fidelity screens for Spot Hound. With a few tweaks, I moved on to implement the branding identity.

Final Screens 

 

Future Considerations 

If time had allowed, I would have spent time user testing to solidify our research and design decisions. Although this was a mock project, this concept is definitely onto something and I would be curious to investigate further. Coming into the project and transforming low-fidelity wireframes intended for micro-site over to an iOS app was a challenge in and of itself for a solo UI designer (with a team to lean on for major design decisions). Having to dig deeper into the UX research and making assumptions that we didn’t have time to user test makes me wonder, given more time, what the users would have said.

The importance of user testing on a project such as this is a make or break situation. Given the chance I would have tested Chicago dwellers who live in populated areas, Chicago suburbians who come to the city frequently, and travelers to get a wholesome look at the user market the app is intended for. Right off the bat we could test and measure the guiding principles we built out for ourselves in the beginning of the design process.

What did I learn?

As a new designer, this project laid the foundation I needed to find my own process. It was definitely a challenge to work within such a time crunch, but I believe this has made me a more efficient designer and teammate. Working within a tight timeframe (4 x 1 week sprints)  while following a tailored process can produce results once I began to trust the hard work and energy.

This project also taught me the importance of guiding design principles as a measurable foundation for all design decisions. Coming from a background in digital marketing, having a measurable key performance indicator (KPI) in a design sense was imperative to my process. After the research was done and the background was gathered from the UX team, it was the design principles that helped guide the next steps on what was important. In order to interpret the initial wireframes and make decisions to better the application, there was a set of rules to abide to and look back on for reference.

Spot Hound laid the groundwork for my future design work. Through trial and error, I gained priceless lessons to apply to my next projects and learned the structure I work best within.

This project gave me the courage to call myself a true designer.