This project was about re-designing a festival microsite, in my case The Belladrum Tartan Heart festival: an eclectic music and arts festival aimed at a wide reaching target audience held annually (exception: Covid-19) in Inverness, Scotland. The first step was to research the festival - to understand its attendants, what it offers, and what experience the 'users' gain from it. I hadn't heard of the festival before, so I did a lot of reading and found reviews and news articles which gave me a solid understanding. The current website was surprisingly not so informative - however this may be due to Covid-19 - and so found most of the festival photos, information on e.g. stages, acts and music via wikipedia and news websites. I decided to compare (perceived) competitors by: festival size (attendants), brand attributes, target audience and location. The Visual competitor analysis helped to summarise the competitor festivals based on their branding and visuals so I could think about how I wanted Belladrum to differentiate itself. I also analysed the current branding of Belladrum and thought about how I wanted the brand to differ, or to be more cohesive, than it currently is. The Brand attributes list really helped with this, as it is a reminder of the direction I wanted to take. With my visual competitor analysis and brand attributes done, I wanted to set a goal of giving Belladrum a more commercial appeal. It already attracts families and residents of Inverness, but I wanted to give it a re-brand to young adults who would otherwise maybe overlook it or think of it as too 'uncool'; at the same time I didn't want to lose their main target audience, so I had to carefully consider how to communicate the brand attributes. The brand positioning map helped me find a gap and differentiate it from more 'grassroots' festivals to reflect its mass appeal. Before continuing, I wanted to test the brand attributes with users, so I created a mood board and asked users to select the words that the images and colours brought to mind. Users defined the brand attributes as I had set them, so I moved on to creating style tiles: essentially just variations of how the site might look at a glance. I felt pretty confident with the type and colours used in the mood board so the style tiles were an easy progression. I had 3 options (2 very similiar) and re-designed their logo to match the new brand aesthetic. I tested them with a very open questionnaire: Which do you like and why? Users preferred the bottom left style tile so I moved on. On reflection I would have given more thought to user testing; but I had 4 days to finish the whole project so had to pick and choose when and what to test. I created 2 user personas for this project because I really needed a strong point of reference for my design and to guide my user flows, and a reminder of the diversity of the Belladrum audience. I made 2 user flows: one for each persona:
WireframesFrom there I made lo-fi then mid-fi wireframes which helped smooth out any issues before finalising. I did several iterations before finalising the screens for the final prototypes: a desktop and mobile version. The design was quite straightforward as it was well informed by user feedback and my research: it was clear that stages, lineup, tickets and a blog style news update were most important for users checking festival websites, so that was front and centre in the design. The burger menu had more detailed information based on what users may be looking for, e.g. Camping, volunteering, disabled access and so on. Part of this project was to design how the site would change during the festival and after the festival - so I designed alternative landing pages to reflect this During the festival the user can see the stages and acts straight away - and the ticket option will be blocked (if sold out). After the festival the tickets will be available for the following year, the lineup is replaced with a link to gallery of photos and the content will prioritise a thank you message and lost and found. Final PrototypesI was satisfied with the overall result of this design challenge as I felt the re-design attracts a new audience without compromising the existing one.
Thank you for reading! Comments welcomed.
1 Comment
This was a fun project to work on - take an established app and add a new feature. I was lucky to be tasked with adding a karaoke feature to instagram. I had 4 days to research, analyse, design and prototype the feature. ResearchMy research was 3 fold: Analyse instagram app, review karaoke apps, conduct user research. The instagram story creator menu has a lot of features that support adding content to users instagram account. Layouts, gifs, instagram live all encourage entertaining and fun content creation and interaction, so it seemed to me the obvious place to add a karaoke feature. I downloaded a few karaoke apps to do a feature comparison and establish conventions that users would expect in a karaoke feature. This of course helped with the information architecture and design. With the limited time budget I had to take my assumptions and from there created a questionnaire for users to affirm or dismiss them. The research results informed my design decisions: 1. Users would expect to find the karaoke feature in the story creator menu (swiping right) 2. Most users would save their performance to watch later, or post on their stories. 3. Users would expect a duet option IdeationFor this project, it was the user flow that I iterated several times before moving on. What exactly would be the smoothest way for the user to add a song and add a friend to duet with, all within the conventions of the instagram app as it currently is? It had to feel natural and frictionless for the users and therefore the user flow had to be robust. When I was happy with the user flow, I mapped out lo-fi wireframes which brought up a problem with the button function and placement. If the user hasn't selected a song, what happens when they press the play/record button? If it prompts them to select a song, what's the point of having a separate 'add song' button? I decided to prompt the user when they enter the karaoke screen, as well as having an add song button and concluded that if the user tried to record without a song, it would automatically go to the song selector screen. I created a mid-fi prototype to test the feature before doing the final screens. I created the prototype in Figma. At this point I was using Sketch and Figma, still unsure which I preferred. I'll leave you with the hifi screens and hi-fi prototype. Thanks for reading, and feel free to comment and give feedback. I wanted to talk about my wireframing because I feel there is such a focus right now on clean and beautiful hi-resolution screens with no spotlight on the power of the idea stage used in solving, often, complex user pain points. It is the sketching and brainstorming that garners the solutions of powerful design ideas. When I started to become interested in UX/UI design, I googled wireframing and found Balsamiq as one of the recommended wireframing tools. I used the free trial to play around but found that you have to create or find a lot of the elements used in wireframing. On reflection I consider this a bit of a time waster as Sketch and Figma can give the same results if you have created or sourced wireframing kits. This quick wireframe solution was an idea on how to add a 'Buy Ticket' feature to a route planner app. The low-fi sketch is the best way to see if the idea is working, before spending time on Sketch or Figma to build hi-resolution screens and definitely before prototyping or adding interactions. I discovered InVision Freehand during the bootcamp and found it invaluable for rapidly sketching lo-fi wireframes remotely when collaborating with other designers. I love to draw and sketch, but you save a lot of time with Freehand as you can quickly duplicate screens and components without wasting too much time on the details. You can see from my examples how the tool allows you to scribble and add text but keeps a consistent loose style for better legibility. Mid-fi WireframesI'm a fan of the measured, detailed mid-fi. The closer to hi-fi the better. You can even prototype and test a good mid-fi. However you can argue that creating a mid-fi prototype is pointless as the user may not understand it, but I think mid-fi wireframing gives you as the designer the space and reflection to see how the structure and flow of the design is going to work, and lets you smooth out the kinks before you commit to adding the final coat of branding, colouring and interaction. When I started making digital illustrations, I spent hours and hours AND HOURS on Adobe Photoshop experimenting with brushes, effects and textures - and it was only after a long time I realised the importance of having a good sketch FIRST.
Sure you can get lucky and experiment and suddenly and unexpectedly strike gold and I am not devaluing the importance of experimenting, BUT, when your job is to deliver consistently, you have to know what you can do and what you can create and what you can bring. I feel that UX/UI design follows this logic too. Quick roughs get out the ideas and lo-fi wireframes structure the canvas. Mid-fis give you a skeleton before committing to the final brushstrokes. Maybe the importance of wireframing goes without saying, but I am anyway. Thanks for reading! |
David LymburnArt, Design, Illustration, UX/UI and everything in-between Archives
December 2021
Categories |
Illustrations & Designs by David Lymburn © 2023- All rights reserved
|