Back to Top

TEDxCMU

In September 2018, I became a 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 in a 400+ attendee event. I was responsible for styling the front-end of a new web application built for attendees, speakers, and board members.

TEDxCMU mockup banner

Roles

Front-End Developer

Timeline

6 months

Team

Bennett Huffman, Dean Dijour, Vicky Ye

Tools

React, Firestore, Heroku, SCSS, Figma

Vision

Create an application to engage the audience with speakers on-stage through new forms of interaction and communicate with our 27 board members at the 400+ attendee event.

Discover

Brainstorming

The innovation team ideates solutions for problems in the board and to enhance the event experience. We brainstormed with the board to identify potential problems and ideas where we could use innovation within the organization.

Brainstorming whiteboard session
Ideas presented in brainstorming session from board

As TEDxCMU has grown in the last few years to a 400+ attendee event, management and communication have become considerably more challenging. Last year, a tech problem delayed the event by nearly an hour. With less than 30 board members, we needed a solution to help mitigate problems like these. We chose to build a new web application that could the needs of multiple stakeholders and potential problems.

Define

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
Provide control over the event schedule and provide real-time updates and announcements.

Low-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.

low-fidelity whiteboarding session
Lo-fi whiteboarding

Design

Mid-fidelity

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

Mid-fidelity ideas for a board presentation
Mid-fidelity ideas
Mid-fidelity ideas for a board presentation
Mid-fidelity ideas

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.

High-fidelity mockups from head of design
High-fidelity mockups

Deliver

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.

product suite
Final product
live schedule and speaker flow
Attendees can see a live schedule
asking a speaker a question
Attendees can learn more about speakers
making a ripple
Attendees can "make a ripple"

Speakers can log in to answer questions from attendees on the “My Questions” page. They can change their answers later and delete replies. When a speaker replies, this information is displayed on the Speaker Q&A page for attendees to read.

viewing questions as a speaker
Speakers can view "My Questions"
answering questions as a speaker
Speakers can answer questions
viewing speaker questions
Speakers can see all questions

Some board members can log in to update schedule times and create event announcements. Changing these times works live, so users never have to refresh their phones to view updates.

admin announcements
Making an announcement
changing the conference start time
Changing conference start time
changing event times
Changing the time of an event

In TEDxCMU 2020, the Innovation Team will take on a new project.

If interested in learning more about our next undertaking, please contact me at bhuffman@andrew.cmu.edu.