TEDxPICT: Website Redesign - UI/UX Case Study

Written and worked upon, in collaboration with Bhavika Chuttar

What is TEDxPICT?

TED is a nonprofit organization devoted to the motto of Ideas Worth Spreading. Started as a four-day conference in California 30 years ago, TED has grown to support its mission with multiple initiatives. 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. These local, self-organized events are branded TEDx, where x = independently organized TED event.

TEDxPICT is one such organization run by college students from Pune, India.

Why this re-design?

TEDxPICT is an organization that works for the sole purpose of bringing together people from all domains and backgrounds and encourage free sharing of ideas, stories, and innovations that benefit the world at large. TEDxPICT believes that the sharing of ideas is crucial for the survival of a society that promotes progress.

Their website, however, didn’t display this dynamic — it was an unstructured visual dumping ground that failed in conveying the purpose of the organization to the user. Over the years, a lot of changes and additions were done to the website and also in the content that the chapter produced, but it hadn’t been captured properly on the website.

The solution: a website re-design.
We needed to create a system that could represent the wide breadth of content that they had started producing, including blogs, IGTVs, previous event records, and podcasts logically and coherently. It was also of prime importance to come up with a modern, clean and appealing visual style that would enhance the chapter’s personality.

Goals and Motivations behind the re-design:

The organization’s goals:
- To capture all existing content in an orderly fashion — with an easy-to-navigate clean user interface.
- To revamp the current visual identity and replace it with something more modern and appealing.
- To convey the chapter’s success over the years in conducting events to attract more sponsors for the future.

Our personal goals:
1. To understand and take full ownership of the roles involved in building products — User Experience Researcher, Designer, and UI Designer.
2. Enhancing our overall learning experience by challenging some design decisions and addressing their solutions together — as a team.

The Design Process

When there is a plethora of requirements and constraints involved in projects, a systematic approach to the problem at hand is of utmost importance. The design process that we followed during the course of this project can be broken into four iterative stages -

Design Process

Starting Off: The discovery phase aimed to understand the problem, collect requirements from the organization, and analyze the context of use. We scheduled a few calls with the people in question (from the chapter) to clearly understand the chapter’s vision and ideas followed by the current goals and challenges they were facing. We documented the insights gained from these conversations which were helpful for defining the problem and making certain design decisions in the future.

Requirements Gathering

Auditing: After understanding the problems faced by the stakeholders, we performed a heuristic analysis process on the existing site, in order to better align the interview insights and the actual UX issues.
In order to deliver an enjoyable user experience, it is necessary to anticipate what people want to see when they open up the site and subsequently provide the relevant information. Keeping this in mind, we brainstormed on the possible user flows and content structure on the site all the while removing redundant pages, merging existing ones, and adding new ones as and when required.

Site Map

Exploration: When we had built a fair idea of what the site would be like, we needed a proper system for the presentation of different content. We explored a lot of websites looking for visual and creative inspiration.

Wireframing: Once we were done with the planning part and a foundation was built, putting our ideas down on paper was an easy task to accomplish. We were focused a lot on what the purpose of every page was, what information we wanted to convey, and what was the best way for presenting by ensuring minimum cognitive load. We went through cycles of discussion and feedback around the structure — this phase wasn’t concerned with the graphical or visual elements of the site.

Wireframes

Comparison & Re-design Prototype :

Typeface and Colors:

The website needed a minimal, modern, and professional look. We scoured over a dozen Google Fonts (the developers needed free Google fonts, as it was easier to integrate and use) and the best one we could find was DM Sans.

We were restricted to using Red, White, and Black as they are TEDx colors (according to their guidelines) and so we made some variants of the same to use in our project.

We made a component library to save the effort of making repetitive elements in our design -

Prototype:

Previous Landing Page
Re-Designed Home Page
Previous About Us
Re-designed About Us
Previous Blogs Section

Blogs were not given enough emphasis. Also, the chapter had started a podcast and an IGTV series, which they wanted to include on the website as well.

To display this newly added information, we decided to design the Forums Page.

Re-designed Forums Page
Previous Events & Speakers Section

The Events section just listed the previous events with no further information. There was improper hierarchy and arrangement of visual elements, making the section unreadable.

We redesigned the section to include a little history about the theme, all of the previous speakers, the sponsors, a few images, and the most important the YouTube playlist. The YouTube included the links to the talks on the official site of TEDx.

Re-designed Past Editions Page

We designed a separate page for the potential sponsors, trying our best to highlight key achievements of the organization to thereby gain new sponsors.

Re-designed Partners Page
Previous Footer

Feedback: Gaining feedback on the wireframes we had built was a major part of our design process. We made rough wireframes, asked for feedback, and utilised the same in further iterations to drive our decisions.

The feedback we received from the users were:

1. I like the design and structure of the site, it looks very clean.

2. The navigation of the site is easy and informative.

3. Spacing between the header and the content above the header is the same, which makes it confusing — Implemented.

4. The forums page(s) — Blogs, Podcast, IGTV is very innovative in terms of interaction.

5. On the About Us page, the banner image is above the Event Navigation; I feel confused when I see the random image on my screen — Implemented.

6. The testimonials on the Home Page are a lot to read at one glance, can you do something about that? — Implemented.

There were several other minor changes pointed out by the people we obtained feedback from. We tried to listen, analyze and if valid — incorporate the suggested changes in our designs.

Retrospection:

These were our major learnings after working on this project:

  1. It was our first time working together as a team and we learned a lot of new tips and tricks from each other during this journey. As we both are budding designers, there was a lot for us to know and understand in terms of design knowledge and approach. We talked to several other designers from the communities we were a part of and received constructive feedback from them.
  2. The organization we were working for was really happy to see the final design of the project — it was just as they expected their website to look: modern and professional.

What did users feel about the website?

Unfortunately, we were unable to write actual feedback here, as the site hasn't been developed yet. But we did share our prototypes with multiple people we were acquainted with and they seemed happy with the results.

You can check out our prototype here — Link.

And that’s a wrap!

We hope you found this short case study informative. In case you have any questions/suggestions, please feel free to reach out to us via email. We would be more than happy to have a chat with you.

Bhavika Chuttar : bhavikachuttar@gmail.com

Tanvi Bhargaw: tbhargaw@gmail.com