HUMIND
UI | UX Design Internship
#E-Commerce
#B2B
#SaaS
#AI Agents
Role
UX Research | UX Design | Product Design
Team
2 Co-Founders
2 UI | UX Designers
2 Software Engineers
1 Product Marketing Manager
Timeline
4 months (September 2024 ~ December 2024)
Throughout the Fall of 2024, I worked with HUMIND as a UI | UX Designer to alleviate the overwhelming shopping experiences for customers of online retail companies and come up with Design Guidelines for HUMIND.
HUMIND is a B2B SaaS E-Commerce Startup that streamlines the customer journey with an AI-based Sales Assistant.
Process & Projects
September
November
October
December
Design Systems
✅ Logo Design
✅ Color Palette
✅ App Icon Design
✅ Chart Graphics
✅ Logo Motion Graphics
User Interviews
2024
Researched & Synthesized User Pain Points for online shopping experiences
✅
✅ Shopping Experience Flow
✅ Low-fi & Hi-fi Web Interface
AI Nudge
✅ AI Agent Ideation & Design
✅ AI Agent - User Interaction
AI Product Search Page
Impact
+36%
User Satisfaction
x160%
User Conversion Rate
Introducing HUMIND
Humanizing the Shopping Journey
HUMIND is an AI B2B SaaS product for E-Commerce,
with the purpose of humanizing the shopping journey through personalized AI Sales Assistants.
The Problem
The Overwhelming Shopper Experience
Online shoppers have to browse through a sea of products to find the product they are looking for..
Shoppers are exposed to too many products at once which leads to :
Extra time wasted on arriving at their final choice
Frustration on understanding product features
Overall.. an overwhelming shopper experience
HUMIND's Current Solution
AI-powered Search Page
Personalized product recommendations by AI :
Time saved on arriving at their final choice
Advice & Guidance on understanding product features
Overall.. a humanly shopper experience
Current [AI Product Search Page] Design
Key Features
AI generated Shopping Assistant provides personalized product recommendation
Interaction with AI Shopping Assistant to be in real-time and as human as possible
However this version was just proposed a rough idea by the Co-Founders and required Validation & Redesign
The Objective
Redesign the AI Product Search Page & AI Nudge Interaction
for User Conversion
1st Draft
User Experience Research Takeaways
To understand user perspectives of online shopping experiences and identify knowledge gaps of AI-assisted technology,
I conducted interviews on consumer focus groups and tested prototypes. These were some of the main insights.
For Tech / Mech/Cosmetics Products
where in-depth knowledge is required
Consumers would rather have AI suggest limited options.
[Significant Knowledge Gap]
For Fashion/Furniture/Interior Products where aesthetics matter
Consumers would rather navigate through all products on their own.
[Minimal Knowledge Gap]
1st Draft Low Fidelity Layout
Main 2 column layout
Main Window : Inquiries & Communication
AI Window : Real-time AI Avatar motion
AI Product Search Landing Page Design
Key Features
Minimal UI with only necessary information & interactions
AI Shopping Advisor interacting in real-time on the right, following your chat interactions
User Feedback
However, after receiving feedback from 25+ users, most had negative opinions including :
This led me to think :
"What does it mean to have a Humanly AI Interaction?"
"Does the AI need to look 'Human' to make the interaction 'Human?'"
The AI Nudge
A Human-like Interaction
HUMIND's concept of "Human-like Interactions" reminded me of interactions humans have with pets or familiar animals.
Therefore, contrary to HUMIND'S previous AI-generated "Human" Agent, I designed an AI Agent based on a Mole that could be likable by users.
Idle
Communicate
Searching
The messages from the Mole AI Agent can make be consistent with the "Mole" concept.
2nd Draft
2nd Draft Low Fidelity Layout
Main 2 column layout
Main Window : Inquiries & Communication
AI Window : Details of each selected product
AI Product Search Landing Page Design
Key Features
Minimal UI with only necessary information & interactions
Users can describe the product they are looking for or they can choose the provided Common Search Terms generated by AI
Users can track their records of searched products in the Sidebar
AI Product Search Page Info Design
Key Features
Logic behind product recommendations are displayed in the center
Retractable detailed product information slides in on the right side
AI Agent Pops up on the product providing a "Nudge" to purchase the product
Personalized Pros & Cons of the product is provided based on previous search data
Other Tasks
Design Systems
For a consistent Design System for the web interface of HUMIND,
our team finalized the Design Guidelines and UI Components for all frames.
These are some, but not only the contributions I've made :
Logo
Color Code
Violet is the main color of Humind. Thus the majority of the color palette are variants of the Violet shade.
The secondary colors include shades of grey and dark purple, providing a sense of depth and contrast.
White serves as a clean and neutral tone, while a bright lavender color adds vibrant accents and details.
#6B00FF
#301271
#A255FF
#E6C6FF
#F3EEFE
#FFFFFF
#222222
App Icon
The App design is kept simple, consistent with HUMIND's objective of simplifying the overwhelming customer shopping experience.
The application grid for the icon is built on a 32-field grid.
Chart Graphics
As the AI-powered platform personalizes shopping experiences, real-time statistical information is provided through visual aids consistent with the brand.
Logo Motion Graphics
Utilizing the 3 dot logo, we developed an animation scheme for the loading status of the AI Agent.
Merchant Analytics Dashboard
Including the design components, I designed a comprehensive dashboard for merchants to track the analytics of their AI Shopping Assistant activities.
Takeaways
Reflections
Take control and lead discussions!
Don't spend too much time thinking and "Just.. DO IT!"
The Crab Mindset
HUMIND has taught me to keep a "Crab Mindset." It inspired me to be a user-centric designer that takes risks to innovate based on measurable findings.
Berkeley Skydeck
We had the chance to work together at the Berkeley Skydeck building in a start-up setting, as we communicated with the CEOs in France.
Weekly Meetings
Copyright©2024. All right reserved Sun-Q Kim
