FlexFest Website and Companion App Feedback Feedback from clients is crucial in interactive design; it provides the designer with valuable insights into how their user experience is received and practised in real-life circumstances. It also gives the client a chance to change the interface or offer any advice and clearance on where they want the design to go. Communication from both ends of the spectrum is essential to developing suitable user interfaces providing the audience with a seamless user experience.  Throughout the development of the FlexFest website and companion app, there was an opportunity to receive feedback on the user experience from peers and people interested in UX and UI design. This valuable feedback was fundamental in really enhancing the user experience of the FlexFest website and companion app. Moreover, all the received feedback was considered when making changes to the UX and UI design of the FlexFest interfaces.  Below are examples of what has changed throughout the website and companion app development and how it has made for a seamless and intuitive user experience.  The first design alteration made to the website involved finding a way to remove the cookies pop-up from the home page once the user has accepted or denied cookies; before the feedback, the cookies pop-up did not disappear, which caused frustration. The cookies now disappear once the user presses yes or no after changing the design. This design alteration was made possible by duplicating the home page but removing the pop-up from one of the screens and linking the yes and no buttons to the new screen.  The third design alteration was made to the companion app; after the user completes the onboarding sequence, they’re greeted with a welcome/loading page with the FlexFest logo symbol. Before receiving feedback from the user, the emblem had a call to action placed in the centre; this gave instructions to the user on how to enter the site. The feedback suggested that the call to action be removed as the user would understand how to enter the site without it. By eliminating the centre instruction, the design looks more professional.   Navigation Feedback The final design alteration made to the interface was a way of navigating the companion app. Before the feedback, the companion app had an extra loading/welcome screen after the user signed into their account. The feedback suggested that this added an extra step with no real meaning before the user could get to the primary information. Removing the second loading/welcome screen provides the user with faster entry to the site, making it easier to get their ticket ready at speed on the day of the event. 

Recap of Mid-fidelity Website and App Design Final Colour Palette The final colour palette produced for the FlexFest website and app consists of neutral shades such as black and grey and a mix of blues and greens. The colour palette is used consistently throughout the website and companion app. The chosen colours make the interfaces look professional and clean whilst providing the user with a sense of what the festival is about. The colours tie in with the music genre’s aesthetics; darker colours were required when creating the right atmosphere throughout the interfaces. The colours provide the users with an urban atmosphere that aligns with the rap artists performing at the event. Variations of Colour palette The colour palette was trialled using different variations of the same colours to ensure the correct impression was made on the user. The lighter versions of the colour variations didn’t impact the user as much as the darker final colour palette. The contrast between the blue menu and the text made the text less readable, whilst the grey menu was too light and didn’t give off the right atmosphere. Menu and Navigation Bar Exploration The menu and navigation bar are essential assets of the FlexFest website and companion app; they provide the user with a solid routine in navigation. The user can find all information for the festival through menu options. When designing the navigation bar, universal icons and emblems were a high priority to ensure the interface stays memorable and easily learnable.  Above are variations of development stages throughout the navigation bar and menu, from rejected to the final designs. The rejected menu designs are transparent; the menu options sink into the screen, preventing them from standing out to the audience. The final menu is opaque, making it easier for all users to read. The navigation bar icons were initially labelled to ensure the user could understand what the icons meant. This design looked cramped, and the labels became unnecessary when using universally recognised icons. The final design is less cramped and only displays the necessary icons, presenting a seamless navigation bar. Companion App Onboarding Onboarding is an integral part of website and app design. It ensures the user is familiar with how the interface functions. Onboarding can be a series of instructions, tips or animations. The companion app required an onboarding sequence to explain and familiarise the user with the interface and its use. The three-screen sequence is simple but effective at providing the user with the necessary information, such as where to find their entry QR code and the festival map. The onboarding design follows the same interface design as the rest of the website and app to ensure it stays within the brand identity. 

Introduction to FlexFest Interface Design After defining the user needs and the usability goals set out in the research blog, the FlexFest website and companion app can now be finalised thoroughly. Factors such as colour palettes, typefaces, composition and conceptual design can be prioritised to create a visually pleasing final product. The overall interface design of the website is as important as defining the goals as this is what will attract an audience upon first impressions.  Colour is important as it affects human emotions, which affects our decision-making. Utilising the correct colour scheme is essential when presenting the right atmosphere to the user. The colour scheme for FlexFest must represent the artists performing at the event in a professional well-constructed manner. Moreover, using colours on a monochrome basis may help deliver a feeling of bold consistency and joyful trust without being too overpowering. As the FlexFest festival exhibits a wide range of UK rap and similar genres, the colour scheme should represent the artist in a reputable fashion, ensuring the audience grasps the urban setting before entering the event.  As colour affects human emotions, typefaces used throughout branding and art also have a similar effect. Typography plays a massive part in advertisements; it provides the audience with a significant source of information. The text displayed throughout the design must be highly legible, attractive, and on-brand. The composition of the website and companion app has previously been finalised through low fidelity prototyping, the composition will remain in order whilst other design features will ensure the interfaces pop.  The conceptual design method will be taken into consideration when designing buttons and icons for the website and app; they will remain universal but may change colour to be in keeping with the overall setting of the event.  The development log will present deciding factors, tests and feedback to ensure the overall FlexFest website and companion app are communicated tastefully.  A recap of the usability goals and user needs is required to ensure nothing is missed when designing the website and app to meet the standards discussed in the research blog potion of the UI and UX module.  Usability Goals Recap User Needs Recap Low Fidelity Website Prototype Recap Low Fidelity App Prototype Recap

https://xd.adobe.com/view/65251350-a002-4242-b63a-5fcbd298bee6-3076/ How the FlexFest Companion App Meets the Usability Goals The usability goals include effectiveness, efficiency, utility, learnability, memorability and safety. The high fidelity FlexFest companion app is a redefined and finished version of the mid-fidelity companion app created in the research blog portion of the UX and UI module. The developed version of the companion app is a constrained version of the website, utilizing the same design pattern and interface as the website to ensure the user is familiar with the interface solidifying the relationship between the companion app and website. Considering the five usability goals required for solving the app problem space, the users can seamlessly utilize the app when at the event. The app effectively functions as a compressed version of the website and doesn’t lose any accountability when acting as a constraint. The usability goals for the app are consistent with the website and meet the goals by providing a similar experience across both platforms. Achieving this helps users when familiarising themselves with the app. How the FlexFest Companion App Meets the User Needs The user needs include a place to purchase tickets, view line-ups, find accommodation and travel information, safety precautions and event contacts. The user requires a seamless experience to avoid website abandonment. The FlexFest companion app also consistently meets the user’s needs by displaying information relevant for use on the event day. The constricted app shows all relevant information in the dropdown menu, including the pre-purchased festival tickets, line-up, updates, gallery, accommodation, travel and site information. The information is easily accessible by all and the app; the app’s main goal has been met by providing the user with a safe and reliable entry pass they will never lose. The app also shows many maps, including a festival map, which users can utilize to navigate the event and locate essential areas such as medics and restrooms. Design Laws Utilized in the Companion App Design The design laws from the website prototype convert over into the app, ensuring the companion app stays consistent with the website. Hicks law has been applied to the design by constricting menu options and reducing the time it takes for the users to make decisions by providing them with less complex choices. Jackobs law has also been applied to the design by ensuring the app stays consistent with the website and other apps the users may use daily; menus and icons are universally recognised, helping maintain familiarity. Companion App Onboarding When the user opens the companion app, they’re greeted with an onboarding sequence this introduces the app and what the user can expect from it. The simple sequence consists of three screens, a welcome screen explaining the app, a QR code explanation and a festival map. This ensures safety for the user and tells them exactly what they can expect when using the app on the day of the event. The onboarding sequence is skippable for those already familiar with companion app interfaces or who do not have the time to go through each screen and want to get to the main app. Conclusion In conclusion, the overall usability needs for the companion app are met in a stress-free and seamless fashion, ensuring all the user needs are met. Furthermore, the companion app is displayed professionally and stays consistent with the website to provide a memorable and easily learnable user experience. References Adobe Stock. 2022. Festival Images – Browse 1,572,262 Stock Photos, Vectors, and Video. [online] Available at: <https://stock.adobe.com/uk/search/images?filters%5Bcontent_type%3Aphoto%5D=1&filters%5Bcontent_type%3Aimage%5D=1&order=relevance&safe_search=1&limit=100&search_page=1&search_type=usertyped&load_type=page&acp=&aco=festival+&k=festival+&get_facets=0> [Accessed 23 April 2022].

https://xd.adobe.com/view/93079bab-bcd7-42c9-b305-16bdaef52e88-c654/ How the FlexFest Website Meets the Usability Goals The usability goals include effectiveness, efficiency, utility, learnability, memorability and safety. The high fidelity FlexFest website prototype is a better developed and redefined version of the mid to low fidelity website design created in the Research Blog potion of the UX and UI design module. The redeveloped version of the website considers all interface design aspects, including colour, composition, typography and conceptual design, to make for a well-rounded user experience. The usability goals demonstrated throughout the final website design include effectiveness, efficiency, utility, learnability, memorability and safety. The website is effective as it meets all functionality requirements, such as displaying all the essential festival information required from the persona’s viewpoint in a clear and orderly manner. The accessibility features are shown in the dropdown menu and are designed to be as helpful as possible in a concise way to avoid user confusion. The learnability and efficiency of the website refer to how easy it is for the users to perform tasks, such as purchasing tickets. The website displays where to purchase tickets and has a past orders section where the users can view their recent purchases. Universal design aspects such as buttons and icons have been used across the website to make it more memorable and reduce the risk of website abandonment. The website design is carefully thought out to ensure that it is easy to use and memorable when the users return to the site after not using it. The website displays consistent feedback when a user performs any interactive task; this ensures the user feels safe when utilizing the website. How the FlexFest Website Meets the User Needs The user needs include a place to purchase tickets, view line-ups, find accommodation and travel information, safety precautions and event contacts. The user requires a seamless experience to avoid website abandonment. The FlexFest website consistently meets the user’s needs by displaying all valuable festival information. There is a clear menu categorised with the titles, Login/Sign up, Account, Tickets, Line-up, Gallery, News, Location, Travel, Accommodation, Accessibility, Information and a contacts segment to ensure all major components are covered and easily visible to the users in a compact manner. The main user needs when researching prior to designing the website was a place to purchase tickets, view the line-up and gain general festival information. This has been achieved by providing the user with a fluent user experience where menus and icons are familiar, and the website doesn’t display too many options making it cramped and overwhelming Design Laws Utilized in the Website Design The website is clearly structured and adheres to Hicks Law. When users first visit the website, they can quickly locate exactly what they’re looking for with limited menu options and a clear and understandable layout. The website also adheres to Jakobs Law and provides users with a familiar setting that other sites utilize daily this avoids website abandonments.  Conclusion In conclusion, the FlexFest website meets the usability goals, and the user needs fluently and concisely, avoiding any frustration and confusion with the site leading to a better user experience. Furthermore, the interface is displayed in full colour, with menus and icons to ensure the festival is communicated professionally. References Adobe Stock. 2022. Festival Images – Browse 1,572,262 Stock Photos, Vectors, and Video. [online] Available at: <https://stock.adobe.com/uk/search/images?filters%5Bcontent_type%3Aphoto%5D=1&filters%5Bcontent_type%3Aimage%5D=1&order=relevance&safe_search=1&limit=100&search_page=1&search_type=usertyped&load_type=page&acp=&aco=festival+&k=festival+&get_facets=0> [Accessed 23 April 2022].