Revamping a legacy Salesforce application
Task
Revamping the user and visual experience of a legacy Salesforce application.
The current broker management system was functional but outdated visuals and broken experiences made it difficult for the brokers and agents to use the system to its full potential. With real estate season looming and many brokers and agents set to join the portal, the need to redesign the system with a better experience and modern visuals was proposed to the client.
Research, Audit and Information Architecture Revamp
Redesigning a Legacy system is a challenge. Redesigning the system without proper support and understanding of the system is catastrophic. The need to design the experience so that it doesn’t affect the set processes is a difficult thing to do, but with a supportive team and product owner, we hit the ground running in the right way.
I proposed the idea to start off with a complete audit of the system to get an idea of all the internal processes. I also asked for some information from the client on the experiences of the current users of the system – that’s something we could keep in mind when we would look in to the process flows of the components, deeper into the system.
Audits are fun. I went component by component, screen by screen, functionality by functionality of the system. Extensive notes, screenshots were taken to support the audit and was shared with the client. The audit revealed a messy information architecture in their system and elaborate process flows at the component levels. With the audit information in place I reworked on the information architecture of the application, putting together a sitemap diagram that would make the application much more easier to navigate.
With the sitemap in place, a main dashboard for the application (which wasn’t there in the current system) where the users would get an overview of everything happening was proposed. This would make their life easy – instead of navigating deep down into each component, they could find what they were looking for on the front dashboard. We also proposed a fresh left panelled navigation with all the components grouped to their respective purpose.
This dashboard was met with a great response. With the direction set in place, we started looking into the flows of each component in the system and made the experience smoother wherever it was necessary. Of course this was done with assistance from the development team, since any changes in the flows could affect the backend of the system.
Once we started working on the visuals for the system, we touched base with the client’s UX designer as frequently as possible to ensure we were all in the same direction while working on the UI. The designer shared the brand guidelines and design system with us – a great asset since I needed to design about 80 consistent UI screens. When each component was complete, I would mock up the screens in Invision for an interactive prototype which would be demoed for the clients.
On completing of all the screens, we shared them with the designer for his sign off and feedback, if any. Throughout the entire design process, we ensured that the client was always aware of what was happening. This was achieved via effective communication in emails and on our Jira Stories.
With all the flows and visuals in place, I worked with the Design head and UI developer to ensure all the screens were coded pixel perfect. We tested every flow, every screen and every visual to ensure we delivered everything perfectly to the client.