Designing a responsive festival website
UX case study
The Challenge
This solo-project was a five-day challenge part of the UX/UI Design Bootcamp at Ironhack Berlin and my third week learning about UI. The task was to design a responsive website for an existing or fictional festival. I decided to go with a surf film festival site. At the end of the week, I presented my design to some experts from marketing, development and design. After that, I handed over the design via Zeplin to a colleague who was taking Ironhack’s Web Development course at the same time.
Research
First, I looked at some competitors to learn more about what other surf film festivals offer on their website.
Interviews
I interviewed some people who have been to surf film festivals, but also those who have never been. I found out that especially people who have no relation to this event would be quite interested in visiting a surf film festival. They are just afraid that they are not part of the community and therefore stay away from this event.
Define
User persona
Mood board
Based on the user interviews, I defined characteristics (approachable, comfortable, casual) of how the website should look to users and then created the mood board to give an indication of how the website could look.
Ideate
I started translating the mood board into my design and played with the colors to create the right mood. In the process, I created several versions. In one design, I tried to map the color of the beach and the water running towards it. In the other, I used colors that are more likely to be found underwater to create a warm atmosphere that also reminded me of a cozy movie theater where the film festival is primarily held. See below some drafts.
Desirability testing
After I created the first mockups, I showed them to a few people to get feedback. I wanted to know what mood each layout had on test persons. To find out, I used the Microsoft Reaction Card Method, in which each participant is given a stack of reaction cards. The test person selects the words that best describe the design and is then asked to explain the reason for their selection. Although not all of the adjectives matched the characteristics I defined earlier in the process, the design with the dark background color hit the desired mood. Still, I revised the design because “tough” or “depressing” wasn’t necessarily the mood I wanted to create here.
Style Tile
In a Style Tiles, I defined the font, colors and interface elements that communicate the essence of a visual brand. I decided to use three colors and chose the IBM Plex Sans font style, which I think fits the film festival theme very well.
4. Prototype
Mockups — desktop
The home page (first screen on the left) shows what to expect at the festival. The sections “Films” and “Events” lead to the program page and a video teaser shows last year’s festival impressions.
Mobile
5. Testing
Based on feedback from the desirability test, I changed the design of the cards on the ticket page because it was hard to read for most testers.
Interactive Prototype
Conclusion
It was the first responsive website I designed, and it was a challenge to create a UI prototype with high-fidelity screens in just 5 days for different devices, especially since this was a solo project. Contrary to the approach: mobile first, I started designing for desktop view, which later became a challenge for me when I created the microsite for mobile devices, considering the smaller space.
Any feedback? Let’s get in touch. Contact me on LinkedIn.
