top of page
.png)
TEDxChennai 2019
Introduction
Website for TEDxChennai 2019 which is a local TEDx event where
x = independently organized TED event.
Role
UI/UX Design Lead
Timeline
September 2018 to March 2019
Skills
Leadership, User research, Website design, UI design, A/B testing, User personas, Customer journey
Tools
Photoshop, Figma, Zoom, Lucidchart
About Organization
In the spirit of ideas worth spreading, TEDx is a program of local, self-organized events that bring people together to share a TED-like experience. At a TEDx event, TED talks videos, and live speakers combine to spark deep discussion and connection and connection in a small group. These local self-organized events are branded TEDx, where x = independently organized TED event.
Problem Statement
Chennai aimed to enhance its cultural and intellectual landscape by hosting a TEDx event, which requires a dedicated website to effectively communicate the event's purpose, attract participants, and engage the community. TEDx Chennai needed a face for the event in the form of an intriguing platform with all the necessary key points of information for the audience, speakers, and sponsors, and a seamless ticketing system for purchase.
Objective
As the design lead for this project, it was my responsibility to make sure all the requirements were noted, planned out and achieved by the deadline. Here are the main requirements for the event.
A single scrolling page that covers all the information for the TEDx event.
To follow the same branding and design guidelines as TED.
To provide a ticketing service for customers to easily purchase tickets.
Design process
For this project, I started with the 4-D strategy.
Discover
This phase was about understanding who our users were, what they need, and how they’d interact with our website over time. I wanted to make sure our solution was user-centered and adaptable to changing needs and contexts
Design
This is the application of the findings of Discover phase into actual designs and plans for the website.
Define
The goal was to transform insights into a clear and actionable blueprint for the website. This phase sets the direction for the design and development efforts, ensuring that the final product will meet the needs of our users and the goals of TEDx.
Deliver
This phase involved the final delivery of the website design and assets.
Discover
Understanding the audience
Who is our audience?
After doing some research on other TEDx events, I had come to a well defined conclusion of who our ideal audience would be.
1. Students
2. Professionals
3. Entrepreneurs
4. Community and Social activists
And anyone interested in TEDx.
Although the general public would be the ideal audience, it was good to understand the common demographic of people that would take part in the event.
User Personas
After the User Interviews, we created 3 personas.
1. Primary - Audience
2. Secondary - Speakers
3. Tertiary - Sponsors
Primary : The primary persona decided was the general public, aka the audience, anyone who is interested in attending the event. These are the users that need the most information about the event, so they will use the website the most.
Secondary : The speakers, although booked prior to the event, would probably want to access the website to know other speakers, sponsors, or buy tickets for their family and friends.
Tertiary : Similar to Speakers, sponsors also would want the same requirements.
Define
From some comparative analysis and the user interviews, I created a user journey map to better understand how to build the information architecture of the website.
Primary Persona User Flow
Secondary and Tertiary Persona User Flow
Content Strategy
To make sure the website has the right content, there are two different kinds of content that I looked into.
UX content
This kind of content is written in a way that incorporates only the necessary information in a language structure that is understood by everyone accessing the website.
Business Challenges
Since TEDx is an organization that has been live for years, there were alot of challenges we faced to maintain and follow predefined regulations. Some business challenges I had to consider are shown in the image.
Multimedia elements
Most of the time, visuas provide more information easier than words, adding images and videos can improve the user experience of the website.
Product User Challenges
Even after considering the business challenges, I needed to also focus alot on what the users actually expected from the website. These are some user challenges I considered.
Design
I had wireframed and designed 3 websitess for this project over the duration of the develop phase.
First Design Prototype
This was not an ideal design as it had many items in the navigation bar which made it confusing.
Second Design Prototype
We decreased the options in the menu for this design but the left navigation was not ideal for the professional event.
Final Design Prototype
This design covered all the requirements, followed all TED constraints and was ideal for the nature of the event.
First Design Wireframes
Here are the wireframes for the first design I created for the TEDx website.
I had a basic idea of what I wanted to see on the screen and wanted to keep it a one page website with CTA scroll from the navigation.
Second Design Wireframes and low fidelity screens
Here are the wireframes for the second design I created for the TEDx website.
These wireframes were just an experiment with less navigation options and a creative navigation, but it became confusing as a left navigation in this manner was not standard.
Final Design Wireframes
Here are the wireframes for the final design I created for the TEDx website.
After cutting down on the amount of navigation items, the next step was create a layout that was minimal but still exciting for the user.
Final Design
The final design ended up being more simple since I wanted to focus on the content. I added elements of the branding colors and maintained a monochrome consistency throughout the page so the user won't be distracted away from the information.
Design System Elements
We had to use the logos, color and elements provided by TEDx to maintain brand consistency. Here are the variations of the logos provided.
Mobile Design Wireframes
Here are some wireframes I created for the mobile web app that did not go into production due to time and cost contraints.
Final Delivery
My other projects
Contact
bottom of page