Context

Presella was an online startup that eliminated risk from events by preselling tickets and guaranteeing a certain number of attendees before proceeding with the actual event. Events only happened if they presold their target number of tickets. I came up with the startup’s idea when applying to a startup accelerator program competition in 2012. We were selected among the top 8 ideas, won series A funding, and were accelerated for 6 months.

My Approach

During the initial period of the startup accelerator program competition, I listened to all the other teams and individuals pitch their ideas. I wasn’t really convinced in any of their ideas. I had some ideas of my own back then, but I wasn’t really convinced in any of them either. I decided to wait and give myself more time to think.

Crowdfunding was becoming a trend and was on the rise at the time. It was a big thing, but everyone was doing it, so I didn’t want to come up with “just another crowdfunding website”… I wanted something slightly different.

I was at a good friend’s party event one night. He was a really good DJ, and I had organized an event with him in the past. Not many people showed up to his event, even though many people had said that they were “attending” on the Facebook event page. As a musician myself, I used to sometimes face the same issue back in the day when I had a rock band and we organized our own events. I was thinking that it was a pity, because these events were actually pretty good musically, but the attendance was sometimes weaker than what we had hoped for. This was a common problem that event organizers have. I wanted to find a solution to that problem. That’s when the idea struck me. What if there was a way to secure attendance to an event!? We can do that by something similar to the crowdfunding concept, and let’s market it as “preselling” or “preticketing”. The startup was born.

The UX Challenge

Besides designing a web app that was intuitive, user-friendly and awesome… my main challenge was that we had 2 main types of users: event organizers, and event goers.

How can we easily explain the startup to each of these user types and tailor it to each of their needs?

My Role

My role was to design and prototype the website. In order to properly do that, I first had to define the target audience and user personas, define and understand their needs, come up with all possible user journeys, and optimize their UX. I had to also conduct user testing sessions and make sure that the website looked good, was easy to use, and that users easily understood what the startup does.

My Process

I followed the double diamond design thinking approach and a lean UX approach as I normally do. Below are the steps I took:

1. Product Research
I researched other online ticketing websites, event websites, and crowdfunding websites.

2. Definition of Target Users
I defined and created user personas of our two main types of users: event organizers and event goers.

3. User Empathy Interviews
I interviewed and talked to several event organizers and event goers from my social circle to better understand their concerns, what’s important to them, their pain points, how they think, and how they usually do things in the events domain.

4. Assumptions & Validation
I made assumptions about my users and their needs, and then created, distributed, and gathered surveys from a sample of target users in order to validate those assumptions. As soon as they were validated, I was ready to start working on the next step.

5. User Journeys & Flows
I created user journeys and user flows for each of our user types.

6. Prototype Design (Wireframes)
I designed the initial prototype website’s wireframes, exploring several options and ideas for each of the website’s sections along the way. I gathered some internal feedback, and selected the options that we assumed were the best, and made them into a preliminary prototype for testing.

7. Usability Testing
– I printed my protoype’s wireframes and printed the wireframes of similar competitor websites to test them with users and get feedback about features and flows.
– I tested them with users and did some rapid prototyping where I changed certain elements in my wireframes on the spot and got new feedback.
– I took notes on how users acted, where they clicked, where they looked, what they saw first, what they liked, and what they disliked…

8. Prototype Improvement
After processing all the user feedback I got, I refined my prototype and came up with an improved one based on all that feedback.

9. Focus Group Testing
I tested the new prototype with a focus group of event organizers who were possibly going to become “power users” of our website.

10. Prototype Refinement
I adjusted the prototype based on their feedback.

11. UI Design
I designed several options for the website’s UI, gathered feedback, and chose the best option based on the results.

12. User Testing
I tested the prototype with its new UI on target users and got feedback and validation.

13. Delivery
I finalized the Beta version of the prototype and delivered all the needed resources to the development team to start working with them on development.

14. Continuous Improvement, Testing, & Releases
After testing the released Beta website, I made improvements on it, we added some features, and we released an improved 2nd version of the website. This cycle continued, and the website got even better with each release.

Option 1: Emphasized Explainer Video & CTA

My original plan was to emphasize explaining what the startup does, in order to gain more users, so I made the explainer video the largest thing on the homepage. I placed a big, clear call to action button next to it for user acquisition. In this option, most of our communication was oriented towards event creators.

Option 2: Emphasized Events

After some testing and some business-related decisions, we ended up choosing the option that highlighted featured events above the fold instead of just having a big explainer video there. The reason for that was because we wanted to encourage event ticket sales. Our plan worked, because our decision resulted in increased event ticket sales. The explainer video was still placed on a focal point of a Z-pattern layout, which also still got views and signups, so it was a win-win.

Event Creation Process

The question posed here was should I divide the long event creation process into parts or keep it as one long scrollable page? If divided into parts, then how many steps should I make it? I decided to divide it into 4 steps: Basic Info, Description, Tickets, & Other… with each part having no scroll at all. It made sense, and made the process seem shorter.

Exploring Event Page Layouts

The event page design took a lot of user testing and feedback to reach an optimum layout that converts visitors into buyers.

Website Release & Evolution

After the website’s initial Beta version was first released, the website’s 2nd version was released, and kept evolving and improving with each release over the following months, with the same lean UX approach being implemented.

Success Indicators

• In its first month after the 2nd release, the website gained 1000 new paying users.
• Website’s gross ticket sales went up, reaching 25,000$ in 1 month.
• The website received a lot of positive feedback from users, and the startup got a lot of positive media coverage and hype. For a good while, it was the hottest startup in the Lebanese tech startup scene.