Project: Onboarding and Service Design
Role: Design Research and UX/UI Design
Team: Humberto Jimenez-Freile,
Javier Ormaechea & Márta Zimányi
Platform: Web-based app.
Tools: Sketch, InVision, Photoshop, Zephr, Keynote
We teamed up with crowdEngage (cE) founder, Hugh Topping, to create an effective user flow for his new ticketing Web App. The start-up, bootstrapped by Hugh, is a ticketing system that offers users (both theaters and theatre enthusiasts) a better theatre experience. On the day of the performance, you’d receive a personalized text message with a link to your e-ticket, the option to pre-order drinks (beat the queue) and a quick link to Google Maps to ensure a trusted way for you to arrive at the theatre on time.
The Challenge: The preorders page is an important revenue stream for cE.
It was being under-utilized by users, despite its potential to improve their overall theatre experience. The marketing site, another major revenue stream and way to reach new theatres had a slow turn-key rate.
The Solution: Through our research methods, we discovered major drop-off points on the Prepay page as well as issues for the users. We expanded the existing web-based app into an e-commerce site and smoothed out the user journey. The marketing site was tested and improved as a stretch goal.
In our client kick-off meeting we established the primary goal for the 2-week sprint was to improve the usability of his current web-based App. The company, crowdEngage, was started in 2017 and Hugh had yet to conduct usability tests. His primary revenue streams came from Preorders and acquiring new customers: theaters. Our stretch goal was the marketing site, which would reach new customers. The focus hence became the usability of the Preorders page and increasing the turnover rate.
We sent out a screener to gather our initial research. We discovered that theater guests enjoyed beverages prior to and during the show. This would offer two prime-times for preorders.
crowdEngage is in an interesting market position, as his messaging system doesn't actually have any direct competitors. We looked at Preoday and other indirect competitors. We did a comparative analysis with some of the competitive marketing sites. We learned that crowdEngage was in a strong position, offering an efficient order process, as well as a live-chat.
We visited The Bridge Theater, one of crowdEngage's main customers. We managed to interview theater-enthusiasts who were new to The Bridge, as well as the staff of the Bridge. Most importantly, the Bar Manager who had key insights as to logistics that caused Preorder hiccups. We also observed the queueing and frustration of theatre customers as they tried to navigate a new space.
A key discovery was that crowdEngage had two key customers. The theater-goers and the theaters themselves. It was important for us to find where issues intercepted for both sets of users. We discovered that the main
drop-off points were caused by Navigation and Communication issues. We needed to gain the trust of theater goers for them to use the Preorder function. Most users were missing the order button and then frustrated that they still needed to stand in line for their orders.
We collated our findings from 21 interviews and the screener survey to distill patterns and core themes. Again, Navigation and Communication surfaced. Users appreciated the quick access to Google Maps, but distrusted being able to find their Preorders and seats easily. The bar also noted that there wasn't a Preorder pick-up point. Something they needed to sign-post easily for an enhanced experience. Users also distrusted the speed of the order process. They wanted order summaries before the payment confirmation, to build trust in the new system.
We teamed up with Hugh and Pauline (manager at The Bridge Theater) to run the first of our design studios. We tackled a No. of the Communication and Navigation issues. In the next iteration of the design studio, we, as a team, distilled and translated these solutions directly into the App. We created the option of a theater map and a map to the Preorders page.
Also born from the affinity mapping, is our Primary Persona, Elizabeth. She is a collation of all of our users and allows us to get into the mind of the users, to better understand their needs. Elizabeth's key frustration with the theater experience was standing in queues. Something we could easily alleviate by enhancing the Preorders page.
Our paper prototypes allowed us to implement some of the key findings into the existing app to begin more user testing. We conducted around 15 user-tests, affinity mapping and collating changes after each round of testing. We moved the Preorder button into plain site and also offered the page more visual hierarchy.
Hugh requested the option of a customer survey at the end of the evening. This would allow for a more personalized theater experience.
We added a clear, 3-screen onboarding process. This built trust for users as they could quickly understand the advantages of this new messaging system.
Wireframes and User-testing
During the low-fi and mid-fi user-testing, we refined the Preorders. We expanded Preorders into more of an e-Commerce offering, with Merchandise, Food, Drinks and Programs now available. We also added clear pick-up times and the option to add to wallet. Users requested their old, trusted system folded into the new, more convenient, ticketing system. This again, furthered their trust. We also added the option to Split the Bill and Share the Ticket with friends and family.
Our user journey focuses on the Preorder journey, Splitting the Bill, and the solution to our user's Maps requests. Users can now find their way to and from the theatre, Easily find their Preorders and their Theatre Seats.
4. NEXT STEPS