TYPINGMIND
Rebuilt cloud management experience that improved 56% time on task, enhanced user confidence and satisfaction.
AI Productivity
SaaS
B2B
B2C
Year
2025
Duration
2 weeks
Team
3 developers
1 product expert
UX/UI designer (me)
Design system designer (part time)
Deliverables
Research
UX and UI design
Design system update
First, let me give you a little context and summary before we jump into the details.
@TypingMind is a modern AI workspace launched in 2023, built for seamless conversations with multiple advanced models through a single interface. Trusted by over 141,000 monthly active users—including teams at Fortune 500 companies—it’s highly customizable to support both individual use and team workflows.
The product was initially built without a design system. When I joined, the team had just started developing one, and it was still in its early stages. The CEO’s vision was to gradually enhance product quality by leveraging the new design system, with a strong focus on improving user experience.
One of its key features, Cloud Sync, enables users to securely store, back up, and effortlessly sync their data across devices. However,
“This cloud sync screen looks bad, doesn’t communicate well. The current design doesn’t reflect well the importance of how it should be” - CEO of TypingMind.
Business goal: Improve clarity around storage plans and increase free storage baseline to build trust, enhance user experience, and drive long-term user retention.
User goals:
Easily manage storage and cloud data across devices.
Avoid data loss and reduce friction when syncing or freeing up space.
Through research, here are what I've found about our current problems:
Complex navigation and workflow
Insufficient decision-making context
Unclear system feedback and status
Unclear layout and hierarchy
Ambiguous labels and terminology
At the end, I redesigned the Cloud Sync interface and user flow, replacing the dense layout and unintuitive user flow with a structured, simple experience across web and mobile platform. These led to:
Improving workflow efficiency by 56%.
Enhanced user confidence with more intuitive guidance
Improved visibility of system status and actions
Cleaner interface with more consistent interaction
More precise and intuitive language for better communication.
HEY YOU MAKE IT ALL THE WAY HERE!
Let's uncover more interesting insights!
Target audience:
Individual users (mostly developers): actively manage data to avoid hitting storage limits.
Team users (org members): sync changes to back up work and manage shared data.
Constraints:
Short timeline: 2 weeks for end-to-end redesign.
Tech limits: No support for multiple modals.
Research resources: Relied on lightweight methods due to limited resources.
I started working on this feature about 2 weeks after joining the team, which gave me the advantage of seeing the product with fresh eyes.
In this Cloud Sync flow, the team version offers features that are also available in the individual version. Therefore, I focused on individual user flow to have more holistic solutions and create a larger impact across the user base.
To get up to speed, I began with analyzing the core flows and did a feature breakdown exercise. This helped me quickly understand the flows, spot ambiguous behaviors, and identify pain points through heuristic evaluation.
There were a lot of issues found. The cloud sync screen is cluttered, lacks clear focus and guidance, has confusing actions, poor error handling, and messy labeling. The cloud storage screen is dense and unfocused, with unclear warnings, hidden usage info, confusing sorting, overly prominent delete buttons, and no support bulk action well.
I looked at community platforms like Canny and Reddit to gather real-world feedback. At this stage, Perplexity is a great collaborator helping me quickly gather relevant insights and get a clearer picture of the core issues. Additional to the ones mentioned above, there were two other notable feedback:
"Free storage limits feel too restrictive, while paid plans are perceived as too expensive for the value offered."
Deleting chats from the cloud also removes them from the main chat interface, which users find frustrating, especially when they want to free up space but retain specific conversations.
I did a small observation task with 3 users to understand how they interacted with the current product. Although there were limitations with this approach, this still helped to uncover many issues within the limited timeline.
Storage cleanup and resync flow too repetitive and unintuitive
No feedback during resync, leaving user uncertain if it worked.
Showing only one failed chat leaves users confused about the others.
Unsure which storage plan to buy or upgrade to.
Unsure what happens to data after canceling plans.
From the collected pain points, I grouped together relevant ones and then built problem statements, categorized these problems into 3 main groups:
Foundational problems - Issues that block users from completing primary tasks or impact the product’s core value.
Experience problems - Friction points that slow progress or cause confusion without fully blocking goals.
Enhancement opportunities - Non-critical issues or those encountered infrequently.
Since our team worked remotely, all discussions took place online through Figma and Slack. Organizing the insights in FigJam helped me to walk the team through the findings more easily, align on the problems, and see why they matter - helping us focus on the improvements with the highest impact on both user experience and business goals.
Once the issues were scoped, I zoomed out to map the underlying patterns and their relationships. There were five main issues identified:
Navigation & Workflow Complexity
The IA and flow structure create friction; users must jump between contexts and repetitive actions to complete important tasks.
Decision-Making Without Sufficient Context
Important choices (e.g., delete, subscribe, cancel) are not supported by just-in-time reassurance or contextual cues.
Lack of System Feedback & Status Visibility
The system feels unresponsive, breaking trust and making users to manually check or retry actions.
Ambiguity in Language
Ambiguous and lengthly copy cause user hesitation and not perceive product value fully.
UI Clarity and Usability Gaps
Weak visual hierarchy, unclear primary actions, and insufficient feedback make it difficult for users to understand the interface, recognize key actions.
These insights were then translated into design goals that support faster workflows, clearer decisions, reduced friction and ultimately, healthier retention.
Navigation
Improve navigation so users can manage cloud data without navigating redundantly.
Decision with context
Support confident decisions by providing context at decision making points.
System feedback
Make system state and operations visible with clear feedback.
Language
Use precise and value-focused language.
UI clarity and consistency
Improve clarity and consistency of the interface with current design system.
Since both individual and team users experience the Cloud Data Management flow, and syncing is the highest‑frequency task while upgrades occur only at storage limits, I went first redesigning Cloud Data Management.
I looked into specific flows and patterns from other big products, mainly Dropbox, Proton, Google One, Uniswap, Miro, Sketch, Maze.
For sync and storage details:
Categories with percentages and progress bars help users track space easily.
“Buy more” appears only near usage bars; not intrusive.
Copy like “You are on the free plan” keeps users informed.
Proactive cleanup support:
Warnings when storage is low, with a simple 2-step “clean up space” flow
Summary view with category breakdowns and links
Suggestions for items to delete
For database:
Efficient navigation:
Search bar, tab names with item counts, chips for quick filters
Pagination at both top and bottom for faster browsing in long item list
Intuitive item management:
Auto-sort by file size with status button for visibility
Clear sort status and multi-action menus per item
Large summary cards highlight key data
Clear feedback and safeguards:
Triple confirmation before deletion: warning, checkbox confirmation, and strong UX copy on final action button (e.g., “Permanently delete”)
Based on my research, I found that users felt frustrated by the need to repeatedly jump back and forth to the Cloud Sync button just to free up storage and continue the syncing process. It took them 9 clicks, with several being repetitive, to complete this task. In response, I mapped out ways to restructure the information to improve navigation.
In the initial design, I introduced:
A sidebar menu to make navigation clearer and reduce information density.
Distinct button styles to help users easily differentiate actions (sync, resync, upgrade).
Upfront sync status so users can quickly see progress at a glance.
Applied newly built design system and brand colors to create consistency and reinforce identity.
With this , users can handle all their cloud data actions in one place, making the process easier, less overwhelming, and tailored to their needs without switching contexts.
However, user feedback showed that the interface still felt somewhat heavy, and the resync action being as "almost" prominent as the main sync caused confusion.
To improve this, I:
Simplified the side navigation to three sections only, reducing clutter and helping users focus.
Made secondary sync options less prominent and added context to resync, so its purpose was easier to understand.
Integrated cloud storage into the sync section, creating a cleaner, more streamlined interface.
Softened the upgrade nudge, making it informative without disrupting the main task.
Although technical constraints were discussed earlier, a new one raised - more than one modal showing at a time is not feasible for the current tech team. Additionally, through discussions, we came to a decision to combine cloud sync action and cloud data information together for a more holistic view and supporting quick actions.
I went through each feedback thoroughly to consider the options and see how these decisions impact the overall goal. The updates includes:
Turning secondary sync options into a separate section in navigation bar in response to technical constraints
A toast notification for deletion flow to support immediately confirmed the action for users, was faster implement for the engineering team.
A unified view for sync actions and cloud management to support quick actions.
Turned shared links into a tab within the storage table to reduce screen clutter
And here is the new experience.
Managing cloud data
A centralized space for users to manage cloud-related data and take action, now with a clearer, more consistent interface.
With the updated free storage baseline, the upgrade action is now more subtle and purposeful - next to the storage bar and only highlighted when needed.
Users can now manage cloud data, like deleting items to resume syncing, without switching contexts or navigating back and forth.
Storage details and warnings appear inline during deletion, using clear, concise messaging to help users make confident decisions and stay informed.
Re-sync your data
Other than normal sync, sync options allow users perform custom sync actions such as selecting items to sync, or force a total re-sync.
Sync status is displayed to provide context.
Copywriting has been refined to clearly differentiate between the two actions.
Since re-syncing can take time, users are prompted with a confirmation before it begins.
Once confirmed, real-time progress is shown to keep users informed throughout the process.
Even if users close the modal, sync progress remains visible - offering reassurance and clarity, while they continue perform other actions.
Now let's move onto the second part - Storage plans.
I started with learning how other brands are communicating their values to customers. Some big names such as Stripe, Evernote, Grammarly, Dropbox, Coda, WeTransfer.
Side-by-side plan comparison highlights value gain/loss clearly, especially when downgrading.
Price anchoring with discount framing (e.g., “$8/month – save 20% yearly”) makes pricing feel smaller and adds perceived value.
Billing details are transparent: next payment, billing cycle, total cost, and a visible manage button.
Upgrade CTAs use benefit-focused UX writing, often with a single sentence summarizing value.
Upsell messaging is persistent but subtle, surfacing contextual pain points and prompting users to consider how the upgrade solves them.
This time, I started to get everyone involved earlier in the design process by walking the team through ideas with text and a simple user journey. This helped the team understood more of users perspective, the intent behind design ideas, avoid UI level edits, and also sparked more possibilities.
I went sketching with the most potential ideas, and also improved the copy writing to better communicate our value and started to visualized them.
I explored ways to communicate the benefits of our storage plans more effectively, encouraging upgrades through subtle nudges, while adding transparency and context to help users better understand their current plans.
The redesign was loved and there were only a few minor changes:
Simplified copy writing of upgrading plan section
Storage plans showed bases on user status
Brighter brand color background to highlight the upgrading options
And here is the new experience.
A subtle inline nudge offering an alternative when users are about to delete data, leveraging loss aversion and provides a clear exit path.
Storage plan introduction and options are revised with clearer and benefit lead content for better communication
A quick, clear view of the user’s subscription, showing plan status, renewal date, and payment details, paired with a follow-up “Resume Sync” action to support a seamless flow from upgrade to task completion.
For the mobile version, I focused on keeping the design clear for users while reducing extra work for engineers. Because of the limited width on mobile, I changed the tab bar items into a dropdown and turned table content into cards to improve readability and make navigation easier. The rest of the design stayed consistent to ensure a familiar experience for users and faster development for the team.
With the new design and experience, time to delete synced items and resume the sync process reduced from 32 seconds to 14 seconds, showing a 56% improvement in workflow efficiency.
It also received positive feedback from users and the team:
“I like that I can keep chatting and still know my data is syncing in the background.”
“It looks better and the information is clearer!”
“I feel more confident before clearing my storage.”
“I think it’s easier to choose which plan fits me.”
The old version wasn’t built with a design system, but a new one had recently been created by a previous designer. I leveraged this system throughout the redesign to improve interface consistency and also expanded the library with new components to align with the updated direction.
This redesign was handed off at this stage and was pending implementation by the engineering team as I transitioned to another project. If I had more time, here are the areas I would have explored further:
Deeper user insights
Conduct more rounds of user testing and set up a continuous feedback loop by monitoring community channels → This would help surface both usability issues and unmet needs, supporting more informed iterations.
Tracking conversion
Collaborate with the team to monitor free-to-paid conversions and analyze how interface changes influence user perception, decision-making, and upgrade behavior.
To me, this experience is an exciting wild ride that I could learn so much from.
Collaboration through text and flows: I started using a habit of sharing ideas early through text and annotated user flows, which helped the team align faster. This approach made it easier to spot potential issues early on, reduced UI-level revisions, and sped up the workflow.
Knowing when to push, and when to let go: In this phase, the team leaned toward a direction I felt wasn’t the most optimal. However, given our resources and the impact on user experience, I chose not to push further. Instead, I aligned with the team to keep momentum, while noting this as an area to revisit based on future user feedback.
Constraints can spark creativity: Technical constraints are not roadblocks that stop progress, they pushed us to explore alternative paths. I learned that the best design isn’t always the most ideal, but the one that fits the team’s capabilities and timing.
Value of mentorship: Being a sole designer at a startup for the first time was a ball of excitement, ideas, and a bit of nervousness. I’m glad I made the decision to seek feedback and guidance from others in the field. I’m especially grateful to have Yvon Huang as my mentor. She supported me not just with her design expertise, which helped me grow faster, but also with empathy and steady encouragement throughout the journey. She showed me that mentorship isn’t just about answers, it’s about perspective, belief, and knowing someone has your back.
HEY YOU MAKE IT ALL THE WAY HERE!
