Festival of kites

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.

research

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…
Visual analyze

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.

visaul_hotb2
visual_hotballon
visual_coachella
solution

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.

moodboard_kites

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
eventMicrosite_siteMap
Hi-Fi prototype
event_discoverPage

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…

style guide
event_styleguid01
event_styleguid02
Next step & Learning

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.