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.