HATCH
Design outstanding beer e-commerce website
Role
Research | UX | UI | Project management
Tools
Adobe XD, Adobe illustrator, Elementor
Key Skills
Sketching, Information Architecture, Workflows, Wireframing, Visual Design, Work by Brand Book, Prototype, Project Management
Duration & Year
5 months, 2022
Context
The Hatch website is a bilingual store site for a Jerusalem brewery. The site caters to boutique beer lovers and offers a wide variety of beers and beerchandise.
The site is designed to allow a complete experience of personal connection to the brand's unique identity; tradition and authenticity, along with innovation and quality.
The UX design is comfortable, pleasant and accessible, and the UI adds spirit, energy and humor.
Building an online store for Hatch Brewery will allow them to reach current customers more easily and attract new clients.
Motivation & Target
Like the real bar, the website aspires to keep the unique, human, friendly, accessible, and welcoming experience. All this, in accordance with the design identity established in the brand book.
As part of the site's focus, it should also provide a customized beer ordering experience, in which beer can be delivered to the doorstep. Additionally, it should encourage comments and feedback from users on the site.
Brief
- Sell beer.
- Establish the brand reputation with the consumers community.
- Strengthen the connection with customers remotely.
- Reach potential business clients.
Main Goals
Many similar competitors.
Creating a unique experience despite fixed purchase schemes.
Working under limited budget.
Challenges
SOLUTION OVERVIEW
Homepage is a market party!
The home page is the gate that provides a glimpse into the main parts of the site. Just as important, it emphasizes the values of Hatch from the first moment.
Each section on the page is designed for dedicated interaction, accompanied by carefully written microcopy and illustrations that combine humor and visual uniqueness.
The Beer Store
User can choose between recommended packs and custom Mix & Match packs on the main store page.
The store was designed to allow a comfortable UX for the assembly of the beer packs by the users.
Our goal is to motivate users to navigate to this page as a central destination. This is done directly from any page on the site – from header, footer and links that are integrated in relevant places on the site.
Beer catalog page
We wanted to provide a professional platform on the site for beer-related information, beyond products-focused information.
To create clear separation between sales content and professional content, we created a separate beer catalog area.
In order to not harm the shopping experience, we have created a connection between this area and the store in a way that drives purchase.
Research
In the research process, I examined a wide variety of sites – competitors in Israel and parallels from around the world.
In presenting the comparison below I will focus on examining the solutions to the dilemma between motivating users to purchase versus reading information.
Competitive Analysis
Jem's Beer Factory
Two separate sites – one for sale and one for information
Very basic information about the beers in the catalog.
BeerBazaar
All roads lead to the store; and it is very difficult to navigate to other places.
Where is the catalog?
Alexander Beer
A clear separation in terms of structure and copy between the store and the catalog.
Poor visual separation between the above.
- The clearer the separation between the store and the catalog, both in terms of UX and in terms of UI, the easier the orientation is.
- However, it is important to maintain connectivity between the areas, in order to motivate the purchase and allow easy orientation at each stage of browsing and not create a single central junction from which there is no return.
- The overall UI of the store area should be clean and polished, to draw attention to the visual uniqueness of the various products.
Research findings
The target audience is divided into three main segments:
Businesses – shops, bars and restaurants looking for boutique beers.
Beer Geeks – a young Israeli audience that loves parties and drinks and is looking for an authentic experience.
Americans in the Mahane Yehuda market – American and Anglo-Saxon gastro lovers, mostly religious. Among them are students, long-term tourists, as well as "Olim".
Users Characterization
Experience
Architecture
These structures of user flows illustrated the processes that the users would use to achieve specific tasks.
- Main – הנעה לקריאת תוכן מקצועי ומעורבות משתמשים בתגובות
- Secondary- הנעה לחיפוש בתי קלייה ומעורבות משתמשים בדירוג וחוות דעת.
USER FLOW
Wirframes
Interface
In order to research the design language, we examined the brand identity that exists within the brand, and which is reflected in the beer labels. This design language emphasizes a quality, creative, and accessible boutique beer experience.
Final Visual Design
Based on the brand colors, I decided to use clean and minimalist colors. Mainly black, white, and yellow together with the multicolored illustrations found on the home page to create a strong and kicking visual presence.
Color Choices
The typography on the site is based on Google's Rubik font. Sans-serif font, young, clean, very readable and with full acceptance between English and Hebrew.
Typography
The visual uniqueness of the site comes from the beer label original illustrations. They are incorporated into the main messages and brand values of the site.
Using these illustrations as inspiration, I created additional illustrations. Primarily, mockups of beer bottles and beer packs.
Iconography
Conclusion
The main challenges of this project were working with the development team and customers on the site. During the development of the site, a number of prototypes were identified that were not feasible because of the platform and budget limitations.
Customers are just beginning work on the site's control panel interface, and are already facing challenges, especially at the design level. For example, the illustrations designed for customers to use on a regular basis indeed meet the functional requirements of ease of use. However, additional design guidance is required to maintain an uniform visual language despite the resources and time constraints of the clients.