Author: spiercy

The chosen festival to create a website/app for is called ‘Rainbow Rave: Girls, gays and theys’. This is a LGBTQIA+ only event that will take place in the summertime, during pride month. This event is created to offer a safe space to those who enjoy raving and apart of the LGBTQIA+ community.

UX (user experience) is the process designed used to create products and services that provide a meaningful and relevant experience to the user (Interaction Design Foundation, 2019).

The UX for the chosen festival should be inviting and exciting yet simple and straight-forward. The call to action for this site will be the ticket purchasing, it should be easy to navigate and memorable for future purchases. When purchasing tickets, the user will be presented with a form to fill for personal and contact details then they will be asked to fill in their bank details, this process is quick and simple which leaves the customer feeling content, adding anything more to the purchasing process could leave the user feeling frustrated and overwhelmed, it also creates risk towards the user stopping the process and leaving the site (Yablonski, n.d.a).

Due to the growth in technology and the internet today, users expect certain tools to be in the same position for every website because we’re so used to websites being similar that it frustrates us when those tools aren’t in the same place. According to Jakob’s Law ‘users spend most of their time on other websites. This means that users prefer your site to work the same way as all the other sites they already know.’ (Yablonski, n.d.b)

The companion application will act as a necessary device while at the festival, it will include all the food and drink stalls so users can order themselves a beverage or meal to collect, this reduces queues and gives customers more time to enjoy the music and atmosphere of the rave, its also something quite unique which could attract more festivalgoers. The UX of the app will also provide feedback reminders for when their favourite artists are performing.

References

Interaction Design Foundation (2019). What is User Experience (UX) Design? [online] The Interaction Design Foundation. Available at: https://www.interaction-design.org/literature/topics/ux-design [Accessed 1 Mar. 2022].

Yablonski, J. (n.d.a). Hick’s Law. [online] Laws of UX. Available at: https://lawsofux.com/hicks-law/ [Accessed 1 Mar. 2022].

Yablonski, J. (n.d.b). Jakob’s Law. [online] Laws of UX. Available at: https://lawsofux.com/jakobs-law/ [Accessed 1 Mar. 2022].

The focus of the UX for the chosen festival is to make everything on the website navigable, every single available page on the site should be memorable and accessible but the call to action, that being the ticket purchasing process, is something that should be the top priority for accessibility.

The other requirements to think about when looking at the UX for the site and companion app is the information, location, accessibility options for those with disabilities, who’s performing, date and time and reviews on the previous events. These are the main goals for the site and companion app, but the app will focus more on when the customer is at the festival, offering click and collect for food and drink stalls, options to add reminders for when their preferred artists are performing, ticket storage that can be easily scanned for quick access into the venue and options to alert an onsite medical professional if the user feels uncomfortable or unsafe. This concept is quite unique, which will attract more customers and will spread awareness of the event.

The target audience for the website and app will be 18+ but aimed more for young people who are new to the LBGT clubbing scene and people in the LGBT community who feel uncomfortable in generic clubs and bars because of judgement, drug spiking or risks of assault. One of the main focuses of this event is the user’s safety which is why the site will also offer online live chats for any queries onsite or any UX/UI related problems.

Personas

Like the Parklife website (Parklife, 2019), the website for ‘Rainbow Rave’ should include some nice visual graphics to intrigue the user even more and give them something satisfying to look at while browsing the page but within the Parklife website, the visuals are quite chaotic and overwhelming, making it hard to navigate certain options.

Free, C. (2021). Rainbow House. The Washington Post. Available at: https://www.washingtonpost.com/lifestyle/2021/04/28/rainbow-house-paint-neighbor/ [Accessed 2 Mar. 2022].

Parklife. (2019). Parklife 2019. [online] Available at: https://parklife.uk.com/ [Accessed 2 Mar. 2022].

Twitter, F. (n.d.). @flowersofsappho. [Online Image] Twitter. Available at: https://twitter.com/FlowersOfSappho/status/1325194178012147712 [Accessed 2 Mar. 2022].

The call-to-action process will be quick and easy with only 2 short forms to fill, this will be the personal/contact details form and a bank details form. Once the user has input their mobile number or email address on the first form, they will receive a security code via text or email, they will then be asked to put that code into the website before proceeding to the bank details form. This may be frustrating to the user with them having to switch from the site to their texts/emails, but it provides a sense of security and privacy to their details. Once both forms have been completed, they will be presented with a ‘Purchase Complete’ screen and an option to ‘Return to the Home Screen’.

When using Hick’s Law ‘the more stimuli (or choices) users face, the longer it will take them to make a decision’ (Soegaard, 2021), meaning the process for the call-to-action should remain simple to keep the user engaged in the site, if the user is presented with too many things to put their details into, it increases the risk of them leaving the site and having an uncomplete purchase. It can also leave the user feeling frustrated and stressed which influences the idea of not wanting to go to the event.

Feedback will be used within the website to alert the user of any errors and positive actions. A negative alert will be used when the user has input the incorrect information and an upbeat chime-like sound will be used when the user has completed the purchase or created an account. Within the companion app the same feedback will be there but with added reminder alerts which the user can customize themselves for when they want to be reminded of when certain acts are performing or when their click and collect food order is ready.

Soegaard, M. (2021). Hick’s Law: Making the choice easier for users. [online] The Interaction Design Foundation. Available at: https://www.interaction-design.org/literature/article/hick-s-law-making-the-choice-easier-for-users#:~:text=Hick [Accessed 14 Mar. 2022].

This is a low fidelity prototype for the chosen festival’s call to action on the web page, this has been rejected due to the use of negative space and the placements of certain options.

The menu icon has been placed on the left-hand side of the web page, next to the logo. When using Jakob’s law, users will not want the menu icon in a different position to most other websites, this confuses the user and increases the risk of them leaving the site. Bringing in the law of proximity ‘the principle of proximity states that items close together are likely to be perceived as part of the same group – sharing similar functionality or traits’(Experience, n.d.). The menu icon of this design is too close to the logo and on most websites, when clicking on the logo it’ll take the user back to the home page so having the menu icon so close to another button may cause frustration for the stakeholder if accidentally clicking on the opposite option to what they wanted.

The amount of negative space used on this web design leaves the pages bare and simply quite boring, this can be improved by adding in some visual graphics or illustrations to enlighten the user when scrolling through the site. The top banner could include a live countdown to when the event starts, this can excite the user and give them a sense of urgency to purchase the tickets, so they don’t miss out. Live countdowns can be seen on websites such as Download festival.

Another reason this design has been rejected is the fact it looks like an extended version of an app design. The text, titles and icons are too small for a web page, these should be evaluated for those who have vision impairments.

URL for Adobe XD Prototype – https://xd.adobe.com/view/d33a1469-542c-4e0c-b722-27ec1397dfe4-8669/

References

Download Festival. (n.d.). [Online Screenshot] Download Festival. Available at: https://downloadfestival.co.uk/ [Accessed 14 Mar. 2022].

Experience, W.L. in R.-B.U. (n.d.). Proximity Principle in Visual Design. [online] Nielsen Norman Group. Available at: https://www.nngroup.com/articles/gestalt-proximity/#:~:text=Definition%3A%20The%20principle%20of%20proximity [Accessed 14 Mar. 2022].

‘We often make use of low-fi prototyping (most commonly paper prototyping) when in need of quick feedback on our concepts, ideas, or flows, along with quickly communicating the aforementioned to colleagues and clients’ (Amsterdam, 2016).

URL for Adobe XD Prototype – https://xd.adobe.com/view/71636c1d-7ce8-4bd0-ba6a-f1bf736e74cb-2430/

This low fidelity paper prototype shows the process of the ticket purchasing, this includes a loading screen and the screen the user will be presented with when the purchase is complete. The prototype shows the app format for the festival.

This is a rough layout for how the app will look and how it will work. When transitioning from the contact details screen to the bank details screen, a pop-up will appear, asking the user to input a security code sent via text. This added step provides additional security for the user, making sure other users aren’t stealing their identity and contact details to make a purchase.

When looking back at the rejected design for the web page, the menu icon and drop-down menu have been moved to the right-hand side of the page, creating distance from the logo which reduces the risk of the user accidentally clicking what they didn’t want to. Another option that has now been included is the floating live chat icon in the bottom right corner, the idea behind the live chat option is for user to be able to enquire about any queries regarding the festival and the navigation of the web and app design. The titles on the top banner have now been increased in size, minimizing the negative space and are now easily readable for those with vision impairments.

When the purchase is complete, the user will be presented with a screen that includes visual illustrations and a message that includes commonly used slang within the LGBTQIA+ community. The aim of this is to make the user feel satisfied with their purchase.

References

Amsterdam, A.I. (2016). Low-fi prototyping: What, Why and How? [online] Medium. Available at: https://blog.prototypr.io/low-fi-prototyping-what-why-and-how-24f77d9f4995 [Accessed 14 Mar. 2022].