Stevag Restaurant & Bar
Design Meets
Gastronomy
Homepage -Case Study
Industry: Food
User Interface/User Experience
Freelance Project
Overview
I was thrilled to join Stevag Restaurant & Bar as their freelance UI/UX designer, entrusted with the task of crafting their inaugural website. This is a case study on my approach and the underlying logic behind my design process, specifically for the homepage.
​
To ensure an outstanding user experience, my primary goal was to create a visually captivating and intuitive interface that perfectly aligns with the brand's identity. By carefully considering crucial elements like first impressions, navigation, brand representation, and content organization, I aimed to deliver a homepage that not only showcases the essence of the restaurant but also captivates and engages its visitors.
​
If you want to learn about my design process for Stevag Restaurant & Bar's menu page you can click this link.
Navigation: Homepage
The homepage is structured into three key sections:
​
-
Popular
-
FAQ
-
Reviews
​
Let me guide you through my design rationale for each of these sections in detail.
My Design Thinking
Here are some reasons why I designed the app in a certain way to enhance the user experience, as well as the user interface.
Banner Image
To ensure clear visibility and legibility, certain enhancements were made to the banner image. Firstly, the contrast of the image was adjusted to 0% in order to prevent the white text from blending into the white plate and food. Additionally, a subtle shadow effect was applied to the text, providing a visual separation and further improving its readability. These modifications effectively address the potential issue of text obscurity and contribute to a more visually appealing presentation.
Active State
The homepage consists of two sections that display the active and non-active states. To distinguish between these states, the icon on the navigation bar undergoes a visual change. When active, the icon is filled, whereas in its non-active state, it remains unfilled.
In addition, the tabs located underneath the banner image also exhibit different states. When a tab is active, it appears in a vibrant yellow color, creating a noticeable contrast to the subdued grey color of the non-active tabs. This color distinction effectively highlights the active state and aids in guiding user interaction.
Minimize Scrolling
I made the decision to implement tabs instead of relying solely on the conventional method of presenting information to users through continuous scrolling. This choice offers several advantages that enhance the user experience.
-
Firstly, utilizing tabs reduces the need for excessive scrolling, which enhances user convenience. Users can quickly access different sections of the website without having to scroll through lengthy content. This streamlined navigation saves time and effort, making it easier for users to find the desired information efficiently.
​
-
Furthermore, using tabs helps prevent cognitive overload. By organizing content into distinct sections, users can focus on one topic at a time without feeling overwhelmed by a large amount of information presented all at once. This approach promotes better comprehension and aids in information retention.
​
-
Another significant benefit of tabs is their ability to facilitate content focus. Users can easily locate specific information by selecting the relevant tab, eliminating the need to scan through lengthy pages. This targeted navigation enables users to find what they are looking for more quickly, enhancing their overall experience on the website.
Branding
For the website, I have selected a primary color scheme consisting of yellow and white. This choice was driven by the logo design, and by incorporating these colors throughout the website, it ensures consistency with the overall brand identity.
​
Additionally, in the footer section of the website, I have specifically chosen green as the text color. This decision is inspired by the cuisine served at Stevag's restaurant, which specializes in Nigerian cuisine. The rationale behind this color choice stems from the colors found in the Nigerian flag, which are green and white. By incorporating green into the footer text, it not only pays homage to the Nigerian culture but also creates a visual connection between the website's design and the restaurant's culinary focus.
Call to Action
Every tab on the homepage features a prominent call-to-action button with an icon similar to the icons on the top navigation bar. This is to let the user know which page they will be brought to if they click this button.
These call-to-action buttons enables users to access additional sections of the website with ease. By providing clear and intuitive navigation, users are empowered to explore more content and gather comprehensive information about the company's offerings. This seamless access to relevant details enhances the user experience and encourages further engagement.
By offering more detailed information and presenting new insights, users are provided with valuable content that establishes the company's expertise and credibility. This transparency and commitment to sharing relevant information instill confidence in users, fostering a sense of trust and reliability in the company
Thanks for checking out my case study! I highly recommend to check out my other UI/UX Designs. Click here to view part 2 of Stevag Restaurant & Bar's web design.