Seem - AI Driven exhibition
Jun - Present 2024, UX Designer, 0->1 Web App Design
SeeM provides affordable, high-quality, interactive, and personalized learning experiences for everyone while also helping museums expand their reach and create new revenue streams. As a UI/UX designer, I contribute to democratizing educational resources by transforming university museum exhibitions into immersive digital experiences enhanced by AI-driven features.
Highlights
Lead design ideation & solutioning:
Led the development of both low and high-fidelity prototypes and final design assets to communicate interaction and design ideas for the Home, Search, and AI Generation pages of the Metaverse Museum web app.
Defined requirements and overall UX strategy in collaboration with product managers and lead designers, providing creative solutions aligned with business goals.
Cross-functional collaboration:
Collaborated with lead designers to build the design system from the ground up.
Worked with the product manager and designers to conduct user tests and evaluate feedback.
Problem Focus, Product Requirements
● Develop
Summary
Problem
Local and university museums face declining attendance and financial losses, while educational institutions and underprivileged individuals report a lack of engagement and access to quality art.
Solution
An affordable, high-quality and interactive web app transforming exhibitions into digital experiences enriched by AI-driven features.
Inspiration, Brainstorm
Wireframe, User Flow, User Testing
Product Design, Prototype, Technical Implemetation
● Ship Designs
● Deliver
● Define
Success Metrics
Users can find their interested exhibition the first time they use the app.
Process
● Discover
Define
Home Page
Navigate ambiguous product request document (PRD)
To address the ambiguity in the product requirements, I collaborate with lead designers to refine the Product Requirements Document (PRD). According to the PRD_v1, the homepage should display:
Daily recommended exhibitions (generated by AI) based on the user's browsing history
Trending Artworks This Week & Randomly recommended artwork
Entrance to the Search Function
Home_v2: focus on immersive experience
Home_v1: focus on Daily recommended exhibitions
Poor navigability
After user testing, I found that the key problem of the homepage_v1 is:
a lack of clarity in the homepage's purpose, CTAs, and interactions, leading to confusion about navigation, button states, and content differentiation.
the landing page fails to emphasize the platform’s primary focus on AI-generated exhibitions.
Fails to emphasize the product’s primary focus on AI-generated exhibition
Home_v1_Keyscreen_Unclear Content differentiation
Develop
Define Problems After User Testing
Trending Artwork - Confusion about navigation
Increased development effort & unclear hierarchy
Increased Development Effort: Home_v2 offers a more immersive visual experience by mimicking real-world museums, but the development team noted increased effort, particularly in resizing artworks for each new exhibition.
Hierarchy Problem: The product team likes the infinite scroll but prefers to highlight exhibitions over individual artworks.
Left: Resizing artworks increases the development effort
Right: Individual artworks are prioritized over curated exhibitions
Home_Exhibition
Home_ArtPieces
Hover over individual exhibition pieces to view the entire artwork
Infinity Scroll
Deliver
Final Home Page: An Immersive User Experience
Design an immersive experience that highlights the AI-curated exhibition
Redesign the navigation and layout to highlight our exhibition instead of individual artwork
Explicit CTAs, intuitive interactions (e.g., scrolling), and infinity scroll implemented.
Ideation
Early Concepts
Propose initial design concepts: traditional website vs. immersive web app
I proposed two versions of the homepage design:
one resembling a traditional website featuring a hero image of daily recommended exhibitions,
and the other as a web app that emphasizes an immersive experience.
Home_Activate Search Bar
Define
Search
Address the complexibility of the search function
Again, I collaborate with lead designers to refine the PRD. According to the PRD, the search page should display:
Users activate the full search page by interacting with the search bar, where they input keywords
Recent user search history and potentially other recommended searches
AI-driven search
Ideation
Early Concept
AI-driven search: highlight the AI-generated exhibitions
According to the PRD, I proposed an early concept that allows users to input keywords for generating exhibitions, along with a landing page that recommends weekly trending exhibitions.
Define
Problems after user testing
1. Confusion between generic search and AI-driven search functions
During user testing, I discovered that users were confused by the current AI-driven search function, as they expected it to operate like a generic search function.
To address this, I proposed to the product manager that we implement two types of search functions: a generic search and an AI-driven search. The latter generates exhibitions based on user input using AI.
Additionally, the layout of the search page needs to be rethought. I propose separating the AI generation feature from the generic search function to minimize user confusion and clearly differentiate between the two functionalities.
Deliver
1. Entrance - Provides easy access to search directly from the homepage.
I consider various user states (typing, clicking search, etc.) and provide clear guidance for search input (e.g., words, phrases, prompts)
Left: Search bar and recommendations for trending exhibitions.
Right: AI-curated exhibitions based on user input.
Generic Search: A Seamless User Experience
Three sections: generic search results, search history, and exhibition generator
Four sections based on materials users can access on the platform
2. Dropdown Menu - Allows users to quickly access different types of content.
The final design shows clear pathways to relevant content, which enhances user experience by making navigation clearer and reducing any potential confusion between categories.
Dropdown Menu_Final_Max Length
(Before) Menu: only one entrance for search
(After) Menu: two seperate entrances for generic search and AI-search
2. Complexity of the dropdown menu.
I discussed with the product manager key questions such as what materials users can access on the platform.
After researching similar platforms like Google Arts and Slack, I proposed various design solutions to discuss potential ways to filter generic search results.
The three-section menu does not clearly convey information, while the four-section menu can only display a limited number of results.
3. Search Result Pages - Consistent Design Language
The search result pages maintain a consistent design language with the dropdown menu and across the web app platform, using rounded shapes for artists and square ones for art genres, for example.
Most of these elements are reusable components, ensuring design uniformity and efficient development across the platform.
Search Result_Artist
Search Result_Artist_No Result
Search Result_Artwork
Search Result_Exhibition
Search Result_No Exhibition
Search Result_Art Genre
I also considered edge cases, such as scenarios where there are no search results, to ensure we don't lose users:
For instance, I designed a "You may also like" section engage users.
I also included CTAs encouraging users to generate exhibitions if there are no existing exhibitions available.
Loading Animation - Makes the waiting time enjoyable
Display AI Generation Results - Show three curated exhibitions at a time for easy access.
Menu - Easy navigation to exhibition generation page
Upon clicking the AI search button, the system analyzes the input keywords and user history, displaying a loading indicator as it curates a personalized exhibition.
AI Generation: A Personalized User Experience
AI-driven Search - enables users to generate own personalized exhibitions
The design empowers users with personalized, AI-driven content based on their interaction history.
Outcomes:
Product Launch:
The development team is currently developing the prototype, while the UI/UX team is designing additional features, including the points and rewards system.
The expected launch is in early October 2024.
Reflection:
Conduct user testing and incorporate constructive feedback into the designs.
Collaborate with the product manager to define design requirements and develop the design system from the ground up.
Balance development effort, product requirements, and user experience.
Take ownership of design concepts, provide constructive feedback on other designers' ideas, and propose solutions based on their constructive feedback.