< Back to Projects

THE HUMMINGBIRD

Restaurant Website Case Study

The Mission:

For this personal project, I focused on improving and reviewing my knowledge in the UI/UX field on web design. The goal was to help users easily navigate through this new restaurant website while capturing their attention throughout with a captivating interface. I wanted to highlight the most important notes that were mentioned in the user personas and implement those elements onto the site for everyone’s benefit.

Empathy Map

User Personas

Challenges Faced:

  • I had to create my wireframes through Figma, which was a challenge for me since I’ve never used it before. Prior to that, I used Adobe XD quite a bit.
  • “Which colour palette should I use for my branding that can make this appealing to look at and not strain people’s eyes?”
  • “I’m not that used to the Laws of UX just yet, but I need to keep it in mind when creating this site. “
  • Considering I have never used Figma before, I had to quickly learn where the elements were. Though it does have very similar components to Adobe XD, there are definitely some differences to it.
  • Trying to navigate through Figma’s interface was a hindrance to my workflow as I get confused about where the components were located and how they worked on this specific software.
  • “I was planning on putting this menu bar here. But I have no idea how to do it on Figma. I should find an alternative solution.”
  • I had to research that the prototyping area in Figma did not have a responsiveness feature to it.

Low-Fidelity Wireframes

Medium-Fidelity Wireframes

Outcome:

Throughout my journey in creating this design, I have managed to put together the website wireframes and prototype well enough to what I imagined it to be. I have settled for a slick and minimal design to not confuse the user and get them to easily navigate around the website. I’ve also decided to change the sticky side menu bar that was originally in the medium-fidelity wireframe into a top sticky instead since I had trouble figuring out how to make it on Figma. And, it did create more white space for the menu, allowing more breathing room for the elements.

Overall, I felt like I did a great job since this was my first time using Figma. Though I may still be biased with my software choices, I should keep exploring what Figma has to offer!

High-Fidelity Wireframes and Prototype

> To access the prototype, please click here.

Responsibilities:

This was a solo project. Responsibilities included:

  • UI Design
  • UX Design/Research
  • Graphic Design 

Software:

  • Figma
  • Adobe Illustrator
  • Adobe Photoshop

Date Accomplished:

Started: March 1, 2022

Ended: March 28, 2022