After conducting an app comparison it was concluded that Line Up's main competitors were Eventbrite, Eventbee, Ticketmaster, Stubhub and Ticketleap.
After conducting the feature analysis it became clear that Line-Up's strengths was its wide feature set. This included: access to buyer details, setting the events own booking fee, split revenue and much more.
Based of this, we decided Line-Up didn't need any new features. We shifted our focus to enhancing the usability instead.
User Research & Results
I conducted observatory testing on 5 different users. They were given the task of creating an event that hosted Britney Spears in Toronto, Canada. The goal at hand was to measure the simplicity of completing the task and identify any challenges/pain-points.
Key Insights
.svg)
Users found the unstructured visual hierarchy hard to read.
-
When entering the event information the user found it difficult to read as the form was lengthy and unstructured.
.svg)
Poor usability leads to user frustration and application abandonment
-
The application was not reliable and the user often encountered bugs and error states. This led to information being lost, user abandonment of the task and a loss of confidence in the application.
.svg)
Does not follow Design Conventions
-
The user's mental models differed from the applications iconography, call-to-action buttons (CTAs) and empty states.
Affinity Mapping
Our user testing was conducted on 5 users with the existing mobile application. Our users were asked to complete the following task: create an event using the existing app to promote a concert for Britney Spears at the Budweiser Stage in Toronto. We performed observatory testing through contextual inquiry. We noted down the main themes and observations below. This allowed us to easily capture and categorize reactions and feedback from our users.
.png)
Journey Mapping
We honed in on the core user goal: creating an event. We then identified opportunities to improve this journey to reduce time to task and improve information architecture.
We mapped out user steps in creating an event to identify opportunities to improve their journey. The main usability issues encountered were: poor information architecture, insufficient error messages and task redundancy.
User Flow
We created a user flow outlining all the possible steps a user could take to create an event. This in turn was used as a high-level architecture for our proposed mobile application.
Low-Fidelity Wireframes
Low-fidelity sketches are the most efficient way to validate and iterate through design options quickly.
By focusing on our insights, I sketched a basic flow for the app, addressing navigation (adding a navigation bar), visibility of system status (progress bar on top) and usability (minimizing and structuring text where possible).
Mid-Fidelity Wireframes
In the wireframing stage, we rapidly applied feedback from the sketches above to create a click through prototype. We conducted observatory testing on users to understand how easily users could navigate through the application to create an event with no direction. We were focused on identifying areas of confusion or
frustration to improve our design approach. The key insights are noted below.
Users did not always have a ticket note for their event and did not understand why they could not proceed.
- Remove mandatory requirement event notes.
- Include error messages (e.g. please add an event description).
Users tried to make changes to the summary directly on the summary page rather than going back to previous steps.
- Make the summary page editable or inform the user that changes can only be made by navigating back to the previous steps.
Users were not able to select the add icon easily and therefore were not being taken to the next step.
- Increase the size of the add icon to improve accessibility.
Users provided feedback that the event creation process was too long.
- Consolidate steps where possible to time to task (e.g. allow users to add categories along with the event name and description).
High-Fidelity Wireframes
As I approached the final wireframes to be created I realized that some elements were not following design conventions; the information hierarchy could be improved on and that the applications branding was not being put to use. Thus I developed a UI Style Guide which can be seen below in order to bring cohesion to the applications user interface and overall experience.
UI Style Guide
Empty State Screens
In addition to finishing the overall product I realized several screen's would have empty states which may confuse some users. As such, I added illustrations to reduce user confusion and drive a better user experience.
Final Prototype
