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.
No comments:
Post a Comment