To design four to eight screens of a mobile app designed to help locate parking in the city as well as provide the user with local parking discounts close to them.
2HP is a mobile app designed with the intention of making it easy to locate cheap, accessible parking. It needed to feature discounts, be able to store favourite spots, and sort parking by location, vacancy, cost, and duration.
Sketch, Illustrator, Photoshop, InVision
The first question that needed solving was why do we need a parking app in a city that solves its parking issues by offering alternatives such as Uber, Lyft, and 24 hour transit? Why does this app need to exist in this city?
Conducting user interviews revealed that nearly everyone has had to drive in Toronto at some point, and most people have had to drive downtown. The other thing that came up was that people felt restricted by parking and that the stress of finding somewhere to park was a major deterrent to feeling like they could access Toronto if they lived outside of the city centre. This, combined with the fact that out of everyone interviewed, 100% said that they only tried to find parking when they were at or approaching their destination revealed the need for an app that helped make the city accessible, was easy to use quickly, and provided clear, succinct information.
The first thing that came up was the need to create an easy way to find information and make a decision about parking during one of the most stressful parts of driving. This lead to looking at shapes and elements that created a direct, linear sense of movement without a lot of detours. Shapes should be well defined without a lot of ambiguity and space should be balanced. All of this should give the feeling of a clear road that can easily navigated and a clear, seamless end.
The mood boards
I started with this image of the city at sunset, vibrant colours paint the city and people emerge from their offices, ready to go wherever their evenings will take them. As I started looking up images of the city I was drawn to the bright colours of some of Toronto’s buildings as well as the art style around the city and it lead me to wonder how I could demonstrate the idea of finding your place in the city, and then interacting with it through images.
One image in particular stood out, it was a woman outside of a house with illustrated line work around her. She felt both grounded in her environment and like she was happy and excited to be there. The lines really illustrated that she had found her place and they drew my eye around the page and helped to create a lot of movement.
I also found a series of images of artists playing with little cutout houses and plastic cars and I really liked the bright, cheerful take on driving this provided and how well it fit with the illustrated city images I had been working with.
After putting all of these images together I was able to realize that most of them featured yellow, pink, turquoise and then a variation of greys. This was an exciting colour palette to work with because it’s a little offbeat but everything worked so well together and it created a nice sense of contrast.
Before developing my style tiles I started playing around with logo ideas. I wanted to design something that demonstrated how easy it was to find parking, but was also cute without being too kitschy. In searching for car imagery I came across the gear shift of a standard car and I loved how much that looked like parking spots so I tried to find a way to use that in the design along with the app name, 2HP. I had a couple designs I was happy with, namely the idea of using a parked car in the H and connecting everything as though it was a road that was being driven down, however I wanted to try a few other things.
At one point I brought in the circled P from street parking signs, but dropped it because it felt like it created too much separation in the logo itself. In fact separation became one of the bigger hurdles in designing the logo. Creating a 2HP logo where the P was spaced out equally from the H without it looking too blocky or too off balance was an ongoing conversation and was only settled when a circle was added to the logo while developing the screens. It somehow balanced the entire image and drew the focus away from that gap and onto the entire image as a whole.
Adding the car was a good touch, however given that most of my icons ended up being very outlined I was worried that it would look out of place. At one point I switched it from a filled shape to an outlined shape, but this only worked if the logo was larger than 1.5" in size. Any smaller and the car started to look like some weird rectangle got lost on its way to being a button. The shape felt simple enough and the rest of the logo was close enough to line work that I felt content with leaving it filled.
One thing that I would hope to include in the future is to have the car flash its lights as though it was being unlocked when the app was finished loading since this would be a good way of entertaining the user while the app loads and signalling that it’s ready to be used.
The style guide
The style guide details the colour palette along with its hex codes as well as the fonts and buttons that were featured in the app. For the fonts I chose to use Roboto as it was modern, easy to read, visually interesting, and featured in the logo. It scaled well without being too crowded at large sizes or cramped and illegible when it was smaller. I had originally paired it with Nunito Sans, but it ended up being too distracting so I kept it to a single font family, instead using Regular as a heading and Light for body copy. At one point I wondered whether I should aim to pair Roboto with something more exciting, but since the app ended up being very photographic, I think this worked.
For the icons I wanted to create images that worked in both small and large formats and were immediately clear as to what they were, but weren’t just the same old thing. Sometimes this is unavoidable — a house will always be the easiest way to denote “home”, but I’m particularly pleased with my timer icon and my map pin icon. The map pin is still very close to traditional, but I’m happy with the larger circle and the rounded base and the time icon has a sense of movement to it. One of the trickiest icons to build was the vacancy icon, because how exactly do you demonstrate a space with nothing in it? But I think it ended up working by creating what could be a parking space, but could also be a box that just hasn’t been filled in yet.
The buttons were a fun exercise because this was the first thing about this project that was totally new for me. Coming from a print background, I’ve never really had to design anything that had so much capacity for interaction before. I really like the idea of creating buttons that fit in with the overall image so creating tiles for the main screen where the entire area was clickable felt like a good idea. For the timer button I went back and forth for awhile about whether to just make a button that said “add 10 minutes” or whether to use a + and in the end I decided on the + because it felt like it incorporated an element of instruction without having to spend much time or space explaining it. I still don’t know if the way this was organized in the final screen worked, but it’s an element I would like to explore more in future designs.
The final screens (and what happened to the illustrations)
I’m very happy with the final screens. This was my first foray ever into mobile design and there was a learning curve that I hadn’t been aware of at the beginning. So much of what we do on our phones is muscle memory that unless you stop to think about what’s involved in interacting with our favourite apps it isn’t immediately apparent what interactions should be designed into an interface. Does it make sense to swipe up? If you tap a button should the screen dissolve? Is tapping even the best decision when interacting with an app? What I learned was that good app design creates a set of movements that are so subconscious that you don’t have to think about what you’re doing. You set out to accomplish your task and the device seamlessly guides you through the steps necessary to make it happen.
I think this is best demonstrated in the menu screen. Tapping the menu icon at the top of the homepage pulls a menu out from the side where you can choose whether to sort parking spots by location, cost, duration, or vacancy, or access your account settings and profile. Swiping left sends the menu gracefully back to its home offscreen left.
The homepage is a series of tiles with images of the area, and the basic information about the parking spot. I decided to fit two tiles per row in order to maximize the amount of viewable spaces without having to scroll through the page. This restricted the available space to display visuals so I ended up trying to give a sense of where the space was but using a dark overlay to allow for contrast between the text and the images. Clicking on the space allows for a more detailed view of the space and the options to either buy a parking pass or add the new location to your maps navigation. Other parts of the app can also be navigated to by using the bottom menu bar, these include favourite spots, the parking timer, and available parking discounts in your area.
The favourites area has the option to label what each place is, whether it’s parking near home, the doctors, work, or even your favourite sushi place. This was designed to make it easy to find the space you’re looking for with minimal searching and time investment. In the future I would like to play with how this page is laid out since I never found a comfortable combination of text, images, and tiles. One thing that I would like to examine further is the use of a frosted glass technique instead of the heavy, solid grey tile, or perhaps adjusting the iconography for this page.
I ended up going for a traditional timer circle on the timer screen because I wanted to make this the simplest screen. The idea being that no matter what you’re doing it’s easy to just pick your phone up and glance over to see how much parking you have left, and then to top it up by 10 minutes, 30 minutes, an hour or by a custom time that can be accessed by clicking on the numbers itself. I tried looking at alternative timer designs, but they felt like they didn’t fit with the design of the overall app or were much more complicated and didn’t serve the end goal.
Something that happened almost immediately once I started building the screens was the original idea of using illustration over top of photos went out the window. While it looked great on a desktop screen it became almost cartoonish and claustrophobic on a mobile screen. It was also very difficult to execute this well in the time needed and sticking to photographs plus outlined icons felt like a much cleaner, better way to represent what I was trying to accomplish. It did sacrifice some of the colour in the end, but I’m happy with the overall look of the app all the same.
Another point to address is the lack of a map screen. Very early in the process I had one mocked up as an alternate to the list in the home screen and every single person I tested it with (six in total) hated it. They said that because they would only be looking for parking once they got to their destination it was hard to use and they didn’t need to be able to see parking on a map, they just needed to know where was closest/cheapest/available. It would be something to test further in a later version of the app, but for this project I decided to leave it off.
As a first foray into mobile app design I’m very happy with this. I know what I need to improve and I’m glad that there are things to improve on as it lets me develop my knowledge of mobile design and how my understanding of design applies to this world. I loved getting to learn about motion interaction and I definitely want to keep growing and learning. I went back and forth about creating such a dark app, but it worked out in the end since it creates a cozy, calm experience and still creates that effect of a city coming to life at sunset.