Website design for “ Festival der Riesendrachen” (Berlin)
Intro
Festival der Riesendrachen happens every September in Berlin Tempelhofer Feld. It has no website but posters in the U-Bahn station & newspaper. My task is to design the website for 2020 in 5 days. My goal is to use visual language to design a branded event microsite.
Deliverables: Hi-fi interaction prototype, Style Guide and documentation (hand-off) for technical team future development.
User research
I interviewed 10 people who went the festival before. In the interviews, I’m focusing on what are the users’ impressions about the festival. The visual impression can use on my interface design and the insights (Goals & Frustrations) use as my website design construction.
Insights
- No fixed date, the festival date based on weather situation
- Hard to find events information
- Enjoy activities but also peaceful and relaxing
- Impressions: Urban & outdoorsy, casual, playful, dynamic, surprising, chill, freedom, bright, joyful, colourful, cheerful, relaxing…
To have an idea of what my customers may expect and how I can set my product apart from the competitions I did competitors analyze. Cause there are not many Kites event websites, so I include the hot-balloon festivals and also music festivals.
Branding
Based on my interviews and researches. I define my brand attributes: colourful, cheerful also urban, arty. Base on the attributes, I create a moodboard to fit to the same feeling.
Website Structure
Based on my findings, I decided to create an MVP which focus on 2 parts
- The “Notify me” button under the main post in the Homepage→So visitors can fill in their email address enable for future exact date notification
- Map page→Let visitors know where happens what
Event Poster
I create the event post for 2020 on the homepage, the post includes the most important information: When, Where & What. So the organization can easily publish the same post in U-Bhan station & newspaper as they normally do.
Information
K-Kites
when hover you can see the photos of the past event.
I-Ideas
when hover you can see what this event for & what you can do and more.
T-Transportation
when hover you can see more information about how to get there and note about the parking.
E-Events
when hover you can see what other more events will happen there like firework & live music…
Discover page
Map overview of the event. So visitors can easily find what they looking for. Include: where to get food, where is the kid’s playground, where to do a picnic, where’s god’s park, where is the kite area, where is the live music stage and emergency spot…
Test test & test
Test with visitors, if all the information they need is here and if the information is clear for them.
Low-fi came after contents and information architecture
Cause there are little contents I can find online about this event, I need to create my own contents and make it easy to understand for the user. So when I finished drawing my Low-fi I find out the content is not fit. In the end, I have to re-design the Low-fi.
Sketch & Principle ( design tool)
Sketch and Principle is such a great tool to use together but before export sketch file into Principle, the most important thing is to group everything and un detach from the symbol.