See Tickets Mobile Site UX

User Experience /

See tickets

mobile site

Revamp the old mobile site to make it dynamic and have a smooth process for users to purchase tickets through.

Team

1x UX / UI Designer
4x Developers

Categories

Web Design
Branding

Creative Process

I researched and produced wireframes for the new mobile site, along with low fidelity prototypes to share with key stakeholders and users within the customer service team.

This helped me collect crucial feedback at the development stages to help improve the user interface of the final design.

Google Analytics

Studying user patterns and drop-off rates allowed me to fine-tune features to maximise the users experience.

Wireframes

Wireframes support me to concentrate on the correct positioning and layout in it’s most basic form, before design.

User Flows

Give me an overview of the process, allowing me to streamline the process and remove any unnecessary actions.

Prototypes

Creating prototypes allow me to test and make tweaks to the process before the development work begins.

Product Features

Users could view concerts around the world by using the search bar. I was tasked to personalise results based on the geolocation of a users mobile phone. This notified them and made them aware of any concerts going on within a set radius specified in the user’s profile settings.

By letting users create an account, I could streamline the user flow and reduce the click count to four clicks for the entire buying tickets and checkout process.

Adjustable Search Radius

Streamlined User Flow

Quick Payment Process

Research

I researched into user behaviour and current processing times. Timed as soon as the user searched for events, and ended after the transaction completed. This gave me an average timescale for each sale made.

I studied Google Analytics to look for any pain points where users dropped off regularly in the user flow and worked on those areas specifically to improve the overall flow.

I produced wireframes for the mobile site, along with low fidelity prototypes to share with stakeholders and users within the customer service team to gather valuable feedback.

The numbers

In comparison to the previous processing times, it took users on average 10minutes to search for an event, purchase the tickets, and receive their confirmation correspondence.

After streamlining the user journey, and working on the areas where the most amount of drop-offs occurred, we managed to reduce the average processing time by over 7minutes. A whopping 76% improvement in processing time.

%

PROTOTYpes

After researching into best practises and looking at ways to make the process as lean as possible for the users. I created my wireframes in Adobe Illustrator. 

LOCATION SCREEN

To start with, when a user enters the site, they are asked if the website could use their current location. This is to help keep events relevant to the user depending on where they are in the world. You could also use the search bar to search for events within a specific city or area.

SIGN UP & LOGIN

We gave users the ability to browse the website regardless of creating an account or not. However, when the time came to buy tickets, users would be required to Login or Sign Up.

Creating an account allowed users to ‘like’ and ‘follow’ events of their choice. Users could also save their details to speed up the checkout process when ordering tickets. As this is time-sensitive, the whole process a lot simpler and easier to complete.

HOMESCREEN

The home screen was designed into different sections to allow users to filter and easily search. You could search for a Date range, Location or Event type. Changing these filters updated the results on the homepage accordingly.

The home screen showed an infinite amount of events, with the ability to add individual events as your favourite. Adding a favourite event allowed users to navigate back quickly to that event at a later date.

When a user adds an event to their favourites, it gives the user the option to receive notifications announcing when tickets went on sale or if ticket allocation was running low. We didn’t want people missing out!

FILTERING & SEARCH RESULTS

To help users narrow down their search results, we added the ability to search a specific date range, events happening on that day, the following day, or coming up at the weekend.

As well as this, we used geo-location to bring in all the events happening within a set radius of the phone’s location.

Finally, if the user had a favourite genre of music or festival, then they could favourite multiple artists – these would be remembered and filtered for the user on the homepage.

TRACKING & DESPATCH

Sometimes tickets took longer to arrive than expected; users could check the state of their order. We created a Tracking and Despatch area, where we added various FAQ’s and outcomes to help the user out.

A progress bar showed users the state tickets were at, and when the tickets will get delivered.

TOUR PAGE

The tour page is where users select the date / location that they would like to see an event.

Certain events had promotional videos and pictures you could view by swiping through on the thumbnails. I also added a ‘Similar Artists’ area at the bottom of the page so the user could view other areas and events.

EVENT PAGE

The event page lets users select the number of tickets they require to add to their basket.

It also has additional information like the Seating Plan, Venue location and the directions.

CHECKOUT

The checkout area needed to be straightforward and easy to use as it was time-sensitive.

If the user hadn’t purchased tickets after 5minutes, the tickets then get released, and the user would have to go back to repurchase the tickets. This prevented robots bulk buying tickets, or people adding tickets to their basket and forgetting to purchase them.

Within the Profile area, if a user allocates their bank card, they would only have to click the ‘Buy Tickets’ button – this helped save a lot of time at the Checkout stage.

If the user doesn’t fill these text fields, then they need to do so before being able to complete the purchase.

other projects

STERIS ‘Collect & Deliver’ App

(Coming Soon!) UNiDAYS Native App

Ikanos LifeBoard

UNiDAYS Native App UX

User Experience /

UNiDAys

native apps

the problem

The challenge was to create a native iOS and Android application to replace the current dynamic website that was being used.

The outcome had to use the latest native UX best practices and expected user behavioural patterns to not alienate users. As well as this, the app needed to be as lean as possible.

TEAM

1x Android Developer
1x iOS Developer

My role

Native app research  //  User flows  //  Wireframes  //  Visual design  //  Prototyping  //  Testing

Exploration

The current dynamic site had a few areas that needed improving when going forward with the native app. Regardless of what operating system you had on your phone or tablet, you would always get the same design.

Other areas that needed to be taken into consideration were:

A lot of work needs to be considered with the top banner of the site, currently the touchable areas between buttons would fail usability standards.

The discount text at the bottom of each perk is too small as well as the ‘favourite’ icon.

Creative Process

I was responsible for creating the native apps using common practices and expected user behavioural patterns.

The functionality had to be slick, without compromising the premium screen estate.

To help us create the app that would take the business to the next level, our users would want to download and enjoy its simplicity.

We set out a roadmap to plan to help us gather the right information to set goals to help us deliver a world leading application.

Site Maps

Creating a site map helped me to get an overview of the key user routes that would need to be taken by the user whilst navigating the app.

Behaviour Patterns

Different operating systems require different user patterns, anything out of the ordinary may alienate users and put them off using your app.

Focus Groups

Having lots of people testing the app at the same time, allowed us to pin point any pain areas during the set tasks we set for the users.

A/B Testing

This allowed us to test specific sections and user flows of the app where we were not 100% sure on which outcome would be best suited for the situation.

Site maps

The very first area I worked on was the site map for the app, creating all the hit points and areas that users will be able to navigate to and use.

This covered the top navigation and the footer for the app.

Focus groups

We thought it would be a great idea to organise a focus group between staff across other departments of the company to try and get extra ideas that we could put towards the creation of the app, as well as to see if there was any consistent issues that we needed to avoid or improve with the current dynamic website that we had.

Brain Storming

Creative Planning

Intuitive Design

A/B Testing

This allowed us to test specific sections of the app and keep an eye on the behavioural patterns of our users when they landed on the relevant pages. 

Doing this gave clear results for which design we should use as one would work better than the other. If that was the case, we then phased out ‘Design B’ completely.

Native Design

Geo-Tracking Discounts

v

Customised Notifications

Whitby Morrison

PRINT DESIGN /

Whitby Morrison

Calendar

Whitby Morrison manufactures ice cream vans in the UK and export globally. We’ve been working with them since 2007 designing various brochures. A selection here shows our design for a ‘pop art’ van exterior, a calendar, Rapida brochure and a promotional DVD.

PRINT DESIGN /

Whitby Morrison

Calendar

Whitby Morrison manufactures ice cream vans in the UK and export globally. We’ve been working with them since 2007 designing various brochures. A selection here shows our design for a ‘pop art’ van exterior, a calendar, Rapida brochure and a promotional DVD.

PRINT DESIGN /

Whitby Morrison

Calendar

Whitby Morrison manufactures ice cream vans in the UK and export globally. We’ve been working with them since 2007 designing various brochures. A selection here shows our design for a ‘pop art’ van exterior, a calendar, Rapida brochure and a promotional DVD.

Stern Music

PRINT DESIGN /

STErn MUSIC

ALBUM ARTWORK

Released by Sterns Music, this is 4 cd series of re-released music from Kenya and Tanzania. The design ensures that each release displays its imagery but also feels part of a ‘family’ and, like the music itself, is extremely colourful. Each release contains a 16-page booklet featuring archive photographs and background information.

PRINT DESIGN /

STErn MUSIC

ALBUM ARTWORK

Released by Sterns Music, this is 4 cd series of re-released music from Kenya and Tanzania. The design ensures that each release displays its imagery but also feels part of a ‘family’ and, like the music itself, is extremely colourful. Each release contains a 16-page booklet featuring archive photographs and background information.

PRINT DESIGN /

STErn MUSIC

ALBUM ARTWORK

Released by Sterns Music, this is 4 cd series of re-released music from Kenya and Tanzania. The design ensures that each release displays its imagery but also feels part of a ‘family’ and, like the music itself, is extremely colourful. Each release contains a 16-page booklet featuring archive photographs and background information.

Carpentry Company

PRINT DESIGN /

Carpentry company

Identity

The Carpentry Company, based in Derby, provides a comprehensive interior decorating service for both private and commercial clients. We designed an identity which was applied to stationery and their shiny van.

PRINT DESIGN /

Carpentry company

Identity

The Carpentry Company, based in Derby, provides a comprehensive interior decorating service for both private and commercial clients. We designed an identity which was applied to stationery and their shiny van.

PRINT DESIGN /

Carpentry company

Identity

The Carpentry Company, based in Derby, provides a comprehensive interior decorating service for both private and commercial clients. We designed an identity which was applied to stationery and their shiny van.