Overview

The Winest is a case study of an online wine shop that presents an assortment of wines, enabling customers to explore their distinct taste profiles and enhance their knowledge of wine tasting and the overall wine experience.

The website primarily targets the younger generation, with the objective of fostering a wider appreciation for wine culture and imparting a profound understanding of the captivating world of wine.

As a result, this website radiates a refreshing and enthusiastic ambiance, characterized by a modern and playful approach. I aimed to capture the vibrant energy of youth by infusing the platform with delightful humor and liveliness.

Project Stack

• Figma and FigJam for the entire UX and UI process;
• Notion for gathering all information, research, and descriptions in one file;
• Procreate for illustrations;
• Protopie for motion design;

Challenge

The wine-drinking culture in Europe, particularly in countries that are not renowned for vine cultivation, practically does not exist. Non-wine-producing European countries have over 10% lower wine consumption compared to wine-producing countries. People aren't knowledgeable about wine; they don't know which wine to choose or how to pair it with food. According to Sonoma State University research, only half of the respondents admitted to pairing wine with food.

Solution

The goal of The Winest is to educate and promote wine culture through a personalized flavor test, educational resources for food and wine pairing, and insights into wine tasting, production, and regions. Users can also purchase a variety of wines with detailed descriptions. Logged-in users receive wine recommendations based on their flavor profile and can earn rewards through a loyalty program.

Practice

I began the practical part of this project by defining the user, business, and research goals. Then, I established the research methodology (which included secondary research in which was market research, and competitor analysis). After conducting the research, I drew conclusions from it. Based on these insights, I then identified the key features required to achieve the goals and designed the website's skeleton accordingly.

Goals

🧑 User Goals

• Buy wine online conveniently.
• Discover and explore diverse wines from different regions and varietals.
• Learn about wine tasting, flavour profiles, wine regions, and food pairing.

💼 Business Goals

• Promote wine-drinking culture and increase sales.
• Promote wine producers, offer diverse and curated selections, and provide excellent customer service.
• Educate customers about wine and foster an inclusive wine community while establishing The Winest as a trusted online shop.

Competitors

Among the many websites offering online wine sales, I chose three specifically targeted toward younger generations in terms of their vibe and tone of voice. These websites offered a variety of attention-grabbing features that were innovative and aligned well with our predetermined goals.

Therefore, I decided to sketch out the information architectures for each of these websites to understand how they are structured and what the entry paths are to different sections. Additionally, I documented on sticky notes in FigJam how the landing pages of these websites are designed, in order to pay special attention to recurring sections when designing The Winest.

Information Architecture

The information architecture of this project begins with the landing page, proceeds to the product details, and ultimately concludes with the checkout process. The lightest rectangles are the parts of the website I didn't focus on. The darkest rectangles are parts of the website that I wanted to deepen in the design process.

Wireframes

To begin the UI Design Process, I divided the entire landing page into separate sections and provided concise descriptions for each, such as "About us - Learn more about our history and services," to organize the information effectively. Following that, I started creating quick sketches and wireframes that I wanted to rely on during the design phase.

Design

In the project "The Winest," I wanted to showcase energy and fun - two pillars closely associated with youth. Hence, at every stage of the design, you can see, feel, and hear this youthful vibe. The process involves creating a logo, colors, typography, illustrations, photos, and icons, but it also involves ensuring the grids, spacing, and states of individual components are well taken care of.

Logo

From the beginning, I knew that the logo for this project couldn't be ordinary, but it also couldn't be overdone or kitschy. It had to have that "something special." So, after many attempts and errors, The Winest logo is a combination of the Mafinest font and twisted letter "E's," which fit perfectly into the overall tone of the project with their humor and association with a corkscrew or twisted grapevines.

Colors

Colors are my soul. I love using vibrant and interesting color combinations in my projects. For this one, I opted for neon green-yellow, evoking a youthful vibe; neon orange, associated with fun; burgundy, symbolizing wine; and sea green, reminiscent of the color of wine bottles.

I distinguished each shade of the palette using The Color System from Material 2, which accompanies me in every project and, in my opinion, is reliable.

Typography

The fonts I used in the project are simple and minimalist. Avenir, primarily applied to body text but also to titles, is subtle and conservative, while Mafinest, used in headings, exudes the energy of youth and fun.

Below, I have listed the size, weight, and line height for each type of text in the project. When determining the line height, I followed the principle of setting the height for headings and titles to 135%, and for body texts to 150%. I multiplied the font size by 1.35 or 1.5 to calculate the appropriate line height for each type of text and size.

UI Screens

My favorite part of the design process is UI design. Here, I can showcase my abundant reserves of creativity and transform goals into something tangible. For The Winest, I decided to go all out to capture the attention of the younger audience. I draw inspiration from great design stars like Brian Collins, Leta Sobierajski, and Paula Scher, which is why I learn a lot about visual design from them, and you can see traces of their work in each of my projects.

I designed the desktop version to be 1440x1024 pixels. Initially, I set the margin at 24 pixels, but over time, I noticed that it was too small, which might make it difficult and time-consuming to reach the "Taste Test" button with the cursor. Therefore, I increased the margin to 48 pixels, and this seems like a much more user-friendly solution. I set the gutter at 20 pixels because I knew from the beginning that the layout would be quite tight.

In the mobile version (375x812 pixels), I used a margin of 24 pixels and a gutter of 20 pixels. This was to increase clarity in the mobile version while maintaining usability. Thus, the width of the working area in the mobile interface was 327 pixels.

Below, I present all the screens in the flow that I designed for this project based on Information Architecture. Additionally, in some places, I also show the spacings between individual interface elements to demonstrate the principles I follow in this design.

Atomic Design

In this project, I applied the Atomic Design methodology to create the entire interface. As explained by Brad Frost, the author of this approach, "Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are atoms, molecules, organisms, templates, and pages." I demonstrated this approach by utilizing the text field component within the login form.

Atoms serve as the fundamental building blocks that make up all our user interfaces. These atoms consist of basic HTML elements such as form labels, inputs, buttons, and others that cannot be further broken down without losing their functionality.

Molecules, on the other hand, are relatively simple groups of UI elements that function together as a unit. For instance, a form label, search input, and button can be combined to create a search form molecule.

Organisms, being more intricate, are UI components composed of groups of molecules, atoms, and/or other organisms. These organisms form distinct sections of an interface. In this case, the login form appears as a modal on the overlay when the user clicks the login button under the profile icon.

Summary

The design process for The Winest e-commerce project involved a strategic approach to create a user-friendly and engaging platform. The project began with defining clear user, business, and research goals. Market research and competitor analysis were conducted to gather insights for the design.

The design team adopted the Atomic Design methodology, which comprises five stages - atoms, molecules, organisms, templates, and pages. This hierarchical approach helped systematically create the interface design system. The color palette and fonts were carefully chosen to evoke a vibrant and youthful vibe, aligning with the project's focus on promoting wine culture among the younger generation.

Throughout the design, elements were categorized as atoms, representing foundational building blocks, molecules as simple UI groups, and organisms as more complex components. The UI design included a personalized flavor test, educational resources for wine pairing, and detailed wine descriptions. A user-friendly interface for both desktop and mobile versions was ensured.

During The Winest design process, I was able to utilize various skills I had acquired earlier, including research capabilities. I also applied my knowledge of grids, spacing, atomic design, and building components and variations in Figma. I added a personal touch to the project with original illustrations and carefully selected images.

What's Next?

After designing the e-commerce website, the next steps involve development, testing, and launching. This includes content creation, payment gateway integration, security measures, SEO optimization, user testing, and continuous monitoring for improvements. Additionally, A/B testing helps optimize the website's performance and user experience.