Frida Kahlo Museum
CASE STUDY OF RESPONSIVE WEBSITE
(Fictional project developed in the Google UX Certificate)
The Frida Kahlo Museum is an iconic place to visit in Mexico City for both tourists and locals. The visitors are mostly tourists between 20 and 50 years old.
The goal is to design a responsive webpage with an efficient and enjoyable booking tickets feature.
DATE
-
December 2022 - January 2023, Mexico City
ROLE
-
UX / UI Designer
RESPONSABILITES
-
UX research, competitive audit, wireframing, mockups, visual and graphic design, prototyping, usability testing, iterating.
The problem
The Museum hosts long lines of visitors trying to get in every day. The museum has limited capacity, so sometimes people queue for hours, and there are even people who don't get tickets.
The goal
Design a responsive website with an efficient and enjoyable booking tickets feature. The user flow must be easy, intuitive, fast and enjoyable.
Process
1 UNDERSTANDING THE USER
User personas
Pain points
Limited time
Most of the users want to enjoy their time visiting the museum not making lines to get in.
Venue capacity
Some visitors felt frustrated waiting in line only to not being able to enter due to the capacity of the space.
Payment options
Users need different options of payments than cash, which is the only available payment method in the museum box office.
2 STARTING THE DESIGN
Ideation
After empathizing with the user and running a competitive audit we discovered the opportunity of including not only day but time in the tickets purchase flow to solve the limited time and venue capacity pain points of users.
Sitemap
A sequential sitemap model was selected to ease the booking ticket flow, which is the core task of the website. To make the process concise and enjoyable it was important to summarize and minimize the quantity of screens and information.
Paper wireframes
I drew various versions of each page and then selected the best features and compositions of each one to include in one refined version, keeping in mind to solve the user’s needs and pain points.
Screen size variations
Digital wireframes
The priority was to make the booking experience easy and fast, so a clear call to action was implemented in the home page for booking tickets.
To add emphasis I decided to use a hero image in the section.
When designing screen size variations for the mobile experience, it was important to keep the emphasis on the booking tickets button.
Low fidelity prototype
Usability study
parameters
TYPE OF STUDY
-
Moderated usability study
LOCATION
-
Mexico City
PARTICIPANTS
-
5 participants
LENGTH
-
10 - 15 minutes
Usability study
findings
Design
There was a lack of clear navigation cues, users couldn’t go backwards to edit their order.
Checkout
Some users were confused when placing their order because there was not a “payment confirmation”.
Payment options
Users couldn’t use alternative payment options like paypal or apple pay, only credit card.
3 REFINING THE DESIGN
Mockups
To improve user flow and navigation signals, we've added a progress bar to the top of the page that tells users how close they are to finishing. In addition, we add a banner with the details already selected and a modify button in each step of the booking process.
Mockups
Original screen size
Mockups
Screen size variations
High fidelity prototype
Desktop
Accesibility considerations
Headings with different sized text for clear visual hierarchy.
Landmarks to help users navigate the site, including users who rely on assistive technologies.
Color palette accessible for visual impairments.
Going forward
TAKEAWAYS
Impact
More than 500 users have reserved tickets through the new site since its launch. The Museum now receives a limited number of visitors per hour and no longer has long lines.
What I learned
The needs of the user should be front and center at every stage of the design process. This results in a more efficient design process and satisfied users.
NEXT STEPS
Include various payment options like paypal, apple wallet, etc.
Identify any additional areas of need and ideate of new features.
Refine visual design.
Thanks for reviewing!🌺🐦
Let's connect
alejandrazapata.art@gmail.com
