Billetto's core functionality was long due an overhaul. Recently, the company made a decision to switch all ticket-buyer facing design to "dark mode" to separate the B2B universe from the B2C. This is a glimpse at the entire design overhaul.
👷♀️ Challenges & constraints
🛑 3-month initial feature release requirement
🛑 Rapid launch & testing of the core part of the product
🛑 Complexity of the entire purchase flow infrastructure & many undocumented dependencies
🎯 Goals
✅ Create a new design based on best practices, audit & user feedback
✅ Determine current purchase flow drop-offs and find solutions to increase conversions
✅ Design, develop and launch the new system in 3 months
👩🚀 Role
Project lead, UX / UI, QA testing, A/B testing.
Collaboration with developer team, CFO, UI designer (Upwork) & Baymard Institute.
Collaboration with developer team, CFO, UI designer (Upwork) & Baymard Institute.
🏆 Results
✅ New purchase flow launched in less than 6 months
✅ Increase in purchase conversions: 20% in DK, 23% in UK & 8% in Sweden
✅ Minimal impact with bugs & downtime
Example of the old purchase flow ca. late 2020
Research
📄 Baymard Institute audit overview
📈 Competition analysis
📊 Google Analytics funnel breakdown
💬 User feedback & recordings
📈 Competition analysis
📊 Google Analytics funnel breakdown
💬 User feedback & recordings
Baymard Institute audit
Before conducting a formal audit, I employed the Baymard Institute's self-assessment tool to benchmark Billetto's checkout flow against their established industry standards. This initial evaluation, based on Baymard's extensive research and usability insights, aimed to identify key areas for improvement in our checkout process, aligning it more closely with the best practices observed in e-commerce.
The objective was to re-design the purchase flow prior to conducting the Baymard Institute's professional audit in order to elevate the checkout experience even more.
Baymard Institute Cart & Checkout guideline checklist
Competition analysis and inspiration
Following the audit, I have also looked at the best practices from the competitors and examples of delightful experiences of various checkouts in other industries. These screenshots were added to the overall project Figma file in order to use as inspiration and reference with the external UI designer.
Google Analytics Funnel breakdown
Together with the CFO we have also pulled historical data from our basic Google Analytics setup to define drop-offs in the current purchase funnel. The data we managed to get was somewhat limited at the time as we did not implement a proper tagging system yet. However, it became obvious that the highest drop off happened at the second step of the funnel and that I have to focus on optimising the mobile flow (highest drop off, but responsible for the highest traffic).
User feedback & user testing
Prior to getting to the user feedback and user testing, I have created a diagram of the current purchase flow funnel with various flow scenarios in FigJam. This made clear which scenarios I have to look out for when conducting further user testing, but also it lets me focus on the issues reported by the users and look out for certain recordings.
Following the audit, I have also looked at the best practices from the competitors and examples of delightful experiences of various checkouts in other industries. These screenshots were added to the overall project Figma file in order to use as inspiration and reference with the external UI designer.
Google Analytics Funnel breakdown
Together with the CFO we have also pulled historical data from our basic Google Analytics setup to define drop-offs in the current purchase funnel. The data we managed to get was somewhat limited at the time as we did not implement a proper tagging system yet. However, it became obvious that the highest drop off happened at the second step of the funnel and that I have to focus on optimising the mobile flow (highest drop off, but responsible for the highest traffic).
User feedback & user testing
Prior to getting to the user feedback and user testing, I have created a diagram of the current purchase flow funnel with various flow scenarios in FigJam. This made clear which scenarios I have to look out for when conducting further user testing, but also it lets me focus on the issues reported by the users and look out for certain recordings.
Due to the budget & time constraints we're unable to carry out extensive user tests, however, I do have access to Hotjar recording & I sat down to analyse user behaviour in various scenarios and to find recordings of certain issues that users have previously reported to our support team.
I've also pulled up a document with user feedback from our Support Portal to document any issues or ideas submitted by the users prior.
As Billetto is available in 14 countries, the testing & research is also adjusted to localised markets as each market has a different set of rules, payment methods and layouts (to address language specifics). I have found various issues that applied to certain markets due to incorrect translations, use of UI and different set of payment methods.
I've also pulled up a document with user feedback from our Support Portal to document any issues or ideas submitted by the users prior.
As Billetto is available in 14 countries, the testing & research is also adjusted to localised markets as each market has a different set of rules, payment methods and layouts (to address language specifics). I have found various issues that applied to certain markets due to incorrect translations, use of UI and different set of payment methods.
Simplified GA data overview of the purchase flow
Competition overview & inspo
FigJam purchase flow flowchart (pixelated due to NDA)
Design
✨Design file preset & collaboration with UI designer
🖼️ Figma wireframes, mockups & final handover
🖼️ Figma wireframes, mockups & final handover
Due to the time constraints it was important to start working on the developer team as soon as possible. In order to release designs more rapidly, we have opted to use the Tailwind UI templates, like we had used for previous projects.
I've created a Figma file with a paging system to work faster with an external UI designer. I would create a first base component or a basic wireframe and describe a variation required for each view. The UI designer was responsible for creating the final dev-ready handover file.
Project management
Figma file management
Rough mockup and reference for each step
Variation workshop for the payment step
Asset library
Example of final handover views
👩💻 Backlog & release management
🧑🔧 External QA tester
📄 Baymard Institute post-launch audit
🧑🔧 External QA tester
📄 Baymard Institute post-launch audit
Backlog & release management
Using Trello as a backlog management tool, I have created an Epic for the entire project broken down into each step (and variation) of the funnel. I was using Airfocus at the time to visualise the roadmap for other stakeholders. Once I would get design and logic flow completed for a certain step, it would be immediately added to the backlog for the week.
An implemented design is always released to all admins immediately in order to start internal testing as soon as possible. I then gather internal feedback and create a follow up card to address it. Afterwards, we test it externally (small pool of users - 10 minute tests with a task) & released as an A/B test if it supports a completed flow. This means that sometimes we do not have a completed or coherent flow & we're aware of losing some of the conversions, however, this allows us to test more rapidly and test early.
An implemented design is always released to all admins immediately in order to start internal testing as soon as possible. I then gather internal feedback and create a follow up card to address it. Afterwards, we test it externally (small pool of users - 10 minute tests with a task) & released as an A/B test if it supports a completed flow. This means that sometimes we do not have a completed or coherent flow & we're aware of losing some of the conversions, however, this allows us to test more rapidly and test early.
External QA tester
Purchase flow is at a core of the Billetto functionality. The current flow is incredibly complex & has to adapt to multiple devices (and adjust to the web view on Billetto app). Therefore, I decided to hire an external QA tested in order to avoid loss of revenue due to missed functionality or bugs. I have created an exhaustive list of scenarios (based on the flowchart) & pulled a list of most used browsers, resolutions and devices (based on Google Analytics data). Together with external QA tester I worked to create a feedback document for each product view (via Google Sheets).
Post-launch Baymard Institute audit
As mentioned prior, we have requested a site audit from Baymard Institute post-launch. We wanted to see how our new purchase flow compares to the industry standards, right after we have used their self-service tool to audit the old flow.
Overall, the new purchase flow tested well in the audit, however there were some obvious downfalls too. Some of these were due to business decisions or technical limitation of third-party services. However, a lot of the feedback we were able to implement post audit & score higher.
Baymard Institute audit page for the Billetto purchase flow
A/B testing & gradual launch
🏆 Gradual launch
With such an impactful release, we’re started a gradual release with the least performing markets and we ran the A&B tests for at least 2 weeks. This test was run on a basic purchase flow (simple ticket set, direct payment checkout & no extra event presets).
We then had a Tier 2 set of countries we ran the same test for another 2 weeks. And finally we started testing on the Tier 1 set of best performing domains.
Once successful, we gradually tested the complex flows until we got a positive result.
🧪 A/B testing
🧪 A/B testing
Finally, I have created a roadmap for A/B testing the features that did not make it into the base release. These are new features that were previously not part of our purchase flow.
We are still continuously testing the purchase flow to increase the conversion rate.
We are still continuously testing the purchase flow to increase the conversion rate.
A/B test queue example
Mockup for an implemented A/B test success
Final remarks & thoughts
This was the largest design project that I have undertaken so far in Billetto. I'm quite proud it took just under 6 months to complete with a great contribution to the revenue. However, I wish there was more time to carry out a more thorough user research & drill down on the actual user needs via qualitative research beyond support feedback and data.
This has been one of the first projects where we started to categorise our visual assets and create proper variables for most of the elements. If I was to add to this project in the nearest future, I'd also work on the accessibility of the design. Looking back, this was not something we had time to implement, but I'm currently trying to fix this via the new Design System.
