All your AI assistants in one place.
Category
UI/UX
Team
Kevin Z (Developer)
My Role
Lead UI/UX Designer, Design System
Tools
Figma
Introduction
Research
Understanding User Painpoints
To understand our users’ needs, we conducted interviews across three key groups: frequent, average, and seldom users. Our research revealed three major challenges:
Limited Value
Subscription pricing overcharges infrequent users for a few messages while making multi-model access costly for power users.
Too Many Accounts
Switching between multiple accounts and subscriptions across different AI platforms just to access various AI models is cumbersome.
Restricted Exploration
The subscription cost discourages users from experimenting with different models, limiting flexibility and engagement with AI services.
Market Research
To understand the competitive landscape, we analyzed existing AI services and identified three common business models.
Multiple AI Models, No Subscription
Allows users to chat with multiple AI models but require them to bring their own API keys for access.
Multiple AI Models, Requires Subscription
Offers access to various models but locks premium features behind a subscription.
Proprietary AI Model with Subscription
Limits users to AI models from a single provider and premium features locked behind a subscription.
Design Goals
Backed by research, we've identified key goals that our product should aim to embody
Seamless Model Switching
Switching AI models should be effortless; we should make sure users can compare responses and refine conversations without friction.
Transparent Pricing
Users should always have a clear breakdown of costs, with no hidden fees or confusion—just full control over what they pay for.
Intuitive & Logical Interface
A clean, responsive, and accessible UI that prioritizes usability and efficiency.
Design
Testing & Iterations
Our design process involved multiple iterations and usability tests to refine the interface based on user feedback. Early wireframes focused on layout structure and feature accessibility, while later versions improved navigation, model switching, and clarity.
Before and After
Our initial design prioritized simplicity, but user testing revealed key usability challenges. Below are key before-and-after improvements that improve transparency, functionality, and usability.
Before
Overly Simplified Pricing – Users lacked clarity on exact cost calculations.
Cheeky Token System – The gamified approach felt out of place for a transparent tool.
Balance Anxiety – Displaying total balance near cost made users hesitant to spend.
After
Detailed Cost Breakdown – Input/output pricing and contextual message count are clearly shown.
Removed Token System– Uses direct dollar amounts for transparency.
Separated Balance Display – Moved balance display next to the user profile to reduce cost-related anxiety and shift focus to per-message pricing.
Before
Limited AI Model Control – Users couldn’t easily switch models after receiving a response.
Overly Minimalist – Lacked basic features like copy, regenerate, and view message details.
Unnecessary information – Displaying cost and time per message directly didn’t add everyday value.
After
Added Model Switching & Comparison – Users can now quickly compare and switch between models with a click or two.
Quick Action Features – New buttons and toggles provide more features for the users.
Condensed Unnecessary Information – Removed redundant details for a cleaner, more focused UI.
We translated our research findings and user feedback into these high-fidelity prototypes.
Outcome
The Nexus MVP web app and official website is nearly complete and currently in the development handoff and QA stage. The developer and I are working closely, optimizing design for code and resolving any development challenges.
Takeaways
Throughout the design and development of Nexus AI, I learned a lot through trial and error and constructive feedback.
Developer Collaboration
Open communication with developers helped me understand best practices for optimizing design for code and improving the designer-developer workflow.
Prioritization Matters
Some features, while valuable, can be postponed due to resource constraints, allowing for a more efficient MVP.