UX and Brand Design for Steinmanndli.ch - Marina Kraus

UI and Brand Design for Steinmanndli

A brand strategy to turn great content into amazing experiences and enhance interaction with users.

What ist Steinmanndli.ch?

Steinmanndli, these are the experiences of Marina and Falko. They have already started the Steinmanndli in 2012 as a private, non-public tour diary.

After some years they decided to continue steinmanndli.ch as a public blog and to share their experiences in the mountains and on journeys with other people. Until today several hundred tour and travel reports have been published, which are available to the fans of Steinmanndli today.

To take the Steinmanndli blog to the next level, I collaborated on the redesign of the user interface and branding.

The Project

Goal

The goal of our project was a complete redesign of the blog. Professional photos, videos and texts in the style of storytelling should be in the foreground and the interaction with users should be increased.

Team & Work

We had no external support for the entire redesign. The design was created by Steinmanndli themself, so it is a collaboration between Falko and Marina and we did the whole UX and UI work, but Falko was also more involved in technical parts.

Deliverables

During the redesign process we developed a consistent color scheme and powerful brand slogans. The whole UI got a reduced design and the interaction possibilities for users were increased by using various features.

Reducing the User Interface

Home screen

One of the goals of the redesign is to focus on the professional photographs of Steinmanndli. Therefore the start page consists of a photo in fullscreen mode. Only the menu at the top, a short explanatory title and a scrolling hint at the bottom of the screen are visible on the start page. So it is possible to place an actual photo in the center. Due to minimal distraction, the photo will be in the focus of attention.

Menu structure

Steinmanndli is a very versatile blog, as Marina and Falko do many different sports and the number of tour categories has therefore grown over the years. In the new interface, the categories are grouped into higher-level categories for better orientation. Nevertheless, the individual disciplines are easy to find under the corresponding sub-menu.

New post format

In addition to stories consisting of large-format photos, partly videos and engaging texts, we have created a new post format:

#bildwelten

In this format, the photos of a tour are entirely in the spotlight. In a kind of gallery the photos are displayed in fullscreen and each with a single short explaining sentence. Thus the context becomes clear, but no content distracts from the image.

Defining Brand and Colors

Color Scheme

The logo of Steinmanndli was already fixed and was brought into its present form about two years ago. The backmost «i» in Steinmanndli is designed as a stone man and symbolically represents our way. This stone man is the logo icon of the brand Steinmanndli and is also used as favicon.

However, we have redefined the color scheme for the user interface design. The main color is a shining blue, which contrasts extremely well with white and nuances of grey. The dark red of the logo is also a balanced contrast to the shining blue. The different greyscales allow to emphasize the difference of elements on the page without making the page look too colorful and therefore restless.

Creating Brand Slogans

Only the name Steinmanndli does not indicate the content of the blog. Since a new focus is also being placed on professional photos, videos and storytelling, these elements should also be expressed in a corresponding slogan and a short description. And also each of the three content pages – Stories, Travel and Who we are – should get a short slogan.

So we have asked ourselves the question: What are we actually doing at the Steinmanndli? And what do we want to achieve with it?

The brainstorming session was intense and the answers were wide-ranging:

We enjoy going to the mountains

The next step was to narrow down the choice of keywords and turning them into clear slogans and a short description which can be used for different purposes on the websites.

Keywords

Sustainability – Mountains – Nature – Tours – Sport – Travel – Stories – Experiences – Relations – Inspiration

Slogan 1
On the way between mountains and valleys.

Slogan 2
Stories and #bildwelten from the mountains.

Slogan Stories
Of tours, people and emotions.

Slogan Travel
Explore the diversity.

Slogan Who We Are
Sustainable, authentic, professional.

Short Description
Stories from the mountains and valleys, of people, success and failure. Experiences from tours, prepared in breathtaking pictures and videos.

Maximizing Interactions with Users

Social Media Feeds

Steinmanndli should inspire other people and with their stories Marina and Falko want to get a connection to their users. To make this possible Steinmanndli can be found on social media for quite some time. The Instagram- and Facebook Feed are also integrated on the website so that website visitors have a direct link to the profiles.

Like & Share

For the blog posts there is a new voting function. If a user likes a post, he or she can show this directly on Steinmanndli.

Take Away

The redesign of the home screen is really based on the motto «Reduce to the Max»: remove everything that has no direct benefit. What is left? Only the most necessary, for clarity and focus. And one single beautiful photograph! This enhances the first impression and adds greate value to the user experience.

The redesign of the menu structure was not as easy as it seems, since we initially continued to focus on the sports. By dividing the menu into categories on a more comprehensive level, it was possible to limit the sub-menu in the stories to fewer categories and thus make the navigation intuitive.

To get more in touch with the users, the integration of social media feeds is a great way to increase the user experience. Thus, website visitors are actively made aware of the profiles in social networks by a prominent place on the website next to the social media icons at the top of the screen.

I have not done any in-depth user research. Although the redesign was successful, but could have been even better tailored to the specific target groups. For the future, an extension of the site is possibly pending, which will provide the opportunity to do so.