Brief 11 - Final Evaluation/Reflection

This brief was originally going to be a part of brief 1, making it one large brief which spanned the year, however I definitely think I did the right thing in splitting it into its own brief. It meant I could look at it as a single element and break it down to figure out exactly what I needed to do and why I needed to do it, instead of not giving it as much attention, which would have probably happened if it were in its own brief. Another reason for breaking it down to its own brief was that I wanted to explore App design without the distraction of other elements, something I think was definitely successful in this brief.

This brief really allowed me to research into App design and figure out exactly what was useful and needed for an App of this kind, as well as research into what style of App design I like and how I can apply this to already existing branding and content. I found that this brief was a good break from doing primarily print based brief as it allowed me to work in an entirely different way and use a different thought path into how the work would be interacted with.

Developing the aesthetic design throughout a series of sessions really made the finished design successful. It was a long process, but I found creating all the pages and updating them all simultaneously was hugely helpful in the development of the design and development of my skills in digital design. I have always found that my App designs never look quite right and professional, however I definitely think I’m on the right tracks with this brief.

The hardest bit to this brief was identifying what the user would want on the App and how they would interact with this. In particular, I found the Bakery order pages quite hard to figure out to get the most usable and professional design. Thinking about how the user would scroll or flick pages also played a huge part in the design and is something that took a lot of work to get right.

The success of the design was in the decision to include white and make the design much more simple and contemporary than the original design. The white really broke everything up and made it look much cleaner. The use of green also added to the design. While I had originally wanted to stick to brand colours, the inclusion of the green definitely helped make the design more vibrant and relevant.

I thoroughly enjoyed doing this brief and will definitely be looking forward to the next brief which involves an App design. It has taken a lot of work to create something I am happy with, but I definitely think it was worth it and has hugely developed my skills in this area of design. It has given me confidence in my ability to adapt my skills to design for different media, and means that I am continually broadening my range of skills.

Brief 11 - Design Boards

Brief 11 - Final Pages

To complete the App, I had to create another couple of pages for the user profile and for the bakery order side to the App.

I started with the bakery order pages, creating two pages which were needed. I already have the basic bakery order page with the product sections, but don't have the page after where the users can select the product they want. I followed the same style as in the menus, adding arrows and a number to indicate that a user can choose an amount. I also kept the link to the individual product page as a user may way to look at all the information before adding it to their cart.

I added a bottom navigation bar to the page which shows the total cost of their order so far and has a checkout button. This will be fixed.

I also created the checkout page where all the chosen items are and the total cos, with the order pick up date and payment options, with the footer being a large confirm button. This follows the same appearance aesthetic as the reservation, individual product, and general pages.

Happy with these designs, I moved onto creating the profile page.

The first thing I did was decide on exactly what would be the content of this page. After looking over the App, I decided that there only needed to be three sections to it; Favouries, Recent orders and Reservations, as well as the basic profile information and a profile image if the user wishes.

Favourites page:

The top of the profile page is fixed, with the three buttons at the bottom controlling what is shown below this. The first page is the Favourites page, which will be a list of the users favourite products. This is done in the image format as I think this work really well previously, and it makes things a bit more interesting visually instead of just having a list.

Recent orders:

The recent orders page has two sections to it - the first being a list of all the orders the user has made, each with their own link, which is the second page, detailing that specific order and it's content. Also, if a user selects a current order they have placed, they have the ability to be able to cancel it or edit it, as shown above. On past orders, users will have the ability to order it again.

Reservations page:

The reservation pages are identical in execution to the Recent Order pages above, in the first page being a list of current and past reservations, and the second being a more in depth look into one specific booking. The user has the ability to edit or cancel a current reservation, as well as rebook a previous reservation.

Following the completion of their layouts, I mocked them up in Photoshop to include the imagery.

Overall I am very pleased with these pages as I found them very quick to create now that the overall aesthetic to the App has been refined and become definite. I think all the pages now work well consistently and while there are two styles of pages, these integrate well together to create a strong concept for the App design.

At this point I have completed all pages to the App and need to create the design boards to present them fully.

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 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.