Website Redesign: Museumsuferfest

ux/ui design | responsive website

28 November 2019

Project Description

Museumsuferfest is a three day festival and one of the biggest cultural events in Europe that happens yearly in Frankfurt am Main, during the last week of August. In 2019, the event took place directly on the banks of the river Main, in the heart of the city. The event presented a unique combination of culture, arts, music, dance, theater, and cuisine. Museumsuferfest offered the visitors superb museum programs, countless stage presentations, and colorful live performances with countless varieties of bands, dance ensembles, clubs, and artists performing on the festival’s many stages. While the participating museums kept their doors open until late at night, the action continued down at the riverside, with revelers singing, dancing, wining and dining under starry skies. Check out the current website.

This was a 5 days sprint design challenge at IronHack.

Commission
Personal Project

Deliverables
Responsive Design

Tools
Sketch, Principle

Status Quo

Museumsuferfest currently has a website with good information architecture but the look is not really modern. They also have a logo with the German wordplay muse-ums-ufer-fest that looks formal.

Before I started redesigning the website I decided to redesign the logo itself to convey the brand attributes. I, myself, didn’t really understand the German wordplay, and after finishing my redesigned logo, one of my colleagues commented on how I removed the language gap that was on the original logo. My thought when I did the breakdown of words was to separate ‘museums’ and ‘ufer’ because those were two different words, and during a usability test, a user mentioned it looked like ‘museum sufer’, relating it to ‘suffer’ which has a negative connotation.

Brand Attributes:

Accessible and cultural
Never: exclusive

USER RESEARCH

Who visits Museumsuferfest:

Men – Women
All ages (from kids to seniors)
Frankfurters, those who lived in Frankfurt for a long time
Newcomers, those who recently moved to Frankfurt and never visited Museumsuferfest
Foreigners who live in Frankfurt and want to see their own culture represented in the festival, as well as learn about other cultures
Tourists, those who come to Frankfurt only for a visit visit.

Interview

I carried out voice and video call interviews with some of people that I know who lived in Frankfurt, both who have already lived there for some time and someone who recently moved there (less than a year ago). I asked three main questions:

What do you think about the homepage?
What do you think about the website?
What information are you looking for on the website?

Correspondents

I had 6 correspondents who matched my target users:

Caitlyn, 27 yo, Canadian, lived in Frankfurt for 7 months, never been to Museumsuferfest.
Luis, 36 yo, Peruvian, lived in Frankfurt for 7 months, visited Museumsuferfest 2019.
Kevin, 28 yo, Belgian, lived in Frankfurt for more than 2 years but never visited Museumsuferfest.
Adit, 28 yo, Indonesian, lived in Frankfurt for more than 4 years, visited Museumsuferfest almost every year since he moved to Frankfurt.
Beyza, 39 yo, Turkish, lived in Frankfurt for almost a year, visited Museumsuferfest once.
Peter, 54 yo, German, lived in Frankfurt for more than 20 years, visited Museumsuferfest several times.

Interview Insights

After conducting the interviews, I got some really good insights from the respondents, which I summarized as follows

Users, especially foreigners, wanted to be able to change the language. The website offers that function,but it doesnt work as expected. One respondent said that he didn’t even bother to check the website because he couldn’t understand the content, he rather visited some other sources to get the information he needed. Another said that the language stopped her from surfing within the website and it was hard for her to get around.
Users found the website looked very old and needed a redesign.
Users like how the site map is divided, but there were too many steps that they needed to do just to get the information they were looking for.

Users wanted to know the overview of the event, what kind of activities they were offered and what they could do.
Users wanted to see more about the previous events so they could set their expectations.
The most important thing for users was to be able to see directly when the event was held and the opening hours each day.
Museumsuferfest offered a ‘museumsuferfest button’ with which visitors could go to participating museums for free. The button was only 7€ and they could bring underage children with them free of charge. Users wanted to be able to purchase the button online, but they didn’t have this feature now.

User Persona

From the interview’s insights, I made a user persona that’s representative of the festival’s audience.

User Story

Luke lived in Frankfurt for almost a year. He went to Museumsuferfest once and he liked it. For the upcoming year, he wanted to be more prepared, he wanted to know about the events before so he could prioritize which events he wanted to see. He loves museums and wanted to buy the Museumsuferfest button, but last time he visited the festival, he couldn’t manage to get it because he didn’t have the information about it earlier, so this time he hoped he could just buy the button online. He visited the website and was excited that he could change the language to English, because his German is limited, but then he got disappointed because the feature didn’t work, so he stopped and just googled the information he needed from different sources.

Goals
- Be able to change the language to English so he understands the content easily.
- Get the information he needs easily; how to get there, where and when the event takes place, what are the opening hours, schedule and overview of what he could do at the event.
- Be able to buy the museumsuferfest button on the website so he doesn’t need to spend his time at the event finding out where to buy the button.
Pain Points
- Hard to understand the content because he didn’t know the language well, he tried to use the language button but it didn’t work and it frustrated him.
- He found the information divided well but he didn’t like what the website looked like.

Site map

User Flow

Wireframe

After deciding the user flow, I sketched lo-fi wireframes, transferred them to mid-fi and finally made them into hi-fi wireframes. You can see the hi-fi prototype below.

Hero Image

Look for the header on the homepage

condensed menu

When the user scrolls, the menu that was on the bottom of the screen will move up and get condensed.

Extended Menu

When user clicks on the nine dots, they will find the menus

activities

Activities overview on the homepage

Check out the prototype

Buy button (museums ticket) online

One of the deliverables was creating a responsive website design, so I made three different breakpoints. First was the desktop version as the main website, then the mobile and the third one was an iPad breakpoint.

Style Guide

I made a simple style guide from the wireframes to make the next steps easier, for the developer handover, and for designing the next steps for different breakpoints and screen states.

Disclaimer: All the images on wireframes are owned by their respective owners.