Information Architecture: Project Setting/Edit in SAAS
SaaS products are often complex products. With a lot of information that they carry, it becomes crucial to properly structure, segregate and group the information so that it could be consumed effortlessly.
Overview
For a SAAS platform in real estate, we had a Mandate page that carries the basic information of different projects that are currently on the system. In simple words, a mandate can be a developer and a project will be different projects under the same developer.
Every project contains a lot of data and settings. Data like project details, virtual number settings, teams settings and many more. It often becomes very complex to filter down to the information needed, with the existing solution.
Pain Points and their Solutions
1. Navigation & information architecture
All the information that was required was inside a single scroll. At the time of inception, there was much less information so it was usable, but later the data increased and the design failed to scale. As a result, the scroll became an infinite scroll with a lot of data like table and listing also coming in between. Also, without proper UI guidance, it became hard to reach to the desired field of information.
Solution
Going forward to solve this I created different buckets of similar information. Some buckets even had their sub buckets. To navigate through these buckets I gave a panel. This was essential to go with the user's mind map. The information was divided into basic details, virtual number, leads, teams etc. This degradation of the data was keeping in mind the nature of information and their use cases. For example, virtual number was outside and not in basic details because user edits virtual number more often than basic details.
2. Virtual Number listing and creation
Virtual numbers are actually common numbers that the customers can dial. These numbers are assigned and serviced by different teams.
As in the above image, it can be seen that there is a team with its properties tagged with virtual numbers. The information seems too overwhelming to consume at first glance, also it is not scalable in the case of multiple teams or numbers.
Solution
Virtual numbers segregated in a list which makes it easy to comprehend. All the info needed along the number is presented neatly in the list view which can be sorted by the list header, making it further easier to reach what a user is looking for. Assigning new virtual number is also simplified and broken into easier steps, which makes it super easy even for a first time user.
3. Team management listing
Managing a team is a very complex flow in this system. I am saying complex because of the sheer number of use cases it has and on top of it, there could be multiple teams.
Solution
The first and foremost thing was to give clear visibility of different teams. Then to give a list of people for a particular team. After that details of the team member and list of actions to be taken.
The actions were divided into three categories:
- Global level (to be taken on all teams)
- Mid-level (to be taken on the entire team)
- Agent level (to be taken on each team member)
4. Campaigns Integration Listing
Campaigns integration is a marketing feature to see details about the campaigns which are up.
5. Visibility for completion
In the old version, there was no way a user could check the completion status of any mandate. Completion means all the information is filled and completed while creating a new mandate.
We tackled this problem in the new version by showing a progress indicator on the left panel. A green tick appears in front of each tab on the left panel if all the information under that tab is completed.
A user in a glance can know where the information is missing.
6. Details where needed
There are some complex technologies in this system, which sometimes are not understood or misunderstood or not very clear. To communicate better we introduced the hint text and a tooltip in almost all the places where it was needed. It enabled the user to complete their task more efficiently. The information was available where it was needed.
7. ‘Create new team’ flow — Old vs New
The old design was created to cater to a few teams. So the form was such that it worked for 1 or 2 teams. It was a plain linear flow of information. The new design is made keeping the scale in mind. Now a user can add any number of teams without hassle. Key highlights of the new design:
- Opens in a modal (helps reduce the load on scroll and keeps the context intact)
- Two-fold (The first form opens basic fields and the second level of information is hidden under ‘Advanced settings’.)
- Use of better UI elements (It guides the user well in the journey and increases the affordance of the product)
With this, I have mostly covered the major changes that happened. I always believe whether its a B2B or B2C product, it should always talk to the user.
If the communication between the user and the product is in rhythm, huge and mundane tasks also become exciting.
