Capistrano Distillery
Designing a website for a liquor distillery business to showcase their products, share their history, and connect with customers. This is a class project for CAP4102 - UI/UX Design.
Role Skills
UI Designer Wireframing, Prototyping,
UI Design
Timeline Tools
Sept - November 2024 Figma, Flowmap
Project Goals
Showcasing the distillery's products in an engaging and visually appealing catalog.
Provide visitors with easily accessible and well organized information about the distillery.
Cultivate a sense of connection between customers and the sellers through website features and storytelling.
Constructing Visual Identity
I worked and communicated with the clients and my team members to establish the guiding principles of the brand, and what we want customers to take away and feel from the distillery.
I designed the components and UI elements to maintain a unified and consistent design voice. We wanted the website's color scheme and typography to reflect the tropical location and nature of the brand's products, as conveyed to us in our meetings. I documented these components for the development team and for the distillery owner's to reference after the completion of this project in the future.
Product Cards
I designed interactive product cards that flip to reveal detailed information about each item. This feature provides an engaging way for users to explore the product catalog while maintaining an organized layout.
The card design emphasizes the distillery's offerings and presents in-depth details about each product in a visually appealing and user-friendly format. It encourages user interaction and captures attention.
Age Confirmation Pop-up
This feature prompts users to confirm their age before accessing the site. The pop up is designed to target and direct a specific audience to the distillery's products and comply with legal requirements.
Spotlight Carousel & Reviews
To highlight the distillery's community engagement and reputation, I designed a carousel feature showcasing the distillery's sponsors and affiliated companies. I also created a section highlighting positive customer reviews and experiences with their products. These features provide a visually engaging way to build trust and credibility between the seller and the consumer.
Displaying the company's meaningful partnerships and showcasing authentic testimonials creates a sense of connection and transparency between the distillery and the website's visitors.
Final Overview
Reflection
The focus of this project was to create a website that reflected the brand and history of Capistrano Distillery. This project challenged me to think critically about presenting information in a way that aligned with our client's goals and also resonated with users. I got the opportunity to explore and create interactive elements and construct a style guide in consultation with our clients. Making my own components and design system for this project helped me reflect on designing products in a systemic way. Creating references for color choices, font weight, and etc. allowed me to apply methodologies commonly used in an industry environment and is something I will carry with me for my future projects.
Another valuable lesson I learned was the significance of storytelling through design. Tying the content hierarchy to visual elements such as color schemes and interactive features allowed the website to intuitively guide users and become a cohesive project.
I also learned the importance of creating clear and cohesive documentation for an easy handoff. Working in tandem with the developers on my team, I realized that I had to revisit my designs at times to ensure that components, such as padding and size, were consistent and clearly understood by the engineers.