InspireAI

Efficiently manage file and boost creativity with AI

Time

2023.10 - 2024.04

Current Status

MVP Testing

Team

PM/ PO, 1 Lead Designer + 3 Designers , Dev Team

My Role

Lead Product Designer, UX Researcher

Challenge

Address the complexities of managing and retrieving diverse digital content.

Solutions

Created an AI-powered platform with smart tagging, semantic search, and personalized inspiration cards for efficient content organization and inspiration boost.

My main contributions

  1. Led the product design lifecycle with cross-functional teams.

  2. Designed and iterated 30+ intuitive user interfaces.

  3. Directed responsive design for the card-related layouts , ensuring compliance with WCAG 2.2 standards.

  4. Led weekly internal testing, identifying and addressing 40+ UI/UX issues, reducing response times by 18%.

$1.8 M

Investment attracted by the product mockup

89%

Positive feedback rate during Beta testing

35%

Users showed willingness to pay for subscription in the initial survey

01 Context & Research

A quick question:
How many tools do you use to collect inspirations?

Problem: Where's the All-in-One Content Tool?

Content and inspirations scattered across tools, leading to inefficient management, organization, and retrieval.

Understanding the Vision: Previous Product Mockup

AutoArk's vision: Create an AI-powered file management platform to centralize content and boost productivity.

Initial mockup showed diverse content types unified in a single interface with automatic organization.

Key User Behaviors And Corresponding Functions

To turn the vision into practical product features, we conducted stakeholder interviews, revealed 4 key user behaviors with corresponding function modules.

We also collaborated on researching user scenarios, user flow, and specified core features. Click to see the detailed research

🤯Market Reality: Competitors Already Doing Well

Market analysis of competitors' performance in the content management workflow revealed they already excelled in essential functions, which left us questioning:

What Makes Our Product Stand Out?

  • I brought this question to Product Manager, and he revealed an unimplemented "Copilot" concept in our product vision.

  • This AI-driven feature, designed to provide users with inspirational ideas.

I realized the significant business opportunity here:
The Copilot AI feature can be our unique selling point in the market!

02 Challenge I: Unlock the Potential of Copilot AI feature

Challenge:
Transform AutoArk from a simple file management tool into an intelligent, inspirational platform using the Copilot AI feature.

I draw a diagram to mapping out strategies and tactics:

Exploring Ideas: 3 AI-Generated Content Concepts

Concept 1: Serendipity Engine

An 'engine' randomly presents contents based on algorithms that detect latent relationships between seemingly unrelated content.

Concept 2: Inspiration Pin Board

A customizable white board where users can 'pin' content, with AI recommendations for new pins appearing in a bottom panel.

Concept 3: Inspiration Digest Report

Users receive a compilation of inspirational content based on user activity and set preferences at daily or weekly.

However, I got the push back from PM:

“No, these are NOT what we looking for”

Realigning Through Design Workshops

After the initial proposals were rejected, I took the following steps to realign our approach to the Copilot feature:

  • Conducted a design workshop to reassess our direction. Click to see the detailed workshop report

  • Identified that our previous solutions were too passive, failing to actively engage users in their current tasks or thought processes.

  • Collaboratively defined three key design principles for Copilot:

Real-time inspiration

Interactive with users

Simple and Intuitive

Brainstorming AI-Generated Content Scenarios

Applying these principles, I collaborated with another designer to brainstorm some AI-powered scenarios.

The team agreed these scenarios were "on the right track," aligning with our new vision for a more active and engaging Copilot feature.

📚 Scenario 1

AI created study Plan for users who want to be Data scientists

💚 Scenario 2

AI made an aesthetic collage for users' home decor ideas

📋 Scenario 3

AI made an automatic to-do list based on user's content

🧘🏻‍♀️ Scenario 4

AI created a meditation music list for burned-out users

Designing the AI Logic System For The Engineering Teams

To translate conceptual scenarios into a concrete system structure, I developed a comprehensive logic diagram that visualize how the AI would process user data and generate insights.

This framework ensures all team members have a clear, shared understanding of the system's functionality, and provides a framework for developers to implement the Copilot feature.

The Simplified Logic Chain: From User Input to AI Output

Comprehensive Copliot AI System Architecture

User Interaction Flow with Copilot AI

👍 I presented my solutions to the team, and everyone was so excited!


💰 The co-founders also want to present the idea to VCs!!

Creating a User Story to Win Over VCs

👩‍🎨⏳ To win over VCs & illustrate the Copilot's potential, I guided 3 designers to created a user story showcasing personalized fitness inspirations.

I started by wireframing user scenarios with detailed guidance.

Polished User Story: AI-Generated Fitness Inspirations

✨Copilot AI Panel Final Design

Intro Banner for first-time users.

AI-generated cards Loading…

AI-generated cards loaded √

Inspiration card detail page

Outcome: Copilot AI Becomes key strategic pillar

  • Its intuitive design and powerful AI logic system impressed both our team and potential investors.

  • By providing real-time, contextual inspirations, we created a unique value proposition that sets our platform apart in the competitive digital content management space.

03 Challenge II: Optimizing Card-Based Interface

Problem: Overwhelming Card Variety

It can create an overwhelming browsing experience for users, hindering efficient content discovery and management.

Defining Card Types and Information Displayed

To address this, the design team discuss to summarzie the content types in our system. We specified 10 card types and their detail information to be displayed.

🖼️ Image

📄 PDF

🎵 Audio

📹 Video

🌐 Website

📝 Text

📋 Quotes

🎟️ Stickers

📧 Email

I Made Desk Research on Card-based Products

  • We needed to determine the most effective card layout for all card types.

  • I conducted comprehensive desk research on card-based products and media, comparing same height vs. varied height layouts.

We Love This: Fixed Width, Varying Heights

  • After internal discussion, we chose this layout for its flexibility in content display and visual appeal.

  • However, this could bring challenges in scanning and locating documents.

Fixed-height

Varying-height

Validating Design with Usability Tests

To validate our choice, we conducted a simplified usability test with 7 participants, focusing on comparing these two layout options. Click to see the process

Observations according to user feedback:

  • Users identify content types more quickly in the varying-height layout.

  • Users mentioned feeling slightly overwhelmed by the non-uniform layout initially.

  • Most users preferred the varying-height layout after becoming familiar with it.

Refining Card Layouts to Reduce Overwhelm

We decided to proceed with the varying-height layout but recognized the need for consistent design principles to reduce initial overwhelm.

Action 1: developed coherent padding and layout patterns

Action 2: established height rules for similar content types

✨Final Interface Design Balancing Creativity and Efficiency

Card cascading

Detailed card pages displaying more information

04 Design Handoff & Reflection

Design Handoff

Home page + Inspiration (Dark mode)

Home page + Inspiration (Light mode)

Design System (Partial)

Responsive Design for All Screens

In response to the feedback from PM and developers, I collaborated with a design team member to implemented responsive design, and got the cudos from the develop team!

Leading the Design Inspection Process

  • Create and manage inspection documentation, maintain a comprehensive list of design elements and their implementation status.

  • Hold weekly meetings with to discuss design implementation challenges, provide clarifications and additional details as needed.

  • Conduct design reviews, and iterate on designs based on technical constraints.

Reflection: Navigating a Rapid Tech Landscape

🌟 Innovation is challenging but rewarding

I led the creation of an "inspiration panel" when ideas were scarce. Despite the difficulty of thinking expansively, this innovative approach led to breakthrough concepts.

🤼🏽‍♀️ Monitor competitors closely

I continuously tracked competitors, analyzing their new features, and relevance to our model. This vigilance kept us ahead in the market.

⚡ Prioritize ruthlessly in startups

In the fast-paced startup world, time management is crucial. Deciding on MVP features versus future developments required strategic planning and resource discussions.

My vision: Post-MVP Enhancements

🎯 Implement more A/B testing for design decisions

🔁 Create continuous feedback loops with dedicated user cohorts

🚀 Experiment with bold AI features, e.g. customized card cascade interfaces