Vivid Sydney is an annual festival of light, music and ideas, held in Sydney. It includes outdoor immersive light installations and projections, performances by local and international musicians, and an ideas exchange forum featuring public talks and debates with leading creative thinkers.

Now in its 10th year, Vivid Sydney has become the world’s largest festival of light, music and ideas, putting the famous harbour-side city of Sydney firmly in the spotlight for 23 electric nights.

Previous Vivid App

What could I learn from the previous years app? By reviewing the previous app design & analytics, I could make educated decisions helping give the users what they want.

Initial Thoughts

List view
- Only 1.5 cards visible at a time
Map view
- overwhelming with no way to filter
- hidden under Guide, in the 2nd position
Alerts 2nd tab from the left but rarely used
Explore & Guide have similar content, displayed in different ways
Speakers was a list of 502 that scrolled forever

Summary

The previous year’s app was very disjointed and unintuitive. Having visited Vivid before & supported by the data, the Map view was the go-to to see what’s around you.

Previous App Analytics

59,304 total downloads (70% iOS, 30% Android)
185,360 sessions
399,723 items saved to My Vivid
Beacon detections - when a device detects a beacon (not unique by device, just the total number): 180,487
10,088 events added to device’s calendar

Top 5 visited screens:

Light events
Audio Tours
Map
Menu
My Vivid

Learnings

Light events section was most visited screen, which makes sense as it was the home screen
Audio Tours was surprisingly the 2nd most viewed screen
- This helped put more focus on what could have been as lower priority
Map, even though hidden in the app, was a preferred view than lists for users
Customising their experience, by saving events to My Vivid was well received and the 5th most visited screen

Objectives

Business

Vivid/Destination NSW wants to push attendance (therefore ticket sales) of Music and Ideas events
Wanted more users to register/log in for the user data and for the email database for email marketing
Understood the previous app was confusing for the user and embraced the idea of simplifying the app
Adding augmented reality & gamification features to the app
Needs to control flow of traffic on congested areas
- Audio Tours help with flow and direction

User

MyVivid is a great way to save events that interest you
With so many events, optimising, simplifying & customising the app helps the user find what they want
Getting to and around Vivid is the initial priority
- Info on road closures, parking, public transport
- Map of events around you, on the date you are there/plan to attend (filter by date)
Wants more information on pieces
- Audio Tour let the user listen to the information
- Lightboxes are hard to read with a number people surrounding them

lightboxes used for information and wayfinding

Research

There’s no reason to reinvent the wheel… What can I learn from other apps of similar complexity?

Universal Theme Parks

Togglable categories
List view toggle
Filter
Large, favouritable cards
Side nav with all options 1 touch away
Map is front and center

AirBnB

Filters
2 column list view
Categories shown in a scrolling list
Even through a complex app, they’ve stuck to a 5 tab nav at the bottom

Meetup

Scheduled based suggestions
Saved meetups
Category list
Social proof of attendees
Filters
Call to action
Recommended
Tabs

Kickstarter

Scrollable segmented control
Dropdown of Categories & Collections
Count of content
Simple clean layout

Netflix

More more for overflow of less needed items
Notification list
Profile log in / log out
Featured content
Secondary calls to action
Horizontally scrolling list

Information Architecture

Previous IA

IA Ideation

Notes 🤔

A few iterative loops of IA mapping, combined with wireframes, helped validate (and invalidate) a lot of ideas, helping me rearranging the pieces made the app and content more digestible.

Kickoff Workshop with Destination NSW

I ran a workshop with the stakeholders from Destination NSW to present my research, Information Architecture & wireframe explorations.

Early in the workshop, I ran a card sorting exercise to get the stakeholders to agree upon and discuss priorities, getting everyone on the same page.

Wireframes

Exploration

After a long exploration of sidebar navs and all sorts of options, I saw @Lukew’s tweet…

Netflix moves to a bottom nav bar on Android (& iOS).

Why? Obvious always wins: https://t.co/coJ7Ge55It pic.twitter.com/iEtnPEeETE
— Luke Wroblewski (@LukeW) February 26, 2018

… which make me simplify the nav and layout even further, with a focus of the navigation being obvious.

Everything clicked with the content and the client once I iterated to this structure.

(Not quite) Final Wireframes

Final Basic Flow Wireframes & Information Architecture

Side note

Throughout the process, i’ve bounced ideas of the entire team, validating and invalidating ideas. One of which you’ll see, is the filter button being pulled from inline with the map and list view tabs. A developer mentioned filters being different from the other 2 so it made sense to show it in a different way. After a couple of different ideas, I landed back to how the filter button was shown last year.

Mockups

Bonus 🎁

Icon Design

With the refined design, I tried a few different options, while retaining the low poly geometric branding.

Previous Icon
Option 1
Option 2 - Chosen by Destination NSW
Option 3

Chatbot Onboarding

During the wireframing stage, I explored the option of a chatbot to walk you through sign up/in & personalisation steps. Due to time constraints we opted for a simpler flow.