by.

Area and Company

In this project, my role as lead designer was to reimagine this legacy system. The goal was to bridge the gap between past complexities and future simplicity—creating a solution that not only meets user needs but also empowers them to work more efficiently with ease and confidence.
Overview
Winsupply and its e-commerce model rely heavily on a network of B2B companies and clients, with a comprehensive database that includes crucial details such as company locations and partnership information. This data was stored in an outdated HCL Notes system, which lacked the modern features required to keep pace with the evolving needs of the business. The "Area and Company" software played a central role in managing this information but needed an upgrade to improve user experience, streamline workflows, and enhance operational efficiency.
My Role
I established the EXR design practice at Winsupply, where I worked as the lead designer for this project. I provided strategic direction, mentored the team, and worked closely with stakeholders to ensure alignment with business goals. Through rigorous research and analysis of pain points, I delivered a user-centric design solution that drove both operational efficiency and business impact.
Users needs a streamlined, intuitive platform that brings all their updates and records together in one place, making everyday tasks simpler and more efficient without the hassle of navigating into more
complex systems.
Who’s Impacted

Department Users: Teams like sales, marketing, and purchasing rely on company data for daily tasks but often deal with inconsistencies when manually working across systems.

Governance and Executive: Leadership uses this data for strategic decisions and contract management, where accuracy and consistency are crucial.

Applications: Over 20 internal applications depend on this data, facing issues with outdated or inconsistent information.

Companies and Partners: External partners who need to update data and contracts were often hindered by the system’s inefficiencies.

Super Users: Individuals managing this vast data struggled with maintaining consistency and accuracy across multiple stakeholders.

The redesign streamlined these processes by centralizing data, establishing clear rules, and ensuring consistency across all users and systems.

What Changed
Redesign introduced a centralized data system with an integrated approval process, ensuring data accuracy and consistency across departments. A modern UI improved usability, while seamless interconnection between over 20 applications facilitated real-time data flow. The system also offers user-based access, providing tailored experiences for different roles, and enhanced security measures to protect sensitive information. This comprehensive update streamlined workflows and supported more efficient decision-making.

Balancing Innovation
with Legacy Systems
Let’s Get Started
I Crafted a plan to dive deep into the Winsupply model, mapping out user flows and processes to understand the current landscape.
Connecting with Stakeholders: Interviews with key stakeholders helped me gain valuable insights, offering different perspectives and a well-rounded understanding of the context from various standpoints
Comparative Analysis: Evaluated two CRM tools, two GRC tools, and one AI-enabled information and data dashboard tool to identify the most suitable options for AAC. This comparison was based on AAC’s diverse requirements and aligned with industry best practices to ensure optimal functionality and governance.
89%
Users mentioned that searching for a company is very complicated.
90%
Users struggle with the current manual approval process.
63%
Users complained about the existing reporting system.
No Scenic Route,
Just Speed
The process requires a comprehensive 360 view of the company—spanning governance, approval, and communication. All of these aspects were reviewed together, alongside user feedback. And  the first step was to define the scope for the first phase.
The system struggles and requires enhancements to improve weak search functionality, inefficient approval processes, and limited reporting capabilities. Key improvements include real-time updates, streamlined governance, and enhanced security, as shown in the following diagrams and snapshots.
TeAM WORKSHOP
What I Found ?
How I used It !
Since this was a design from scratch, I wanted to evaluate various interactions and features to ensure the best user experience. I crafted a list of more than 200 features and created a template to share with the team, allowing everyone to  rate each feature.

Chaos Meets Simplicity

I focused on the key details to maintain simplicity, with careful attention to every detail. Many tweaks might seem minor, but they significantly enhance the user experience
70% Simplicity
Our UX strategy also draws from Hick's Law, which states: "The more options a user is presented with, the longer it will take them to make a decision."
To apply this, we’ve streamlined our interface by minimizing unnecessary choices and focusing on the most important actions. This helps users make decisions faster, reducing decision fatigue, and creating a smoother, more efficient user experience.
30% Details
In user interface design, it's often the subtle details that make a big difference. Choices like typography, spacing, and content organization shape how users interact with and understand the information. By paying close attention to these small but important elements, we can enhance the overall user experience, making it more intuitive, engaging, and effective.

UX Strategy.
Keep It Simple.

I used the findings to create an information architecture that served as a guiding document throughout the entire MVP. The system currently faces challenges, including weak search functionality, inefficient approval processes, and limited reporting capabilities.
‍

Design.
Exploration.

For the landing page, I suggested creating a "My Workspace" feature that consolidates company information in one place. I came up with three ideas for the design
OPTION 1
Option 1 Dynamic interactive dashboard, where users can customize and arrange various widgets based on their preferences, offering full control over the data displayed alongside the company information.
OPTION 2
Option 2
Clean and straightforward layout that displays key company details, making it easy for users to access essential data quickly.
OPTION 3
Dynamic interactive dashboard, where users can customize and arrange various widgets based on their preferences, offering full control over the data displayed alongside the company information.
Inline Editing vsList to Detail Page
I explored inline editing versus a list-to-detail page approach, designing for inline editing and testing it with users to evaluate its effectiveness.
I created a functional prototype in Figma, which included all stages and states users can experience while editing inline. I tested it with users and shared the results with stakeholders.
Although inline editing was initially more appreciated, further user testing revealed that users were more accustomed to the list-to-detail page design. This approach proved to be more intuitive, as it allows users to easily access and edit information without requiring them to learn a new system.
I created a functional prototype in Figma, which included all stages and states users can experience while editing inline. I tested it with users and shared the results with stakeholders.
Tiny Details. Big Impact.
I evaluated the options of using Pagination or Infinite Scroll for the record table. Infinite Scroll worked better for us, especially because it allows users to continuously load and view records without interrupting their workflow. This approach eliminates the need for additional clicks to navigate between pages, providing a more seamless and fluid experience.
Infinite Scroll
Pagination
Further Iterations.
Iteration 1
Thr  first iteration of the design for the Company General page, we made several key changes to streamline the user experience. We removed the "Switch to Edit Mode" feature, as we transitioned from a list-to-detail page structure. This allowed us to eliminate unnecessary steps and simplify the process.
Iteration 2
In the second iteration, I simplified the page further by streamlining the menu, creating a cleaner and more intuitive interface. I also added filters to each field, enabling users to easily refine and filter data according to their specific needs.
Iteration 3
I focused on enhancing the export functionality, one of the most used features for managing company data. I added a footer that displays real-time information about the number of companies selected for export. This feature ensures that users can easily track their selections before exporting, improving clarity and reducing errors.
Iteration 4
I tested multiple ways to implement the filter functionality. The final version allows users to customize the table by positioning filters wherever they prefer within the table. The customization provides flexibility without overwhelming the user, improving the overall user experience.
Users.
Change Request.
View-Only Users: These users can access the information but cannot make changes, ensuring they have a clear and informative view of the data.
Change Request Users:
These users can submit requests for changes, allowing them to initiate updates while maintaining a streamlined and intuitive process..
Approvers This interface is designed for those who review and approve or reject change requests, ensuring an efficient and transparent approval workflow.
View Only
Change Request User
Approver
Colors Indicating
states
Grey: Default state
Black: Review state
Green: Pending request state
Blue: Edit state
Iterations Change
Approval Screen
Iteration 1
The first iteration of the request sender screen, I initially proposed a feature to allow users to view previous versions of the data. However, due to technical feasibility issues and the complexity of storing multiple versions in the database, this feature was not included.
Iteration 2
For handling multiple change requests, I added a button that allows users to easily view highlighted changes made by a specific user. While all users can see changes from others, they do not have the ability to cancel or modify these changes.
Iteration 3
I replaced the "Highlight" button with a "Review" button to allow users to view changes made by specific users. While all users can see others' changes, only the requester or approvers can modify them.
Iteration 4
I added a success message for senders to confirm when their change request is either canceled or approved.
Iteration 5
I added a "Review" section for users who did not submit the change request, allowing them to view and track changes made by others. This ensures that all users can stay informed while maintaining the integrity of the change requests, as only requesters or approvers can modify them.
Key Screen
Aha Moments
Unexpected ways. Here are some standout moments.
Landing
The landing page design is simplified, showcasing only the most necessary information. It includes intuitive filters to help users easily retrieve data. The tables are fully customizable, allowing users to adjust them according to their needs.
Detail Page
The detail page appears when a user selects a company, displaying all relevant company information. The lengthy details are organized into meaningful tabs, making it easier for users to read and navigate.
Approval
Approvals are crucial for this app, as only a select few can approve change requests. This process also helps them maintain a clear record of all changes.
Review
The review page is used by the approver to review change requests. This is the stage where they can decide whether to accept or deny the change. The action they take is then communicated back to the sender of the change request.
Success
This part informs the user that the approver has reviewed and approved the change request. It confirms that everything has gone through without issues.
Journey Begins
This journey was a test of adaptability and focus, pushing me to grow in   unexpected ways. Here are some standout moments.
Winning Moments
•
Delivered Solo: Covered all project requirements as the sole designer across four major projects.
•
Defining Scope: Defining the scope was a major challenge, After the stakeholder meeting, the next challenge was prioritizing what's most important. This required numerous meetings. I felt accomplished and gained valuable insights.
•
Adapted to Winsupply's Business Model: Quickly earned how different entities were linked within the system and designed solutions to streamline communication across all levels.
Lessons Learned
•
Strategy and Details Matter:I went through multiple iterations to keep the experience simple and user-friendly. Balancing overall strategies with UX details was essential to ensure a seamless and effective design.
•
Frugality: I found creative ways to incorporate the requirements in a technically feasible manner while keeping costs manageable.
•
Team Changes: Throughout the project, there were several team member changes, and I had to educate the new ones while balancing that with delivering on time.
The Team
This get-together with the larger Winsupply team was a blast! A few of us were dedicated to this project, and it was an absolute pleasure working alongside such a talented and supportive group.