2HP Mobile App UI Library

Task
Create an engaging, impactful and well-designed UI Library and apply it to the supplied wireframes, research and information of 2HP (2 hour parking) and its target audience. 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.

Tools
Sketch, Invision

Process
I looked at all the features the app offered and tried to rationale and think why someone would want to use this parking app. I narrowed it down to two overarching reasons: it is efficient and informative. This app allows you to save time- whether it is looking for a parking spot or paying for your spot. It is also very informative and offers methods to save money by comparing rates in the area or free parking and offering exclusive deals. The general mood I wanted to create was one that was: efficient, nifty, speedy, bubbly and resourceful.

2HP Moodboard

Colour
I was inspired by creating a palette that consisted of blue, green, orange/yellow and grays. The blue alluded to speediness and efficiency and the grays reflected vehicles and metal. The green and orange/yellow was chosen to reflect traffic lights but with more complementary tones.

Shape
I like the idea of having lines to demonstrate motion and efficiency. I also wanted the app to be very straight forward and so there are regular shapes that are familiar.

Space & Movement
The movement will be fluid and quick. It shouldn’t be too busy because it is meant for the user to be able to find their information quickly or allow them to perform parking actions with ease. Some other key words to describe the movement are: quick, whiz and speedy.

Progression for the Filter wireframe
Icons before(left) and after(right)

After creating the moodboard, I tested out a few of the styles and colours that I had in mind on the wireframes and I found that it didn’t really work out well. So I had to revise it and use a more neutral background that was more promising. I also revised the icons I originally made to make them all concise and consistent in terms of dimensions and details. I looked at a few maps before determining the one that was most relevant and worked well with my colour scheme.

I created a ‘style tile’ that is a more refined and specific moodboard essentially detailing the typography, colours and icons.

2HP Style Tile

Then after playing around with the wireframes and determining what works and what doesn’t work, I created a style guide which is a more specific ‘style tile.’

Staying true to the style guide, the three wireframes I designed depict the guidelines and the mood that I envisioned for this app.

2HP final wireframes

Check out this link on Invision for more interaction: https://projects.invisionapp.com/share/5ZBIA922Y#/231248189_Filter_Page_1

The two main programs we used were Sketch and Invision and I really liked the exposure to both these programs. I think that I was able to grasp Sketch very easily and I didn’t encounter the struggle of intuitively understanding where buttons or tools were located as I do with Adobe programs. I didn’t work too much with Invision for this project due to time but I think it’s very easy to use as well and I hope to use it more heavily for future projects.

I think I did a really good job on the colour scheme for my art direction and staying consistent. For my design I had a good vision of what I wanted to accomplish but I encountered obstacles along the way that didn’t work when it was applied on the wireframe. For example I was inspired by the moving colours you see when vehicles or lights move quickly and I wanted to recreate that for the screen background but I realized that it didn’t match my mood so I had to use something that was more simple. I think that I could have improved on my making things more legible and using contrast. For next time, I will test out the app through my phone to gain a better sense of legibility and if the format is visually appealing.

This project is still a work in progress, I want to keep revising it to make it better and finish all the wireframes provided for the app.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.