Final TEDxSFU 2021 website walkthrough. Link to the website: https://2021.tedxsfu.com/
TEDxSFU 2021 Website Design
My Role: UX/UI Design and Visual Design
Teammates: Alvin and Gracie
Project Duration: Approximately 5 weeks in total, including two weeks for usability testing, completed in September 2021
Tools: Figma
In order to promote ticket sales for the TEDxSFU 2021: Bloom conference, I worked in collaboration with 2 other designers as part of the TEDxSFU creative team to design a website. To encourage visitors of the website to purchase a ticket, we framed our design around creating a captivating speaker introduction to entice users to purchase a ticket.
We spent two weeks conducting user research on the first iteration of our design. I spearheaded the conduction of one of the user interviews from creation of the user study questions and evaluated the results. Due to the effects of COVID-19 while we were designing and testing this project, our sample size was limited to those within the team’s personal networks.
Figma Desktop mockup of the website for the usability testing, designed by Alvin, Gracie, and myself
User Testing
The focus of my user testing was accessibility which led me to interview and test a visually impaired woman in her late 40s. The primary takeaways came from the testing of both the mobile and desktop Figma prototypes and the post-test questions. The first task of the usability testing asked the user to freely explore the website prototype and voice any thoughts or questions aloud. The participant found difficulty in reading some of the text, especially the grey text as it didn’t have enough contrast. In addition, the menu text had low contrast as well due to the weight of the typeface. In the post-test questions, the participant described how by the end of the testing, her eyes and brain felt very tired due to having to concentrate hard to even read the text.
Usability testing notes grouped together in team Figma workspace
These notes from the usability testing were placed in a grouping titled “Layout/Readability issues (text)” alongside other notes from user testing done by my teammates. The notes from the user testing I conducted however became the main focus of one of our key insights: “legibility issue for visually impaired individuals.” This was placed within a Decision Matrix that we used to prioritize the insights and what we would focus on creating design solutions for. This insight had high user value and an average difficulty of fixing. I was the main person in charge of creating the solution for this insight.
Usability testing notes placed in a decision matrix in team Figma workspace
Design Solution
One challenge was that my team wanted to maintain the grey type to maintain the existing hierarchy. I aimed to find a balance between keeping the grey while also adding more contrast. I found a resource on WebAIM that checked the contrast between the foreground and background colours and its contrast ratio. The site also describes the Web Content Accessibility Guidelines and what the minimum contrast ratios were. Using this resource to double check the adjustments I was making, I was able to reach a 7.37:1 contrast ratio which passed the WCAG Level AAA for normal text.
Once the grey colour had been finalized after confirming it had good contrast, I worked on implementing it into our design. I simultaneously updated the layout and hierarchy of the text on the homepage to also include the speakers’ bios. The initial design from our prototype and the final design that was used in the published website can be seen below.
Initial text layout and design from the prototype
Final text layout and design as seen in the published website
The final design and full walkthrough of the published TEDxSFU 2021 website can be seen below.
Reflection
This microsite design was successful with 212 tickets sold in total for the TEDxSFU 2021: Bloom conference. This success allowed us to achieve our goal of promoting the conference through highlighting all of the speakers on the landing page. Through this project, I was able to learn many aspects of designing for a good user experience which included using high colour contrast to ensure readability. Looking back on this project, I would have conducted additional user interviews with a focus on individuals from the visually impaired community to ensure the design was more accessible to this community.