aGENT TOOLS REDESIGN
Role: Lead Designer
Company: Belami Ecommerce
SUMMARY
As part of Belami Ecommerce's re-platforming effort, I had the opportunity to lead a redesign of the company’s internal sales agent portal. As a complex business dealing with many external vendors and various logistical challenges along with complex pricing, sales agents needed a workspace where they could log in to view warehouse inventory, adjust pricing in-cart, add notes to orders, and manage customer data (among other things) all within the main e-commerce site. The existing portal had been in use for years, but was scattered and visually fatiguing to use for long periods.
TL;DR - The Results
THE CHALLENGE
The legacy interface scattered key tools across multiple pages, with inconsistent design and harsh color contrasts that caused eye strain. Agents needed a consistent, intuitive way to access context-specific tools without breaking their workflow. In the screenshots below, it is easy to see how finding what was needed efficiently might be a challenge. There were even a few items that did not function as expected, or actions which appeared to be duplicates of each other, but achieved different results.
Details blurred for privacy.
REQUIREMENTS
As requirements for this project, I was provided screenshots of the old system as a visual reference and an outline which elements were essential, unnecessary, or nice-to-have. With input from the sales agents, we were better able to understand pain points and collaborated with developers to clarify technical requirements. From there, my options were open and I was essentially free to propose whatever method I thought might fill our needs.
Details blurred for privacy.
cONCEPT
I decided against repeating a version of the previous layout, where internal information presented next to external information. This method was not problematic for the experienced agents who had grown accustomed to locations and knew what information was available to be found, but was not ideal for less experienced team members or for onboarding new agents. Additionally, doing so would have added a level of complexity to the design of the website which was not feasible given our timeline and resources. Layout choices and pages would have to be created with two completely different views in mind.
Instead, I chose to consolidate all available tools behind a single floating button which would trigger a context-sensitive fly-out menu. This menu would allow agents to access the right tools depending on the page they were on, greatly simplify the interface implementation, and reduced clutter in the website design. We did keep some information below products, and greatly improved the line item pricing tools in cart.
Look how cute she is. Always wanted to name her.
dESIGN
For the new Agent Tools (as we named them), I developed a more muted, accessible color palette to reduce eye strain and improve readability. However, I did maintain bold coloring on key action buttons to allow the agent to find the key action quickly. Buttons like "create quote" or "save" needed to be easy to pick out quickly. I also just couldn't resist a cheeky icon on the primary button, as well as a little nod to the legacy format by leaving just a touch of the original yellow. It's important to remember your old friends.
CONCLUSION
After the initial design phase, I presented the Figma prototypes to the sales team and development stakeholders for feedback. As development progressed, we received some additional input and requests for clarification, but were pleased to see that the design concept had already anticipated most of the needed adjustments. The scrollable flyout proved to be versatile, easy to modify, and delivered a modern, cohesive experience that:
- Reduced visual fatigue for long-term users
- Simplified tool access and navigation
- Improved agent efficiency and satisfaction
- Provided a scalable framework for future enhancements