Case Study: Henlo Coffee website

Introduction

Henlo van der Westhuizen originally approached us in February 2021 to build a website for his upcoming product, a cutting edge, programmable coffee machine for restaurants and coffee shops. We immediately fell in love with this highly original, technically sophisticated, and beautifully designed product.

The Henlo Coffee machine

The Henlo Coffee machine is designed to brew coffee in accordance with the original exact specification of the creators of each brand and specific coffee bean strain and roast. Henlo regards these creators as artists in their own right, and rises to the challenge of building a product which perfectly showcases their work in the best possible way.

Value alignment

Similarly, we strongly felt that the Henlo Coffee machine reflected our own values and were excited to rise to the challenge of showcasing this product in accordance with the high standards with which it was designed and built.

We launched the first version of the Henlo Coffee website shortly thereafter, and both we and the client were very satisfied with the end result.

In November 2022 Henlo returned to request an update to the website in line with their updated branding, and to announce the launch of the Henlo Coffee machine.

Scope of Work

The scope of work for this project included the design and development of a one-page website that would feature a clean and modern layout, easy-to-use navigation, and responsive design for optimal viewing on all devices. The website would also include a Mailchimp signup form.

In terms of content and structure this was a very simple website, but with a requirement for excellence and extra attention to detail in the execution of the finished product.

The Challenge

The design of the website had to reflect the product via the branding guidelines. The product is a cutting-edge, programmable barista coffee machine with various parameters that can be tailored to make the perfect cup of coffee.

The target market is restaurateurs and coffee bars with a knowledge of coffee machines generally, hence the content of the website is fairly technical.

The Solution

We went back to the drawing board and redesigned the website to suit the launch of the coffee machine, and its new branding guidelines.

Tiber / Firefly gradients set the plush coffee shop mood, bordered by elegant sandal gold finishings with subtle entrance animations.

A well produced video plays in the hero section to quickly give an overview of the product.

Elegant number counters and technical diagrams on soft gradients are subtly animated in when scrolling down.

A Mailchimp subscribe form perfectly reflects the branding.

The Design Process

We liaised with Henlo to discuss the new aesthetic for the website. Brilliant and talented designer, Josh Sowter consulted Henlo Coffee’s branding guidelines, including their colour scheme and font preferences, and he used this information to create a series of high-quality design mockups in Figma for Henlo to review.

We used Figma to create the prototypes.

After several rounds of revisions and feedback from Henlo, we arrived at a final design that was approved for development. The design featured a clean and modern layout, with a focus on showcasing the unique abilities of the coffee machines, and making it easy for customers to browse and purchase or hire them. The website was designed to be responsive, so it would look and function well on all devices, including desktop computers, tablets, and smartphones.

The Development Process

The development process for this project involved building the website using WordPress and Elementor. As we always do, instead of using a pre-designed theme we started with a blank canvas. We built the front end from scratch using a combination of Elementor tools and custom HTML, CSS, and JavaScript. 

Particular attention was paid to translating the rich ambience of a boutique, upmarket coffee shop to the execution during web development. The sizing, spacing, and styling of each element was carefully adjusted to work well and look fantastic on all types of devices: wide screen desktop computers, laptops, tablets and smartphones.

Subtle animations gently introduce each section explaining the uniquely-crafted aspects of the machine.

The website was tested extensively during the development process to ensure it was user-friendly and free of any bugs or errors.

The WordPress content management system (CMS) makes it easy for the client to update the website.

Conclusion

Overall, the Henlo Coffee website was a great success. Henlo was extremely satisfied with the final product and has seen an increase in online sales since the launch of the new website.

Additionally, both we and Henlo have received many compliments from our customers about the design and development of this project. Henlo has sent us several referrals from his customers who asked who built his website. (Thank you, Henlo!)

The website’s clean and modern design, easy-to-use navigation, and responsive design have all contributed to a positive user experience, resulting in increased customer satisfaction and loyalty.

The finished product: a responsive website for Henlo.Coffee.

Through this project, we were able to help Henlo Coffee achieve their goal of updating their online presence and expanding their reach to new customers. We look forward to continuing to work with Henlo and helping them grow their business online in the future.

Visit Henlo.coffee to see the results.

Table of ContentsToggle Table of Content

Related Articles

Web Development and WordPress FAQs

Web development is the activity of working with web browser technologies, such as writing code in the browser-side languages of HTML, CSS, and JavaScript, or server technologies such as PHP, MySQL, Ruby, Python etc.

Read More »