preloader image

UI Design, UX Design, UX Research

Theater night

Role

Co-Lead UX Designer

Start

Jul 2021

Handoff

Sep 2021

Product

Theater-focused ticketing platform (patron side)

00.-

Introduction

By the end of this case study, you'll see how I:

[1] Collaborated with another talented UX Designer to test, improve, expand on, and finalize her original lower-fidelity designs; and

[2] Successfully handed off well-documented screens for a mobile-first patron ticket-buying platform, to the client’s enthusiastic approval!

2

UX Designers on the project

49

hours of work

63

desktop screen designs

127

mobile screen designs

01.-

Challenge

Project background & challenge

I had the pleasure of collaborating with a wonderfully talented, fellow UX professional on this project who I will refer to as Katie. I was brought onto the project as a part-time contractor to help Katie complete the rest of the UX Design process for the entire patron-side ticket-purchasing experience of the product, and there were a couple of main challenges that the team was facing when I joined.

Firstly, most existing ticketing platforms are optimized for desktop. Even "big name" ticket-purchasing platforms still often fail to balance all of the visual, textual and interactive components needed during the ticketing flow on mobile screen sizes. As a result, the PM on the project had requested us to design with a mobile-first approach. At first, this was a bit of a challenge; however, you’ll see by the end of this report why I ended up loving this approach and how it made it much more efficient to create designs for additional device sizes.

Secondly, Katie had hit a bit of a designer’s block after her first iteration of high-fidelity mobile screens for the main flow (what many UX Designers call the “happy path”). She was having a hard time thinking up further improvements to the UX and had not fully completed the transition from low to high fidelity screen components yet, nor had she created light and dark mode screen designs, which would be required to do prior to developer handoff. Additionally, she had not yet fleshed out final solutions for the desktop screens or the non-“happy path” situations, such as error or empty states. Long story short, she had agreed to a handoff deadline of the beginning of September for both mobile and desktop designs and was concerned with just under two months of part-time work left that she would not be able to get it across the finish line on her own. Katie had worked with me before on collaborative UX projects since we were both pursuing an online Human-Computer Interaction (HCI) M.S. degree, and she recommended me as a candidate to the PM to help her push through the remaining work. An interview or two later, and it was time for me to start getting my hands dirty with her!

02.-

Iteration

UX Design iteration, round 2

When I was brought on, Katie had already finished the lower-fidelity prototyping phases of the UX Design process, and had also completed an initial round of moderated usability sessions using an initial high fidelity prototype iteration. I worked with her and the PM to thematically analyze their qualitative notes and recordings from this first round of testing. Katie and I used the outputs of this analysis along with our own round of heuristic analysis to then collaboratively brainstorm improvements for her designs. As we were both part-time contractors (and also because I just love this approach in general), we chose to use the diverge-converge design methodology (also referred to in some contexts as the double diamond methodology). Katie and I diverged to create further design iterations, then converged after about a week to go through our ideas together and finalize a second-round high fidelity prototype for testing. After convergence, I took the lead on making sure the UI of the UX was high fidelity and consistently styled throughout. Thankfully, we were using a custom version of the Material UI component library for the project that had already been converted to a design system on Figma, so I was able to speed up the UI updating process that way and create most new components by basing them off of existing ones.

You can find some before-vs.-after examples below of Katie’s round 1 iterations vs. our collaborative round 2 iterations.

03.-

Research

UX Research, round 2

Next, we ran a second round of usability testing — this time with the Iteration 2 prototype. This UX research phase was evaluative in nature; we primarily wanted to validate that our updates truly led to a better experience. Additionally, we had built out a more robust, end-to-end flow for Iteration 2 that included features that Katie had not finished for the first round of testing, including the full “Help Me Choose” flow and a built-out “Bookmarking” feature (previously the “Compare” checkbox).

Katie and I collaborated on the construction of the UX research plan. I took charge in terms of constructing the Iteration 2 prototype, as we wanted to make it hyper-realistic and I was more well-versed with constructing these types of prototypes within Figma. With such a limited amount of time left (about one month) until design handoff, we stuck to the agreed-upon sample minimum within the UX industry and informed the PM we wanted to shoot for a total of 5 participants for the study. Due to the time constraints, the COVID-19 pandemic being in full swing at this time, and the PM’s hope to recruit existing product users only (rather than look-alikes), we ended up with a sample of 4 study participants. Katie and I split the moderation of the sessions between us, and we focused mainly on collecting and analyzing rich qualitative data from think-aloud comments and question responses (as opposed to any quantitative data analysis, which I deemed to be less appropriate due to the small sample size).

04.-

Iteration

Design iteration, round 3

We were able to glean a number of actionable insights from the results of this UX research phase, combined with those of the previous phase. Most notably, we found that the ticket list component needed further improvements to layout, clarity, and accessibility, as users were still becoming confused about which seat(s) were in their cart already vs. not; themes from testing helped us finalize the look and feel of this feature, and the final updates can be seen broken down in the second image below.

Additionally, we looked beyond the smaller tweaks from the study results and began collaboratively brainstorming around every alternate user path, other than the happy path, that we had not yet designed for. We found during brainstorming that we had not covered the scenario of a user purchasing tickets to multiple different shows during the same platform visit, so we made sure to design for this use case. Other use cases that we designed for at this stage were any remaining error and empty states.

We ran Iteration 3 by the PM, and continued on to preparing the Figma design file for dev handoff after his enthusiastic approval.

05.-

Stakeholder handoff

Closing design work & dev handoff

Finally, it was time to prepare the designs for developer handoff! Katie and I agreed on a handoff file format we were both familiar with, where we split the Figma file into pages using a system similar to the way agile developers break work up into “stories”. We named each page based on the story/component it contained; then, we clearly laid out the finalized mobile screens. In addition to the light mode mobile screens we had already completed, Katie and I split up the remaining work, which involved translating each mobile screen to desktop form and covering dark mode versions for both screen sizes. We added notes on specs and clearly annotated which screen aligned with which user flow/state for the devs as well.

Throughout the finalization of the dev handoff file, we met with the PM and developers on the project to review our progress, receive signoff on desktop versions, and ensure that all design solutions we were delivering were feasible for implementation. This was the first time I had the privilege of working on an experience that was mobile-first, and as you can see from some of the mobile-to-desktop carousel slides below, using a mobile-first approach made it infinitely easier and more efficient to then create desktop versions. We were able to hand off the final Figma design file on time during the first week of September, 2021!

06.-

Impact

Impact & conclusion

Through Katie and my collaborative efforts on this project, we were able to hand off a whopping total of 127 finished mobile screens and 63 desktop screens to stakeholders on time, and to their complete satisfaction! The screens included both light and dark mode versions, happy paths, error states, empty states, and alternative user journeys. Despite the client being on the smaller side in terms of total business size, we were able to utilize thorough qualitative UX research and our own expertise to bypass many of the user frustrations associated with bigger-name ticket-purchasing platforms on mobile, and we were even able to include some novel solutions that we had not seen done before in our intiial competitive research survey, like the "Help Me Choose" flow. The client was so pleased with our work that he asked us to work on a new project for him on the admin side of the platform!