Art Museum Mobile App
Timeframe: Winter/Spring 2024
Role: UX Research and Design
Deliverable: Mobile app prototype
As part of Google’s UX Design Certificate program, I designed a mobile application tailored for a conceptual art museum. While the design was not tethered to any particular museum, I drew inspiration from various Philadelphia-based institutions to shape its aesthetic and functionality.
The Problem
How can I design a mobile app that makes it easy for people of all abilities to plan a trip to the museum and navigate the museum after they arrive?
The Goal
Although mobile app design might not be museums' primary focus, my aim was to design an application that streamlines the museum visit experience, making trip planning and navigation effortless and inclusive for individuals of all abilities.
Userbase Research
As my first foray into UX, I wanted to design an application that was simple and accessible enough to use by anyone who would step foot into an art museum. Based on a combination of primary and secondary research, it was determined that the primary demographic of museum goers consists of educated young adults, followed by tourists. While creating hypothetical user personas, I wanted to cover a diverse demographic.
User Personas
Joseph is an international college student that has recently moved to the US for his studies. English is not his primary language, and he sometimes struggles to communicate while out running errands, ordering at a restaurant, etc. He has a passion for the arts and enjoys going to museums.
Neelam is an established education professional with 10 years of teaching experience. She is passionate about her job but sometimes has trouble managing the stress of teaching while also raising a young child. Neelam appreciates products that help her stay more organized and manage her time in the classroom and at home. She has a young daughter that she would like to expose to the arts, and wants to easily fit visits to museums in their busy schedule.
User Stories
Competitive Analysis
Philadelphia has a wonderful assortment of museums that I was able to research as part of the competitive analysis for my mobile app. To the right are some key takeaways that I gathered from the research and analysis of these institutions’ online presences. They all had a blend of positive features to draw inspiration from, and drawbacks to avoid.
-
Direct Competitor
Pros:
Clean and simple web presence.
Feature-rich mobile app, including accessibility features.
Cons:
Although the mobile app is loaded with features, it seems a bit over cluttered and bloated.
The layout of the mobile app could be simplified to be more user friendly.
Overall thoughts:
While the museum has a polished web presence as well as a fully-fledged mobile app, the app itself could use some work to be more user friendly to those who aren’t as technically inclined.
-
Direct competitor
Pros:
Cleanly branded website that conveys the image of the museum.
The website overall is simple and easy to navigate.
Cons:
No mobile app.
The main user story of purchasing a ticket to the museum could be simplified. The “plan your visit” page does require a good bit of scrolling to get to the “purchase tickets” button, which could be presented more prominently as well.
Text gets lost over images in several places.
Overall thoughts:
While the presentation of the website is well done and polished, the functionality of purchasing tickets could be improved and simplified.
-
Indirect competitor
Pros:
Website has a comfortable and simple layout.
The “get tickets” button is prominently displayed on the navigation bar.
The tone of the website is fun and playful, yet professional.
Cons:
The site could use some additional accessibility information.
Overall thoughts:
This site maintains great balance of both clean design as well as intuitive functionality.
-
Indirect competitor
Pros:
Polished and well laid out website.
The “buy tickets” call to action is prominently displayed on the navigation bar.
Cons:
No mobile app.
Overall thoughts:
It appears that The Franklin Institute had redid their website while I was conducting my research. Initially the website felt outdated and clunky. However now it is polished, laid out logically, and has strong branding.
Initial Solution and Designs
Hand Drawn Wireframes
Below are the initial hand draw wireframes I sketched on my iPad using Procreate. This allowed me to easily maintain consistent frames and UI elements across panels, as well as easily import the sketches into Figma.
Digital Wireframes
Below are the initial low fidelity wireframes I created using Figma. This was my first time ever using Figma, and I was pleasantly surprised at how intuitive and easy to use it is.
QR Code System
A main feature that I wanted to introduce with this app was a QR code scanner that would allow users to scan QR codes placed throughout the museum. The QR code links would lead to various content including a museum map, accessibility considerations, as well as information on exhibits, artists, and individual pieces of art. This would allow users of all abilities and languages to enjoy the museum in a way that is most comfortable and accessible for them.
While this feature is well-intentioned to provide comprehensive accessibility to the museum through available technology, it would require a good deal of up front thought and effort to coordinate a system of physical QR signs throughout the museum. Organizing this system could be potentially challenging, and would also require effort to maintain as exhibits, art pieces, and areas of the museum change. Determining the value to users and feasibility to implement would take further investigation and consideration that is difficult to conduct for an academic project.
Testing and Feedback
After the first round of initial designs were completed, I recruited some of my friends to test out the prototype and complete a user story. The test I conducted was an unmoderated prompt requesting participants to progress through a key user flow. I provided the test case and access to the prototype.
While I am grateful that my friends are all relatively tech savvy, some of them being designers as well, it also presents a bit of a bias in the results of the testing. In an ideal scenario, I would like to also encompass users that don’t have as much familiarity with technology and design.
Below is a summary of the result of the testing I conducted.
Refined Designs
High Fidelity Prototype
As I took on other projects and gained more skills and experience with UX design, the high fidelity prototype for this app seemed to go through a continuous evolution. Every so often I would revisit this design with fresh eyes and new knowledge and couldn’t help but make some tweaks.
The below images illustrate the progression of changes I made to the design over time. Some of the changes include implementing Figma’s auto layout, components, and Boolean variables functions. After learning how to effectively use these features, I wound up mostly revamping and reorganizing the whole prototype. At first I had designed everything on each individual frame by hand, which I eventually replaced but implementing a component scheme with variants for most elements including the navigation bars, buttons, cards, as well as a calendar.
In addition to functional changes, I also modified the color palette and font sizes to improve readability.
Key Takeaways
A major takeaway that I learned from this project has been to forgo perfection. The UX research and design process allows for multiple iterations and revisions after rounds of testing. While we want our final product to be as polished and user friendly as we possibly can, it’s also important to forgo perfection towards the beginning of the ideation and mockup process. In order to discover some truly unique solutions, you must be open to all possibilities, including some that might not be the best solution. As the product progresses and testers and stakeholders provide feedback, then you can refine the product into its most ideal form.
As this was my first attempt at UX design, it was crucial that I was open to not knowing everything up front and learning as I go along.