Verdure

Customization Food Ordering Experience with UI/UX Principles

Date Published:
[1 min read]

The Project

To produce a functional digital prototype of a website by applying current best practices throughout the UI/UX development process.

The Process

Since this was an individual, small-scale project focused primarily on my personal learning, I chose to use the Waterfall approach to design a restaurant website.

This linear, step-by-step process was easy to manage and helped me track progress through detailed planning and documentation.

Diagram of my Waterfall Approach
Waterfall Approach to the project

Inspired by the lush green color of vegetation, I named the restaurant Verdure. This word comes from the Old French verd (meaning "green").

Verdure is a rice bowl restaurant that offers fusion rice bowls made with alternative meats, focusing on sustainability and wellness.

With the business concept established, I crafted three distinct user personas to better understand the needs of both users and clients. These personas helped clarify the content and functionality requirements for the website.

Three distinct consumer groups
Consumer Segmentation & Persona

Next, I went on to design a sitemap indicating the structure of the website's information flow. I aimed for simplicity and intuitiveness, keeping the user's journey in mind throughout the design process.

Verdure sitemap
Sitemap of Verdure

Once the sitemap was established, I created low-fidelity wireframes to outline the layout and content structure for both desktop and mobile.

Verdure wireframe
Lo-Fi Wireframe of Verdure

Then, I envisioned the final look and feel of the site through a moodboard.

Verdure moodboard
Moodboard of Verdure

I wanted the design to evoke a sense of wellness and sustainability, so I chose a calm, mellow color scheme.

The typeface Pacifico was used for headings to create a friendly, inviting atmosphere, while DM Sans was chosen for body text due to its readability and modern feel.

Final Product

Building on the foundation of my lo-fi wireframes, I developed the full visual mockups with the moodboard as reference.

Verdure mockup
Full visual mockup of Verdure

With the visuals finalized, I brought the design to life by creating an interactive prototype in Figma. This prototype simulated the user's journey on the Verdure site, illustrating how they would navigate and place an order.

Verdure interactive prototype
Interactive prototype of Verdure

My Reflection

Great web design goes beyond aesthetics—it’s about seamless, user-centric experiences.

Through this project, I learned to blend design principles with usability. Additionally, I have also explored web technologies and coding to equip me with more control over my work and gain a deeper appreciation of the intricacies behind web development.

Now, with both design and coding skills, I’m excited to continue crafting intuitive and engaging digital experiences—and always eager to learn more!