Category: UX/UI Development Log

This blog post will move on from ‘Post 4’ to develop responsive User Interfaces (UI) that meet the user’s needs and leads to a valuable User Experience (UX). The responsive layouts will be created by using mid-fidelity prototypes, the mid-fidelity prototypes will include call to action designs and onboarding on the companion app. Mid-Fidelity Layouts (including call to actions) The mid-fidelity prototypes from posts 1 and 2 have now been slightly adapted and call to action buttons are now interactive using Figma. Please see below a recording of the website and companion app in action: The layouts still require further improvements, Rekhi (2017) made the point that “Visibility is the basic principle that the more visible an element is, the more likely users will know about them and how to use them.” Rekhi (2017) later went on to discuss the disadvantage of the hamburger menu on apps, as this menu choice has an absence of visibility of the available options.   Responsive Layouts To ensure a seamless UX the layout for websites must be responsive, this is due to there being a large amount of available screen sizes for the consumer.  A responsive design will allow for the Leeds Festival website to be compatible for use on a large computer screen, a tablet, or a smartphone; it will also mean that the companion app can be downloaded and easily usable on a smartphone, tablet, or laptop. As part of the iterative double diamond design process the next step will be to receive user feedback on the mid fidelity prototype and adjust based on the feedback, incorporate the style guidelines, and create a high-fidelity prototype. References Rekhi, S. (2017) Don Norman’s principles of interaction design. Available online: https://medium.com/@sachinrekhi/don-normans-principles-of-interaction-design-51025a2c0f33 [Accessed 5/4/2024].

This post will follow on from post 3 by continuing to develop the design elements such as typography and logos and recognise how these will affect User Experience (UX) and User Interface (UI). Typography Firstly, typographical options will be reviewed, a question related to typography was also included in the user feedback research mentioned throughout blog posts 1-3, please see below the question along with the responses: Taking a closer look at the fonts chosen for the survey: Lulo One Bold – a sans serif, bold, clear to read font. This font would be suitable for a rock festival. Trade Gothic Next LT Pro Bold – a basic, sans serif font with close kerning. This font would be suitable for body text as it is slightly more corporate and would be clear to read at a smaller size. Strenuous Black – a sans serif font, with a very modern feel. The sweepy lines on the curved letters give a fun vibe to this font, making it a suitable font for music festival branding. Macula Shaded – a bold, 3D, serif font. This font has a medieval carnival feel with a modern twist (literally). This font would also be suitable for festival branding and may stand out from the competitors due to its unusual twisting effect. The results from the survey showed ‘Lulo One Bold’ gained the majority of votes however, to better understand how each of the options would look the below typography mood board was created using the colour palette discussed in ‘Post 3’: In summary, whilst ‘Lulo Bold One’ would be suitable for a rock festival, the use of the vibrant colour palette has given this classic bold font a new sense of playfulness and could represent the increased genres of music now included in the Leeds Festivals line up. ‘Strenuous Bl-Regular’ embodies a modern festival branding well however, when incorporating the chosen colour palette, it may lead users to understand the festival as a dance festival. This can be researched further by collecting additional user feedback. ‘Macula Shaded’ looks modern, bold and has a festival feel, however in the chosen colours may be difficult to read for users with vision impairments. The additional fonts included in the mood board are options for the menu/body text. Due to these being used for most of the text on the website it is important that these are clear to read, as a result it would be sensible to keep these black. As a test these were placed on the varying colour options to test the readability. Logo Due to Leeds Festival being the highest attended music festival in the North of England based on statistics from Consultancy.uk (2017), my immediate thoughts for the logo were to include an icon linked to location. However, as shown below the current branding already includes the North England representation and other UK music festivals have also included arrows as part of their branding meaning that a different direction should be taken for the new Leeds Festival branding to be distinctive amongst competitors. Inspiration was found when reading The History of Graphic Design (Muller & Wiedemann, 2023) which included a piece created by Yusaku Kamekura (1986) shown below, this design led to the below ideas sketched in a notebook. This poster inspired thoughts of stage lights, music tent stripes and rays of sun light all points that relate to a music festival held in summer. In addition, the use of colour gave thoughts of long strands of confetti which often explode from cannons at the end of a festival set. These ideas led to the below possible logos: The next step in developing the branding is to collect further user feedback, this will assist in testing the brandings readability and the connection to Leeds Festival. References Consultancy.uk (2017) Top 10 largest music festivals in the UK. Available online: https://www.consultancy.uk/news/13576/top-10-largest-music-festivals-in-the-uk [Accessed 27/3/2024]. Muller, J. & Wiedemann, J. (2023) The history of graphic design, 40th edition. Koln: TASCHEN. Imagery References Reading Festival (2018) Style guide. Available online: https://www.readingfestival.com/styleguide/ [Accessed 22/3/2024]. All Points East Festival (2024) Home page. Available online: https://www.allpointseastfestival.com/ [Accessed 27/3/2024]. Tramlines Festival (2024) Home page. Available online: https://tramlines.org.uk/ [Accessed 27/3/2024]. 50 Watts (2024) Space Teriyaki 7. Available online: https://50watts.com/Space-Teriyaki-7 [Accessed 28/3/2024].

This post will start to focus on the design elements of the website and companion app. To further understand user’s experiences and current design trends competitor’s websites were reviewed and mood boards for general style and colours were created. Mood Board Overview: A mood board compiling images from music events, festival line ups and fonts that complimented the vision for the new Leeds Festival branding. The mood board has an alternative vibe with a mixture of vibrant colourful imagery and moody desaturated styles, these juxtaposing themes represent the variety of music genres that are included in Leeds Festival. Typography: Whilst sourcing the images for the mood board, the typography used for music festivals were noted for being extremely varying styles, the overall vibe of the festival heavily influenced the typography. However, the chosen fonts were all bold and striking no matter what genre and this will be carried forward in the Leeds Festival branding. Colour palette: Based on the user feedback survey (shown below in the colour planning section), users mainly associate red, black, and white with indie/rock music, however due to Leeds Festival expanding to include more genres in recent years a colourful theme to reflect this would be appropriate. Imagery: The imagery of music artists included in the mood board stay within the red, black, and white colour palette. This is something that should be continued in the branding of Leeds Festival, to represent the legacy of the festival. Whilst researching current UK music festivals a common theme found throughout line up posters and festival websites was the use of illustrations. This design trend should be incorporated in the new Leeds Festival branding. Colour Planning The next step taken was to bring together a cohesive colour palette that embodies Leeds Festival, as mentioned earlier the user feedback confirmed that red, black, and white are seen as colours that most represent indie/rock. Please see below the feedback from the survey: Based on this feedback red, black and white were chosen for the colour palette, however a decision to feature lighter, vibrant colours was made based on the research of competitor UK music festivals. Below is the potential colour palette chosen for the new Leeds Festival brand: Black, red, and white represents the core of Leeds Festival, pink and blue were included to represent the summer season and reflect upon the colourful, illustrative trends that music festival branding is currently focusing on. Mood Board Imagery References Live At Leeds (2024) Live at Leeds in the park line up. Available online: https://www.liveatleeds.com/line-up [Accessed 22/3/2024]. Viagra Boys (2023) Viagra boys 2023 American tour dates [Photograph]. Available online: https://www.reddit.com/r/indieheads/comments/ye3fh8/viagra_boys_announce_new_tour_dates/ [Accessed 22/3/2024]. FIB Benicassim (2024) Miles Kane artist information [Photograph]. Available online: https://fiberfib.com/en/lineup/ [Accessed 22/3/2024]. No Values (2024) No Values line up poster. Available online: https://novalues.com/ [Accessed 22/3/2024]. Adobe fonts (2024) Trade gothic next font page. Available online: https://fonts.adobe.com/fonts/trade-gothic-next [Accessed 22/3/2024]. All Points East (2023) All points east line up poster. Available online: https://twitter.com/allpointseastuk/status/1617447086148177922/photo/1 [Accessed 22/3/2024]. Wide Awake (2024) Wide awake line up poster. Available online: https://wideawakelondon.co.uk/ [Accessed 22/3/2024]. McCord, J. (2023) Jungle performing at all points east [Photograph]. Available online: https://whenthehornblows.com/content/2023/8/1/festival-review-jungle-all-points-east-victoria-park-london-august-2023 [Accessed 22/3/2024]. Neill, A. (2017) Lead singer [Photograph]. Available online: https://unsplash.com/photos/man-in-gray-quarter-sleeved-shirt-singing-hgO1wFPXl3I [Accessed 22/3/2024].

Following on from ‘Post 1’ this posts aim is to further improve the User Experience (UX) and User Interface (UI) of the Leeds Festival companion app. These improvements will be made by analysing the data collected when carrying out primary research in the form of a Google survey. It is important for the app to improve the UX and add value to the process of going to the music festival. Additionally, omnichannel UX is important to consider when designing a responsive website and a companion app. App Design Development (developed from research) The user feedback collected from the survey drilled down into what attendees of a music festival would like included in a companion app. Please see below the questions and responses relating to a music festival app: Based on the user feedback from the survey along with additional UX research, a few changes have been made to the low-fidelity prototype from UI & UX Design – Development Research Blog Post, please see below: Salazar (2016) of Nielsen Norman Group writes about the components that make up an effective omnichannel user experience, these components are consistent, optimized, seamless, orchestrated, and collaborative. In relation to the Leeds Festival website and companion app these elements are necessary for the following reasons: Consistent – ensuring consistency across all channels is vital to a positive UX, this will assist in the ‘memorable’ usability goal. Optimized – guaranteeing that the UX is positive due to the user having the best possible experience on each device they are using. Seamless – meaning a user can use the website and then pick up from where they left off on another device and continue the with the route that they were on. Orchestration – supporting the user through their journey with the use of feedback in the form of showing where they are on the journey or messages that assist them. Collaborative – allowing users to be able to use more than one device, i.e. the website on a laptop and the companion app on a phone and logging in to both. For these reasons it is important to have a website and companion app with a UI that run efficiently together and make certain they follow a similar operation system to give the user familiarity and ultimately result in an improved UX. To ensure this happens, the low-fidelity prototype from UI & UX Design – Development Research Blog Post was updated to fit into the 12-8-4 system mentioned in the previous post. Please see below the updated mid-fidelity prototypes including the 4-column layout system: References Salazar, K. (2016) Customer Journeys and Omnichannel User Experience. Available online: https://www.nngroup.com/articles/customer-journeys-omnichannel/ [Accessed 2/4/2024].

This blog post will follow on from the previous post to further improve on the User Experience (UX) and User Interface (UI) of Leeds Festivals website. These improvements will be made by carrying out primary user research and implementing changes based on the user feedback as well as implementing a few of the design concepts and layout choices discussed within blog posts 3, 4 and 5. Website design artwork development (developed from research). Firstly, to ensure a high volume of user feedback, Chinn (2023) suggests that consumers are willing to answer 7-10 questions in a survey. Based on this information a survey was sent out containing 9 close ended questions, close ended questions are the preferred style of question as they create quantitative data which is easier to analyse (SurveyMonkey, n.d.). The first 5 questions and responses can be seen below: The above responses to the survey confirmed several of the UX design decisions made in the original low-fidelity prototype (in UI & UX Design – Development Research Blog post) were correct, proving that carrying out secondary research can be effective. On the other hand, the responses also lead to a few changes to the previously completed mid-fidelity prototypes. These changes include having less options on the menu bar across the top and including more information on the ticket options page. Please see below the improved mid-fidelity prototypes based on the survey feedback: Whilst accessibility was not one of the highest picked options on the survey, for people that would require to view accessibility it would be important to include this on the homepage meaning they are able to easily locate and click on the call to action. In addition to the changes prompted by the survey feedback, a further change was made to improve the UX. This change was to have clearer visual cues that indicate which selection the user has made on the ticket page. The next step taken to improve the UX of the website was to focus on the composition of the website pages, to do this a column grid was placed on the previously completed prototype and the layout was adjusted. According to Designlab (2020) column grids helpfully assist designers in creating structured designs that are adaptable for use on a range of screens. Please see below the first three screens that had an adapted layout using the column grids: In order to pre-empt creating a responsive design 12 columns were used for the desktop design, this will become part of the 12-8-4 column system. Chemutai (2023) stated that “the 12–8–4 column system is commonly used in responsive web design to ensure that the layout adapts well to different screen sizes.” Responsive layout will be discussed more within ‘Post 5’. References Chemutai, P. (2023) 12–8–4 Column system for responsive grids. A beginner’s guide to adaptive design. Available online: https://bootcamp.uxdesign.cc/12-8-4-column-system-for-responsive-grids-df207a58ebc#8805 [Accessed 2/4/2024]. Chinn (2023) How long should a survey be? The ideal survey length [new data]. Available online: https://blog.hubspot.com/service/ideal-survey-length#:~:text=People%20will%20take%20the%20time,you’re%20trying%20to%20accomplish. [Accessed: 15/3/2024]. Designlab (2020) Grids in graphic design: a quick history, and 5 top tips. Available online: https://uxplanet.org/grids-in-graphic-design-a-quick-history-and-5-top-tips-29c8c0650d18 [Accessed 2/4/2024]. Figma (2024) Home page. Available online: https://www.figma.com/ [Accessed 18/3/2024]. Leeds Festival (2024) Tickets. Available online: https://www.leedsfestival.com/tickets/ [Accessed 17/3/2024]. Parklife (2024) Tickets. Available online: https://parklife.uk.com/tickets/ [Accessed 17/3/2024]. SurveyMonkey (n.d.) Best practices for writing good survey and poll questions. Available online: https://uk.surveymonkey.com/mp/writing-survey-questions/ [Accessed: 15/3/2024]. Tramlines (2024) Home page. Available online: https://tramlines.org.uk/ [Accessed 17/3/2024].