TEDxCMU

TEDxCMU

An attendee-focused app for 500+ annual attendees providing a live schedule, communicating with speakers, and interactive content.

Type / Web App

Duration / 2019

Role / Innovation Team Member

Tools / UX • Frontend

Background

In September 2018, I joined the board member of TEDxCMU, an annual conference and independently organized chapter of TED bringing together some of the world’s most bold and innovative thinkers to Carnegie Mellon University at a 400+ attendee event. I was responsible for styling the front-end of a new web application for our events.

Mockups of the TEDxCMU web app

Brainstorming

The innovation team ideates solutions to problems in the board and creates interactive elements for our event attendees. We brainstormed with our 30+ member board to identify potential problems and places where our organization could use innovation.

With TEDxCMU growing to a 400+ attendee event in just a few years, management and communication became considerably more challenging. The year prior, a tech problem with cabling delayed the event by nearly an hour.

With relatively few organizers and volunteers, we needed a solution to help mitigate problems like these. We chose to build a new web application that could address the needs of multiple stakeholders and potential problems.

Team brainstorming for the ap

Ideas presented in brainstorming session from board

Stakeholders

Attendees

Create a method for them to easily view schedule changes, engage with speakers, learn more about them, and each other.

Speakers

Provide a medium for interaction with audience members that can outlive talks on stage and foster engagement.

TEDxCMU Board

Control the event schedule with real-time updates and announcements.

Lo-Fidelity

We created personas for attendees and board members, storyboarding use cases for an application. We discussed what these stakeholders need, and how they might navigate the application.

Lo-fidelity whiteboard ideation

Mid-Fidelity

Our Head of Innovation, Dean Dijour, created mid-fidelity prototypes from our early designs to present to stakeholders and help validate our design decisions in Figma.

Mid-fi mockups

Mid-fi mockups

High-Fidelity

TEDxCMU's Head of Design, Vicky Ye, thoughtfully designed high-fidelity mockups based on the mid-fidelity mockups provided and user needs. I used this as a model for the styling of our application.

Hi-fi designs

Delivery

Attendees can easily access a live schedule. The app auto-scrolls to the the current event, which pulses. A top banner also indicates any event information or announcements, if a TEDxCMU board member overrides it. They can click on speaker cards to view more about them and ask questions, and make a “ripple” on the ripple page to visualize where audience members come from.

final mockups

Final product

viewing schedule

Attendees can see a live schedule

speaker profile page

Attendees can learn more about speakers

ripple interaction

Attendees can "make a ripple"

viewing attendee questions

Speakers can view "My Questions"

answering attendee questions

Speakers can answer questions

viewing all attendee questions

Speakers can see all questions

making announcement

Making an announcement

changing conference start time

Changing conference start time

changing event times

Changing the time of an event

The TEDxCMU web application has since become a much larger project.

If interested in learning more about subsequent work at TEDxCMU, please contact me at bhuffman@andrew.cmu.edu.

Contact Bennett