Saturday, 15 April 2017

EP // BRIEF 6 // HUNGRY HOUSE // MOCKUPS

Below are the first set of mockups for the Hungry House app. The screen size I've designed for, for these particular mockups is the 42mm. This gives me more space to work with but the objective eventually is to ensure the app can run on the 38mm also. I made sure to follow the brand guidelines of Hungry House, ensure a consistent link and approach to their desktop and mobile site. On their other sites, they use a lot of visual imagery to show off the food and they also use white as their main colour. However, for the iWatch, visual images would be counterproductive. There isn't enough room for them on the iWatch, they would take up a great deal of space making the user experience suffer. More imagery means the user would have to actually swipe away or scroll past the images to get to what they actually want. Red has been used as the primary colour for the iWatch, this is replacing the images. There needs to be an element of engagement and excitement, which you would get from images but with no images on the iWatch, the red is used to portray these feelings. Using white as the primary colour would make the UI visually dull and boring.

Below are the different stages of the app:

Grid

This is what the grid would look like. It's a 3x3 grid allowing enough space for user's fingers. This grid would only appear empty when the user is ready to enter their pre-saved pattern to quickly and efficiently order food. The image on the right is a representation of what it would look like once the user has entered their pattern. A simple pattern and in response their food order name appears at the bottom.




Search

It's not been decided yet but the user can search how they would normally on the iWatch (image below) or they can use the 3x3 grid to also spell out letters.





Filter concept

The filtering steps will ensure the user can get from A - B as quickly as possible. To remove the unwanting content, filters, and setting and just provide the user with the essentials. The user must be made aware that if they're after an experience where they are in control then the iWatch app isn't for them. They can sync their progress to their iPhone if they want specific settings. It's a light version only providing three steps. These three steps being countries, cuisine, and restaurants. Below you can see all three steps. Sticking with a consistent theme throughout the 3x3 grid is used to arrange the content. This guarantees the user can use the pattern motion to choose their food. Again, consistent and familiar. Icons are used to save room and implement a sense of visual appeal as no actual images are used.








I also experimented with a few optional colors and styles. By asking and receiving feedback I was able to make the right choose. Black was an effective colour but in regards of representing food, it isn't the best option. It could be used as a high contrast version for visually impaired users but black isn't an appetising colour, plus the black and green aren't associated with the Hungry House brand. 





No comments:

Post a Comment