fabulous beyond
From a template-built website to a new bespoke, responsive built, including an update on the branding.
Previous version
You can see a slide presentation here.
Process
We took an iterative approach on this project because this way we can have the research as a foundation and then come up with an idea, test it, check it with the client, implement the findings of the testing and test it again.
Empathise
BACKGROUND
The company has been in the business for only a couple of years, but they’ve been very successful in the events industry, specifically the bottomless brunch/dinner events. They’ve been offering shows, to big group hens, stags, birthdays, 4 hours drag queens shows, and male dancers’ dinners across the UK. They are the only ones in the UK offering a long full drag queen’s show.
Challenge
The client was looking to improve their user experience by creating a checkout flow and optimizing the whole product to a bespoke responsive version. By improving the information architecture, a visual language of the site, and adding a feature to purchase tickets, we hope to increase traffic, sales, signups and offer a reliable customer journey to the users.
Calendar
Define
Research interview
4/5 people book tickets for their group.
3/5 of them compare prices before buying tickets.
5/5 agreed most important info about an event: location and theme of events
5/5 agree Dice, DesignMyNight, RA, Eventbrite are among the most popular sites to buy tickets.
5/5 prefer to book tickets on a laptop in case they miss or tick the wrong option and because some of them take their time to compare and research.
3/5 think frustrations are outskirt location, sharing data, paying for the group, and then trying to get the money from your friends, sometimes the process of buying tickets can be lengthy or confusing, and can be worst when is a multiday event.
4/5 usually find about events on Facebook, Instagram, Google as ads or stories.
4/5 have a very active social life.
Competitors analysis
The direct product competition is very small and realistically it can’t be compared to what they have to offer since it has lots more options, some of these other products also lack basic features such as ticket sales, FAQs, or search options. The other kind of competition, the indirect one, is the kind of big-events-discovery products where you can find an extended variety of events. The well-known names on the board below tick all the boxes as you would’ve expected.
Ideation
Information Architecture
From a user perspective the previous structure they had was disorganized, confusing, redundant at some points, and it seemed out of control. I conducted a card sorting to help with the organization and also researched and compared it with other similar products structure to come up with a much user-friendly response.
Wireframes
Initially, we had three options. Most of these options featured a prominent search bar as this is a common pattern in other products where the user usually goes to find an event or a ticket and there are other options. The first one featured an advanced search bar to make the user journey simpler, you could look for an event by category, date or city, followed by two other patterns to find an event. This is similar to the third option but with a different design pattern. On the second the search option is minimized to the bar menu in the top corner but keeps the other ways to find an event.
You can see the below wireframes here
Below is the first option further developed. This option offered a better solution to the user's initial needs.
Click here to see the below frames
Main user flow
We learned that the user usually finds about events on social media platforms, so on the map below we can see the potential journeys they could follow to buy a ticket on this product.
UI DESIGN
The previous logotype was not user-friendly enough, it has legibility problems, effects that don’t help with this, and also it looked a little dated, some of the fonts used wouldn’t be legible in a small size version. The new options kept elements from the original, also colours and placement to not look completely unrecognizable, we added a new colour palette to look more fun and appealing to a younger user type, this also give us more dynamism, flexibility, and options to play with.
The new colour scheme is bright and fresh, the high contrast conveys high energy inspired by what the brand brings with every event and also by the younger target audience the events are focused on. There are two fonts added, Oswald for headlines this font is a reworking of the classic gothic typeface style historically represented by designs such as 'Alternate Gothic'. The characters of Oswald have been re-drawn and reformed to better fit the pixel grid of standard digital screens. And Lato for copy, this family goes from thin all the way to ultra-bold, it’s very flexible.
User testing
Usability Test Plan
We tested a high-fidelity prototype with 5 participants with previous experience buying events (brunch, shows, gigs) tickets online. The methodology was a moderated usability test, remotely with zoom in most cases and 1-2-1 in one of the cases. We tested the homepage and the main user flow to buy a ticket.
Usability insights
On the events description page, 4/5 users agreed that the description should come first before then the details of the ticket.
Also on the events description page, on the ticket details section, 3/5 of people feedback that the calendar should show only available dates for that show to make it easier for the user.
2/5 users commented that on the checkout page, on the personal details section, there should be an option for ticket delivery maybe or an online ticket.
1/5 said on the checkout page, on the payment details section, there should be more specific details (date, time...) on the pink section; where the summary of what is buying.
1/5 also observed that on the checkout page, on the payment details section, needs to be added a check box for subscribing to the newsletter
1/5 users found that the order number should be included on the confirmation page
2/5 noted that on the private event page, there should a full list description of basic info about each kind of private event, like the minimum number of people and what is included in the party.
1/5 suggested a screenshot button on the confirmation page.
1/5 said that the event page needs to show the names of events.
Iterations
All the pains in frustrations observed in the previous step were taken into account and changes have been actioned to tackle these issues.
On the Events Description page, the description text of the events was moved up to the top
Also on Events description page, in ticket details, the calendar shows
only available dates for the show selected
On the Check Out page, in the payment details section more specific details (date, time...) were added to the summary of what is being bought
On the Check Out page, in the payment details section, a check box for
subscribe to newsletter was added
The order number was added on the ‘Confirmation page’
A screenshot button was added on the ’Confirmation page’
You can see the final prototype here.