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.

This is a re-design of a page from Vertex magazine using Adobe InDesign:

Original

My edit

I had made quite a few changes to the design, beginning with finding a background with a colour that was more suitable than black/dark grey. I applied this to the top and bottom of the image only so that the design would not be overcrowded. I found an image with a technological look in order to fit the theme of the magazine. I also felt that a white background with black text would be easier to read.

In regards to the font, I had decided that a serif font would be the most appropriate, similar to the look of the original. I aimed to emulate the original design by laying out the text in a similar fashion, however I moved the author’s name in order to get rid of white space. The word ‘incorporated’ is a colour taken from the image; this was to keep the design consistent throughout.

In order that the logo would be legible against the purple background, I had changed it to white and decided that it would look more appropriate where it did not take up a large space on the page. This was also done with regards to the rule of thirds and how we read from left to right. In order to balance this I moved the Vertex logo to the top-right of the page and changed it to white for the same reason.

Finally, the article text itself was written into columns so that the user could read it more clearly. The original design seemed to have the text going to the very far edges of the page and written across in wide paragraphs, which made it unappealing and difficult to pay attention to. Therefore I used the columns in InDesign to my advantage and spaced each paragraph out into visually smaller chunks. Not only does this give the illusion of less text, it also spreads out suitably across the white background, therefore filling in white space where there are no other images to do so.

Before I began working on my draft layout, I had created a survey via SurveyMonkey in order to gain a better understanding of how the target audience views websites. I posted the survey link on social media sites in order to potentially draw in people who were outside the audience demographic; this would allow for a wider range of results.

After gaining some survey responses, I had found that only people within the target audience (both genders 18 and over) had answered, however the data is still valid. Website 1 was Love Food Hate Waste, Website 2 was Foodcycle and Website 3 was FoodLoop. The results of the survey are listed here.

There is a slight risk that the results may be biased. Due to some questions being skipped it does not necessarily reflect every individual’s point of view, however because this anomaly is so small it is not likely to have a significant effect on my data.

After analysing the results, it seems clear that most people prefer the structure, aesthetics and layout of Website 1 (Love Food Hate Waste). Looking at some of the responses I have concluded that Website 3 would be more suitable for a tablet/mobile app, but certainly not for a desktop website. When it comes to designing my own website I should take elements from Website 1 and apply this, as this would be the most appropriate and effective way of engaging the user and making the product easy to use.