Yijia LiI’m a UI/UX Designer who believes in design as a powerful tool for problem-solving.Click to view my Graphic & Motion Design Works Email

Cafe Website

(Website)
My Roles
UX / UI Design
Wireframing
Prototyping
Data Analysis
Information Architect
Project Overview
Developed a coffee bean sales website based on provided data, with a primary focus on information architecture, data organization, and UI design. The website aims to offer a seamless navigation flow complemented by clear, user-friendly, and modern visuals.




Research

I’ve researched three coffee websites that focus on selling coffee beans. They are Coffea, Pilot Coffee Roasters, and Pallet Coffee. All of them feature a top navigation bar with essential tools like “search,” “log-in,” and “cart,” facilitating user access and navigation. While all three websites offer filtering functions to help users locate specific coffee products, they employ distinct approaches suited to their product offerings.

Coffea categorizes coffee under “Shop” and separates it into Single Origin and Blends. Its filter, accessible through a collapsible tab, allows users to refine options by availability, type, and tasting notes. The product pages provide comprehensive details, including product images, names, prices, taste notes, brewing suggestions, and a recycling program, supporting an informed shopping experience.

Pilot Coffee Roasters also lists coffee under “Shop,” with further classifications like Blend, Single Origin, Decaf, and Instant Coffee. Its sidebar filter remains visible, offering real-time refinement by coffee type. Product pages include tasting keywords, bitterness level, weight, grind, and origin details like varietal and altitude, adding transparency for consumers interested in coffee origins.

Pallet Coffee offers a broader filtering and sorting system, covering not only coffee but also equipment and gift cards across 22 categories. Products can be sorted by popularity, alphabet, price, and date. Its product pages include information about origin, such as farm and process, as well as flexible options for pickup and payment.

Overall, each site tailors its filtering and product details to align with distinct user needs, from Coffea’s streamlined focus to Pallet’s extensive catalogue, demonstrating varied design strategies in e-commerce.





Card Sorting

In this test, I implemented closed card sorting for two main reasons. First, it simplifies the sorting process for users by providing predefined categories, which reduces cognitive load and makes the task more intuitive. Second, my observations of various coffee websites revealed a consistent pattern in their global navigation structures. Most of them organize their content into clearly defined and familiar categories, which aligns well with the closed-sorting approach. 

Closed card sorting also offers the advantage of easily identifying users’ expectations and preferences for content placement. Interestingly, in my case, the results revealed some surprising trends. For instance, several users were divided on where cards like “About Us,” “Contact,” and “Events” should belong. Approximately half of the participants placed them under the “Shop” category rather than “Learn.” 

This initially surprised me but became more understandable upon reflection. When navigating shopping websites, users often expect comprehensive catalogues where all essential information can be accessed anywhere. Additionally, the term “Shop” might have caused some confusion, as users may interpret it as referring either to the act of shopping or to the physical store itself. 



Website Schema

Based on the observations and research into other café websites, I propose creating a website with a clear and intuitive information architecture that enhances user experience and ensures seamless navigation.

The website will feature a global navigation bar with primary categories such as Shop, Subscribe, Learn, and Locations. When users click on Shop, a local navigation bar will appear, providing access to subcategories such as Merch, Gift Cards, Brewing Equipment, Tea, and Coffee. This local navigation bar will persist as users explore the website, offering consistent context and easy access to related sections.

When users navigate to the Coffee selection, an additional filter sidebar—functioning as an extended local navigation—will appear. This feature allows users to refine their search and find the coffee they want efficiently. The filters provide options to display all available coffee products or narrow the selection based on type, origin, or taste profile. For the origin filter specifically, users can further select a particular country from an expanded list.

This structure ensures users have the flexibility to browse products freely while maintaining a clear sense of direction and context. By integrating global and local navigation, supported by detailed filtering options, the website offers an intuitive experience, helping users easily find and explore products without feeling lost. This thoughtful approach to information architecture prioritizes both user freedom and guidance, striking a balance between exploration and efficiency. 




Key Wireframes

After creating the website schema, I designed the key wireframes to establish the information architecture for the main webpage.  
1st Version



In the initial wireframe, the coffee filters were positioned at the top of the screen, below the global navigation bar. I incorporated two distinct filters: users could first select a category they wanted to browse and then further refine their choices. However, this two-step filtering process caused users to spend more time navigating the content. They needed to open and close the filter bar each time they made a change, and the bar obstructed the view of the products.2nd Version



In the second wireframe, I refined the filtering system to enhance usability. The key change was placing the filter as a sidebar on the left side of the screen. When users click on a filter, the product list dynamically updates based on the selected criteria. This approach prevents the filter from competing with the product information, allowing users to filter the content while browsing seamlessly.





Prototype








Style Tile