CS2
/ CASE STUDYUX Operations Overhaul
Transforming the design process and toolset of the UX team to enhance collaboration and achieve peak performance.
A Quest for Team Synergy & Efficiency
When I took on the DesignOps director role at my current job, my initial listening tour revealed inefficiencies within the UX team and their interactions with other departments. This was leading to project delays, compromised quality, and higher costs, signaling a critical need for significant improvements.
Historically, the UX team operated in silos, disrupting collaboration both internally and with their partners in development, QA, and product teams. This caused frequent back-and-forth with developers, and additional QA cycles.
Team members used a variety of tools such as Sketch, InVision, and UXPin, which resulted in inconsistent artifacts and hindered effective collaboration.
The team regularly delivered design solutions aligned with Salesforce Commerce Cloud conventions, but did not establish efficiencies to streamline the repetitive nature of the work.
Design patterns were frequently used in wireframes and high-fidelity designs without a thorough understanding of the underlying platform’s technological capabilities and limitations.
Insufficient platform and product documentation, and lack of standard design templates prolonged the setup process for new projects.
New hires faced challenges in quickly understanding the platform, the toolset, and documentation.
There was no clear career development path for UX designers, impacting motivation and growth opportunities.
“How we work together, how we get our work done, and how our work creates impact must be intentionally and intelligently crafted.”
Zooming In on UX Processes
To evaluate every aspect of the UX team’s operations, I conducted a comprehensive discovery phase. This involved identifying inefficiencies, aligning strategies with business and department goals, and setting the stage for impactful improvements. During this phase, I completed the following key activities:
Conducted an audit of the design tool stack to identify overlaps and redundancies in functionality, aiming to consolidate tools where possible.
Interviewed UX team members to gather insights on their preferred tools, workflow preferences, and challenges.
Reviewed existing documentation and educational material in Confluence to identify gaps and opportunities for improvement.
Collaborated closely with the VP of Product to identify issues in the product and project stack, pinpointing areas for my direct involvement.
Held meetings with B2C leadership to assess the business impact of ongoing projects and establish benchmarks for timelines and budget management.
Team Transformation in Action
Toolset Consolidation
In an effort to streamline our workflow, I led the migration of our UX architects and designers from UXPin and Sketch to Figma. This shift immediately improved collaboration by breaking down internal swim lanes.
To facilitate this transition, I created a platform-independent wireframe UI-Kit, shared with the whole team as a Figma library.
Designed for rapid wireframing, this kit contains custom components tailored to replace UXPin’s built-in library, offering superior functionality and flexibility.
I included advanced features such as repeat grids, fixed aspect ratios, composability, and other techniques and workarounds from the Figma community as well as my own discoveries.
The familiar components and intuitive structure of the wireframe UI-Kit eased the adoption of Figma for our UX architects, and streamlined their wireframing workflow significantly.
Wireframe Library
Next, I launched a collaborative team effort to create a comprehensive wireframe library for the company’s flagship Salesforce Commerce Cloud product.
The library utilizes the wireframe UI-Kit as its building blocks and incorporates wireframes for the entire feature set of the reference architecture.
Its primary purpose is to serve as pre-built scaffolding for all product pages and templates, providing a consistent and efficient starting point for projects.
Additionally, it functions as a practical training tool, offering new hires a more effective way to understand the product’s structure and functionality compared to traditional methods involving the review of documentation and live templates.
Team Development & Collaboration
In parallel with the ongoing toolset improvements, I also focused on increasing collaboration and expertise to improve the UX team’s overall performance.
I facilitated knowledge sessions for the larger DxP team, including a Demystify Series, with internal subject matter experts sharing their insights.
I conducted group and one-on-one Figma training sessions to clarify the understanding of advanced components and their built-in features.
To further improve team communication and encourage continuous learning, I established Collab Hour, a weekly, informal gathering where UX team members can casually drop in to share work and exchange feedback.
I also worked with HR to develop a better recruiting pipeline and process, and standardized the onboarding experience to ensure a smooth start for new hires. With their assistance, I redefined the career ladder and salary ranges to support team growth and retention. These steps have streamlined the integration of new hires and strengthened long-term career development within the team.
Process Improvement & Documentation
To introduce more clarity and efficiency into our design and development processes, we undertook significant efforts to enhance our documentation. Here’s an overview of the initiatives involved:
I led a small cross-functional team to update the functional specs documentation (FSD) for the product. We streamlined Salesforce’s original folder structure by consolidating pages and simplifying the language for clarity. I developed a concise editorial style guide to ensure consistent language across all FSD pages. Additionally, the team incorporated imagery using product wireframes marked up using special annotation components from the wireframe UI-Kit.
I created comprehensive reference documentation in Confluence, covering UX processes and workflows, Figma best practices, and Zeplin usage guidelines, with the latter focusing on practical tips and tricks for developer use.
I collaborated with the Director of Software Engineering to integrate designers into development sprints, improving the design handoff process, ensuring clearer communication, and facilitating early issue detection. This deeper engagement has effectively bridged gaps between teams, reduced QA cycles, minimized rework, and accelerated delivery times.
The Proof in Performance
The impact of the initiatives above has been truly transformative for the UX team and our project outcomes. By focusing on aligning processes, improving documentation, and encouraging collaboration, the team has achieved significant performance gains.
Progress in Practice
The entire UX team now proficient in Figma, which has streamlined our design process. Additionally, internal swimlanes within the UX team have blurred, leading to more collaboration between UX strategists and designers.
There is much less ambiguity about the platform’s features and functionality within the UX team, resulting in clearer, more successful outcomes. The time required to start and deliver wireframes and designs for new projects has also significantly decreased.
Two projects delivered in 2023 within much shorter timeframes, resulting in 40% less QA kickback due to efficiencies made in the product stack and closer designer involvement in development sprints. Plus, release updates are now fully aligned with the wireframe library and documentation, improving traceability for the entire delivery team as the product evolves.
“Onur’s demeanor creates a comfortable environment to explore less refined possibilities without feeling over-critical and his feedback and probing questions lead to even better recommendations. ”
The Aftermath
The journey of advancing our UX team has been enlightening and has highlighted several key areas for continued improvement. The lessons outlined below give us clear directions for how we can continue to grow and improve:
Even with our improved performance, there’s still more we can achieve. We need more Figma training, additional design critique sessions, and stronger project collaboration.
Communication about ongoing DesignOps initiatives needs to be improved. The UX team needs to be kept in the loop about the product roadmap, even if they aren’t directly involved.
Our current method of gathering feedback on our toolset – a table in Confluence – needs an upgrade. An online survey with specific questions would help us better evaluate and prioritize requests.
Our documentation needs to be better tailored to the team’s needs. Clear, accessible documentation is key to supporting ongoing learning and efficiency.
Feedback from the UX team indicated that the default styles of the wireframe UI-Kit can be too high-fidelity for early-stage wireframing. In response, I’ve started adding a “style” prop with a “sketch” variant for a hand-drawn look.
