Wireframes and Task Flows

Preparations before producing wireframes. Initial Ideas. 

Exploring layouts with the concept of receipts. 

Exploring layouts with shapes. Exploring meaning. Do these shapes relate to context of food. 

Wireframes

The Homepage is a design influenced by the 'Prettylittlething' homepage. I have adapted the concept of circles and rectangles to reflect the concept of bottles and plates. The layout was taken from the Role Sala composition layout. 

Each circle will contain the logo for each company. The centre rectangle represents the receipt options to view your receipts. The squares represent temporary stalls which are in Trinity Kitchen. The homepage will also incorporate animation of the app showing what time the restaurants are open till.

The initial concept for the colour scheme was going to be dark and seductive to represent the idea of desire and lust. However during the crit, this colour scheme was known to be too overpowering and it does not relate to the website of being clean and clear. The use of white creates sophistication, and class, it also emphasises the actual idea shown. 

The second diagram shows the layout of receipts. This idea came from apps such as Pinterest and Depop, the concept of creating your own pins through receipts. however during the crit this was known to be too simple and may loose interest. It is also typographic which would convey a generic tone. Perhaps including pictures of food will create a better understanding, and will communicate better which dish is which. 

Another idea for the homepage was to create a scroll of all the permanent logos. The logo will have an illustrative background to reveal what theme the restaurant is. For instance you would click on the logo and this will lead you to the menu for that restaurant. The feedback received, stated that this concept was more clearer compared to the first idea of the homepage. However, perhaps layout all the logos in a grid so there is a clear idea of all restaurants. This will also relate to making the restaurants easily visible.

In the menu composition the price is separated to create more emphasise. This is for the set target market of students, as they will be looking for food which is affordable. The background will include illustrations of constraints of the meals. however during the crit, create the backgrounds to be minimalistic to the emphasise is on the information rather than the background.

Each restaurant will have a different lay out to break up the app. This will make the app more engaging. The layouts were influenced by the restaurants so there is that continuous link. There is also a scrolling menu which will be animated within that design.

For the loyalty card section, the cards will be categorised for each restaurant. When you click on a particular card this will lead you to another page showing details of the loyalty; which restaurant it is for, how many points, username. The purpose of this is to create an emotional bond towards the user and the app. During the crit this idea was too complicated and should be simplified to applying the loyalty card for the whole of Trinity Kitchen. This will function better and will create an easier understanding.

There were two concepts for the promotion page. A simple layout of the offers structured vertically. Another idea was to apply the promotions onto a timeline. During the crit the timeline structure was stated to be more innovative and easily structured. It also varied structured compared to the other categories which will make the app look interesting and more engaging.

Initial Concepts:

-Turn restaurants receipts into snapshots (Restaurant Profile)
- Collect points, loyalty cards, promotions, promotional codes.
-Include history and culture to create an emotional bond towards the user.
-include ratings and menus, ingredients, this is for people who are indesisive on where to eat.
- The best seller allocated first, a sense of an order.

Tool bar 

During the crit, the tool bar needs to simplified and create a sense of function. To develop this further perhaps develop task flows to show a sense of a function which will make the options on the tool bar appear better. 

The design below the tool bar indicates an 'About page'. However this idea would perhaps be better for a website interface, rather than an app. The app will convey the idea of snapshots and focus on menus, promotions, and purchases. 

The task flow shows a sense of functionality towards the app. The tool bar was simplified, however the tool bar will need developing further as there are other elements which will need to be applied such as a back button. During the crit the option for a username seemed confusing, the feedback given was to show the first page being the login. This will create an emotional bond towards the user and the app. It will also act as a social media app. This relates to the context of why social media apps are so successful. This relates to the target market research of relating the app towards social media. 

Editing 

A simplified task flow to create an easier functionality. This task flow shows the app in a simplified format to create a better communication and a continuous flow. The last board of the vouchers, perhaps should be changed to a loyalty card, as this shows commitment for the user. It will also create a sense of a goal for the app aswell. 

Designing a layout for the loyalty card page which is simple but communicated well. The design of the card will act like an online card, where you can scan points onto the app. this will save time swell as saving time for looking for a solid card within the purse. It also useful for people who have lost their solid loyalty card, the app is simple and is always there. 

Designing a tool bar, however the feedback given was the tool bar would be more appropriate on a bigger screen interface, such as a website. 

 Contextual research into social media apps, and looking into their toolbar designs and what factors they have included. The design was influenced by the Instagram toolbar. The concept of taken your own pictures relates to the concept of snapshots.