Beyond Touch
Otter Agent!
SeeM is a startup making art education accessible through a web app that creates AI-curated exhibitions based on user interests or custom text prompts.
First Social Game on Your Apple Watch
Social Gameplay that Leverage the Onboard Hardware of the Apple Watch
[Project Overview]
Otter Agent explores social gameplay experiences that leverage the onboard hardware of the watch, sucha as the heart sensor. Our team consider the potential demographic, from middle school students to young professionals who often use these watches for safety and communication purposes. This project is also supported by a Senior Apple Engineer, Dr. Gierad Laput. Please visit our project website for more details.
[Highlights]
Drove design ideation and aligned key stakeholders
Led design from concept to high-fidelity prototypes as a Product Designer and Co-Producer on a cross-functional six-person team.
Conducted weekly reviews with a Senior Apple Engineer to ensured compliance with Apple’s HIG, and accessibility standards.
Design development and media production:
Improved player retention by 38% through iterative user testing.
Boosted downloads by 19% by editing a commercial video and designing a project website to engage the target audience.
[App Store Launch]
[Problem Statement]
The platform struggled with a 40% cart abandonment rate during checkout. Users encountered unclear error messages, redundant fields, and poor mobile optimization, leading to frustration and drop-offs.
Jhon Roberts
Marketing Manager
I just want the checkout to be quick and painless—no surprises or unnecessary steps!
Age: 29
Location: New York City
Tech Proficiency: Moderate
Gender: Male
[Goal]
Quickly complete purchases without interruptions.
Trust the platform to handle her payment securely.
Access a seamless mobile shopping experience.
[Frustrations]
Long or confusing checkout processes.
Error messages that don’t explain the issue.
Poor mobile optimization that slows her down.
HEADING
The product’s nature—website or web app—was unclear at the start.
Only key features were defined, leaving room for interpretation.
✅ Refine the Product Requirements Document (PRD).
To address the ambiguity in the product requirements, I collaborate with lead designers to refine the Product Requirements Document (PRD) and mapped out the site architecture of the webapp:
🧠 Establishing a Cohesive Visual Direction
Began by researching best practices to define a mood board that aligns with the product vision.
Identified two common types of web services: web apps and websites.
✅ Propose early concepts as conversation starter
Designed Home and Search page wireframes for both web app and website formats, comparing interaction flows and content hierarchy.
✅ Brought clarity to the product strategy.
Collaborated with the PM to refine the Product Requirements Document (PRD) for clearer direction.
[02] Refine key features
✅ Took ownership of three pivotal pages: Home, Search, and AI Curation.
Early concepts informed high-level directions, but they also revealed many challenges and complexities.
✅ Conducting user testing for early concepts
Ran online user testing with an interactive Figma prototype.
Synthesized user feedback with the design team to refine concepts.
Home Page
⭕ Website: Poor navigation
Unclear CTAs, interactions, and button states caused navigation confusion.
The landing page lacked emphasis on AI-generated exhibitions.
⭕ Web app: High dev effort
Resizing artworks for new exhibitions posed challenges.
Heavy information density on artworks page leading to cognitive fatigue and reduced engagement.
Product team prioritizes showcasing exhibitions over individual artworks.
✅ Iterations: Clear and scalable navigation
A web app is a more suitable option to support the full functionality of the product.
Clarified three main tabs to highlight key functions: Curated Exhibition, Art Piece, and Exhibition Generation.
Made CTAs more explicit (e.g., clarifying “Learn More” vs. “Enter Exhibition”).
Search Page
⭕ Confusion between generic search and AI-driven search functions
Users were confused by the current AI-driven search function, as they expected it to operate like a generic search function.
✅ Iterations: Two Distinct Entry Points
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.
🤔 How to help users easily discover contents through generic search?
Our site features diverse content—curated exhibitions, artworks, artists, and art movements—making it potentially difficult for users to search what they need efficiently.
🧠 Categorize existing content and research best practices
Define what materials users can access on our platform.
Researched best practices to structure and categorize contents for better discoverability.
Google Arts enhances its dropdown menu with icons, making it easier for users to identify various content categories.
Slack’s dropdown interface incorporates multiple tabs, allowing users to easily switch between different content types.
✅ Propose differnet solutions and get buy-ins
Proposed multiple design solutions to improve filtering for generic search results.
The final design shows clear pathways to relevant content, which enhances user experience by making navigation clearer and reducing any potential confusion between categories.
[03] A fully comprehensive design deliverable
✅ Prototyped key interactions to enhance clarity and alignment
Designed simple animations and interactive prototypes to keep users engaged while exhibitions are being generated.
✅ Clear design deliverable for engineering handoff
Created detailed user flows to guide development and ensure seamless user interactions. See below examples:
✅ Consistent Visual Language & Reusable Components
Collaborated with lead designers to build a design system, ensuring visual consistency in the web app.
[Outcome]
25% increase in checkout completion rates.
30% reduction in cart abandonment on mobile devices.
40% improvement in perceived ease of use, as measured by post-launch surveys.
[Key Learnings]