A Well Designed UI Library for Parking App

Case Study

Overview:

For our second project, we were assigned partners and given a parking app to design. I was super excited to work on this project because parking in Vancouver is my living nightmare and I could see myself being an avid user of this app. The purpose of working in pairs was to demonstrate and showcase two design directions for the same app. This allowed us to collaborate on challenged us to think about different approaches to one product. Some of the new technical skills I was exposed to include exploring sketch for the first time and making the features on the app interactive with invision. The combination of the two tools really brought my design to life.

Goal:

The goal of this project was to create an engaging, impactful and well-designed UI Library and apply it to the supplied wireframes, research and information of our specific application and target audience.

Mobile Application Design Brief:

2HP is an app that let’s 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 tie playing.

Target Audience:

21–40 year olds
male or female
student or young professionals
keywords associated with the app included on the go, street smart, resourceful, bubbly, active, and thrifty.

Art Directions:

We created two very different art directions; one that felt more traditional and relaxing, and the other is modern, and urban.

Design Process:

The Why: Users who want to feel that their parking app is being updated right away, modern, and relevant would use 2HP parking app.

Mood: Street Smart, Modern, Urban, and Relevant

Colour: I chose a palette of bright yellow, black, grey, and white. Going for a very urban theme, I associated the bright yellow with parking line the grey, black and white with concrete, streets, and skyscrapers.

Shape: To achieve a modern feel, I went with a thin iconography and tall fonts. The shapes are straight with some curvature to represent the street curbs.

Mood Board:

Based on the visual language, the following mood board “the Urban Glow” was created as a guide for UI library.

Style Tile & Style Guide:

The style guide and style tile were new to this project in order to add further depth to the design process. It added another layer that really helps to clean up and filter the ideas before going on to the final design.

Final Design:

Below are the final designed wireframes for the 2HP app:

Loading Page
Home Page
Active
Filter
Navigation

Feel free to visit here to interact with the application.