Brief 2: Preparation

In preparation for the start of this brief, I decided to create a PDF book documenting the kind of designs and styles that I like and would like to consider for this brief. By doing this, it lets me show Charlie what I want to get out of the brief, and means that we can quickly move forward in creating the compromises that will be needed in the brand.

Brief Sheet

Initial Research/Branding Ideas

Brief 11 - Updating App

Today I reviewed the aesthetic of the App and continued to refine it to a more professional appearance. While I am happy with the progress I have made so far, I do think that changes need to be made to make it more consistent through the pages and have a much more sophisticated appearance.

The first thing I did was review the icon imagery as this has a large part in the overall tone of voice. I decided on thinning out the arrow buttons as a thinner style always looks a bit more professional and clean.

Following this I started reviewing the individual pages. I started with the 'Reservation' page. This is a newly designed page and follows the same design as a few of the others with the clear box structure.

The main thing I wanted to do was simplify the amount of information that needed to be inputted, and create a better appearance for this page as I feel it's just a bit too brash in its current state.

One of the features I added recently was the ability for a user to be logged in. With this feature, all the contact information on this page can be removed.

I really liked the success of the general pages of the App, which are very white and clean, contrasting against the content heavy pages. This visual is what I wanted to apply to this page. Instead of using boxes, I wanted to use the gold line which I had decided to use on the individual product page. It is a subtle divider and keeps a lot of white space there.

I also wanted to make it easier for the user in creating their reservation, so added arrows to each of the sections to create a simple selection process. The arrows are substitute for the plus and minus buttons used in the previous design. I also added a calendar icon to the 'data' section so they are able to flick through a calendar and choose a date.

I also decided on changing the colour of the text box in the 'additional information' section. The entire App was currently using the same 20% tint of the dark brown, however for a more professional appearance, I wanted a colour which fades into the white a bit more and isn't so stark. With this, I made the decision to move to a 10% tint instead. While it doesn't contrast against the white so much, it is still clear and is much more subtle, aiding in the clean aesthetic.

Final Page:

I then moved onto the individual product page. I started by changing the colour of the header to the lighter colour chosen previously. I then reviewed what I had done up to this point on he design. Overall I am happy with the layout, however I do think the rating and favouriting system can be simplified. Realistically, a slide out bar is quite annoying for a phone user, so the information should be there immediately, and all the user would have to do is click what they want and be able to see everything they need to.

With this decision I decided on dropping the side bar and just have the icons overlaying the image, including the vegetarian sign. The move of this means that the price can now be moved down to its place, leaving the header clean and clear with just the product name.

The change to the favouriting buttons definitely makes the page look more professional, as does the lighter header. The light background really contrasts well against the image and makes this the main point of focus, which was the point of the page to begin with.

I then changed the light brown colour to the lighter tint on all other pages which use it.

Following this, I returned to the Reservation page and decide on refining it a little more by getting rid of the gold boxes around the changeable items. I think the arrows are enough in indicating that the content will change.

I also created a variation to show how it would be filled in and what would come up when the reservation has been made.

I then created the location/contact page, following the same format as the about us page. I added a map to look as it would if it was an interactive Google map.

Following this I have completed the majority of the main pages for the App, so started work on the initial page when opening the App, the login and sign up page. I tried a variety of layouts for this page, integrating the styles of the other pages.

Chosen design:

I initially tried a full new page for the sign up, however I don't think this is entirely necessary as there isn't much information to be given.

Instead I decided on going down the same route as the reservation confirmation note, with a pop out page instead of a whole new page.

I think the update and refinement of the App has been good as it all looks a lot more consistent and sophisticated. I feel much happier with it and how it links to the branding and packaging side of this brand.

Brief Updates

After the previous re-evaluation of my briefs, I updated the brief sheets for all of the briefs for this year.  At this point I have also removed the three briefs I was unsure about.

Briefs

Brief Summary

The brief summary is useful to me as it shows the current progress of the briefs in one document instead of having to look over all the individual brief sheets.

Currently I have 3 briefs on going, however Brief 5: The Woodshop has not had any further progress since last speaking to the client at the beginning of November. They have assured me that they do want me to do this brief, however at this point it seems highly unlikely. Brief 1 & 11 are side by side projects and I aim to complete them both at the same time, however do not want to rush either of them.

Brief 7: YCN Syfy will be started on w/c 2nd Feb. The deadline for YCN is March 19th. I am aiming to have this completed for that date, using 6 weeks to fulfil the brief.

Brief 12: Ampersandwich is a new addition to my briefs. This was a brief created last year for the OUGD504 module (Link). I enjoyed the brief and the concept, however my execution of the brief was not the best, and I would really like to to be able to include it in my portfolio, so have decided to rebrand it and update it all. I have decided this will only be a small project, with 1 - 2 weeks work as the majority of the work is already completed. It's just a case of rebranding, which I already have a few ideas for.

Brief 7 - Changing Brief - YCN SyFy Brief

I looked over the current brief I had decided on, the D&AD Monotype brief, and decided to look over the YCN briefs again. There are a few factors as to why I decided this. The first is that the YCN briefs always appear much more fun. Another factor is that I don't have to pay to submit o YCN, which is something I do have to do to submit D&AD.

The third factor is that, while I'm not entering to win, I found that last year the winners of the YCN were much more professional and creative than the winners of D&AD, which were quite disappointing, some of which were terrible. I think it's pretty clear that YCN is much more about the designers, their concept and their ability to present these. I did enjoy the Domino's Pizza brief last year and would like to replicate that experience again.

I was also unsure about the brief I had chosen. While it is interesting and I think I could do a good job, it might not be the project that I will excel at.

All of this has lead me to change the brief to the YCN Syfy brief. While I do not watch the channel, I do like the idea of creating promotional material for a tv channel. It is something I haven't done, and it is a very open brief, leaving the decisions to the designer to do as they see best. I think it's quite an exciting brief in that sense. The only constraint I have is that I can't change the logo or tag line.

Overall this means I can create an outcome that I am happy with and go forward with a concept that I want, not have to follow what they are looking for. It gives me a chance to push myself in an area I haven't worked in before.

Syfy Brief

Brief 11 - Refining the App

While I am happy with the current design of the App, I do always find that the App designs I do never look quite as professional as I envisioned to begin with. With this in mind, I decided to refine the designs as much as possible to make them seem a lot more light and professional.

There are a couple of things that I definitely want to change about the App. The first being the colour scheme. While I don't want to change it to other colours, I do want to utilise the brand colours much more effectively and professionally. Another thing I want to update is the appearance of the selected sections at the top of each section page. At the moment, the image changes to full colour and the icon turns to gold. Ion reflection, I don't think this works, and I want to keep the icon in white so it will contrast against the image better. I also want to change/update the appearance of several pages.

The first thing I decided on was changing the navigation bar so it was lighter.

Current navigation bar:

I think the brown is too dark, so want to change it to white. I also think the icons are perhaps too large, and maybe they will look more professional slightly smaller, the same for the brand name.

New navigation bar:

While I had initially wanted to have all the elements in the same colour, the gold, I found that it made the icons perhaps a bit too hard to see, and they definitely worked better in the brown. I think that by having these in different colours now, it does show that the two are buttons, and the brand name is just the brand name. I also think the white will contrast against the imagery much better and will give much more light to the App.

I then moved onto the main menu pages. While I am happy with the overall design, the only thing that I wanted to change was the space between each image. I want it to be more defined, putting a bit more white into the design.

Main menu:

I double the size of the gaps between each image, making them all slightly thinner. I think that this, with the change in navigation bar gives a much lighter appearance.

One thing that I have decided on is that users can have the option to create an account and log into the App. I think that this is necessary because of the 'order' and 'reservation' options. It also means that there care be more features to the app, such as favourite products. It can also mean there can be past orders or reservations saved, and a documentation of the current orders and reservations. This means that at these pages, the contact information etc will not have to be typed, as it will relate directly to the account.

With this, I decided on creating the 'options' tab in the top right hand corner.

Options tab open:

This gives multiple options for the user and allows them to fully access all the information about their account, orders, reservations and favourites. I think that these will work well when a user has the App for a long time as it enables them to keep track of what they have done.

I then moved onto updating the rest of the pages. The first thing I did was work on the 'about us' page as this needed very little change. I changed the image size at the top of the page and decided on moving the images of the store to below this, and have the information below it. I also added the brand logo above the text as it actually doesn't appear on the App, and this is the right place for it to do so.

On a more general note, I have decided against having the gold separator lines on a selected section. I think it was unnecessary, and now with the larger gap, the white works well.

Following this I updated the 'opening times' page, updating the navigation bar and image size. The only other thing I changed was the colour of the body copy text. I decided on the black as it works with the rest of the body copy on the App, and it contrasts against the icons.

I then applied the same changes from the 'main menu' to both the bakery & cafe menu pages.

When looking over the pages currently made, I decided that the 'menu' doesn't work particularly well with the rest of the App, and it could be much more interactive, and a place where users can fully explore all the products available. Because of this, I decided on changing the design so it was much more like the 'make an order' page.

I liked the idea of following what I had for the menu pages, in having a specific image for each section. I think that this works well here, as I have actually done that in the printed menu. This is a good point to cross on, so I will be using the same images as in the menus.

As a secondary page to this, I thought it would be quite interesting to give the user a choice in how they want to view the products - either in picture form or as a list. With this, I created two pages, each with the same bar along the bottom which allows the user to switch between views.

I think that these two pages are a good addition as it definitely plays more into the user interactivity with the App instead of just having a scrolling list. Having imagery of the products will give the user a clear idea of the style of food baked/served, and will ultimately inform their decision.

Leading on from these two pages, whichever the user chooses to use, it will take them onto a product page, which is essentially a breakdown of the product, giving the name, a description etc. 

I followed the same simple design as on the 'about us' page, in having the body copy on the white, and the image above. The images below show the options that can be seen when clicking on the arrow in the top right of the image.

Immediately the user can favourite or rate the product. When the 'rate' button is pressed, the average customer rating will appear, and the user can click the star of what rating they want to give the product.

Following this I moved to the 'make an order' page, just updating the previous design. The first thing I did was change the bar at the bottom. I liked the way the slightly transparent bar worked on the menu pages above, so decided to utilise this. I also decided that the use of other colours isn't necessarily a bad thing in the design of the App. With this, I decided on having green and red integrated into the design, but only in the necessary ways.

The first page is edited to include the imagery behind each of the sections. The 'checkout' button is now in green, and has its own button the height of the bar, instead of a button drawn into the bar. On the second page, the 'quantity' bit has been updated to be a + and - instead of arrows.

I then moved onto the 'make a reservation' page.

Moving with the same design as on the section above, I changed the bottom bar to green and made the full bar the whole button. I also changed the height of each section, fitting with those of the product list above.

The images below show what happen when a piece of information is filled in, and what happens when the reservation is completed.

Happy with these wireframes, I went into Photoshop and mocked up the designs with the imagery in place.

Main menu:

About us:

Bakery/Cafe menus:

Opening times:

Menu pages:

Product displays:

Individual product:

Make an order:

Make a reservation:

Overall I am much happier with the development of the App. I think that it looks much more professional, lighter and friendlier. While there are still pages to create and things to work out and refine, I do think that it is definitely heading in the right direction.