What I Did
Refined Frame Design
Ombre.ai's main workspace consists of frames that display content such as data visualizations or code blocks. My first observation was that the UI did not prioritize the content effectively. The sidebars of each frame contained buttons and pop-out menus that distorted the content when activated. Since frames were the building blocks of the workspace, I focused on refining their design first.
Built a Scalable Design System
To enable rapid iterations and seamless testing, I prioritized building a structured design system early in the project. Leveraging the design system, I could quickly test light and dark modes and refined solutions by updating components and variables in Figma. This approach allowed for fast iterations while maintaining consistency, improving communication with the developer, and streamlining implementation through design tokens.
Clarified Information Architecture
User testing revealed that while users were excited about Ombre.ai’s features, many struggled with their first interaction. The process of creating a new visualization was unclear, as users did not intuitively understand that they needed to create a node first. Instead of relying on onboarding instructions, I aimed to improve the UI’s clarity so that guidance was embedded within the design itself.
To do this, I mapped out the product’s information architecture, organizing features by function and visually categorizing them to determine where they should live in the UI. This clarified the mental model of the product, significantly reducing the number of onboarding-related questions and making the experience more intuitive for new users.
Spotlighted Cause and Effect
Previously, data source management was hidden in a separate page, making it difficult for users to see the connection between their inputs and outputs. I moved these functions into a sidebar within the main workspace, allowing users to view their data and visualizations simultaneously. By making the mental model more visual, users could immediately see the cause-and-effect relationships between their actions and the results.
Additionally, new users often struggled to find the correct next steps. I introduced clear, contextual prompts within the default state of new tabs to guide them toward creating or adding nodes. These updates led to a 350% increase in task success rates for creating a new node and a 90% reduction in onboarding-related questions, demonstrating the effectiveness of the redesigned UI in guiding users intuitively.
Enhanced File States
Users also found it difficult to understand the status of their uploaded files. The original design relied on small icons and subtle text color changes to indicate file states, which were not immediately clear. I redesigned the system with larger, more distinct icons, stronger color contrast, and clear labels for different file statuses. Additionally, active files now become bold and underlined when linked to an open frame, improving visibility and reducing confusion.
