OUGD503 - Studio Brief 1: Competition Brief 10: Finding Vegan

After having the final module crit and reviewing the feedback given, I decided that I needed to find another brief which had a bit more substance to it and would last at least a week.

Something that was commented on in my feedback was that I hadn't worked with photographic images much. The majority of my work had been purely vector based, and I could befit from working with a wider variety of media.

As the majority of the larger competition briefs were finished, I went onto 99designs and had a look for some of the design briefs which had a decent amount of time remaining and had a fair bit to do. I also decided to look in the website/app category as these are usually the types of competitions with more time and more design work to do.

I found a brief to design a mobile App for FindingVegan - a website dedicated to vegan food. While I was initially a bit skeptical about it, I decided to continue with it and see how I felt once I'd done the research into the existing website and done some initial ideas.

Brief

Their website:

Their website is very simple and built up on the photographic images posted. It is clear that not much design thought has gone into the way the website presents itself in terms of the header and footer. These are very basic and are not as clean as they could be.

Another web-based design the client asked for me to look at was the mobile App 'food gawker', which is very similar to what this app will be in content and layout.

I found that the basic layout for the app was good, but the design was very standard and looked like the Safari web browser instead of an individual app. However from this, I do have the general idea of what the client is looking for.

I did a mind map of the content and designs which needed to be included to make this a fully working app.

The client is asking for the following pages:

• Loading page
• Latest/listing page
• Tags page
• Search page
• Post page

Planned Navigation:

• When the app is opened the first page displayed is the loading page.
• When loaded the user will be taken to the log in screen - two options - log in normally or continue without logging in.
• The user will then be taken to the 'latest' page. From coming into the App, each page is now accessible from any as the header and footer are fixed.
• If the user clicks on the logo in the header, they will be taken back to the 'latest' page.
• In the footer there are the following options: Latest, Popular, Favourites & Search.
• In the header there are the following options: logo, page title & menu bar.
• In the menu bar the user has the following options: Log in, Home, Submit, Tags & more...
• On the content pages, if an image is clicked on, the user will be directed to that image post page, where they have the options to: add to favourites, share & 'you might also like...'. There will also be the option to go to the source web page, see more pictures, and click the tags relating to this post.

I then did some initial page layout designs for each of the pages requested.

From here I went into Illustrator and started creating the layouts.

For the layout of the app, I wanted maximum space for the content. With this in mind, I made the header and footer bars each 10% of the screen size, meaning there was 80% left for content.

At this point I have a fair few layouts to work with and see what works best.

The first thing I did was decide on a colour to use for the header and footer for the entirety of the App. The client specified six colours; white, green, orange, teal, grey & red. The white, green and orange are to be used most, while the other three are for accents/small features.

At this point I also created the icons for the five options that will be consistent over each page.

I decided on the green as I thought it will work better with the content. Orange could contrast against everything in a bad way, and the green is a much calmer colour. I also think it works better in terms on the concept behind the App.

I then took this across to Photoshop to a iPhone mockup to see how it would look on the phone.

One thing the client had not provided was vectors of their logo. They only provided jpegs, making it hard for me to use the logos in illustrator. However they did supply a few different variations, so I was able to make appropriate placement frames for them and then add them in Photoshop.

At this point I am quite happy with the way it looks. There is a good amount of space left for the content and the header/footer is at a good size which will be easily useable for the user.

I then moved onto working on the log in screen.

The client wants everything to be very simple and clean, so in keeping with the green footers, I decided that the rest of the app should be green. An issue with this is that the logos provided are all on a white background so I will have to accommodate this.

I did three possible variations, all very similar.
As I am using rounded edges on the icons, I thought I could use this throughout, so will be using rounded boxes where necessary. This will not be a massive feature of the app as I like the straight edges of the images, but I will use it where I can.

I decided on using the design with the orange boarder as it incorporates this colour.

I then moved onto the main screen/latest page, and decided that the best way to display the images was in the three column format. This way the user can get a good view of a good amount of posts, as well as be able to click on the image well.

I took this design into Photoshop with the header and footer, and added images from the website that I had collected to mock it up.

I like the way this page looks. It looks very clean cut because of the straight lines used throughout the design. 

I then mocked up what it could look like with a menu bar added.

I am not too keep in the initial idea I have designed for this menu bar. It doesn't look like it's in place at all.
Something I also want to try is the idea of everything fading darker when the menu bar is selected.

I decided on doing a much simpler design where it just appeared flat. I tried it in three different sizes.

The first is unnecessarily big, and the second is too small. While I wanted to stick by the clear grid through the page, I don't think in this case that it is the best option. The third option is in the middle of the two and sits much better on the page.

I'm not entirely convinced on the fading darker aspect of the design. It is a bit unnecessary and I think it doesn't make the design look as clean cut as it did before.

I moved onto the post page. I decided on the following layout as it offers maximum space for the image, and fits nicely in the provided space compared to the other designs I had.

Once I had added the text to the appropriate post example, I took this into Photoshop and mocked it up with the photographic images in place.

I did this with the page where the 'share' options aren't out as this will be what the user will see initially.

I think this layout works well and gives the user a clear layout and displays everything at a good size. There is a lot on this page so I found it quite difficult to come up with a layout which accommodated everything, but this one seems to work well.

I then moved onto the tags & search pages. While the search page was relatively simple as it is the general same layout as the main page, the tags page is something that I have found quite difficult to design for. There isn't much content, and with the kind of design I am doing it is hard to make it visually interesting for the user.

I decided on going with the rounded boxes for now as it fits in with the aesthetic of the rest of the App.

I also mocked up what the image for the App could be on the phone's homepage.

From here, I reviewed what I had and created a simple Photoshop document to display the six different pages I had. At this point I feel that the best way to progress is to submit the designs and get feedback from the client so I can make sure I am on the right tracks with what they were asking for.

Submitting designs:

In response to my submission I got the following feedback:

From this I started experimenting with the changes that they wanted.

I then submitted this as they seemed to be very quick at giving feedback.

At this point I'm not entirely happy with the changes they have requested. I feel that they have moved the design a step back.

I then was given the feedback above, and decided that I would move the App in the direction that I wanted to as they were going back and forth between their idea of what they wanted for each page.

The first thing I did was get a definite set of page layouts for the four pages, and I took it from there. I went back to the tags page and updated it to fit in much more with the colours and aesthetic that I was going for originally. Circles works much better than squares or rounded rectangles. I also changed the header and footers to all white at their request. I still prefer it in the green, but it does work quite well in the white too.

Page layouts:

I then added the content and presented the eight pages.

Submitted design:

I was then given the following points of feedback:

Their feedback about the green background on the opening page is perfectly valid as the direction of the app is going in a much whiter appearance. It would also make the logo fit in better as it is all white.

I submitted this again with the changes and got the following feedback. At this point the client has finally started commenting on all the pages instead of just making comment on one or two. This is a bit annoying because I have been having to make small changes and resubmit the design instead of getting a good amount of feedback and making changes throughout.

Something which was a bit frustrating about the feedback is that the client has now gone back on their decision for having two columns instead of three. They now want three again. I have found that all their comments have led me pretty much back to where the App was in my initial design, with a couple of colour changes.

At this point I have been shortlisted along with five other designers to progress to the next round of the competition. This is why the client has given a larger amount of feedback.

Something which has been frustrating me throughout this brief is the fact that the client keeps asking for the app to be more 'dynamic'. This doesn't really help me as a designer because dynamic can mean a huge number of things. It is also hard to make something 'dynamic' when the design they want is very simple, white and clean cut. 

As a bit of an exercise for myself I reinvented the design briefly into something a bit more 'dynamic' and with a bit more character.

While I think that moving forward with this design is something that would be good for the app, I know the client would not appreciate it. However doing this brief task has given me a couple of ideas into how I can integrate some of this into the white design for them.

I took the elements from the loading/log in pages and applied them, giving the app a bit more character overall.

I also changed the tags page  to fit in with the colour scheme I had explored.

As well as this I changed the colour of a button on the post page, as well as the colour of the arrows. This was t include more teal into the design, as the client had requested.

While I am still going by what the client is asking for, I am taking a bit more charge of the design as I have become increasingly frustrated and their constant going round in circles.

I then submitted these designs:

Feedback given:

Thankfully the feedback was mainly positive, with the client only having an issue with the tags page again. I picked up on their comment about it being quite flat. This is something that I had been thinking about throughout the design process of this app. Everything was looking very flat, and while this is good in terms of some apps, in the case of this one, where there is a lot of white space, I don't think it works incredibly well and something with a bit more depth might be what's needed to really bring the designs out.

I submitted a version of the App where I had used gradients to make each of the buttons stand out.

I was given this one piece of feedback, which I agreed with and made the change.

Final Submission:

While I did not win this competition, being shortlisted for it and working over 9 days to create the app and develop it is something that I enjoyed doing. While I did find the client frustrating at times, I had to respect their decisions and what they wanted as it will be their product at the end of the day. It is not necessarily the direction I wanted the App to take, but it is the direction the client wanted.

I found this brief quite fulfilling and found it has given me quite a bit of experience in terms of how to design for touch screen media and small screen media. I don't think my design was as sleek and sophisticated as it could be for an App, but I think that this would come if I had more time to develop the design. Working over 9 days on a large job like this is quite an ask as there is a huge amount to consider when working in this media. I do feel I have learnt a lot and designed an efficient app in the way that it works, and given the time I designed something good.