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