TEDxADMU Website Case Study

Brian Tan
Brian Tan
Apr 6, 2017 · 3 min read

Skills Utilized: UI Design, Front-End Web Development

(Let the images finish loading before reading. It might take a while.)

You can check out the website at tedxadmu.ph

Some Context

The TEDxADMU website was a project for the Ateneo Junior Marketing Association that I helped in as part of UX Society’s consultancy team.

Our Consultancy Director, Alexis, assigned me to take over in creating the 2nd phase of the TEDxADMU website.

The First Version

Screenshots from the website’s first version

Above are screenshots from the first version of the TEDxADMU Website. For the 2nd phase, AJMA wanted us to add a section for Speakers, Ticket Prices, and Payment Methods.

With the content AJMA gave us, I quickly made a Sketch mockup of how the three sections would look like.

These are the initial mockups I made

However, Alexis pointed out a few weaknesses in my designs:

  1. He questioned the need for a modal. “Why can’t we just show all the speakers and their bios at once instead of having the user click to see them?”, he asked.
  2. He criticized the ticket prices and payment methods sections I made. It was a “lazy” design, and he challenged me to improve my visual design.

My Second Try

His feedback sounded harsh at first to me, but I saw it as an opportunity to make my visual design better. I sketched out a few other layouts I could use for the speakers, ticket prices, and payment methods section. Finally, I created some mockups that Alexis approved, and I was proud of that.

The new mockups that Alexis approved

After making this, I sent the Sketch file to my co-developer. My co-developer’s code was 80% accurate with my Sketch designs. He missed out on a few things, such as the specific margins and paddings of elements, making things look good on mobile, and a few incorrect text sizes. I polished the code he wrote for these sections and for the other sections to make the spacing more consistent.

Next Steps

This project challenged me to train my eye for good visual design, and I’ll make sure to improve the visual design of my future projects with my learnings here.

My Case Studies

Case studies of Brian Tan’s design and development work.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store