UX & UI design
Young people's
Theatre
Year
2018
Project Type
Personal
Role
UX Research, UX Analysis,
UI Design & Prototyping
YPT is the oldest professional theatre company in Toronto and the first and largest presenter of theatre for youth. While YPT offers amazing content for young audiences, the website's poor user experience outweighs its strengths. Examples of inconsistencies in design elements often confuse users and hinder their ability to find relevant information. In particular, the ticket-buying system presents challenges for users. To address these issues, I plan to streamline the ticket-buying process and redesign the website to enhance user experience and usability.
01
🎯
PROJECT OBJECTIVES
My goal was to enhance their outdated ticket-buying system, making it more mobile-first and user-friendly, while also developing a new design concept for the website. I streamlined the ticket-purchasing process, eliminating unnecessary steps to ensure users can complete their transactions seamlessly.

In terms of interface design, I introduced a vibrant pattern featuring diverse shapes and colours, aligning with the preferences of our target audiences: young viewers and their parents/teachers. Additionally, I implemented a strong visual hierarchy for colours and fonts to enhance clarity and improve user navigation.
02
🤔
IDENTIFYING THE ISSUE
The primary issue with the YPT website was its attempt to present an overwhelming amount of information on a single page. This approach led to confusion among users, exacerbated by the repetition of content items throughout the page. Specifically, the complexity of the ticket purchasing system added to users' frustration, making them feel fatigued before even beginning their tasks.
YPT website audit
YPT website audit
YPT website audit
YPT website audit
YPT website audit
Competitive analysis
03
🔍
COMPETITIVE ANALYSIS: MIRVISH, STUBHUB, CINEPLEX
Conducting a competitive analysis was a pivotal phase in refining my initial solution for the YPT website. Throughout this analysis, I generated numerous ideas by examining the ticketing systems employed by various competitors.

For comparison, I selected Mirvish, StubHub, and Cineplex. I segmented the analysis into three primary steps, each focusing on enhancing the ticket purchasing experience:

1. Main Home (Landing) Page
2. Show Description Page
3. Ticket Purchase Process

These three steps constitute the primary user flow, guiding individuals from discovering desired content to completing their purchases.
🏠
MAIN HOME
Competitive analysis
Competitive analysis
Competitive analysis
🎭
SHOW DESCRIPTION
Competitive analysis
Competitive analysis
Competitive analysis
🎟️
BUY TICKETS
Competitive analysis
Competitive analysis
Competitive analysis
Competitive analysis
Competitive analysis
04
💬
User Interviews
Gaining insights from users is crucial for obtaining a comprehensive understanding of the project's challenges. As YPT's primary target audiences are parents and teachers of youth, I conducted interviews with two qualified individuals to delve into their perspectives.

The first interviewee was a housewife with two children, while the second was a daycare teacher. Each interview session lasted approximately 40 minutes to 1.5 hours. During these sessions, I asked a range of questions concerning their overall experiences with online ticket purchasing and specifically addressed their interactions with the YPT website.

Moreover, I facilitated their exploration of YPT's ticket purchasing system, allowing me to gain firsthand insights into users' perceptions and experiences with the website.
YPT UI design
YPT UI design
c
YPT UI design
05
🔄
Task Flow
Based on the ideas and solutions I gained from the research phases, I created a task flow to determine the ideal stages users might go through when buying tickets on the website. Specifically, I focused on the flow for users purchasing tickets as guests, omitting irrelevant actions unnecessary for this task.
06
✏️
Wireframes
I created high-fidelity wireframes to visually represent the user interface and showcase the design solutions conceived during earlier phases. My focus was on elucidating the functions and features of each page, ensuring clarity and coherence throughout the user experience.
YPT Mobile UXYPT Mobile UX
YPT Desktop UX
07
🎨
UI Design
At this final crucial stage, I focused on crafting an appropriate visual identity for the YPT website, tailored to resonate with their target users: parents of young audiences and teachers. While the current website employs vivid colours to evoke a festive atmosphere, the hierarchy of design components lacks clarity.

To address this, I utilized a diverse range of colours while assigning each hue a specific priority. This ensured a clear hierarchy in the usage of design elements, enhancing user comprehension. Additionally, I created a pattern using various shapes and lines, strategically incorporating them into limited areas such as the background or footer to prevent visual clutter and confusion for users.
YPT UI design mood board
YPT UI design
YPT Gif 01
YPT Gif 02
YPT Gif 03
YPT Gif 04