Dark Material Website

UX design
Dark Material Web Design and Development Mockup with Apple devices

Project Summery


Humber College
project type
UX design
project year
4 weeks
Adobe XD
Display & Case Study


UX Researcher, UX / UI Designer
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.
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.
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.


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


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.


UX Process for Web design

User flow

UX User flow for website


UX sketches for website


UX / UI style sheet for web design


Other projects

Let's work together

Please feel free to leave your name and messages here, I normally will reply within one business day.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.