La Platea
Mobile & Web App
Role
UX research, UX-UI design, prototype and testing
Technologies
UXPressia, 10.0000000 Post-Its, Photoshop, Figma, Illustrator
Team
In collaboration with Ariadna López and
Ricardo Sánchez
Duration
November 2018 till
June 2019
The Challenge
& Our design process
The brief that we were given for this project, was to find a way to improve the experience of going to the theater.
Before we started working on this project, we studied how to work with the methodologies such as Scrum and Kanban, and approach the project by following the Agile Manifesto, which means creating our product incrementally, and improving it in brief periods of work times called "Sprints".
The whole process lasted for almost 7 months of research, learning the needs of our user, interviews, wireframes, user interface design and testing our work every 3 weeks.
01. Research
Market Analysis & Proto-Persona
We started by researching the theaters that exist in Barcelona, occupancy of the venues, a benchmark of other websites that sell theatre tickets, the daily amount of shows, and average earnings of tickets sells, to understand, where can we stand out.
After we had gathered that information, we started building our proto-persona, this way all the members of the team were able to be aligned and understand who do we think we will be designing for.
To do this we did 60 surveys, our first user journey map, based on our proto-persona, to understand the pain points, touchpoints, and the moments of truth of our supposed user. Now we were ready to go out to the field to start interviewing real users to validate our work.
We discovered that only 22% of theater ticket sales were made
through online channels. This due to the complicated process and
lack of information offered by current platforms.
02. Define
User Persona, Pain Points & Project Definition
We discovered that young adults were an interesting segment of the population to focus on our project "La Platea", they were users with an interest: being part of culture and visiting more often the theaters, but weren't able because they didn't know where to find or search for plays easily.
After interviewing 25 people from different backgrounds, we were able to define our user personas:
PRIMARY
”Anna, is a 26 y/o woman from Barcelona, looking for something fun to do in her free time, she enjoys going to the theater, unfortunately, it is a bit expensive for her, she's able to go only once or twice a year.”
SECONDARIES
”Alex, It is very cultured. He knows quite a bit about theater and thoroughly enjoys it.”
"Laura, she is not very interested in the theater, however, it does not seem bad to go once and again to accompany a friend who wants to go.”
OUR USERS PAIN POINTS
The moment of searching
for shows in Barcelona, it was hard for them to find the right information.
The process of purchasing
the tickets, it is usually a long and complicated process & many places they force you to make a registration to purchase a product.
The moment of going
to watch the show, many times they were disappointed with their choice because when purchasing the tickets they didn't have enough information.
Leaving a review
most of our users like to read reviews, but they never leave a review.
”We decided to create a web for searching and purchasing theater tickets, in a way that will be easy, fast and familiar to young people who want to go to the theater in Barcelona.”
03. Organize
Backlog, Release Planing & Sprints
We defined our user stories following the structure of "As a (type of user), I want (some goal) so that (some reason)”, and only after we finish writing them all we were able to organize our Product Backlog.
After that we divided our User stories into 5 different sprints according to their size, in our case, we divided them using T-shirt Sizes (XS, S, M, L, XL). Also, we gave each story a DOD (definition of done) and DOR (definition of ready), and after giving each sprint a similar score (17 points each), we were ready to decide when will our product be ready for the first MVP.
04. Ideate
Benchmark, Design Sprint & Lo-Fi Wireframes
Before we started planning our web and designing it, we did a lot of benchmarking, we investigated companies related to the theater like circus solei, Tiketea & more, but we also investigated other companies and products that were not related to our web, such as, Zara, Disney, Mango, CaixaBank, and many more.
In the Design Sprint we decided to solve one problem, in our case was the search for new theater show, which in early stages of the process, we discovered that this was a pain point for our user.
During the week we created hypothesis for our problem and possible solutions
We designed Lo-Fi Wireframes and a simple prototype to test our ideas with real users. In the end of the week we tested our design, to verify if our hypothesis and solutions were the correct.
05. Build
Hi-Fi Wireframes,
visual design & prototype
Mobile First...this was our approach for the whole project, we started by building our Hi-Fi Wireframes for mobile, then we adapted them to PC. After we finish each stage of wireframing, we created a basic prototype to verify and test our flows with real users.
06. Visual &
User Testing
Color palette, Typography, Icons, CTA & More...
We started working on the visuals of our app & site, We decided to go with a color palette that speaks with the world of theater, dark color palette to remind of the darkness, a pinkish reddish CTA, that comes from the curtains of the theater and gold.
We wanted something clean, that will accentuate the posters of the shows, but still we wanted it to be as impressive a show you go to see in the theater.
For the font, we choose Montserrat Family, because it is a very moderns and clear font, and has different weights, that will help in the design process.
Every two weeks we prototype our advances and tested our web to understand what our user appreciates and which parts of the design were not clear for the user.
