Dark Material Website

UX design

Dark Material Web Design and Development Mockup with Apple devices

Project Summery

General

Client

Humber College

project type

UX design

project year

2021

duration

4 weeks

tools

Adobe XD

Display & Case Study

Behance

Medium

Overview

team

Self-directed

Role

UX Researcher, UX / UI Designer

Challenge

Create a website that visually informs users about the brand, mindful navigation, user flow, and view the important items as dominant. The site prototype needs to be developed fully responsible for widescreen, tablet, and mobile.

Solution

By researching luxury chocolate restaurants' brands and target users with personalities being entrepreneurs, I designed a responsive prototype with an elegant design while at the same time being functional. I created the pages to introduce the restaurant, the menu items, order delivery, and contact location. I also applied smooth motion for selecting menu items on the touch screen and the glassmorphism effect for the modern look.

Result

A user testing was conducted with 2 users. The goal is to navigate through the website to learn about the brand, get the product information, order the product, see the total cost and then look for the restaurant location to visit. The users finished navigating the website within only 5 minutes. They loved the design and the navigation on the touch screen. There is a need to improve the home screen to be more engaging with graphic design banners and a chat assistant in the future.

Prototype

Widescreen

Tablet

Mobile

Introduction

DARK MATERIAL is a chocolate restaurant brand that provides high-quality Egyptian cacao to the world.

The brand design will be quite complex with the pattern and texture of Egypt in order to remind their ancient time. The brand logo is a minimal image of the Egyptian headdress created by the figure/ground of the two letters D and M. Main brand colors will be Green, Gold, Blue, and Brown. 5 specific keywords of the brand: traditional, authentic, natural, history, and divide. The goal of the business is to compete with other luxury chocolate brand like Godiva, GuyLian, Toblerone, Lindt, Ferrero and so on to become on the the most famous chocolate brand in Canada.

The entire project is to develop the brand logo, mood board, branding materials including stationaries, packaging, and finally the website prototype design.

Project Details

Research

Target audiences

People who love chocolate, have medium income and classy.

‍

Empathy Map Canvas

WHO: The customer are medium income people who have no interest in buying chocolate gifts from convenient stores and prefer buying from a branded chocolate bar restaurant.
NEED TO DO: They would like to order online directly at the official page or find the location of the restaurants.

SEE: They want to see luxury style design, limited edition chocolate bar and product information, and a brand with deep history and value.
SAY: They would speak up when navigate through the website, making “wow” with motion effect and comment about the ingredients of the chocolate bars.

TO DO: They would compare the price and value, review the products, summary orders and calculate the total cost.
HEAR: They would listen to what people comments about the product quality and value.

PAINS: They would get frustrated when it takes them long time to find the product or information that they want.
GAINS: They would save time with quick check out process and easy to find the desire information.
MOTIVATE: They would make the decision to purchase quicker when seeing a clear CALL TO ACTION display about Limited products and promotions.

‍