Hamon Café
Design index & magazine coffee website
Role
Research | UX | UI | Brand | Project management
Tools
Adobe XD, Adobe Illustrator, Elementor
Key Skills
Ideation & Brand, User Stories, Sketching, Information Architecture, Workflows, Wireframing, Visual Design & Prototype, Project Management
Duration & Year
4 months, 2021
Context
Hamon Café is a leading Israeli content and index website. The site's primary goal is to answer the everyday needs of the coffee lovers community. This includes present quality, accessible and clear information to enhance the drinking experience of many.
The project began with forming the identity and branding, followed by UX and UI design. I also managed the web development process and the ongoing implementation of upgrades and extensions.
An initiative that stemmed from a personal need that turned out to be the call of a wide target audience.
Motivation & Target
The site is intended to be a home for coffee lovers that are looking for reliable and clear information about coffee, coffee equipment and roasting houses in Israel.
Moreover, the site's aim is to provide access to all the information collected through a convenient and inviting user experience.
Brief
- Create a wide and professional knowledge base about coffee that will enrich the personal knowledge.
- Access databases of roasting houses and coffee machines.
- Engagement, feedback, and rating of site content by users for learning and improvement.
Main Goals
The site should stand out above similar websites and bring significant added value that will convey to users a reliable, in-depth and quality experience.
The user experience in the roasting houses index should be ideal for users on both sides of the barricade – users and roasting houses owners.
The classification and display method should allow efficient and convenient navigation, filtering and comparison within the database.
We demanded that the design would be mobile first. Hence the limited screen area together with multiple different content types and features raised a challenge.
Challenges
SOLUTION OVERVIEW
Homepage presents rich and dynamic content
Present key components of the site content in a way that leads users to dive into ideas and places.
Nevertheless, it is necessary to leave a designated place for ads.
Roasting houses database
A collection of roasting houses throughout the country in various displays.
Advanced search and filtering options were highlighted in the database, for a particularly convenient user experience.
Roasting house single page
A template that designed like a landing page, with rich information about the roasting house, contacts and a rating option by users.
Creates a complete experience of receiving the wanted information without the need to go anywhere else.
Reviews and Guides
The blog contains general reviews and practical guides on a variety of topics in the field.
The articles are divided into only two categories and are accessible from everywhere. This enables the user to streamline his information search from the first step on the site.
Coffee equipment comparison
Creating the first database of its kind in the country. It contains complete and verified information on coffee equipment.
The design is informative, interactive and engaging. As such, the page invites the users to examine and compare features that are important to them in a convenient and efficient way.
Coffee equipment single page
The template of each coffee machine is built and designed to provide the user with visual, textual and technical information all together, in a detailed and clear manner yet not overwhelming.
* Currently in ongoing work *
Research
The research process began with the looking over dozens of coffee sites for the purpose of examining solutions for similar needs.
Following this, due to the lack of Hebrew sites in the field, I delved into related sites in the fields, mainly food magazines.
Below are summarized reviews of three major sites, each of which has been researched to address a different problem.
Competitive Analysis
Blue Tokai Coffee Roasters
Large coffee shop network in India
Strengths
Convenient navigation of site content through multiple menu levels.
Search results presented in a pleasant and clear visual way.
A clean and elegant color palette, which conveys the brand values.
Weaknesses
The blog area is poorly designed and planned.
Partial responsiveness in small screens.
Inability to find your way in technical and detailed information.
Trade
Shop directly from roasting houses in the US
Strengths
Fit color to content and actions.
Personal, human and direct language.
Pleasant and enjoyable experience.
Weaknesses
A large number of clicks to reach the desired content.
A specific feature (coffee quiz) taking up unnecessary central place.
Hashulchan
The Israeli food magazine "Hashulchan"
Strengths
Clean color scheme
High-quality and rich visuals
Strong mobile compatibility
Weaknesses
Endless options of navigation and filtering.
Confusion and lack of visual uniformity between sections.
Good site orientation is very important on a site with rich content and different content areas.
The visual separation between different sections on the site should be done specifically tailored to the content and purpose, while maintaining the uniformity of the visual language on the site.
The UI design should be clean, simple and elegant in order to appeal to a wide target audience and to contain diverse content.
Research findings
We wanted to reach the widest possible coffee-loving audience. From people who are making their first steps in this world and looking for a "simple" coffee machine to buy, to experts who are looking for quality content in Hebrew.
A review on social media and dedicated forums revealed that most of the content consumers are men and women aged 25-60 in middle-high socio-economic status.
Users characterization
Experience
Architecture
Focused on two task flows:
- Main- reading professional content and user involvement in comments.
- Secondary- search for roasting houses and engage users to leave ratings and reviews.
User flow
Interface
The website design process began with designing a logo and defining a website identity.
The logo is based on the abstraction of the fundamental element to which all the goals of the site drain; your cup of coffee.
The cup is integrated into the name of the website in a white space sort of way. That emphasizes the way the site name is pronounced, as a reference to a beloved and well-known Israeli song.
Identity
Based on the logo, the brief and the preliminary comparative research, I worked on creating a clean and elegant design language, based on the semantic field of coffee.
In the process of formulating the language I examined together with the owner different color palettes based on this brief.
Finally, we set a focused palette based on the "familiar" coffee colors – light brown and black. To enhance elegance and user experience, we chose to add light blue as an attractor that is a representor of the water necessary to create the coffee.
Color Choices
The typographic hierarchy chosen is based on Google's Assistant font – a clean, elegant, very readable font with full acceptance between the English-Hebrew languages.
It should be noted that in the initial stage, I examined a combination of the Asakim font, on which the site logo is based as part of the site typography. But the font did not provide a satisfactory reading experience.
Typography
Next, I focused on creating a conventional visual iconography, but not generic one.
For this purpose, I incorporated botanical illustrations of the coffee plant as backgrounds and as decorative elements that add uniqueness to the visuals of the site.
Alongside this, in important pieces of information I have made use of vector illustrations adapted to the graphic language of the site.
Iconography
Conclusion
The design of Hamon Café website was challenging and insightful.
It targets the widest audience I encountered so far; Hebrew-speaking coffee lovers, from beginners to experts (and that is everyone basically, isn't it?). As such, it required a form of thinking on a magnitude that I had not worked on before.
Additionally, the large differences in the goals between separate areas of the site made it very difficult to create visual unity.
Moreover, while working on the site, I was required to adjust the design fit new initiatives that came up along the way. This emphasized the importance of scalable design for future expansion and additional services.