Web Design
UX Documents
Visual Branding


UI/UX Design
Graphic Design
Motion Graphics


Doez Coffee Roaster intends to provide good coffee as well as create easy cozy coffee selecting experiences both in stores and online. Based on one of Doez’s goal - Providing user-friendly bean selecting process online, I designed an online bean selecting process that allows customers to select beans online as if they were selecting beans in stores, where they can receive suggestions from coffee professionals. First, a well-designed filter helps users to filter out their preference of cuppings. Next, customers can tell the flavors of beans on catalogue pages without entering a product page. Last, they can see the detailed descriptions of the beans on product pages. In this way, they can shop coffee beans very efficiently without spending a large amount of time browsing every product.

Doez Coffee Roaster intends to present itself as professional, reliable and genuine. Thus, the visual style is defined as simple, friendly and elegant. Hand-drawn illustrations and hand-made typography numbers are designed to help convey the hand-roasted beans and genuine nature of the brand.


The following are extracts from the UX documents.
For the complete UX documents,
please feel free to check the link at the end of this page.

01  /  Outline approaches to define the problem and objectives, research and analyze existing competitors as well as visualize concepts.

02  /  Research on current existing coffee menus of online stores and physical stores.

03  /  Conduct a questionnaire survey for customers to understand their coffee bean shopping habits and behaviors, followed by the research conclusion.

04  /  Set target audience and create personas to furthur illustrate the target groups. Empathy maps are to better understand the minds of target audience.

05  /  Develop experience map to demonstrate customers' thoughts and behaviors from the beginning to the end of an shopping experience. 

06  /  Create a sitemap and wireframes to clarify the structure of website.

 Complete UX Documents
Check more on Coffee Trace Numbers