HERMANN's

Website UI, Art Direction and Digital Brand Guidelines for food-thoughtful HERMANN's

CLIENT

HERMANN's

ROLE

Lead UI Designer
Lead Art Director

DATE

2017

BRIEF

HERMANN's is a Berlin restaurant, food studio, speaker and event space created by Verena Bahlsen. I was tasked with establishing the website user interface, art direction and digital brand guidelines for their launch. The website needed to have a focus on their blog which would be packed with a whole host of content that creates and supports conversations around the future of food.

As we approached project finale, HERMANN's became a more tangible entity. We gradually staggered website updates over a period of weeks to reflect the steps taken by the brand, such as brand launch, restaurant opening, and their first events. Below you'll see the designs for the key content; the future of food blog, and the HERMANN's Berlin restaurant.

HERMANN's Restaurant

HERMANNS_Desktop_Restaurant_a@1.5
HERMANNS_Desktop_Restaurant_b@1.5
HERMANNS_Desktop_Restaurant_c@1.5
HERMANNS_Desktop_Restaurant_d@1.5
HERMANNS_Desktop_Restaurant_stickyNav@1.5

The sticky navigation. Both are displayed when users scroll more than 600px down the page

appScreens@15x-1

Mobile designs

The Future of Food Blog

HERMANNS_Desktop_Blog_a@15x
HERMANNS_Desktop_Blog_b@15x
HERMANNS_Desktop_Blog_c@15x
HERMANNS_Desktop_Blog_d@15x
HERMANNS_Desktop_Blog_e@15x

The main blog, with lazy load used to reveal new blog items on scroll

Smart search

HERMANNS_Desktop_02_Blog-1

Sticky navigation and search bar that appears when users scroll more than 600px below the fold

HERMANNS_Desktop_03_Blog-1

Interacting with the search triggers a slide animation, that suggests helpful search terms. The idea behind this is that first-time users may need some guidance, and this is another great way to promote the ethics and philosophy of HERMANN's

HERMANNS_Desktop_04_Blog-1

As the user types in to the search field, auto-complete results are displayed. This speeds up the search process while simultaneously promoting a plethora of additional content.

Blog Overlay - Short Content

HERMANNS_Desktop_Blog_Overlay@1.5

A standard article page template that can be flexibly tweaked to fit with a variety of content types. Interactive tags prepopulate a search results page for that theme, providing user another way to navigate content

Blog Overlay - Long Content with Infinite Load

HERMANNS_Desktop_06_Blog_Overlay

The next article auto-loads below the article the user has just read, increasing user engagement

Digital Brand Guidelines

Hermanns_Brand_guidelines_01
Hermanns_Brand_guidelines_00
Hermanns_Brand_guidelines_02
Hermanns_Brand_guidelines_03

The document covered all areas of the website, including button hover states, grids and paddings, content teaser types, etc
 

I created a 62-page Digital Brand Guidelines booklet to guide website development, and to support the client with any blog content updates. This document would also help to onboard new designers and developers  to the brand, as their team expands.

Other Projects

WaystoneUX UI

PriceloopUX UI AD

DwellUX

JoyrideUX UI

WWFUI AD

Hermann'sUX UI AD

Food AppUX UI

Europa ParkUX UI AD

WaystoneUX UI

PriceloopUX UI AD

WWFUI AD

DwellUX

Food AppUX UI

JoyrideUX UI

IconMinimalDarkLarge

Made with ❤︎ and ☯︎. Copyright Jessica denHeyer 2020 - 2024. All rights reserved.

Made with ❤︎ and ☯︎.

Copyright Jessica denHeyer 2020 - 2024. All rights reserved.