Technologies
Redesign of Pangea’s SaaS Web Portal
Overview
About Pangea
Pangea has been a leading provider of customized in-store messaging solutions to the grocery, wholesale and retail industries for over 22 years. The company offers a robust, enterprise-grade SaaS platform that manages all in-store media programs in one unified platform. From self-edge tags, price/item signage, planogram shelf-strips, and more, Pangea helps clients implement new promotions, standardizes marketing, and manage pricing quickly and more effectively.
Saritasa put the time and effort into understanding the scope of the project before they began working. They had a senior architect who took the time to cross the t’s and dot the i’s to ensure everything was needed for the project. If they had a problem with anything, they would let us know. I trusted their team to give us exactly what was going to take place without any ambiguity once we started working on the project.
Many of our clients have started using the new portal and are blown away by how remarkable it is and how it makes their lives much more efficient. The portal doesn’t have too many buttons, and everything is streamlined and flows in the right form, which reduces the amount of time they have to spend using it.
Kamil AsfourCTO at Pangea
The Challenge
Designing a modern solution for a complex legacy system
Pangea offers a custom SaaS web portal for clients to manage their own signs and tags. Unfortunately, the legacy software was developed over 15 years ago and no longer supported by the original development team. The portal itself was extremely complex, filled with depreciated features and confusing user flows. Pangea approached our team to redesign and rebuild the customer-facing web portal from scratch.
Designing our solution
The project started with a simple goal of improving the existing system to make it more user friendly. But, as we uncovered more and more about the legacy web portal, we realized a complete redesign and restructure was critical. We aimed to simplify the complex user flowers and make it easier for users to navigate through the system.
User Interface Audit
The first step of understanding Pangea’s massive software was to audit the existing system and get a solid grasp of what we were starting with. This is where open, honest, collaborative communication was critical. We worked closely with the team to deconstruct their legacy menus, identify key user flows, and uncover the underlying logic of the system.
Permissions Matrix
From there, our design team broke down all the pieces of the software and mapped them against the existing roles. Pangea has multiple different types of users, from division managers to individual stores and an admin backend. Each role has different access and permission to the system’s features. Ultimately we found we could remove 20% of actions from the system hierarchy, simplifying the end-user experience significantly.
Component-Based Design
One of our main goals for the redesign was product consistency. We wanted to ensure that users have seamless experience across the entire product, so we created a component and style system where we documented all our design decisions. This creates an intuitive mental model for users because all components (input fields, buttons, tables, etc) follow the same patterns, while simultaneously making it easier to manage changes for future interactions.
Design Prototype
It can be difficult for people to visualize what still design screens will translate to once developed. It can be especially difficult to adapt to a redesign as massive as the one Pangea undertook. We wanted to ensure the client’s team fully understood our proposed system changes prior to development, to prevent slowdowns or last-minute changes. So, our team built prototypes of key user flows and screens, allowing us to demonstrate exactly how the system would function and get informed sign off from the client.
Developing our solution
Once the complex logic and user flows were designed and approved, our development team stepped up to build and deliver the end-product. While the designs did a great job of simplifying the system for the users, the actual development was still extremely complex.
Frontend Development
The web portal allows Pangea’s customers to create, store, and manage printing of price labels and tags for products. The legacy system was extremely outdated, unintuitive, and difficult to navigate. Our updated front end provides a significantly improved user experience with simplified layouts and updated functionality.
API Integration
Pangea has an existing backend and database built and managed by their own internal development team. We worked closely with their developers to set up an API to integrate our new frontend with their existing system
Complex Business Logic
The system contains a massive amount of business logic, with tons of outliers and unique cases to consider. Divisions (corporate stores) set prices and promos each week, then push those out to individual stores. Local stores are able to review and edit individual promos, tags, and labels before sending the final versions off to the printer. These updates happen on a tight timeline every week.
Quality of Life Improvements
The entire system is filled with various quality of life improvements to make it easier for end-users to manage their stores. From auto-ordering of common tags to inventory tracking to simplified batch ordering, we focused on finding areas to optimize the system for peak performance and efficiency.
