The San Francisco Museum of Modern Art holds a large collection of modern and contemporary art from around the world. This app provides easy access to all SFMoMA collections and additional helpful resources, such as Audio Tours and exclusive Artist Interviews.
Process DeckMarch - June 2020
Research, Ideation, UX Design, UI Design, Prototyping
Adobe Illustrator, Adobe XD, Figma, Adobe After Effects, Framer
Mobile Application (iOS)
“The primary purpose of a museum is to help people enjoy, understand, and use the visual arts of our time.” - Alfred H. Barr, Jr.
The San Francisco Museum of Modern Art has always been a favorite local museum of mine. Until recently, I never realized the amount of resources the museum provided and that they could be so useful when visiting. For example, audio tours are available for selected exhibitions, which could be especially helpful for people who want more background on the pieces and the artists.
How can I combine all online and in-person resources the SFMoMA provides into something more easily accessible and usable for visitors without detracting from the museum experience?
It was important that I explore what other museum apps were doing and what user needs they may not be fulfilling. I used user interviews to determine vital features that users needed in museum apps and identified which ones were present in other apps.
I found it useful to test similar apps to find features I enjoyed and could improve upon. Once I finished trying out both apps I chose, I wrote down some of my observations:
The competitive analysis provided me with plenty of new ideas and potential features that I wanted to implement in my app. However, before designing, I wanted to spend some time brainstorming how this app could be organized. A lot of users can get intimidated if they are exposed to too many features at once, and I wanted to create an experience that offers a simple design and is organized clearly so users are not confused or overwhelmed. Some questions I had to solve through this process include:
How might I organize all the features and information in this app?
How might I ensure that users find what they are looking for and can intuitively navigate the app?
How might I alleviate some of the pain points users are currently facing?
How might I create an app that adds to the museum experience instead of distracting users from it?
.png)
Once I determined a general structure for the app and features, I created a detailed app flow outlining where each feature would be placed within the app. This helped me visualize the organization of all the content in this app before I began wireframing the main screens. I also used this structure to create basic user flows.
.png)
A crucial step when designing the interface is thoughtfully choosing and applying a grid system. This simplifies the job of the developers who code the design as everything is placed according to a grid structure.
I chose to adhere to the 12-point grid system because it is the most flexible and responsive system. 12-point grid systems are great for a variety of content and are ideal for card-style layouts, like the SFMoMA app. Whenever possible, I aimed to stick to the grid with all the UI elements.
.png)
Due to COVID-19, I did not have the opportunity to meet with potential users for user testing. Therefore, I conducted all 7 testing sessions online through Zoom using online prototypes. I met with 4 current students, 2 parents, and 1 senior. The variety in ages and background allowed me to gain different perspectives and feedback to improve the app and better suit user needs.
.png)
After three months of research, design, and reiterations, I finally arrived at my final solution: an app that provides users with an elevated experience in and out of the San Francisco Museum of Modern Art. The main pages can be seen in the videos below.
Click through the full Figma prototype!
When first opening the app, users are taken to the discover page, a personalized home. Everything is organized by type of material and can be saved for later, in case the user cannot read or watch it at the moment. Every full card page, such as an Article or Artist Interview, has suggestions or relevant information toward the bottom to promote user engagement.
.gif)
This live map provides users with directions to exhibits and different areas of the museum, including restaurants, restrooms, and elevators. Users can use the map to explore different floors and exhibits they are interested in. Location must be turned on for users to use the map feature and Audio Tours. Audio Tours are only available in the exhibit they are related to, preventing user confusion.
.gif)
The Shop page provides a virtual experience of shopping at the SFMoMA Museum Store and in-museum dining. Users can browse the collections, add to cart, and purchase within the app. In addition to the SFMoMA store, users can view more details on the in-museum dining options and reserve seats to efficiently use their time inside the museum.
.gif)
Tickets are a crucial part of the museum experience, and many users mentioned that the ticketing process was a pain point early in the research stage. This page allows users to purchase and view tickets and allows them to access all relevant information and material for visiting, like parking, directions, and transportation options.
Toward the beginning of this project, I felt overwhelmed by the amount of organization and working parts that were involved and needed for this app to be successful. Looking back on all the work I have done, I feel proud to have accomplished so much on my own. Through this project I learned the importance of user research and interviews. In previous team projects, we often overlooked this part of the project due to limited time. However, these steps were crucial to my success with this project, as they provided insights and feedback I lacked from working alone.
One important thing I learned from this project was how to use whiteboard and paper wireframes to provide guidance and clarity on organization and flow. It is tempting to get straight onto the computer and start designing, but because I held back and explored more, I discovered I was less overwhelmed and found better ways to implement the needed features and user flows.
This project also taught me not to get too attached to my designs as I constantly had to reiterate and redesign multiple parts of this app. I often get fixated on a design I initially visualized and then find it difficult to redesign it. However, this is crucial as the redesigns provide a better user experience and a simple user flow.
Take the time to follow a process because it will help iron out issues early on. Do not get too attached to any aspect of the project and always stay open-minded to improvements.
Make sure you check out the full process for the SFMoMA app here! 😊