PRODUCT DESIGN OF SFA TOOL

UI Redesign for Enhanced SFA Tool Experience

  • Context

    As a Sales Force Automation (SFA) tool, it supports sales teams by automating key processes such as customer management, order processing, retail execution, and performance tracking. SFA tools play a crucial role in streamlining workflows, improving sales efficiency, and ensuring field representatives have real-time access to critical data. By digitizing sales operations, these tools help reduce manual efforts, enhance decision-making, and enable businesses to respond dynamically to market demands.
  • Area

    UI Design
    UX Design
    Usability Testing
    Design Leadership
(01)
OVERVIEW
OVERVIEW
The RetEX (formerly the SFA tool) is an integrated component of the comprehensive XTEL solution. It is a differentiated solution designed for touch and mobile devices, installed, integrated, and monitored through the SFA XTEL web solution module.

The touch version is primarily designed for field and merchandiser users who manage goods distribution while operating from a separate van vehicle. In contrast, desk-office users, such as finance, sales, and customer service teams, handle financial constraints, track system usage and operations, and ensure smooth workflow across applications.

Additionally, the constant branding upgrades and design system integration within the redesign initiative for the TPM solution had a direct impact on the SFA tool as well. In parallel, the company consistently worked to synchronize design upgrades and evolve new UI components for the SFA tool, ensuring a unified and modernized user experience. To further enhance usability, usability testing sessions were conducted with customers to identify key pain points and improve the user experience. These insights were incorporated into the UI updates, ensuring that both the visual and functional aspects of the tool evolved in alignment with user needs.
  • Timeline
    • 2016 – UI Redesign
    • 2020 – Usability Research and User Experience Enhancement
    • 2022 – UI Upgrade2025 – New UI Transformation
  • Tools
    Adobe Suite
    Sketch
    Invision
    XD
    Figma
    Excel
    Skype
  • Team
    • Product Teams from Kantar XTEL: TPM, TTC; IBP, Analytics, SFA)
    • Customers (Beiersdorf Germany and Beiersdorf Italy)
  • Role
    UI Designer
    UX Designer
    Design Lead
(02)
CHALLENGES
CHALLENGES
The redesign of the SFA tool faced several key challenges that affected consistency, prioritization, and execution of UI and usability improvements:
  • Misalignment with Branding Evolution
    The pace of UI upgrades and design implementation was slower than the company’s branding changes. This led to inconsistencies between the SFA tool, the main application, and the overall brand identity, making it difficult to maintain visual and functional coherence.
  • Lower Priority of the SFA Stream
    Compared to the TPM solution, the SFA stream had a lower priority due to its fewer active projects. This affected the ability to justify usability changes, secure prioritization, and meet customer expectations, making it harder to introduce improvements.
  • Lack of Alignment with Source Files Across Redesign Phases
    Over time, the redesign process shifted across multiple design tools, leading to inconsistencies and difficulties in maintaining a clear design history. The first redesign stage used Photoshop, Sketch, and InVision, the second round transitioned to Adobe XD and InVision, and today, Figma is the primary tool.
  • Role Shift in the Second Redesign Stage
    In the second redesign phase, I took on a supervisory and leadership role rather than actively working as a UI designer. This shift influenced the approach and execution of design decisions, requiring a different level of involvement in the process.
(03)
DISCOVERY
DISCOVERY
The SFA (Sales Force Automation) tool discovery phase aimed to identify and address the challenges faced by sales teams in managing customer interactions, tracking opportunities, and maintaining a seamless flow of information. The primary issue uncovered was the lack of intuitive, unified user interface screens and consistent flow between the touch and web applications. The web version had complex flows that required extensive training to ensure proper usage, making it difficult for users to efficiently rule and monitor the system. This misalignment between the touch and web platforms created a fragmented experience, hindering productivity and making it harder for sales teams to engage effectively with the tool.
(01)
HOW IS THE PROBLEM CURRENTLY BEING ADDRESSED?
The company has decided to invest in usability sessions and closely collaborate with customers to ensure these sessions are tailored to identify key pain points and opportunities for improvement. By conducting in-depth interviews and usability testing, the team aims to gather valuable insights directly from users, which will guide the redesign process. This approach focuses on improving the overall usability of the tool, aligning the touch and web applications more intuitively, and streamlining the user experience to ensure greater efficiency and ease of use for the sales teams.
(02)
HOW ARE OUR COMPETITORS ADDRESSING THIS?
Some competitors have adopted modular, customizable interfaces that allow users to tailor the tool to their specific needs, making it more adaptable and easier to use. Additionally, many are implementing real-time collaboration features and advanced analytics that help sales teams make quicker, data-driven decisions. Usability testing and customer feedback loops are commonly integrated into their product development cycles to ensure continuous improvement and alignment with user needs.
(03)
EXPECTED OUTCOMES
  • Modern and Consistent UI
    Creation of a new, modern, and fresh user interface that aligns seamlessly across the entire application, ensuring consistency and visual harmony.
  • Identification of Breakpoints and Improvement Opportunities
    Identification of key breakpoints and prioritization of opportunities for improvement through discovery and usability sessions.
  • Usability and Workflow Enhancements
    Implementation of improvements to enhance the usability of the touch tool and simplify the workflow between applications.
  • Improved User Experience
    Delivery of an improved touch solution that addresses current challenges and elevates the overall user experience.
  • Intuitive and Visually Appealing Interface:
    Provision of a more intuitive, visually appealing, and easy-to-navigate interface, leading to increased customer satisfaction.
(04)
DISCOVERY PHASE
During the discovery phase, we worked closely to establish a comprehensive UI repository, ensuring a strong foundation for the design of user personas, user flows, and the integration of new components into the UI. This collaborative effort allowed us to align on the key elements needed to improve the overall user experience. Once the repository and flows were defined, we partnered with the product team to prepare for the usability testing sessions. This involved identifying user personas, mapping user task flows, and creating realistic scenarios to execute during the testing. Throughout this process, we maintained close collaboration with the customer to ensure the sessions were properly tailored to their needs. We also shared the analytics outcomes and research results with the customer to provide clear insights that would guide the design iterations and drive the improvements needed for the tool.
(04)
METHADOLOGY
METHADOLOGY
The SFA tool redesign followed a user-centered approach, starting with a thorough discovery phase to identify pain points and gather user feedback. We then focused on redesigning the UI repository, incorporating new components, and aligning the touch and web applications for a consistent experience. Throughout the project, we utilized iterative design and usability testing, collaborating closely with customers to refine the design based on real-world usage scenarios. The methodology emphasized continuous collaboration with stakeholders, user research, and data-driven decision-making to ensure the final product met both user needs and business goals.
1. Discovery and Research Phase:
Objective: Understand the current pain points, user needs, and business requirements to inform the redesign.

Activities:
  • Collaborate closely with the product team to define project goals and success metrics.
  • Develop a UI repository to establish a consistent design language and framework for the application.
  • Conduct stakeholder interviews and collect insights from customers through usability sessions and feedback loops.
  • Define and create user personas and detailed user task flows, considering the specific needs of sales teams.
  • Analyze existing UI components and workflows across touch and web applications to identify gaps and inconsistencies.
2. Design and Ideation Phase:
Objective: Develop the design solutions that align with user needs, business goals, and technical constraints.

Activities:
  • Redesign the user interface with a modern, fresh, and aligned look and feel across the touch and web platforms.
  • Design and incorporate new UI components that simplify workflows and improve usability.
  • Iterate on the design by creating wireframes, mockups, and prototypes to visualize the new user interface and flows.
  • Refine the design solutions based on feedback from stakeholders and early usability reviews.
3. Usability Testing and Validation Phase:
Objective: Test the design concepts and gather actionable insights to refine the tool further.

Activities:
  • Partner with the product team to prepare for usability testing sessions. This includes identifying relevant user personas, outlining user task flows, and preparing testing scenarios.
  • Execute usability tests with a sample group of users, focusing on real-world tasks and interactions.
  • Collect both qualitative and quantitative data from the sessions, focusing on user satisfaction, ease of use, and task efficiency.
  • Collaborate closely with the customer to ensure that testing is aligned with their goals and expectations, and share research findings and analytics outcomes to guide further iterations.

4. Iteration and Implementation Phase:
Objective: Continuously improve the design based on user feedback and research insights.

Activities:
  • Analyze testing results and prioritize changes based on severity and impact on the user experience.
  • Work with the development team to implement the redesign and ensure technical feasibility.
  • Refine UI components and workflows to address pain points and improve usability.
  • Conduct follow-up usability tests, if needed, to validate design changes and ensure the solution meets user needs.

5. Final Delivery and Handoff Phase:
Objective: Ensure a smooth transition from design to development and launch.

Activities:
  • Finalize the UI design and documentation for handoff to the development team.
  • Provide detailed design specifications, user flows, and component libraries to ensure consistency during development.
  • Conduct training and support for the product team to ensure proper implementation of the redesigned tool.
  • Monitor post-launch user feedback to address any emerging issues and continue to optimize the tool.
If a building becomes architecture, then it is art
(06)
DESIGNING
DESIGNING
During the designing stage of the SFA tool redesign, we focused on creating a modern, intuitive, and cohesive user interface across both touch and web platforms. This included redesigning user flows, developing new UI components, and ensuring consistency in visual elements. Prototypes and mockups were created to visualize the new design, with iterative feedback loops ensuring that the user experience was continuously improved. The design aimed to simplify workflows, enhance usability, and create a seamless, user-friendly experience for sales teams, aligning with both user needs and business objectives.
SOLUTION
  • 2016 – SFA Touch Tool UI Redesign
    The project involved redesigning the UI repository and UI components with a fresh new style, defining user personas and flows, and restructuring the UI screens to align with the user flow.

    My Role: UI Designer, Design Lead
    I led the design stream within the product’s agile workflow, where I wrote, prioritized, and delivered user stories related to the design upgrades. I oversaw and supported the implementation of the design.
  • 2020 – Usability Research and User Experience Enhancement
    We conducted usability tests and interviews with Beiersdorf users to identify key areas for improvement. These findings were incorporated into the product strategy, supporting the implementation and upgrade of the new design.

    My Role: UX Designer
    I prepared user scenarios and planned usability testing sessions, executing and presenting the outcomes to both the customer and internal product stakeholders. I led the prioritization of the findings and integrated the results into the product strategy. Additionally, I supported the implementation and collaborated with the customer to present the upgraded tool.
  • 2022 – UI Upgrade
    The company decided to update the UI design again with a fresh new branding approach.

    My Role: Design Lead
    I supervised the upgrade and transformation of the components from Sketch to XD. Afterward, we created interactive prototypes using InVision to deliver the redesigned flows to the development teams and present the new tool to the product managers.
  • 2025 – New UI Transformation
    Working with a new design system, I’m currently redesigning all components and flows in Figma to ensure a modern look for the tool, aligned with the core XTEL application.

    My Role: UI Designer
    In this role, I redesign flows, deliver mockups, and create prototypes using new UI components to ensure a seamless and visually appealing user experience.
(07)
DELIVERING
DELIVERING
To ensure the successful delivery of each version of the design system, we closely collaborated with developers.
The SFA redesign project successfully resulted in a modernized, user-friendly interface that streamlined the user experience across both touch and web platforms. Through close collaboration with stakeholders and users, we identified critical pain points, prioritized improvements, and implemented a cohesive design system that enhanced both functionality and visual appeal. The redesigned UI was built with intuitive flows and new components, ensuring seamless navigation and reduced complexity for sales teams. Additionally, usability testing validated our design choices, confirming increased user satisfaction and engagement. The final deliverable included detailed mockups, interactive prototypes, and updated UI components, which were handed off to the development team for implementation, ensuring a smooth transition from design to deployment. This transformation has set the foundation for a more efficient and user-centric tool, aligning with the overall product strategy and business goals.
Made on
Tilda