UI Design: 2HP, designing a mobile parking app
An overview of my design process while creating a mobile parking app for a UI project.
The Opportunity
For this project I was to design the UI for a mobile parking app, 2HP. I was to design up to 8 high fidelity screens with the mid fidelity screens provided to me. I also had to create a logo and a complete UI library, designing all icons and buttons. I was to accompany this design with an inception sheet, two mood boards, a style tile and a brand style guide document.
The App
2HP is an app that lets you find the nearest free parking and helps you navigate local street parking rules by your destination. 2HP also promotes exclusive deals with parking facilities, and discounts so you can spend less time finding and paying and more time playing.
The Tools
Sketch, Adobe Illustrator, Adobe InDesign, Invision.
Research
Before designing my app, I needed to understand the customers’ needs, and what a potential customer may experience while driving downtown. I conducted a few interviews with people who are within 2HP’s demographic, young, thrifty and bubbly students and professionals who drive within the city. I asked them how difficult it was to find free parking in the city and during what hours. I asked how finding parking within the city made them feel. I also asked how long they were willing to walk from their parking spot to their destination. Given the answers, I concluded that an app like 2HP would be in demand for individuals who are thrifty, active and prefer to save money over time, but without the hassle of wasted time looking for a parking spot or commuting.
Design Inception Sheet
A design inception sheet is one of the first steps in the design process. It helps direct me towards a look and a feel of a design by first figuring outer main WHY. Then moving outward of the circle, we then discover the mood we want our customer to feel, then onward creating a design language to visual imply that mood. This includes movement, shape, colour and space.
To understand the mood we want our customers to feel while using this app, we need to define the reason why we are creating the app. The WHY in this instance would be: To provide on-the-go, real time free parking navigation to save time and money for the end consumer.
People want to feel stress free, trusting, resourceful, efficient etc. while using that app because parking in the city usually is a stressful task and we are trying to mediate that. Therefore, I decided to use calming colours such as blue and green to promote trust. Flowy, rounded shapes also promote calmness, while directional and leading movement are always good for navigation apps.
Mood boards
The next stage in this design process was to create a mood board. A mood board is an arrangement of images, materials, pieces of text, etc. intended to evoke or project a particular style or concept. I was required to create two.
For the first mood board I used colours of green for trust and yellow, as it is a recognized colour associated with parking signage. I also used materialistic design, as I see it has become a trend with existing parking apps. Photography was also heavily used as material design and photography usually go well with each other as they both exhibit depth and texture. Leading and directional movements were also characteristics within the images I used for the mood board.
For the second mood board I used different shades of blue to exhibit a stress free, calming vibe and a fun brighter mint green unlike the green in the last mood board. I found that this mint green compliments the shades of blue I chose. I also wanted a flowy, design with rounded or wavy shapes. The top middle and right images really showcase the type of mood I was going for, something calming, using flat design. I decided to use this mood board for the direction of my final design.
The Logo
The logo I created really defined the design language I was going for. I used the calming dark blue for the 2 and the mint green for the HP. I used a bubbly font for the HP to incorporate rounded shapes and to represent the “bubbly” personality of our target audience. The two, represents a path of a driving car, circling around the HP to “find a parking spot”. To help visualize that thought, I also drew a rounded, flat design car at the end of the 2. The mint green car will also later be used as part of the brand within a few icons I designed for the app. Sometimes logo design can be a bit tough for me, however in this instance, I went with my first idea and it evolved beautifully as I drew it on paper (in Sketch).
The Style Tile
The next step in my process was to design a style tile. A style tile is used when a mood board is too vague but a final design is too detailed. They are a design deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand for the web. For my style tile I used possible logos, symbols, buttons, fonts and images that may be used for my final design.
The UI library
Creating a UI library for 2HP was one of the most challenging tasks of this project, yet also the most fun. Coming from a print design background, I never had to design custom symbols for a mobile app. After understanding that symbols comprise of mostly simple shapes combined together, I started getting the hang of designing symbols. I stuck within the brand only using colours from my chosen colour palette. I also used rounded edges and circles with the flat design, to represent a calming mood. I also used the same weight within the symbols I created for consistency. I used simple and clean designs so they are recognizable and can be clearly visible in different sizes. I also thought it would be clever to incorporate the bubbly car illustration from my logo design in the navigation drops and vacancy symbols, to really stick to the brand.
Summary: Set backs and findings
With only being in a UI design program for a month, and only having past experience in print design, this project was defiantly gonna be a learning experience for me. I never have designed hi fi screens for a mobile app, even yet, a UI library consisting of custom symbols and buttons. However, I was eager to learn and looked at multiple styles of UI design and browsed through parking apps for inspiration.
The mid fidelity screens given to me were very vague and did not give me much context, since it was one of my first time working with mid-fis it was hard to understand context, such as not knowing what screens lined or if something was supposed to be a symbol or not. Another problem I encountered were contrasting issues with the mix of green and blue. For a parking app, I really needed to pass the contrast test for accessibility and at first I failed so I had to redesign a few of the symbols and nav bars to be more easily visible.
The Final Design
Out of the 8 screens, I decided to design all 8 so I can create a story as well as a decent prototype.
I wanted the loading screen to have some fun bright, yet calm colours to catch the users attention while the app loads. The graphic on the top right helps lead your eye toward the logo. The slogan “Stress free parking in Toronto” is to define the goal of the app but also a play on words highlighting both “stress free” and “free parking”.
I loved creating the flat design of the Toronto skyline as it was a direct reflection of inspiration from a photo I found early on in my design process. Also, it was fun to design something that was Toronto specific as this city means so much to me as I have lived there for most of my life.
I felt like the overall design was consistent and stayed on brand by staying within the branded colour palette and visuals. The app itself is pleasing to the eye and easy to follow. I believe I was successful with my very first UI mobile app project.
Prototype
Invision prototype is optimized for Iphone 8. To view prototype click Here.
Style Guide
To view 2HP brand style guide PDF click Here.
