Vivid Sydney 2018

Lead Product Designer (2018)

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.

Initial Thoughts

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.

2017 Analytics

Top 5 visited screens:

  1. Light events
  2. Audio Tours
  3. Map
  4. Menu
  5. My Vivid

Learnings


Objectives

Business

User


Research

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

Universal Theme Parks

AirBnB

Meetup

Kickstarter

Netflix


Information Architecture

2017

2018 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 this 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.

  1. 2017 Icon
  2. 2018: Option 1
  3. 2018: Option 2 – Chosen by Destination NSW
  4. 2018: 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 with opted for a simpler flow.