Snag Parking was an app where users could host or find parking spots, like AirBnB but for parking. I worked with Snag Parking to help them take their initial prototype app and turn it into a final market ready product and brand. While working with them I established a new app name along with a new branding identity. I also took the initial concept of their app and worked with them to redesign it to make both the user flows and user interface more modern, simple, and user friendly for the official product release.
. . . . . . . . . .
Done in collaboration with: Aaron Blue & Vikas Sharma
February 2020 - April 2020
One thing about this brand if you hadn’t noticed already is the eye patch in the logo over the letter P. Originally the name for this app was Pirate Parking, however, when working on the brand we found people associated pirate with stealing parking spaces which was not the impression we wanted from users of the app.
So I put together a few new possible app names and brand styles, as shown here, to test with focus groups and get feedback on which name and style connected best with potential users.
The elements that resinated best with people was the yellow, pink, and green color combination because it felt friendly, exciting, and different from other apps they used. Also the name snag is what people gravitated towards most because it was a word they commonly used when describing finding a parking spot.
After narrowing down the name and color scheme I worked to hone in on those elements and create some more focused designs.
The font for the logo was a custom font I made that is a bold modern sans serif font similar to the font Helvetica which is used for road signage.
The letter P logo was used to signify parking but also give a similar feel of a road or parking sign. Also the eye patch was kept as a nod to the original Pirate Park app name.
The color scheme here was chosen based on the feedback that it was friendly, exciting, and different from other apps
After narrowing down the name and color scheme I worked to hone in on those elements and create some more focused designs.
The font for the logo was a custom font I made that is a bold modern sans serif font similar to the font Helvetica which is used for road signage.
The letter P logo was used to signify parking but also give a similar feel of a road or parking sign. Also the eye patch was kept as a nod to the original Pirate Park app name.
The color scheme here was chosen based on the feedback that it was friendly, exciting, and different from other apps
Beyond the visual assets the voice of the brand was very important to make sure we could easily communicate to new potential users what this is for, what they can do with it, and what it can do for them.
The concept for the communication shown here was to keep things simple with focused single words, phrases, and short descriptions accompanied by a related image of an app feature.
When I started working on this project the initial prototype with some base functionality to show that the technology worked was done. The next step was to take that functionality with the new brand and apply it to user flows to turn it into a beautiful user friendly fully market ready app.
Initial planning started of course with a white board session... this exact white board shown here!
In that first session I worked with the team to establish our tech, tools, process, and action items to get things moving.
The first pass to start building out some user flows was focused on the core functionality of the app with a heavy focus on the home page for finding parking spots along with the managing of hosted spots. This initial flow map helped establish a basis of what users would to use this app.
The first pass to start building out some user flows was focused on the core functionality of the app with a heavy focus on the home page for finding parking spots along with the managing of hosted spots. This initial flow map helped establish a basis of what users would to use this app.
The second pass at creating the user flows took place after a few more meetings and some time spent talking with potential users to capture what their expectations would be and how they would like to use this app if it were available to them.
At this stage I had organized the app into 3 core areas based on user tasks along with defining all of the user actions and app pages.
After getting the user flows and features needed established I created some wireframes to solve how to best place all of the information on each page along with putting together an initial prototype to get a feel for the experience and test with some potential users.
The internal testing and user testing resulted in some initial minor tweaks but with a total overhaul of the Add Parking Spot flow going from a single screen to a multistep flow to reduce cognitive overload making the process to add a spot more focused and simple.
After getting the user flows and features needed established I created some wireframes to solve how to best place all of the information on each page along with putting together an initial prototype to get a feel for the experience and test with some potential users.
The internal testing and user testing resulted in some initial minor tweaks but with a total overhaul of the Add Parking Spot flow going from a single screen to a multistep flow to reduce cognitive overload making the process to add a spot more focused and simple.
With such a small team it was important to create a simple UI kit to keep decisions simple and quick along with also making UI patterns for users consistent and clear.
Below you can take a look at a collection of some video examples for the core app features. Also you can use the link here to play with the full app prototype.
This shows the primary use area of the app where users can search, find, and review available parking spots. Beyond panning the map or a text search users can use common such as vehicle type and time to filter results.
The video here shows the actions a user needs to take to request to use a parking spot. Due to constraints we could not process payments on the app so we treated requests like Craigslist where users communicate to establish payment.
The interactions here display how a user can add a parking spot to the app so they can start hosting. Based on user feedback we turned the flow into a set of steps to simplify the information on the screen and make each step very specific.
This example show how a user can manage their hosted spot. To manage a spot users can edit the spot, view the details, delete it, and respond to other users who have requested to use their parking spot.
The profile area of the app shown here allows users review the messages of spots they have requested to use, edit their user info, manage their vehicles, contact us for help, and find other general info about the application.
This vehicles management example shows the interactions for a user to add a vehicle which will help us recommend parking spots to them on the map. This UI also mimics the add spot flow to keep those experiences consistent for users.
