After more than seven years of designing, improving, and optimizing digital products, I decided to seek new experiences and prepare myself for international challenges.As soon as I started applying to several companies, I was interviewed by a European startup. This startup provides access to hundreds of thousands of tickets (events, museums, cinemas,...) at the lowest prices. Following an interview with the CEO, I received a design challenge.You can see the design challenge that I was given along with my solution and design below.
Design Challenge:
I was asked to redesign the “Ticket position selection” step in an event's ticket booking funnel. This product, however, allows the user to select only a section and seat row, not a specific seat.
Challenge description that was sent to me:
The challenge is to redo this page to improve its usability (you can change any element of the page).
Limitations:
Providers do not tell us the specific seat for any entry, we only receive the section and row.
Requirements:
The date and time of the function must be displayed.- The font has to be Aperçu Pro.
Research and analyze:
Well, I had 7 days to complete this task, so I had ample time to thoroughly review the product. As the step (two-step) of selecting the ticket position was given to me as a challenge, I needed to analyze and check the entire booking funnel.
the previous step of the “Ticket position” step is to select the ticket number, and the next step is to check the invoice.
Generally, this funnel consists of six steps, beginning with the selection of the day and event and ending with the invoice payment.
A closer look at the entire ticket reservation funnel revealed a lack of coordination, integration, and a number of user experience problems.
This challenge involves redesigning these two pages:Selecting the section and Selecting the row of the ticket. In these two steps, there are various user experience issues:
On each of these two pages, there is a map of the event venue in the center of the page. However, this map is static and cannot be zoomed in or clicked. It is also not clickable.
Each section has its own price range, but only the starting point is included (From $162).
In spite of having a color map, the colors used in the map were not used in options to help the user distinguish between sections faster in the initial scan and select the section that he wants. Having the option to change the number of tickets is a great idea, but the option is not clearly visible.
and...
Competitors Research:
After analyzing the funnel and identifying the problems of the ticket selection step, it was time to start researching and benchmarking the competitors and their products. I checked out 10 of the successful platforms for booking event tickets.
There was a common feature that all similar products had: an interactive map. It allows the user to zoom the map and select the part of the map he wants.
Ideate:
After analyzing the competitors and identifying the advantages and weaknesses of each platform, I began redesigning this page from scratch.As a first step, I made a list of ideas I think could make this step easier for users:
After that, I decided to redesign the previous step of selecting a seat, the Ticket number step, since it was important to keep the option position on the mobile screen in a consistent manner in order to maintain integrity in accordance with the Law of Reachability when using mobile phones, along with the Consistency in user experience.
As you can see in the above picture, the controller for selecting the number of seats is displayed as a modal page in the middle of the screen, but the options for selecting the ticket position (next step) are displayed at the bottom of the screen.In order to fix the funnel's consistency, I recreated the Ticket number step:
So, users are able to choose for example 10 tickets with just one tap instead of hitting the “+” button 9 times!
Now, It’s the time to focus on the design challenge
To improve the user experience, I always come up with various ideas, the most important of which can be found below:
Create an interactive map.
Full display of event information (at all steps of the booking process).
Displaying the range of prices at each location.
Once the ticket position has been selected, display the total amount.
Sections should be separated with different colors and each option should be displayed according to the color of its section.
And...
Designs and Solutions:
Following ideation, implementation was the next step. As I had no user data and was not aware of the product's technical and business limitations, I asked them about my needs, but they told me to design without any data, and with an open mind. So, I decided to design two versions of this challenge and in the presentation session, I will demonstrate the advantages of each design and the values that each design adds to the user experience.Here are the two versions I designed for this project:
First Version:
In this version:
All selection boxes were positioned at the bottom of pages to comply with user experience principles, such as consistency.
At each step, the information of the previous steps can be viewed in the above box.
To select a high number of tickets (for example 10), you should not click on the “+” button 9 times (like their current design) and now, it is possible to select 10 tickets with just one tap.
As you can see in the above picture, the users can select the section with a minimal illustration of each section, also they can see the price range and when they change the section, the map will jump onto that part of the map. So, it’s fully interactive which can help users to get it faster!Then, users can see how many tickets are available in that section and select the appropriate row by clicking "Select row".
Here, you can see that each row group has its own color to help users identify faster. When a row is clicked, the other rows will lose their color by 50% to ensure users know where they are.In this case, the "Checkout" button appears right after selecting a row. The bottom of the page contains a fix position box with some useful information for users, including the total amount they have to pay and the number of seats they have chosen. Clicking on the number of seats also allows users to change the number of tickets.
Before vs After:
Version 2:
in this version:
Section selection and Row selection have been combined into one page (step).
The main reason for this etude is that every step in a funnel will have a drop rate. In other words, each step of a funnel will have some user drop rate, so removing one or more of the steps can increase the number of users completing the funnel, resulting in an increased conversion rate.
Having these 2 versions of the design challenge made my task so powerful and ready to present to the CEO in the meeting, but suddenly they notified me that they hired a person who was referred by their investor! So, I was not given a chance to present my design solutions. It's up to you to judge my design solutions.
After more than seven years of designing, improving, and optimizing digital products, I decided to seek new experiences and prepare myself for international challenges.
The launch of the DSP service was the most important project for the Aparat service in 2021 and 2022. It allows businesses and individuals to distribute their advertisements across the platform automatically.
"Teams" is a social network application for amateur football players. "Teams" enables people who wish to play football but do not have enough friends or teammates to form teams and attract similar players...
It's been a while since the launch of the service, and we were driving mass traffic to our landing page, where users who landed on the landing page were all directed there by clicking on the marketing's banner ads.
The better and more accurately we explain and introduce the DSP service to users on its landing page, the more customers we will add to this service, which is directly related to the increase in the revenue of Aparat.
It is well known that the notification system plays a vital role in enhancing user interaction and engagement rate with products. If I wanna deal with this project quickly, I must point out that "Aparat" did not utilize a proper notification system.
SnappMarket had been operating in the Iranian market for over two years, and due to its rapid growth, it realized that there was a need to improve its quality in order to provide users with better service...
Think of 404 as essentially a landing page. Then think about how much more work goes into a regular landing page than an error page. A well-designed 404 page can make a huge difference in how a user experiences a brand.
