Redesigning Vivid Sydney's website

My Role/s

UX research
UX design (Desktop)
High fidelity prototyping

Team

Placeholder

Year

2024

Client

University of Sydney — IDEA9105

Location

Sydney, Australia

The Brief

With the increasing importance of both physical and digital participation, how could a digital solution create a seamless hybrid festival experience for both on-site and remote attendees of Vivid Sydney?

The Solution

User research identified that one of the gaps (and potential opportunity) of the existing website was for users to be able to have confidence they have all the relevant information so they can accurately plan their Vivid Sydney experience. I focussed on the desktop solution which aimed to provide a thorough planning function that allows users to easily browse events/locations and add them to a list which supports both on-site journey planning as well as viewing of hybrid content.

Highlights

Fully developed a high-fidelity interactive prototype for better user testing and heuristic evaluation.

Achieved top mark (96%) in cohort for final high-fidelity, interactive prototype.

Key features include: map and list view of various events, journey planners between specified lists of locations as well as more detailed views of specific events.

Research & context

Understanding user needs

Vivid Sydney attendees struggled with a lack of information

User research was predominantly conducted via an online ethnography that focussed onsites with travel or photo/videography focusses (e.g. TripAdvisor, YouTube,Instagram etc.). Key themes identified were inaccurate information (such as timings and cancellations), issues with crowd control and route planning. It was interesting to note a discrepancy between Sydney local and interstate travellers where Sydney locals noted a decline in the user experience (crowd control and quality of experiences) whilst interstate travellers focussed on issues with information and transparency (such as last-minute cancellations).

We identified opportunities to improve planning and transparency

Opportunities were identified across different user needs which could be addressed through different devices. Opportunities for route-planning and browsing/information were identified for desktop devices which lend itself better to complex tasks while mobile and AR devices had opportunities identified for hybrid/interactive experiences on-site or at home. Although functionalities should be consistent across devices for a seamless experience, it is important to recognise that individuals are likely to use their devices for different purposes and that designs should acknowledge this.

Design learnings were taken from products with similar offerings

A competitive analysis was conducted to understand how my design could benefit from existing designs/solutions and how they could be improved upon for the purposes of my target audience. I primarily focused on competitors that contained features specific to my proposed design solution above such as the existing MyVivid website, Google Maps, Glastonbury and YouTube. Some key insights identified were the potential to use the mere-exposure effect in the map design to be modelled after the design of existing products such as Google Maps, or modelling search features after successful search designs found in products like YouTube.

Designing and iterating based on user needs

Design & Iteration

Seamless browsing was identified as a key feature to prioritise

As my design focussed on browsing and route-planning functionality,the Browse Page screen was the key screen that defined the design of the remaining screens. As a result, throughout the iteration process, this view was the one that received the most attention and iterations. Key design patterns such as top menu bar navigation, landing pages and maps were utilised throughout the sketches in order to capitalise on the mere-exposure effect. Initially in the design process I expected to more explicitly integrate hybrid features into my designs. However, I realised that it was more important to ensure the features I was designing served their purpose and the users effectively and so Iended up narrowing my focus.

Heuristic evaluations revealed issues in usability and readability

Early testing highlighted a few key issues that impacted usability. A heuristic evaluation was conducted with peers where improvements were identified in minimalist design as well as improving visibility of system status, particularly around some of the key CTAs. Text over images was difficult to read and required a dark overlay, which reduced image quality. Square corners made it harder to separate cards from the background, while excessive uppercase text and unnecessary animations created extra mental load for users. Overall, the focus of this phase became reducing the mental load for users, simplifying information for quick scanning and reducing the amount of memorisation as much as possible, creating a seamless browsingand planning experience for users.

Reflections on the design

Reflections

This was one of the first UX design projects I completed from the user research phase through to high-fidelity prototyping which meant there was a lot for me to learn throughout the process. Some of the key reflections I had was to detach myself from my own solutions, ensuring that I constantly designed with the user in mind as opposed to my own desires or aesthetic sense. There were several moments where I had to redo my designs from scratch to ensure that the layouts I was creating was fit-for-purpose and provided a seamless user experience. Some examples of this was removing unnecessary animations in some of the CTAs to reduce confusion as well as redesigning card components to ensure readability. In general, I found that my mindset shifted from simply trying to ‘complete’ designs to focussing on continuous improvement and iteration for the purposes of usability and accessibility. If I were to do this project again, I would ensure I have these principles in mind from the beginning and start evaluating my work at earlier stages and take into account a wide variety of opinions from different perspectives. This would mean the addition of checkpoints throughout the design process that would force me to take a step back and consider the bigger picture instead of simply focussing too heavily on one design feature.