PROBLEM OVERVIEW
Outfit’s creativity was being held back
1.0 Old design.
Image
Outfit7 - Dashboard Design
My role
Product Designer - Design system, Research, Documentation, UX & UI Design, Prototyping
Team
Jan Šušteršič, PM (Outfit7)
Denis Rajković, PM (Outfit7)
Ervin Prislan, Management
Me, Product Design
Timeline & Status
6 Months, Live
Overview
Outfit7 was in need of a rework of their CRM web app that enables their team to collaborate more efficiently, keep track of their products, manage testing sessions, and organize configuration documents.
I focused on refreshing the UI, implementing new features, and creating a scalable design system that could accommodate future needs for new dashboards.
The results were three complete sets of dashboards complemented by a full design system. The redesign was rigorously evaluated through rounds of user testing involving Outfit7’s employees. The new CRM was widely praised by everyone who used it.
RESEARCH SUMMARY
Clearing the fog - understanding multiple teams
Outfit7 is a mature company with over 400 employees. The specific subsidiary we collaborated with comprised diverse teams, including developers, QA engineers, designers, and legal experts. To create a meaningful solution, it was essential to understand their unique challenges and workflows.
LAYOUT PATTERNS
Working with a data-heavy interface
Law of common region & proximity:
To emphasize scannability, we separated navigation from the dashboard contents. Navigation was positioned on the left side of the screen, while the adaptable content area expanded to the right.
2.0 Content separation.
Image
Customizable column system:
Content was divided into one, two, or three columns depending on the context. This ensured that each type of data was presented optimally, improving readability. The system also allowed us to combine columns as needed, covering edge cases for single, double, or triple-column layouts on the same screen.
2.1 Content column system.
Image
A modular approach to data visualization:
The dashboards were designed to clarify and streamline data visualization. Each data type was encapsulated in individual modules, such as bento cards, which ensured clarity and adaptability. This modular approach, combined with customizable layouts, provided maximum flexibility and usability.
2.2 Modular data approach.
Image
DATA VISUALIZATION
Simplifying complex tables and data sets
Interactive filtering and sorting:
3.0 Complex filters.
Image
3.1 On select filters.
Image
3.2 Horizontal scroll filters.
Image
Interactive table row design:
Each table row is interactive, allowing users to perform actions such as renaming, sharing, or expanding toreveal further details. This approach ensures that even data-heavy interfaces remain manageable and approachable, with a strong emphasis on scannability and user engagement.
4.0 Table row.
Image
OPTIMIZED CREATION FLOWS
Streamlining multi-step workflows
To address the challenge of structuring flows for creating and adding new elements to the system, such as AB tests or new devices, I focused on breaking down complex multi-step processes smaller more manageable tasks.
Grouping and step separation:
Recognizing the complexity of these flows, I started by grouping related data sets and distributing them into distinct steps. This segmentation helped maintain clarity and provided users with a concise focus at each stage, creating a better perception of progress.
5.0 Updated flow.
Image
Dedicated workflow pages:
To avoid overwhelming users, these flows were placed on separate pages, away from other content. This decision reduced cognitive overload and allowed users to concentrate solely on the task at hand without distractions.
5.1 Dedicated flow pages.
Image
Step tracking and transparency:
A step tracker was introduced to provide immediate visibility into the entire process. Users could see all required steps at a glance, offering transparency and reducing any uncertainty about the workflow.
5.2 Step tracking..
Image
Summary pages for final review:
To minimize errors and unnecessary backtracking, I added a summary page to each flow. This page allowed users to review their inputs and see how the creation would appear in the dashboard once completed. This feature ensured greater confidence before submission.
5.3 Summary pages.
Image
Data validation and warnings:
Given the complexity of some flows, I implemented modals and indicators to alert users of missing or incorrect data. These validations were designed to be prominent and required confirmation, ensuring that users didn’t inadvertently lose data or proceed with incomplete information.
VISUAL DESIGN AND DESIGN SYSTEM
Creating harmony across dashboards
We redesigned Outfit7’s CRM with a clear goal: creating a unified system to ensure consistency across multiple dashboards. Many users relied on several dashboards, so it was critical to deliver a cohesive, intuitive experience that felt seamless no matter which dashboard they were using.
Why a design system?
The decision to build a design system stemmed from the need to maintain uniformity in both appearance and functionality across various interfaces. This approach also ensured scalability as new dashboards and features were introduced.
Approach and inspirations:
I leveraged atomic design principles to create modular components that could adapt to diverse use cases while maintaining consistency. The colorful palette, inspired by Outfit7’s branding, was adjusted and used sparingly to balance vibrancy with usability. This ensured that the interface remained professional while retaining the brand’s distinct personality.
Impact on visual design:
The updated UI introduced a clean, modern aesthetic characterized by ample white space, streamlined layouts, and subtle interactive elements. By grounding the visual design in Outfit7’s unique identity, the new system achieved an ideal balance between usability and brand alignment, making the CRM more engaging and effective for its users.
6.0 Color palette.
Image
6.1 Typography styles.
Image
6.2 Components.
Image
USER TESTING
Validating the experience before development
To ensure the new dashboards would meet user needs, I conducted user testing sessions with QA engineers, the primary users of the system. Two engineers volunteered for the testing.
Testing process:
I prepared two tasks for the participants, designed to address five specific objectives. These tasks aimed to evaluate the usability of the new flows and identify any potential issues.
Key results:
Both testers completed the tasks successfully with only minor assistance. They avoided critical errors and completed the tasks within an acceptable time frame. This allowed me to focus on the areas where they required minor help.
Findings and iterations:
Through this process, I documented 12 findings in a Notion document and reviewed them with the team. Based on this review, we implemented changes where necessary. After incorporating the updates, the designs were re-evaluated by the team and approved for development without any complaints.
FINAL DESIGNS
A seamless experience
7.0 Table bulk actions.
Image
7.1 Home page example.
Image
7.2 Device creation flow start.
Image
7.3 Device details.
Image
7.4 User overrides.
Image
7.5 Blank state example.
Image
7.6 Configurations.
Image
7.7 Scheduler.
Image
7.8 Graph examples.
Image
IMPACT AND LEARNINGS
Reflecting on outcomes and takeaways
Impact:
The creation of a design system brought consistency across all dashboards, ensuring a seamless user experience for those navigating multiple platforms. Simplifying complex workflows and introducing clear visual indicators made the CRM easier to use, boosting user confidence and efficiency.
Additionally, the modular components and comprehensive documentation established a scalable infrastructure, enabling future dashboard expansions without compromising quality.