A follow-up redesign of the event page usability. I have previously led the redesign of our event page to support the company vision of changing B2C interface to “dark mode”. However, we’ve been receiving a lot of feedback from both the ticket buyers and organisers in regards to overall usability & I decided to address this in a bigger project.
👷♀️ Challenges & constraints
🛑 Confusing recurring event UX
🛑 Missing continuous page grid
🛑 Messy component library with clashing CSS styles
🎯 Goals
✅ Increase conversion from event page to the purchase flow
✅ Amplified SEO impact
✅ Create an order in the current component library
👩🚀 Role
Project lead, UX / UI.
Collaboration developer team, part of a Hackathon project, Baymard Institute audit.
Collaboration developer team, part of a Hackathon project, Baymard Institute audit.
🏆 Results
✅ 0.5% increase in conversions for standard purchase flow & 3.25% increase in recurring
✅ 1 page position increase on average in GSC
✅ Coherent element library for B2C design elements
Research
📄 Baymard Institute audit overview
📈 Competition analysis
💬 User feedback & recordings
📈 Competition analysis
💬 User feedback & recordings
Baymard Institute self-audit
Before the comprehensive review, I utilised the Baymard Institute's self-assessment tool to evaluate Billetto's Product Page against their industry benchmarks. This preliminary review, informed by Baymard’s thorough e-commerce studies and insights, aimed to pinpoint crucial improvement areas within our product presentation and navigation, ensuring alignment with e-commerce best practices. This step was crucial for refining the product page design before the full audit, with the goal of significantly enhancing the user shopping experience.
Competition analysis
After getting a list of some of the requirements from Baymard Institute assessment tool, I have switched to looking at the solutions that were implemented by the competition & other sites with similar functionality.
At the time, Baymard did not supply direction for an experience-based sites, and this is different to "simple" e-commerce products in that the Billetto supply changes rapidly day-to-day and is categorised not only by features but also heavily depends on location and time.
Therefore, I looked at event & travel booking services for inspiration.
User feedback & recordings
After getting a list of some of the requirements from Baymard Institute assessment tool, I have switched to looking at the solutions that were implemented by the competition & other sites with similar functionality.
At the time, Baymard did not supply direction for an experience-based sites, and this is different to "simple" e-commerce products in that the Billetto supply changes rapidly day-to-day and is categorised not only by features but also heavily depends on location and time.
Therefore, I looked at event & travel booking services for inspiration.
User feedback & recordings
The redesign of the event page was, by the large part, triggered by the user feedback on the recurring event solution. Previously, users were confused about a single button & a drop-down selection. It was not obvious that the experience was available over multiple dates and it was hard for the users to see which dates were available at a glance.
Due to the lack of research time & budget, I had to rely on the feedback collected by the support team and some of the user recordings we have collected via Hotjar. Quickly, it became obvious that the lack of the date overview was an obstacle to conversions and I set on the calendar view for the first iteration as a most-recognised element for date selection.
Finally, I have run a card-sorting workshop to brainstorm additional ideas with all the stakeholders at the office (unfortunately, I do not have access to the images anymore).
Finally, I have run a card-sorting workshop to brainstorm additional ideas with all the stakeholders at the office (unfortunately, I do not have access to the images anymore).
Competition research & inspo
design
🖼️ Figma wireframes, mockups & final handover
I used Figma to create the first mockup of the design using Tailwind UI elements from their e-commerce pack. I have simply re-created the elements from the pack in Figma and ran an internal test for the initial layout.
After, I refined the mockup and used the Billetto colours for the next variation, and finally produced a more high-fidelity design for handover & a library of reusable assets. Final Figma document contains a set of assets, workable prototype, A/B test variations and a variation for every event pages state.
This work was done prior I have started building a Design System for our projects & I'm currently in process of cleaning this up for the future use.
After, I refined the mockup and used the Billetto colours for the next variation, and finally produced a more high-fidelity design for handover & a library of reusable assets. Final Figma document contains a set of assets, workable prototype, A/B test variations and a variation for every event pages state.
This work was done prior I have started building a Design System for our projects & I'm currently in process of cleaning this up for the future use.
Previous page redesigns & old mockup
Initial layout prototype using Tailwind UI
First iteration prototype with Tailwind U elements & Billetto colors
Final designs & some of the assets
Project Management
👩💻 Backlog & release management
🧑🔧 User testing
🧑🔧 User testing
Backlog & release management
I used Trello for the Epic and card management. As per previous projects, I have split the project into cards based on each product view. After a completion of each card, I'd run an internal test & apply the view to every Admin to start early internal feedback sessions.
Once we have completed a simple event view setup, I started external users testing for each view.
User testing
In order to test this design on external users, we have released the update in a smallest market with limited events. This way, I started getting direct feedback from the users who were already making it to the platform, but I could also send tests out to external testers via the user testing platform.
I used Trello for the Epic and card management. As per previous projects, I have split the project into cards based on each product view. After a completion of each card, I'd run an internal test & apply the view to every Admin to start early internal feedback sessions.
Once we have completed a simple event view setup, I started external users testing for each view.
User testing
In order to test this design on external users, we have released the update in a smallest market with limited events. This way, I started getting direct feedback from the users who were already making it to the platform, but I could also send tests out to external testers via the user testing platform.
The tests did not result in any major set backs, so we were close to start the A/B testing on major domains.
A/B Test & gradual release
A/B testing & release
We are using a gradual release approach and introducing the new page to the smallest markets first. We then use the A/B tests for every event type on the major domains to determine the impact of the new implementation.
First, we have released the standard event type and later on introducing the recurring event type (as in this case the user flow is drastically changed).
We then run continuous A/B tests with the ideas that did not make it to the MVP & “fun” ideas we picked up from the competition research.
First, we have released the standard event type and later on introducing the recurring event type (as in this case the user flow is drastically changed).
We then run continuous A/B tests with the ideas that did not make it to the MVP & “fun” ideas we picked up from the competition research.
Final thoughts & learning
Overall, I'm quite proud of this proud of this project as it only took 2 months (March - May) from the concept to the release to complete - a deadline required in Billetto.
I learned how to create new assets in Figma as I have previously mostly relied on the pen-on-paper wireframe & a quick mockup with copy-paste elements. This was the first project that allowed me to work with Figma a bit more & learn.
I learned how to create new assets in Figma as I have previously mostly relied on the pen-on-paper wireframe & a quick mockup with copy-paste elements. This was the first project that allowed me to work with Figma a bit more & learn.
I am currently working on the B2C Design System for Billetto, and as part of it, I will also tackle a cleanup of this projects' assets and fix some of the simple layout issues.
