Festival of kites

Website design for “ Festival der Riesendrachen” (Berlin)


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.


  • 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.



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

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.



when hover you can see the photos of the past event.


when hover you can see what this event for & what you can do and more.


when hover you can see more information about how to get there and note about the parking.


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
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.