Magnolia

UX/UI Prototypes

Magnolia

 

For my second project in BCIT’s UI/UX Prototyping Tools: AdobeXD course, I was tasked with creating a desktop prototype. I created a restaurant called Magnolia which is a local 5-star dining experience in Downtown Vancouver. There were two main phases in the process:

  1. Defining user story and background

  2. Building out lo-fi and live hi-fi prototypes


Phase 1

The first step of this project was deciding on a theme and user story to build out into a beautiful user experinece.

THEME

5-star Western restaurant in downtown Vancouver

USER STORY

A man is looking to book a reservation at a nice restaurant for four to celebrate his mother’s birthday.

BACKGROUND

James Chu is a 25-year-old computer science graduate from UBC. His mother’s 50th birthday is coming up in two weeks. He is looking to book a nice restaurant for a family dinner. After talking to his coworkers and friends, he hears about this five-star Western restaurant in downtown Vancouver. The word of mouth spiked his interest enough to visit your website and make a reservation for his family of four: himself, his mother, father, and younger sister. He will want to book the dinner for Sunday, May 30th, around 6:00 pm.


Phase 2

Lo-fi prototype

Taking the user story defined above, I jumped into Adobe XD and started to lay out a lo-fi prototype using filler text and image blocks, as well as a global navigation and footer bar. I created a consistent look and feel with the headers across the top of the website, and kept in mind user expectations that would be crucial to having a good desktop user experience. For example, ensuring the logo is linked to the home page, and that key buttons such as reservations were highlighted in the top right-hand corner.

Hi-Fi prototype

Building directly off of the lo-fi prototype, I began to fill in placeholder text and images with content and royalty-free images from Unsplash. All sources used can be found referenced in this document listing creative sources used. While I created a page for every navigation menu, the key task that I focused on was making a reservation. This can be seen through the hi-fi live prototype on Adobe.