commercetools - Approvals

Project

B2B Order Approvals

Role

Product Designer in crossfunctional team at commercetools: discovery, API, requirements, interactive prototype, user testing, iterative design.

Background

In B2B eCommerce, the lack of efficient order approval processes presents a significant challenge for large organizations, often resulting in operational delays and errors. Our project tackled this issue, focusing on streamlining and improving the management of order approvals for our B2B frontend users.

We developed frontend components for approval workflows, leveraging the commercetools composable APIs. My focus was on delivering user-friendly designs and straightforward workflows, specifically designed for the needs of B2B customers. By doing so, we achieved a significant reduction in complexity and an increase in efficiency, enabling businesses to accelerate their approval processes with our frontend B2B components.

Commercetools: API documentation

Team Collaboration

Our team included 6 Frontend Developers, a Product Manager, and me as the Product Designer. Using agile methods and keeping open lines of communication, we embraced a mindset of continuous improvement. This approach helped us stay flexible and quickly adapt to any changes in the development process.

Discovery Phase

To fully understand the challenges and our target audience, the Product Manager and I conducted extensive research. The insights from this phase were crucial in refining our strategy and ensuring our solutions met customer needs.

Understanding B2B Approval Processes

To comprehend the approval processes of our B2B customers, we sought insights from both the customers and our internal teams, including sales and customer success managers. Using this information, we drew up the customer journey to see what issues B2B clients usually run into and to get a good grasp of their approval routines. We found that:

‣ Setting up complex approval rules is difficult but critical for correct workflows

‣ Control over who can create and change rules is vital, requiring strict user permissions

‣ Tracking the progress of approval processes is crucial for effective management and oversight

Understanding the Technical Side

I conducted a detailed analysis of the API's functionality to understand the technical requirements. This step was essential to create designs that were both user-friendly and technically feasible. It was important to identify any major technical constraints early on to ensure our designs were practical and could be implemented.

Defining the Problem and Scope

Together with the Product Manager, we clearly defined the problem and outlined the scope, identified customer specific goals, and detailed product specifications. Having a clear problem statement helped us move forward with a shared understanding, ensuring our solution effectively addressed the challenges.

Establishing Requirements

We developed feature requirements based on technical constraints and customer research. Technical specs defined what was possible, while user needs guided the desired outcomes of the design and functionality.

Problem

B2B customers struggle with order management due to unfriendly admin tools, complicating user permissions and approval workflows, and hindering efficient order control.

01. Approval Rules

The technical setup must include predefined approval rules that activate when a user lacking sufficient permissions attempts to finalize an order. Examples include restrictions based on cart currency, country, or amount.

02. Approval Flows

If a user without adequate permissions attempts to place an order, an approval flow is initiated. According to the flow's rules, supervisors must approve the order for it to proceed.

03. User Friendly Interfaces

To facilitate the management of complex tasks, the frontend must provide a user-friendly interface that makes navigating and utilizing administration and approval workflows straightforward and efficient.

The Design Journey

I began the design process by exploring a wide range of ideas, gradually narrowing them down to the best solution. This approach ensured our final design met our needs and would work well for our project.

Leveraging a Design System

I leveraged a design system that I had previously developed for our extensive B2B project, aiming to guarantee consistency and enhance efficiency throughout the design process. This system incorporated fundamental elements and components, such as buttons and input fields, to simplify and standardize the design approach. By doing so, it facilitated a more cohesive user experience and allowed for a more agile design workflow, effectively reducing the time and resources required to bring new designs from concept to implementation. This approach not only streamlined our design operations but also ensured that our projects maintained a uniform aesthetic and functional quality, aligning closely with our overarching design principles and project goals.

Solving Design Challenges

I created wireframes in Figma, consistently sharing them with the team for early collaboration. This feedback loop ensured our designs stayed aligned with both technical feasibility and the overall product vision.

Designing Approval Rules

Designing the approval rules feature required enabling administrators to set up both simple and intricate rules that initiate an approval process. The primary challenge was crafting a user-friendly interface capable of handling the spectrum from basic to complex configurations. Given the complexity and the need to display significant technical details, I focused on simplifying the user interface (UI) as much as possible. This approach aimed to streamline the user experience, allowing administrators to concentrate on defining the rules without being overwhelmed by the interface's complexity.

Designing Approval Flows

The approval flows were designed to enable administrators and supervisors to efficiently manage the order approval process. The key challenge involved ensuring that approval flows were visible only to those with the appropriate permissions within specific business units. Additionally, it was crucial to clearly display the history of approvals to users, indicating who had previously approved each order. This required a careful balance of accessibility and confidentiality to maintain a streamlined and intuitive user experience while adhering to organizational hierarchies and privacy standards.

Task Oriented User Tests

To determine the effectiveness of the new design features in real-world scenarios, I conducted five usability tests focused on specific tasks. Participants were asked to:

‣ Set up a new approval rule, including defining conditions and selecting approvers

‣ Process a pending order within the approval system

‣ Copy an existing approval rule to a different business unit

During these tests, participants used the think-aloud protocol, verbalizing their thought processes as they navigated the tasks. I recorded these sessions, and used an AI-powered transcription tool to convert them into text for detailed analysis. The insights gathered were organised using an affinity diagram, which helped in pinpointing areas where the designs needed further improvement or adjustment.

Design Handoff and B2B Component Release

Findings from user testing were incorporated into the revised designs to address identified issues before initiating the design-to-development handoff. This handoff process included finalized designs, detailed notes on behavior, and the creation of Jira tickets to facilitate clear communication with the development team. Following successful quality assurance checks, we launched the B2B Frontend Components. Customers and internal teams got access to the components through an open-source GitHub repository for general access.

Impact Post-Launch

The launch of the approval rules and approval flow components in the second release of our B2B templates marked a significant milestone. These components were designed for use by both our internal teams and external clients, providing them with intuitive B2B frontend templates that simplify administrative tasks for eCommerce management. The templates are designed to be adaptable, enabling rapid deployment of functional frontends that clients can customize to meet their unique requirements.

Feedback gathered in the first month post-launch was overwhelmingly positive from both our internal teams and our clientele. The adoption of these components and B2B templates significantly contributed to attracting new B2B customers, addressing a crucial requirement in the B2B market. This achievement played a key role in advancing our company's key performance indicators.

Monitoring Progress and Iterative Enhancements

In our strategic journey with the Templates, we are committed to an ongoing process of improvement and fine-tuning. This trajectory is guided by essential performance metrics, including usage data and insights gathered from internal and external feedback channels. By following this iterative approach, we ensure that the Templates consistently evolve to meet the evolving demands of the dynamic market environment.

Key takeaways from the project

In addition to receiving positive feedback from users and stakeholders some key takeaways are:

- The Significance of Technical Insight in Design

To ensure a seamless design process, effective collaboration with both frontend and backend engineers at the appropriate times is vital. Absence of initial understanding of backend capabilities, both prior to and during the design process, can have adverse effects on the frontend. This may necessitate a complete redesign due to a mismatch with the API architecture. Continuously seeking feedback from both backend and frontend engineers has proven to be the most effective approach in maintaining technical feasibility while creating designs.