Take the Leap

/TEDxSFU

Take the Leap is a TEDx conference that encourages people to acknowledge fear, embrace uncertainty, and conquer unconventionally extraordinary aspirations.

Role  
UX/UI, Branding, Strategy
Industry
Events Services
Timeframe
2016

Every year, TEDxSFU hosts a conference for people in Vancouver, where a diverse group of speakers share stories and insights from their areas of expertise.

As the creative lead, I was challenged to bring together an integrated digital experience within six months that promotes the conference and drives ticket sales. At the end of the six months, I led the creation of a new branding website, a mobile-first conference program, and other supporting collaterals.

Results

With a consistent vision and goals in mind, the team created an integrated digital platform that resulted in:

01

A sell-out of early-bird tickets for the first time

02

Full-house of conference attendees

03

An established web design system that has been re-used since 2016

Featured on

Behind the scenes of taking the leap.

01

With the annual theme “take the leap”, the team decided to transform a traditional conference into a digitally engaging festival.

In this bold step forward, the creative team aimed for the ambitious goal of developing an integrated digital platform that delivers conference values and elevates user experience.

Ultimately, we wanted a cohesive brand experience for our audience - a “wow” platform that thinks ahead of our users.

An integrated digital platform

Design that delivers at the right time.

02

As the creative lead, I first divided the deliverables into two phases to find out feasibility, define goals, and have a focus. Phase 1 (pre-conference) was to promote the conference value to users, while phase 2 (during conference) was all about efficient information findability for conference audience.

Phase 1: pre-conference

Design for awareness.

03

To promote the event, I redesigned the official website to elaborate the conference theme and showcase previous talks. The biggest change in the new design is how content is structured to foster the understanding of the brand and the upcoming conference.

User Story

Before creating anything, I first talked to the analysts and project leads who worked on the previous-year conference to learn about the users. Who comes to the website? What is their situation and motivation? What do they want to achieve out of the visit?

The Problems

I also asked the previous organizing team to talk about their thoughts on the previous design, and how we could improve this year.

The right information must somehow connect with the person who needs it at the right moment.

- Jorge Arango

1. Original Website Navigation
2. Navigation Redesign

Navigation Architecture

1. In the original website navigation, there was no information hierarchy because the menu items were all presented the same way. As well, menu labels like “gallery” were confusing to first-time users according to feedback.

2. Navigation of the new design aimed to minimize information overload while catering to different users. I ordered the navigation differently based on user needs, updated the labelling, and created hierarchy for subordinary contents.

Page Skeleton - Lo-fi Sketching

I sketched out several pages to visualize the primary screens and some of their sub-features.

After defining the page structure, site structure, navigation, and a few more rounds of sketching, I then turned the the sketches into the interfaces directly. There were some design iterations and team reviews before the developer built them.

Selected page design: speaker details page (left) and past talks page (right)

Marketing & Event Promotion

04

In addition to creating a new website, I was also in charge of creating the majority of event promotion graphics/videos for social media channels, as well as materials needed for sponsors, speakers, and attendees of the conference day.

Phase 2 - conference program

Test for intuitive interaction.

05

As part of the goal to create an integrated digital platform, Phase 2 was focused on transforming the paper program guide into a mobile-first website that covered all conference details important to the audience.

I created the initial design prototype to set a direction for our junior designer Nikki. She excelled in taking the design to fruition, after which we completed two rounds of user testing before its launch.

During user testing, we observed 12 volunteer interactions and asked them to verbally express their thinking process while interacting with the prototype. We A/B tested the navigation scrolling, affordance recognition, and landing page choices (as shown below).

TEDxSFU 2016 Team

The entire experience was a 6 months effort, which is insanely fast. With the right team, we were able to work collaboratively and turn challenges into opportunities. But the best thing about the whole project is that we received overwhelmingly positive feedback from real users (even some local agencies) during the event— and that, was the real reward for me.

Next project

Leica M

The camera learning experience, reimagined.

Read the story