For the final project, I annotated the prototype to show how the website would function. A detailed guide for the software developers who would usually take on the project.
Primary Objectives
Create a set of annotations.
Make sure the notes contain all the necessary detail a would need to build the application accurately
Each page in the flow contributes to the seamless hotel booking process, guiding users from exploring options to confirming their orders. The user interface aims to provide clear interactions, validations, and a celebratory touch upon successful booking. It's important to visualize this flow using wireframes or mockups to ensure that the design effectively translates these features into an intuitive and visually appealing interface.
Page 1 - Homepage:
Hamburger menu for menu options.
The search button directs users to Page 2.
Slideshow with images timed at 10 seconds.
Country and currency adjustment.
Hotel and add-on basket with contents display.
Sign up and register for users (animated register button).
Page 2 - Hotel Listing:
Interactive icons for selection.
Clicking hotel images leads to individual hotel page.
Plus icon zooms into hotel image.
Page 3 - Individual Hotel Page:
Animated baskets for hotel and add-ons.
Basket click leads to Page 4.
Multiple choice add-ons connected to basket.
Reviews can be reordered using dropdown.
Page 4 - Hotel Summary (Basket):
Optional subscription option.
Next button leads to Page 5.
Additional add-ons can be included.
Page 5 - Personal Details (Basket):
Input fields for name, email, phone, address, postcode, and discount code.
Input validations for email, phone, address, postcode, and discount code.
Next button leads to Page 6.
Page 6 - Payment Method (Basket):
Name on card input with validation.
Payment method selection.
Additional pop-up for PayPal or Apple Pay.
Card number, expiry date, CVV input with validation.
Next button leads to Page 7.
Page 7 - Order Confirmation:
Animated email for celebration (confetti or themed).
User's chosen hotel details for confirmation.
Display of personal details for user's review.
I want to commend myself for developing a solid prototype that truly captures the essence of the project. As I review it, I can see that I've included enough detail to effectively test the high-level flow, screen layouts, and interactions. The time and effort I've invested in this project are certainly paying off, as evidenced by the comprehensive nature of the prototype.
I'm also appreciative of the feedback given, especially the suggestion to go back and enhance some screens by adding specific hotspots, particularly for elements like location. I can see the merit in this recommendation, as it would contribute to a more realistic user experience and facilitate more meaningful testing. The thought of refining the hotspots to achieve greater granularity excites me, as it aligns well with the goal of creating authentic user interaction, especially right from the homepage. I'm looking forward to the prospect of testing the prototype with actual users to gather valuable insights into its functionality.
Moreover, the recognition of the wireframes' quality and their utility for the development phase is reassuring. Ensuring that the developer has all the necessary information is crucial, and I'm glad to know that I've achieved this in my wireframes.
Throughout this journey, I've gained invaluable experience and knowledge. I'm truly grateful for the guidance and support that have been provided along the way. As I approach the upcoming exam, I'm feeling optimistic and confident in my ability to demonstrate the skills I've honed throughout this project.