After some brief feedback on my original mobile app design, I had made some slight edits as shown below:

The original text had the description of the meal underneath its title, however I was told that this made it somewhat difficult to read and was unclear to the audience. I have altered this by adding a simple arrow to indicate that there is more information when it is pressed. In theory this would then lead on to another page which has the description of the meal with larger text that would fill up the whole screen. It would also be sensible to have a ‘back’ button so that the user could navigate back to the menu page.

I have also chosen this iPhone template as this angle makes each screen clearer to the audience. On the ‘Locations’ page I have also cut out the description text as this was too small and detailed to display on such a small area. Knowing that my target audience would already have some familiarity with this concept before, the decision was made to put the word ‘Postcode’ in the search bar (which would disappear when text is entered)- this would be made obvious by the search icon (magnifying glass), allowing the user to then search for their nearest Eat & Greet restaurant.

The very right image is a display of the ‘View Bookings’ section of the Establishment version- the only addition to this is the black lines separating each booking section. I felt that this would make each booking easier to read for the user if it were displayed in this manner, rather than my previous version which had no lines to separate them.

Welcome Page for the app

After having created the Wireframes for my mobile application, I then took these templates and created several designs in Photoshop, as shown below.

Customer version

Using this iPhone 6 template, I have placed my designs individually so that it is easy to visualise what each screen looks like. Here are shown the most important pages which show the context and overall layout of the app, including sub-menus for Starters and Main Courses. The booking system, ‘Invite’ page and User Profile pages are also displayed. This is the version that will be shown to customers who are using the app. Some other examples using different iPhone templates are shown below:

Flat images:

Considering my research into colour and layout, I had decided to go with the colour orange as it is energetic and eye-catching. After discussing with one of the end-users they said that they did not like the tone/shade of orange as it seemed dull and uninteresting. This would be something to consider if I were to re-design this. The alternating colours of white and orange were used to separate each section in order for the design to be clear and simple to understand. The research I did heavily influenced the layout of the mobile app, hence the ‘ladder’ structure of the text. Without any mouse or scroll-bar on a mobile device it was important that each section was big enough and clear enough that it could be selected on the touch-screen of a smartphone or tablet. Due to the small screen size, it was important that the logo (without the text) was always displayed at the top of the screen so that the user could easily navigate back to the main page.

For the menu pages, I felt that it was necessary to have small images of each menu item so that it would give an idea as to what to expect before ordering. A small description is situated to the right of the image in order to reflect the design of a physical paper menu. I had taken into consideration that unlike Android devices, iPhones do not have a built-in ‘back’ button, therefore the decision to add a small ‘back to Menu’ button was necessary. For pages that only have one screen, the logo at the top would suffice in taking the user back to the main page. A star icon which can be tapped would add that particular item to the user’s favourites, so they can refer back to this in future if it is something they wish to order again.

The ‘Book a Place’ page was made as simple as possible for the user so that it would save time and effort to book a table. The drop-down arrows would bring up a ‘pop-up’ box which would allow the user to select the value needed- this is commonly done on most mobile apps. Once all values are selected the device would then display a message asking the user if they are ready to move on to the next page- this is so that they can enter their personal details before finally confirming their booking.

The ‘Invite’ page was a key factor which I needed in order to fulfill the project’s purpose which I had made in my proposal. The links to various social media sites (with the option of inviting users off of the website/app itself) would help to integrate the social and community feature which would make the project stand-out from others. As Facebook and Twitter are so commonly used by members of the target audience it was necessary for the app to have a built-in feature which would automatically send out an invite using the user’s social media profiles. The email option is also there as a consideration of those who may not have a social media account or who may feel uncomfortable using it.

The ‘Locations’ page would allow the user to see all the locations of their local Eat & Greet cafes/restaurants by simply entering their postcode. An integrated Google Map feature was used so that the address could be easily found- this would also display the address of the location selected from the drop-down menu.

Finally, the ‘My Profile’ page was created so that the user could have a place to store their ‘Friends/Contacts’ for multiple reasons- to add a more personal touch, to allow the ‘Invite by Contacts’ page to function and also to allow the user to see their favourite menu items. There is a help section for FAQs as well as Profile Settings, which would allow for personal information to be changed and a user to log in/log out. The arrow to the right of the page is there so that the user can scroll through their list of friends. Their friend’s profiles can also be brought up when their icon is pressed.

Establishment version

Similarly to the Customer version, I had created a design for the Establishment (Cafe/Restaurant owner). This was necessary in order to fit the theme and aim of my project, as both end users would need to have control over the app’s functions. However, this version differs in the way that some screens have been altered for different purposes that the customer would have no use for.

Although the layout is consistent, the ‘Invite’ page has been changed to a Stock List in order for the Owner to see what products they have remaining to make meals from. The following menu is split into categories of food so it is more efficient for the user to keep track of their stock- and can then use listed surplus ingredients to make their menus.

The Menu pages (only one shown in this example) have an ‘Edit’ option so that the user can choose what meals they will be serving. The Bookings page is different so that the Owner can see what customers to expect, as well as the Locations page with the option to edit the address if the Owner has more than one Restaurant, for example (or has changed address). Finally the ‘Profile’ page serves as a generic information page with the Cafe/Restaurant name, rating and contact information. Some clearer examples are shown below:

iPhone 6 template source: https://colorlib.com/wp/free-psd-iphone-6-mockup-templates/

I had used Wireframe.cc to create the template pages for my mobile app as well as the website design. I used the book ‘Digital Design Essentials: 100 Ways to Design Better Desktop, Web, and Mobile Interfaces’ to get an idea for the layout:

https://wireframe.cc/76yzzB (main first page mobile)

https://wireframe.cc/xVOkVb (customer home page mobile)

https://wireframe.cc/eLOkUF (establishment home page mobile)

https://wireframe.cc/wJKsSq (establishment menu page mobile)

https://wireframe.cc/uWB2s8 (customer menu page mobile)

https://wireframe.cc/1AK7rK (customer menu page [2] mobile)

https://wireframe.cc/ojbfUp (customer booking page mobile)

https://wireframe.cc/4OUdWC (establishment booking page mobile)

https://wireframe.cc/usxDkl (customer invite page mobile)

In order that there was some familiarity with the desktop site, it was important to keep the category labels the same but adapt them for a mobile screen. The most challenging task in this case was to think about size and how to keep all the elements compact, but still visible. As mobile app pages have larger interfaces which require the user to scroll, I decided to keep this element as this seemed the most effective way of allowing the user to choose a section.

Consistency was an important factor in the designs, so the shapes of the tabs and font, colours etc. will remain the same as the desktop version. The logo is situated at the top of the screen so that the user can access the homepage quickly without having to navigate their way back through multiple pages, which could waste time on their part.

For the ‘establishment’ version of the app, there will be a button that allows the user to edit their site as and when they need. There is an extra page for the menu as unlike the website version, the image cannot be shown directly next to it due to screen space.

I used Wireframe.cc to create the templates for my website. The designs listed below are rough examples of the key pages and how they would work in each form. I have created both a version for the customer and cafe/restaurant owner (establishment) as this fulfills the project’s purpose.

https://wireframe.cc/ESNccO (main first page web)

https://wireframe.cc/xDGCml (customer home page)

https://wireframe.cc/JEb5RM (establishment home page)

https://wireframe.cc/7Dgd8U (establishment menu page)

https://wireframe.cc/zCSEuQ (customer menu page)

https://wireframe.cc/V9gD9E (customer booking page)

https://wireframe.cc/gjjKon (establishment booking page)

https://wireframe.cc/8cjs7t (customer invite page)

When it comes to designing the concept, I will likely cut out some of these pages as they may not be able to be tested with the target audience as easily.

Looking at my survey results, I had decided to model the website similarly to the LoveFoodHateWaste layout, as this was the most popular choice with the target audience. The use of tabs for each page helped to create a clear and coherent design, where the user could quickly and easy access each category. There is also space for text and images which I carefully balanced in terms of composition in order that it is easy on the eye. The home button and logo are on opposite sides of the page for the same reason, including a search tool so that the user can speedily look for a specific keyword or topic.

The ‘establishment’ versions of the website and app allow for the user to modify their menus depending on what surplus food there is. It also allows them to view where and when customers have booked a table so that they are prepared in advance for who will be arriving and how much they need to serve. There is also a stock list so that the leftover ingredients can be kept track of and will notify the user when an item is out of stock.

There is also a page where customers can invite someone out to dine with them- these will be links to popular social media sites which would ensure that the user can locate someone quickly and on a familiar platform. It meets the project’s objectives by encouraging people to socialise whilst eating out; this is supplemented by the ‘My Profile’ page which would store other users (friends, family, etc.) in their contact list.

In order to establish a brand image for my website and mobile app, I had designed a few potential logos in Adobe Illustrator:

These are variations of the same name, including experimentations with typography and images. The top rectangular images could be used as part of the banner on the desktop website, compared to the ones below which would be used for the app and be more suitable for a mobile or tablet device.

Shape

After looking into the symbolism of shapes I had found that circles symbolise unity and have a ‘friendly’ approach, compared to triangles which are symbolic as hazardous and ‘threatening’. I chose to create the logo designs within squares as they represent structure and form, which is appropriate for a business. However, due to the target audience and purpose of the site I will most likely use the circle as this is a service which incorporates a social element. The image of the fork in the speech bubble represents what the title entails- it needed to have both an element of socialising and dining and be obvious enough as what the service provides.

Colour

In terms of colour, I used orange as a theme and differentiated between a bright orange and a more red-toned orange. As orange is an energetic colour I felt that this would be appropriate for the project’s purpose, however I wanted to compare it to another colour so that I could see if it would make any improvements. Although the project does have a social element, as it is not specifically a social media tool I refrained from using blue as this might have been misinterpreted by the user.

Font

I had chosen a few various fonts and font styles in order that the logo would display the correct message as well as visual aesthetic. I also tried using both the initials of the project name and the full name itself, however I had found that the website would be more appropriate with the full name whereas the mobile would suit the initials.  I altered between a serif and sans serif font as one looked more elegant, however I felt that this was not appropriate for the type of service it provided. I was careful to ensure that the overall design appealed to both genders and of people of all ages (above 18), hence why the image is ‘neutral’ and simplified.