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.
Vivid 2017 App
What could I learn from the previous years app? By reviewing the 2017 app design & analytics, I could make educated decisions helping give the users what they want.
Only 1.5 cards visible at a time
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
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.
59,304 total downloads (70% iOS, 30% Android)
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 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
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 2017 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
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
There’s no reason to reinvent the wheel…
What can I learn from other apps of similar complexity?
Universal Theme Parks
List view toggle
Large, favouritable cards
Side nav with all options 1 touch away
Map is front and center
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
Scheduled based suggestions
Social proof of attendees
Call to action
Scrollable segmented control
Dropdown of Categories & Collections
Count of content
Simple clean layout
More more for overflow of less needed items
Profile log in / log out
Secondary calls to action
Horizontally scrolling list
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.
After a long exploration of sidebar navs and all sorts of options, I saw this tweet…
Netflix moves to a bottom nav bar on Android (& iOS).
… 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
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.
With the refined design, I tried a few different options, while retaining the low poly geometric branding.
2018: Option 1
2018: Option 2 – Chosen by Destination NSW
2018: Option 3
During the wireframing stage, I explored the option of a chatbot to walk you through sign up/in & personalisation steps. Due to time constraints with opted for a simpler flow.