About The Project
THE PRODUCT
The Adjy Museum of Art is a museum located in a trendy, metropolitan area. The museum website is designed for the easy purchasing of tickets for all types of museum goers.
MY ROLE
UX designer and researcher creating a website for The Adjy Museum of Art from research to conception to delivery
RESPONSIBILITIES
Conducting interviews and user research, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design
TIMEFRAME
7 weeks
THE PROBLEM
The Adjy Museum of Art needs a brand identity and wants to structure their website to be both visually appealing and easy to navigate through.
THE GOAL
Design an elevated website for the Adjy Museum of Art that allows users to easily peruse it and purchase museum tickets.
Pain Points
I conducted user interviews and discovered that many target users were non-locals, wanting to visit local museums/galleries as a new, fun, and relaxing experience.
However, many museums/galleries can be overwhelming to navigate, which frustrated many target users. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of leisure.
1
Navigation
Museum/gallery website designs can sometimes be too busy, resulting in confusing navigation
2
Simplify
Target destinations can often be too nested in a website, making navigation difficult
3
Language
Those who are less familiar with English often find that there are few to no translation options easily available
Target User Group & Persona
-
“I love being able to visit many, different art exhibits and don’t want anything to slow that down.“
Li is a busy art student who doesn’t speak English as a first language who needs a language-accessible way to quickly and easily order tickets to art galleries because they want to broaden their visual literacy and become a better artist.
Paper Wireframes
I sketched out paper wireframes for each screen in my website, keeping the user pain points about navigation, browsing, and checkout flow in mind.
The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Screen Size Variations
Because Adjy Museum of Art visitors access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Tablet
Mobile
Digital Wireframes
Moving from paper to digital wireframes, I prioritized useful button locations and visual element placement on the home page as a key part of my strategy.
Screen Size Variation
To the right are wireframes for both tablet and mobile versions of the website. The goal was to keep the essential information present while also compacting the designs.
Tablet
Mobile
Low-fidelity Prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of selecting tickets and checking out.
Usability Study: Parameters
Study Type: Moderated
Location: United States, remote
Participants: 5 participants
Length: 10 - 15 minutes
Findings
1
Language Tab
The language tab is a little obtrusive and needs to be consolidated more
2
Redundancy
The second “buy tickets“ page for the purchasing process is redundant
3
Interactivity
Users want more micro-interactions when they hover over/click on items
Mockups pt. 1
Based on insights from the usability study, one of the changes I made was refining the language tab. This allowed users to view the homepage better, while still keeping the option for changing languages easily accessible.
Mockups pt. 2
I also got rid of the redundant page for selecting tickets, allowing users a more streamlined experience in the purchasing process.
High-fidelity Prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study. I also listened to the feedback of design peers and made several changes such as: stacking the logo in the navigation bar for a more compact look and minor kerning of letters.
Accessibility Considerations
1
Hover Zoom
Image hover zooming for clear and visible interaction with certain boxes and elements
2
Language
Side tab for site-wide translation into different languages for those who don’t use English as a first language
Next Steps
1
Conduct follow-up usability testing on the new website
2
Identify any additional areas of need and ideate on new features
Reflections
Mindfulness
I learned that there is truly, always more work to be done. You’re constantly growing as a designer and as such, you’re always going to catch little things that you could do or could’ve done better in hindsight. But also, that even a small design change can have a huge impact on the user experience. When designing for the user experience, you always have to put the user first. A feature that may work for you might not work the same for everyone, and you have to always keep that in mind. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.