Design outstanding beer e-commerce website


Research | UX | UI | Project management


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


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.


  1. Sell beer.
  2. Establish the brand reputation with the consumers community.
  3. Strengthen the connection with customers remotely.
  4. Reach potential business clients.

Main Goals

Many similar competitors.

Creating a unique experience despite fixed purchase schemes.

Working under limited budget.



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.


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.


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.

  1. 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.
  2. 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.
  3. 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



These structures of user flows illustrated the processes  that the users would use to achieve specific tasks.

focused on tow task flows, בגרסא הראשונית של האתר:
  1. Main – הנעה לקריאת תוכן מקצועי ומעורבות משתמשים בתגובות
  2. Secondary- הנעה לחיפוש בתי קלייה ומעורבות משתמשים בדירוג וחוות דעת.




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.


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.



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.


מוזמנים לפנות,
כאן בשבילכם