Creating a responsive Micro-Website for an Event in 4 days
Week 6 of UX/UI Bootcamp Ironhack
Communication is a key factor in the Event’s success. Nowadays an Event’s digital presence is as important as the event itself — it represents the more lasting testimonial of what happened during those days.
What Event will I go for?
I’ve chosen a Festival called the “Mystic Heart Festival” which takes place in England, close to Stonehenge where the Line-up is about Fire Walking, Human Design, Tarot, Tree Whispering, Shamanism, Channelling and much more mystic stuff. They use the claim “open your heart, create a positive change and find your heart’s guidance”.
To get a better feeling of the visitors I stalked the Website where the Festival is announced. I went for the Contributors to the Festival to find out where this Brand is positioned.
In my research, I found out that they use a kitschy style often in combination with purple which is the color of spirituality. Also, they like using organic and natural shapes as they want to reconnect with nature. The people attending are esoteric, mindful, spiritual and believe in one universal energy or.
To get a better understanding of the People that attend this Festival I collected some User Personas to find out what their pains and gains are.
I found out that the Festival Attendees are People that struggle somehow with personal Issues for example in love, any kind of illness, family loss or they just lost track and they are searching for a warm atmosphere, love, and healing and/or they just want to get back to their natural roots. On Order to this, I collected three Moodboard because I couldn’t decide which visual direction I should follow, as there were several which made sense.
The first mood board is mostly about mandalas and oriental shapes, warm colors and mindful gestures. The second mood board is about rituals, old tantra graphics and beliefs and the last about shamanism, fumes with very earthy colors. To find out what is most appealing, I asked my users which gave me the feedback of esoteric, energetic spirituality with mystic rituals is best shown in the second mood board which I continued working WITH.
With that Feedback, I started searching for visual competitors which inspired me to create a Microsite for the Mystic Heart Festival.
As I like a lot the first one with a moving image in the background, also using warm colors the Idea came up to go also for big Images in the Background of my Microsite. Also, the website of Kater Blau, which is a berlin music club, is working with some moving Items. Besides, I searched for Micro-Interactions that I want to implement in my Website — therefore I found a nice example of a round Button that by clicking takes over the whole screen. Furthermore, I wanted to go for similar colors of the Business cards beneath the old Tantra Graphics.
LO-FI Wireframes
To get some ideas on how I will implement the Pieces of information I found for this Festival I collected these and started doing some Lo-Fi Wireframes as it’s crucial if you want to create something responsive. I wanted to use the nice tantra graphics that I found and also use organic shapes in which the information is collected.
I started with Hi-Fi Wireframes and came up with these Prototypes
HI-FI Prototypes with two Viewports
Styleguide vs. Spiritguide
As this week’s Task was mostly about UI and Mico-Interactions besides, we had to create a Styleguide to be sure a Developer will know how to work with the Design. We had a lot of discussions about Styleguides in comparison to Style Tiles, the wonderful Tobias Nusser came up with the idea of doing a Spiritguide in which you show not everything but showing the spirit of a product.
Because I used organic shapes I explained how to use them, what kind of Fonts I was using. Showing Symbols, Color Palette, active and inactive Buttons and also a “How to Use”-Guide for Blobs.
Learnings
I got the Feedback that I created a visually strong Brand but I should work on the Fonts furthermore. Also, my Payment Process was weighed too simplistic and is therefore not trustworthy.
Next Steps
I will work on the Fonts, implementing more Information such as showing the States of Pre-Event, During the Event and Post-Event.
