Curated AfrikaBurn Microsite
“AfrikaBurn is a participant-created movement, an experiment in inclusive community building, decommodification, creativity, self-reliance and radical self-expression. It is a chance to invent the world anew.” — from the official mission statement.
If you ask me, AfrikaBurn is all about artworks, costumes, performances, theme camps, music, mutant vehicles, incredible people and much more. Where? In the Northern Cape Province of South Africa, in the Tankwa Karoo desert, in Stonehenge Private Reserve. When? Yearly, at the end of April, during one full week.
The challenge
I was part of the studio hired by the AfrikaBurn team to design their microsite for the next 2020 edition — microsites are websites that have short life-cycles. As past editions were always very different from one to another in terms of design guidelines, the team expected brand new ideas that would convey a strong identity. The only specific requirement was to make the website responsive — for both mobile and desktop. I worked on this project during two months and focused largely on the UI part.
Preliminary work
With a simple glance at the existing website, the assessment was clear : the design would need some refreshment and the website contains TONS of information. As this project involved a microsite, I decided that my minimum valuable product would focus on what makes this 2020 edition special, remind the event historic guiding principles and provide some basic information.
I started working on a sitemap that would show which information should be displayed and how:
In addition, I worked on a user flow that would show the path that a potential burner takes to complete his task: grasp the spirit and obtain information.
A few remarks: first, the 2020 edition theme is “Afroboratory”, based on the notion of experiment; second, this edition will be the last one happening in Stonehenge Private Reserve; and third, 11 guiding principles serve as ideals as to how the community can reinvent the world.
Mid-fidelity wireframing
From the previous microsite map, I created the following set of mid-fidelity wireframes for the mobile version of the app, using Sketch:
These mid-fidelity wireframes suggested a very visual, yet minimalist, microsite. It implied both an impactful imagery and one thin typeface.
UI choices
Thus, having already imagined my microsite to be very visual with impactful imagery, I took special care in creating the following moodboard:
On the one hand, I wanted to show the amazing deserted landscape involving sand, sky, texture and some festival artwork. On the other hand, I kept the “Afroboratory” experimental theme in mind and I chose to show some electronic components, with a small reference to the burn in the image at the top in the middle. This led to the combination of two colors: sand and blue.
A style tile usually transforms the concept of a moodboard by displaying real design elements. Here I chose not to create one, as I already imagined that pictures themselves would take most of the page space, with only one single typeface.
High-fidelity wireframing: the “AHA” moment
Then came the time to search for the visuals. I spent hours collecting beautiful pictures from the 16 AfrikaBurn previous edition galleries. Even when I succeeded at picking the ultimate picture for a card, I struggled positioning it with the typeface and having the words readable. That became even more difficult as I sticked with Helvetica Neue Ultra Light in white color as my typeface. The discovery here was that applying text to image is only possible if the image is dark, the text is white and a black overlay can be added, amongst very few other techniques.
The following is the interactive hi-fi prototype video that I’ve built, using both Sketch for the design, plus Principle for the micro interactions recorded as GIF’s and added to Marvel:
Some context. The potential burner has just left the existing and overwhelming AfrikaBurn website. He gets to the microsite, just to grasp the spirit of the 2020 edition. On the home page, he opens the burger menu. From there, he has access to all pages plus tickets (it made sense to me adding here a link to buy tickets). First, he clicks on the 2020 edition “Afroboratory”. Second, he reads it and goes on to the Farewell to Stonehenge page. Third, he reads it and goes on to the 11 Principles page. Fourth, he reads it and goes on to the practical info page. Lastly, he comes back to the home page.
Note how from the moodboard I kept the sand color for the text background, and the blue color for the footer.
I’ve also created the microsite desktop version, changing the layout — rearranging the visuals and adapting the typeface size. This is what the home page looks like:
I then conducted four desirability tests, to check if my design work had conveyed the right emotions. From these came out three adjectives: exciting, outdoorsy and imaginative.
Afterthoughts
In addition to the practical difficulty in applying text to images, already mentioned above, the learning was the big reminder that AfrikaBurn does require organization, starting with registering : burner biography to be eligible for buying a ticket; artwork; theme camp; mutant vehicle… the possibilities are endless.
Had I had more time, I would have added music to the microsite, to make it a full sensory experience. Lastly, AfrikaBurn 2015 having been one of the most rewarding human experience of my life, I might just go back to the next edition…
Thank you for reading me !
