OVERVIEW:
Choco Story Brussels is a museum and chocolate tour experience in Brussels, Belgium. They offer guided tours in multiple languages, as well as several workshops and chocolate demonstrations.

PROBLEM:
There isn’t a way to purchase museum tickets online. The site is also not mobile-friendly.

SOLUTION:
Provide a mobile-first design with an intuitive way to purchase single tickets in advance, as well as book group, guided, or individual tours.
DELIVERABLES:
Competitor analysis, personas, customer journey, sitemap, wireframes, high-fidelity mockups, prototype

TOOLS:
Pen and paper, Figma

DURATION
2 weeks
Discover
Competitor Analysis
Choco Story Brussels has 2 indirect competitors (Godiva, and See’s Candies), and 2 direct competitors (Brussels Chocolate Museum, and the Chocolate Village). The key purpose for the indirect competitors is to sell chocolates whereas the direct competitors are trying to sell tickets and experiences.
Persona 1
“I need to book a guided tour for my school group."
Goals
Make a reservation for school group
Find a workshop to book

Frustrations
Choosing a type of tour
Knowing the difference between tours and workshops

Sharon, 48 years old, booking a school tour

Persona 2
“I want a unique experience during my trip to Belgium.”

Goals
Find an experience unique to Brussels
Purchase tickets before arriving in Belgium

Frustrations
Purchasing tickets online

Palo, 25 years old, traveling abroad for the first time

CUSTOMER JOURNEY
The customer journey includes an emotional indicator that helps us to visualize where the pain points were in the flow and helped to influence the information architecture.
INFORMATION ARCHITECTURE

After analyzing the original site structure, it was determined to have fewer main navigation points. This would make it more clear to the user what the museum offers in terms of experiences.
Design
WIREFRAMES
Some rough sketches of wireframes were made to get a basic idea of the layout and content structure. These were made for the home page, ticketing page, guided tour information page, payment process. These were later refined into hi-fidelity mockups.
HIGH-FIDELITY MOCKUPS
High-fidelity mockups show the desktop and mobile flow through the buying process.
Develop
MOBILE INTERACTIONS
Mobile interactions show the ticket buying process.
Deliver
USER RESEARCH
I conducted user research by sending out a survey asking about the experience of the prototype. I asked the following open-ended questions to users:
What types of products do you buy online?
What types of products do you avoid buying online?
What's the most frustrating part about purchasing tickets online?
What would you expect to happen during the checkout process?
What do you like most about the checkout process?
What do you like least about the checkout process?

CONCLUSION
After analyzing the responses, I concluded that the checkout process needs a review portion before confirming payment. Many users noted that this was expected for an online checkout process. If I were to make another iteration of the prototype I would include an additional screen to confirm the order before asking the user to confirm payment.
Cover photo from Pexels.