Engage. Explore. Evolve:
Redesigning SFMOMA for All
AR Experience
ML Integration
Personalization
Inspiration
As a passionate music lover, I’m often selective with playlists, yet finding one that truly matches my mood can be challenging. One day, while taking photos to capture the moment, I realized how powerfully visuals convey emotions. This sparked an idea: why not connect photos with music? This led me to imagine a way to bridge photos and playlists, intuitively blending my specific mood and moment with the perfect music, without the hassle of browsing countless options.
Role
Product desginer
Timeline
May 2023 - July 2023
Project
Personal Project
tools
Figma / Figjam
Adobe Photoshop
Adobe Illustrator
Overview
The Problem
Unpopular Application
Limited information on exhibitions and insufficient features in the SFMOMA app may deter users, impacting their museum experience.
The Solution
Interactive And Informative Experience
A gamified AR experience can enhance museum visits by letting visitors collect artworks and providing exhibition insights, ticketing, and mapping services.
Design Process
Key Features
Gamified AR Experience
Entertainment with new insights
By leveraging AR technology, the SFMOMA application maximizes user engagement through interactive and immersive experiences, bringing a new dimension to their museum visit.
Exhibition Information
Comprehensive Exhibition Details
Get up-to-date information about exhibitions on view. Users can access details on featured artists, artworks, and additional context, enabling a deeper understanding of the exhibitions and enhancing their overall experience.
Convenient Ticket Purchase
Schedule the visit and skip the line
A seamless in-app ticket purchase feature, allowing users to conveniently and securely buy tickets for museum entry directly from their mobile devices.
Research
Understanding SFMOMA
SFMOMA, the San Francisco Museum of Modern Art, is a leading museum of modern and contemporary art in the U.S. Established in 1935 as the West Coast's first museum dedicated to 20th-century art. Located in downtown San Francisco, SFMOMA aims to be a vibrant cultural center of Bay Area, providing an enjoyable environment for exploration and fostering deep connections with art.
Exploring Challenges
Current Application
Landing
Home
Map
More
Opportunities to improve
Limited available information about the artists and exhibitions, and some of it is outdated and insufficient for a satisfying experience.
The oversized buttons, confusing icons, and flat image map make it challenging for users to intuitively navigate and explore the museum.
SFMOMA 2022 Data Dashboard
In number of 408K visitors for the year of 2022, visitors are coming from…
San Francisco
Other Bay Area
Elsewhere in USA
Elsewhere in CA
Overseas
40%
19%
16%
19%
6%
59%
from San Francisco and other Bay Area counties
Branding Identity
"Simple Yet Bold"
Logo
The bold and minimalist logo, featuring the initials "SFMOMA" in a clean and simple typeface, conveys a sense of modernity and simplicity.
Color palette
Primarily consists of a vibrant red, often used with white or black.
This combination of colors creates a visually striking and energetic identity.
Typography
Typically bold and contemporary, reflecting the museum's commitment to modern and contemporary art.
Research 2
Why Augmented Reality? and why collect them?
01
Bring Entertainment
Drawing inspiration from the mobile game Pokemon Go, collecting AR can naturally encourage users to explore the museum by building their collection as they walk around.
02
Psychology of Collecting
Collecting something brings joy and sense of achievement. By collecting AR artworks, user makes personal connection with the artwork and feel accomplishment.
03
Break the Boundaries
Making opportunities to contemporary artists who works on digital to present their works to user collaborating with artworks of masters in the museum.
Research Insights
I have conducted 10 in-person interviews with individuals who have experienced visiting SFMOMA.
Three of the most significant problems they experienced.
Hard to know about what kinds of exhibitions are on view before visit.
The museum get crowded especially on weekends. Waiting at least 10 minutes to get ticket is not convenient
Don’t see uniqueness than other museums, wish to see more various genres and new features.
How Might We Question
How might we create interactive and immersive AR experiences to engage visitors of all ages and backgrounds?
01
How might we provide up-to-date and comprehensive exhibition information to improve visitors' understanding?
02
How might we facilitate in-app ticketing feature to streamline the visits and reduce wait times?
03
Initial Thinking
Understanding the local characteristics
Art Enthusiasts
San Francisco, the city known for its vibrant arts scene, there are many art studios and passionate individuals thrive. Art enthusiasts would go to SFMOMA to explore artistic inspiration.
Engineering People
In Silicon Valley, engineers are one of the most common groups. Through research, it was observed that while many engineers may not have deep understanding about the arts, they still have had enjoyment in museum.
Family with Kids
For the kids, art museum is a new type of playground. SFMOMA attracts families in Bay Area looking to show arts to their kids and engage in interactive and educational experiences that can promote creativity.
User Persona
Art student
Ebony
San Francisco, CA
Goal
“I want to understand the artists and artworks to fully enjoy the exhibition. With deeper depth of understanding, enjoyment expand accordingly!”
Pain point
Searching around every paintings and artists takes extra time.
Hard to know what exhibitions are currently on view or not.
Software engineer
Jeff
San Jose, CA
Goal
“I seek new sources of excitement that can evoke my creativity and take me away from the work.”
Pain point
Getting bored on typical ways of displaying artworks in art museum
Mom of two sons
Olivia
Berkeley, CA
Goal
“I want to visit museums with my kids on weekends. I hope museum to be easy to access for both parent and kids.”
Pain point
Kids don’t like to wait in line to get a ticket
Frustrated when it’s hard to find museum facilities
Ideation
Low Fidelity Sketches
I started with drawing interface with potential solutions to organize my thoughts and flows.
User Flow
↑ Click to see the image!
Mid-Fi Wireframe
Medium Fidelity Wireframe Design
After ideation sketches, I designed mid-fi wireframes to check interactions and flows between different screens on usability testing.
Testing and Iterations
Usability testing and Insights
I conducted usability testing with three participants who are matching with the persona. I found priority issues through testing and I made three different versions of iterations until I make the Final Design.
Wireframe 1
Iteration 2
Iteration 3
Final Design
Priority issues
● Finding ticket and artist information was not easy to re-access.
● Overlapping title on the image caused legibility issues.
● Bottom navigation with similar icons without text was confusing.
Developments
● Built fast access buttons for 'My Ticket' and artist information.
● Changed exhibition card layout with enlarged image and text.
● Simplified navigation with four features with icons and texts.
Iteration Insights
01
Establish a clear hierarchy among many informations depends on user needs, prioritizing the most important to the least.
02
Ensure legibility to keep users' attention; if the text or icon requires extra effort to read, it fails in accessibility.
03
Simplify complexity to prevent user exhaustion. Intuitive visualization significantly improves the user experience.
Creating Consistency
Design System
I created a comprehensive design system that illustrates what was used in the final design.
This allowed me to maintain unified brand consistency by organizing standardized design elements, components, and guidelines
↑ Click to see enlarged image!
Design Concept
Final Design
Discover art
Learn about artist and artwork
Home
Exhibition Information
About Artist
Artwork Description
AR Experience
Find and make it into collection
AR Library
Artwork Hint
AR Information
AR Design process
01
02
03
To conduct usability testing of the AR experience, I created an AR prototype.
Used Spline for 3D animation and Photoshop for image editing.
Applied GIF on Andy Warhol’s artwork in Spark AR.
Schedule ahead and pass the line
Easy purchase and save ticket in app
Schedule Visit
Ticket Type
Order Detail
Payment Method
My Ticket
Location-aware map
A Shortcut navigation guide to the destination
AR Nearby
Search Artist or Artwork
Introduce Re-designed SFMOMA
Landing and login
Landing
Login
Redesign Improvements
Major Improvements
I made three major improvements comparing to current SFMOMA application.
01
Home
Ineffective
design system
Oversized card with overlapping text on image discourage usability.
Lack of clarity
Outdated exhibition information cause confusion.
BEFORE
REDESIGN
Exhibition organization
Allow user to see exhibitions availability by time.
Unified Information
Exhibition card with layout system for better legibility.
02
Exhibition
Preview
Ambiguous CTA button
The CTA button 'Begin' is not obvious what to imply.
Text and image ratio
One image and loads of text.
BEFORE
REDESIGN
Preview images
Images enhance the visibility.
They draw attention to watch the exhibition.
Information hierarchy
Following to frequency of use, audio guide and location are placed on top of description.
03
Map
Flat and small image
Lacking on contents within the low pixel image.
BEFORE
REDESIGN
Intuitive keywords
Important museum facilities buttons for the fast access.
Shortcut navigation
Location-aware map guide users to destination in shortest time.
Lessons
Takeaways
01
Iteration always comes with improvements
While working on this SFMOMA Redesign project, I made a lot of changes and countless decisions. The iteration process was not always happy but it taught me how to refine the interface design, address accessibility concerns, and deliver a more satisfying experience to users by usability testing by incorporating their feedback on subsequent iterations.
02
Remind the point to do not get lost in the middle
It’s easy to lose the initial goal. The question that continuously resonated with me was, "How can I make art accessible and enjoyable for everyone?". This prompted a journey of exploration, leading to solutions that introduced the gamified AR experience. Through this approach, new form of storytelling was introduced, adding enjoyment and encouraging a deeper understanding and making connection with artwork.
Further Steps
01
Can't wait to see real-life demo of AR artwork
While creating the AR prototype with Spark AR, I became curious about how it would function in the museum setting. This project sparked my interest in learning Unity and exploring other 3D/AR programs. I'm looking forward to see taking partnership with artist and work with engineers who can bring this project to real-life!
02
Explore gamification techniques
One of the challenges that I faced was considering how to promote user engagement with AR feature. I realized interface and research for game should focus on how to make users more engaging. I want to spend more time exploring gamification techniques that can encourage visitors to collect artworks and stay with the app throughout their museum visit.
©2024 Biju baek
Go Back To Top
Thanks for visiting!
To fully enjoy this website, recommend to view on desktop.
\Made with love and a lot of coffee © 2024 Biju Baek
Let's connect!