Low Fidelity FlexFest Prototypes

Website and Companion App Goals Above is a reminder of the usability goals and persona needs discussed when requirements gathering. This ensures their overall usability needs are addressed when designing the website and companion app. Website Prototype The final FlexFest website prototype demonstrates the use of Hicks Law and Jakobs Law by limiting the information available to the user, making decisions easier. Whilst also presenting a site consistent to similar sites users utilise daily. The site layout is efficient and displays information relevant to its menu label. This ensures the user gains the correct knowledge pertinent to the menu link they have pressed on. Although the menu displays many options, they remain accessible, showing appropriate and reliable options. Upon arrival to the site, the user is shown a pop-up call to action, which takes the user straight to the ticket purchasing page. Moreover, this helps create a shortcut for users solely wanting to purchase tickets.  App Prototype The final FlexFest companion app prototype demonstrates the use of Hicks Law by limiting and restraining the user from viewing irrelevant website information such as past news and events, tailoring the app for use on the day of the event. The main benefit of the app is to provide the user with a safe and reliable entry pass, one they will never lose. The app also shows users multiple maps, including site, line-up, travel and accommodation map. Constraining the website options in a more efficient and accessible way for use on the day. All accessibility options will be displayed through a menu link in the information section of the app; the same website options will be utilised through the link.  Conclusion The overall usability of both the website and companion app is closely related to the usability goals of the personas created through gathering requirements and figuring out solutions to form a practical user experience. Overall, the interfaces meet the usability goals discussed in defining the user experience. However, they lack differing interfaces for different users, such as separating the event staff login with the festivalgoers. This creates barriers when accessing sensitive festival information such as security measures. The problem space for both the website and app have been addressed in an informative manner, restricting the users to display only relevant information, making for a better learnable and memorable experience. The website and companion app prototype is shown without colour to ensure it is communicated professionally, enhancing the user experience and interface. Upon designing a working site, colours and accessories to the site will be displayed. 

Low Fidelity FlexFest Prototypes Read More »

Rejected FlexFest Prototypes

Website Prototype The rejected website prototype demonstrates the use of Hicks Law, limiting the choices the user can make through menus and pages. Though this law has been applied, the website lacks general information on a larger scale. Displaying only festival information and missing out on sign-up, basket and purchase forms, which together form vital parts of a website looking to profit through sales. The website prototype is also inconsistent when it comes to page layout. Moreover, the line-up page also displays news which takes away from the original purpose of the page, distracting the user from the line-up. The website has, however, met the expectations of Jakobs Law. It sits consistently within the design methods used in similar websites such as the Park Life website mentioned in earlier requirements gathering analysis. The website also lacks call to action points, which are helpful when directing the user to a specific page, such as purchasing tickets or filling out forms.  Companion App Prototype The rejected companion app also demonstrates the use of Hicks Law, limiting the choices available to the user through menus and pages. Although Hicks Law is present, there are still too many options relating to the website. Therefore, the app isn’t a constrained version, only displaying relevant festival information for use on the day. This then confuses the user when locating event-specific information. The companion app page layout is inconsistent and shows two or more subjects on a page, taking up space and distracting the user.  Conclusion  In conclusion, the website and app lack vital forms and information such as account login, basket and purchase forms. The companion app doesn’t limit the user in a usable way and shows too much website information to a point there is no purpose to a second platform. The final design will consider the mishaps from the trial prototypes and meet the usability goals discussed throughout defining the user experience and requirements analysis. 

Rejected FlexFest Prototypes Read More »

UI Principles to be applied to the FlexFest Website and Companion App

Design Laws to be Applied to User Interface  One of the design laws chosen to be applied to the FlexFest website and app is Hicks Law, “The time it takes to make a decision increases with the number and complexity of choices.”(Yablonski, 2022). Therefore, the interface designed for the website and app will limit the number of complex options the user is faced with. This will avoid unnecessarily overwhelming the user and provide a simple, stress-free experience.  The second design law chosen to be applied to the FlexFest website and app is Jakobs law “Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.” (Yablonski, 2022). Therefore, providing the user with a more memorable interface will reduce unnecessary time spent learning the interface and more time spent on the task at hand, such as purchasing tickets. This will lead to more sales and time spent browsing festival information, therefore attracting a larger audience and making more profit.  Call to Action  Call to action is utilised in user interface (UI) design that typically consists of buttons. These buttons are usually used as a selling strategy to make a profit, “Call to action is a set of marketing tactics consistently implemented in the interface design.” (Messaki, 2022). This is an efficient way of directing the user straight to the most critical page of a website/app, such as a ticket purchasing page. This is a practical action for the buyer and the company receiving the profit as it skips a lot of potentially time-consuming efforts. Call to action will be utilised throughout the FlexFest website and app to direct the users to the most relevant information, such as ticket purchasing, the event line-up and other significant activities. Usability Goals Applied to User Interface Design  There are five different user interface (UI) principles that must be applied to the website and app design to construct a memorable user experience. These principles include visibility, consistency, learnability, predictability and feedback. Applying visibility principles to the overall website and app design will ensure the user optimises the website to fulfil their overall goal. Moreover, for example, making sure that accessibility information is visualised within the app is essential for accommodating individuals’ requirements, ensuring they can see how and where they can achieve their goal. Consistency principles are crucial when using icons, menus and overall design patterns; these design patterns need to remain the same throughout the website and app to ensure the users can easily understand and relate to interface elements. Therefore, colours, menus, icons should all stay the same throughout the website and companion app. Learnability is an essential principle in which users can understand the interface without learning something new, as Jakob’s law suggests users only want to use familiar interfaces. Therefore, making sure the FlexFest website and app utilise a similar interface to other websites is essential. The predictability of the website and app design is vital when attracting more users. Predictability is valuable when users purchase tickets for the event; making sure they are familiar with the interface and what happens next will promote usage and prevent people from leaving the page prematurely because they can’t figure it out. Finally, providing the users with positive and negative feedback will help them navigate the website and app, giving regular prompts on how close they are to reaching their overall goal.  Stakeholder Interface Differences The overall user interface will be similar across the website and companion app; identifying and addressing concerns for opposing stakeholders will focus on the user experience. Ensuring all the user interface (UI) principles remain consistent between consumers.  The stakeholders differing user interface (Ui) will only be diversified through visibility and feedback. This ensures that the website and companion app are equally usable and accessible to a diverse range of people. References  Created Academy. 2022. The 5 Principles of User Interface Design | Created Academy. [online] Available at: <https://www.created.academy/resources/the-5-principles-of-user-interface-design/> [Accessed 10 March 2022]. Messaki, E., 2022. Call-to-Action. The Foundations of Efficiency. [online] Medium. Available at: <https://medium.com/outcrowd/call-to-action-the-foundations-of-efficiency-f8218fa8e344> [Accessed 10 March 2022]. Yablonski, J., 2022. Hick’s Law | Laws of UX. [online] Laws of UX. Available at: <https://lawsofux.com/hicks-law/> [Accessed 10 March 2022]. Yablonski, J., 2022. Jakob’s Law | Laws of UX. [online] Laws of UX. Available at: <https://lawsofux.com/jakobs-law/> [Accessed 10 March 2022].

UI Principles to be applied to the FlexFest Website and Companion App Read More »

Requirements Gathering and Analysis

Initial Festival Research The above screenshots are of initial research carried out on similar festival websites to gain insight into their target audience and usability goals as inspiration for FlexFest. Defining the Target Audience The primary target audience for FlexFest includes festival visitors and competitors. The secondary target audience includes event staff, artists, volunteers, media and policing staff. Both audiences will require slightly different festival information.  Defining the Stakeholders A stakeholder refers to anyone internally or externally involved in a development plan that can influence the direction of a project positively or negatively. The stakeholders involved in developing the FlexFest website and companion app are both external and internal and include but are not limited to individuals aged 18 and over, students, parents, event staff, artists and police officers.  Stakeholder Assumptions The internal stakeholders, including event staff, artists and police officers, will assume the website and app display correct and relevant information in the safest manner possible. Whilst promoting the event and selling tickets to gain profit and a good media presence.  The external stakeholders, including the people attending the festival and volunteers, will assume the website and app are safe, display the most relevant information, and share past reviews and experiences to gain knowledge of what to expect on the day of the event.  The Product Users Developing user personas aids in bringing the audience and stockholders to life, gaining relevant information such as what the stakeholders value as success and gaining insight into their core needs and aspirations for the website and companion app.  The user needs are clearly defined throughout the personas below and user journey maps. The core needs include purchasing tickets, finding accommodation and travel information, viewing line-ups, finding security precautions, and generally browsing the website. The users consider success to be a range of different things such as providing helpful accessibility features, communication services, live event information and quicker access to the event. These can be achieved by providing haptic feedback, AUI, VUI, contacts list, live video content and QR code systems.  Accessibility Concerns “An accessibility issue is any barrier that makes it difficult or impossible for a person with a disability to equally access, navigate, or engage with the content on your website.” (Navarro, 2022). The accessibility problem space encountered when analysing websites involves the lack of haptic feedback, AUI/VUI, text size alteration, zoom, colour contrast options, and overlays. A more accessible festival website and the app can be achieved by providing the users with multiple accessibility options; these could be displayed in a separate menu. The colours used throughout the website and app will be carefully considered and consistent with creating a more streamlined and helpful user experience. References Navarro, J., 2022. Top 10 most common accessibility issues to avoid. [online] Siteimprove. Available at: <https://siteimprove.com/en-us/blog/common-accessibility-issues/> [Accessed 10 March 2022].

Requirements Gathering and Analysis Read More »

Defining the UX for the FlexFest Website and Companion App

Festival Idea  FlexFest is a Sheffield based music festival showcasing some of the most significant UK established artists from genres including Pop, Grime, Dance and Electronic music. The festival will also offer new and upcoming artists a platform to showcase their musical talent and gain a wider audience. Moreover, other festival activities will include a variety of street food stalls and games such as total wipe out inflatables, mechanical bulls and arcade games.  Website Problem Space The problem space encountered when designing the website for FlexFest relies heavily on the user needs of the external stakeholders. This involves efficiently providing general up to date festival information such as where and how to purchase tickets, view the line-up, access travel and location information, accessibility services and security precautions in place without having to sift through old news. The solution opportunity for the problem space will be communicated through the design prototype and make finding the most relevant festival information easily accessible and stress-free, resulting in a larger audience and more festival profit.   Website Usability Goals  The usability goals for the FlexFest website consider the five principles required for solving problem space, including effectiveness, efficiency, utility, learnability, memorability and safety. How effective the website is at meeting the user needs depends on the utility of the interface, which refers to the functionality of the design. The FlexFest website will be made functional with the option to autofill information for a smoother transaction when purchasing tickets. There will also be accessible features for those who require them, such as haptic feedback and AUI/VUI. The learnability and efficiency of the website refer to how easy it is for the users to perform tasks the first time they use the interface, such as purchasing tickets for the event. This comes hand in hand with the memorability of the site. This is measured by how fast the user can pick up the website after not using it; universal design methods can increase the usability of these essential elements. Such as using globally familiar menus, buttons and icons. Safety protects the user from errors and how quickly they can recover from making a mistake, such as using incorrect autofill information for forms when purchasing tickets or pressing the wrong button when closing pop-ups.  App Problem Space  The problem space encountered when designing the companion app for FlexFestival is finding a solution to effectively compress the most relevant website information into a more streamlined, stress-free experience festivalgoers can utilise quickly on the day of the event. This will prevent the users from going back through the website to find relevant information.   App Usability Goals The usability goals for the FlexFest companion app also consider the five principles required for solving problem space. How effective the app meets the user’s needs depends on its functions as a compressed website version. The app mustn’t lose integrity; it needs to remain consistent with the website so that the user feels familiar with the interface. Therefore, utilising similar website elements, such as layouts and menus, will result in a positive user experience. Moreover, how learnable and effective the app is will depend on how quickly the user navigates the app and performs tasks during a busy event, such as locating their favourite artist intime. This will be achieved by providing a seamless experience displaying only relevant information.  Conclusion  The website and companion app differ slightly and address different challenges when solving the problem space. The website will display all information, news, photos and video content from current and past events. Whereas the app will be a more tailored and interactive experience for use on the day of the event. The app will show the most relevant information such as festival maps, ticket QR codes, safety information and location services.  Bibliography  Medium. 2022. Notes from an UX Consultation. [online] Available at: <https://medium.com/ux-uw/notes-from-an-ux-consultation-24285534015d#5a49> [Accessed 28 February 2022]. Nielsen Norman Group. 2022. Usability 101: Introduction to Usability. [online] Available at: <https://www.nngroup.com/articles/usability-101-introduction-to-usability/> [Accessed 28 February 2022]. Pastel, R., 2022. Usability | CS4760 & CS5760: Human-Computer Interactions & Usability. [online] Cs4760.csl.mtu.edu. Available at: <http://cs4760.csl.mtu.edu/2017/lectures/usability/> [Accessed 28 February 2022]. Quesenbery, W., 2022. What Does Usability Mean: Looking Beyond ‘Ease of Use’ – Whitney Interactive Design. [online] Wqusability.com. Available at: <https://www.wqusability.com/articles/more-than-ease-of-use.html> [Accessed 28 February 2022].

Defining the UX for the FlexFest Website and Companion App Read More »

Scroll to Top