UX/UI DESIGN
THE PRODUCT:
This app was designed for a fictional museum called the Downtown Museum in order to allow users to find information about the museum and book tickets quickly and easily.
THE DOWNTOWN MUSEUM
March 2024 - July 2024
THE PROBLEM:
Users can be frustrated by apps not having clear and easily available information and having complicated ticket booking processes.
THE GOAL:
To design an app for the museum that allows the user to view the schedule for a specific date and book tickets quickly and easily.
MY ROLE
UX/UI design lead
UX research lead
RESPONSIBILITIES
UX research, paper and digital wireframing, designing mockups, low and high-fidelity prototyping, conducting usability studies, iterating designs based on feedback, among others
USER RESEARCH
PAIN POINTS
USER PERSONA
I conducted user interviews with participants that are either consistent museum visitors or have an interest in visiting museums. I then turned the results of the interviews into empathy maps to better understand the needs of potential users. I discovered that some users find other museums apps complicated to navigate and frustrating to find information about what is happening at the museum on a specific day. This turned an experience that should be exciting into a source of frustration.
PAIN POINTS
1
NAVIGATION
Users often have trouble finding the exact information they need.
2
OVERWHELMING
An excess of elements can cause users to become overwhelmed and frustrated with their online experience.
3
SCHEDULE
Users want to see what is happening on a specific day so that they can plan the best time to visit.
USER PERSONA: MARGARET
PROBLEM STATEMENT:
Margaret is a grandmother and art teacher who needs to see what is on exhibit and book tickets easily so that she can share her love of art with her family and students.
USER JOURNEY MAP
My main goal in designing this app was to make it as easy as possible for anyone to navigate and use. Minimizing frustration for the user and making the whole process as pain free as possible was at the forefront of my mind when making most decisions.
STARTING THE DESIGN
PAPER WIREFRAMES
DIGITAL WIREFRAMES
LOFI PROTOTYPE
USABILITY STUDY
PAPER WIREFRAMES
Paper wireframes were created after taking inspiration from many websites for popular museums and other attractions.
DIGITAL WIREFRAMES
One of my goals for the home page was for the user to be able to get to the ticket booking page without having to look at any other pages. Initially, the calendar on the homepage would also display the schedule for whatever specific date they chose.
Featured events carousel that allowed users to see what’s happening at the museum at a glance
Link to book tickets is always at the top to ensure quick and easy access
Calendar to make picking a specific day easy (later moved to its own page)
User can clearly see what date they have chosen
Section to show what is going on on the chosen day
Shows what is currently on exhibit
LOW-FIDELITY PROTOTYPE
Shown here is the lo-fi prototype for the main user flow of booking tickets for a day trip. The goal was to make the main user flow as simple as possible while also including all of the necessary information that the user may require. I wanted multiple starting points into this user flow from the home page.
USABILITY STUDY: FINDINGS
Findings from the first usability study
1
Users did not like when they clicked on the calendar on the home page, only to be shown another calendar.
2
Users found the page with the exhibits for the day to be too crowded and the images to be too small.
REFINING THE DESIGN
MOCKUPS
HIGH-FIDELITY PROTOTYPE
ACCESSIBILITY
MOCKUPS
After usability study
Before usability study
I chose red for the accent color to draw attention to the buttons that are important to the main user flow. On the home page I eliminated the calendar in favor of a section for showcasing the wings of the museum.
Before usability study
This page is meant to inform the user of what is happening on a chosen day. The exhibit section was a little too cramped so the number of columns was decreased.
After usability study
HIGH-FIDELITY PROTYPE
.jpg)
The high-fidelity prototype mirrors the low-fidelity one but with added design elements and with changes made based off of the usability study.
ACCESSIBILITY CONSIDERATIONS
1
I made sure to use different sizes and weights for headings to create a clear visual hierarchy.
2
Made use of clear landmarks on the page to help users (including those who use assistive technologies) navigate the app.
3
I included alt text for images to assist users who utilize a screen reader.
REFINING THE DESIGN
TAKEAWAYS
NEXT STEPS
TAKEAWAYS
IMPACT:
I received feedback from users saying that the new design was easy to navigate and visually engaging with the added images and pop of color.
WHAT I LEARNED:
I learned that the design process is ongoing and there are endless changes that can be made but the most important changes are the changes that truly improve the experience for the user.
NEXT STEPS
1
Create mockups and a prototype for the remaining pages.
2
Identify further areas that need help and iterate the designs to improve those areas.
3
More work to implement accessibility features such as a menu that allows users to turn on and off specific accessibility tools.