Arcanite Agent Web is an all-in-one platform designed for real estate agents to effectively manage their sales-related tasks, which includes features such as a calendar, email campaign management, project database, and CRM system.
Introduction
After a year of launching the current system, we have observed an increase in the number of users and their demands for additional features. As a result, we have made the decision to revamp the user interface of the CRM system and incorporate more functionalities.
dEFINE THE PROBLEMS
Following discussions with our sales and customer support teams, I have identified some issues. Firstly, we now have a diverse range of user categories. Since signing up with several large agencies, our user base has expanded beyond individual agents, with customer service representatives in call centers becoming the primary users, of the CRM system. This has resulted in a change in the information architecture. Secondly, given the expended features, I need to reduce the overwhelming and improve the effeciency of UI.
Previous design: Due to the low efficiency of the interface layout, users find it difficult to quickly locate the information they need.
Defining Persona & Goals
Once the design direction was confirmed, I proceeded to build a persona by conducting interviews.
Name: Samantha
Background: Samantha has been working in customer service for the past 10 years. She started her career in a call center for a telecommunications company and worked her way up to become a team leader. She has always been interested in the property market. She has been with the company for 2 years and enjoys helping clients find their dream homes.
Story: Samantha makes more than 100 phone calls per day, she will open many contacts’ page at the same time and close it after she finishing log her talk. Every time she talk to a new contact, She needs to quick browser the contact’s contact history. After the phone call she needs to note the contact’s budget, preference, income... and assign the contact to a relevant agent to follow up.
Goals: Samantha's main goal is to Make phone call more efficiency. She wants to do less click to finish her task and jump to next contact.
Here we define the issues&needs
1
Quickly understand client preferences and suggest suitable properties.
System suggests properties based on analyzing users' preferences, such as budget and loan eligibility.
3
Track clients' sales stage and relevant records
Enhance the contact log feature and support the "Show related sales advice" function.
2
Efficiently jot down clients' details during a phone call.
Streamline the process of editing clients information fields.
4
Swiftly transfer a client to a sales agent for follow-up.
Streamline the process of creating task. Support assign task feature.
explore solutions
Based on interviews and the persona. I made three different wireframes. Each wireframe has its own pros&cons, making it important to carefully consider all options before moving forward with the final design.
Wireframe 1
Pros
By incorporating a side drawer, users would be able to easily and quickly access various contacts.
Cons
Less area to show contact related information
Wireframe 2
Pros
The page is divided into three sections: basic information, contact log, and tasks. The results of the first round of user testing showed that users were able to easily identify the different functional areas.
Cons
Less area left for the basic info field, which is inconvenient to call center staff. They need to edit contact info frequently
Wireframe 3
Pros
This wireframe could clearly show the contact stage, when assigning the contact to an agent, he can adjust the sale strategy based on the sales stage.
Cons
The position of the comment field doesn't match the users' mental model.
After reviewing these three wireframes and carefully considering the priorities of our users' needs, our team engaged in a discussion and ultimately decided to move forward with the last plan for further design. Then I create a high-fidelity prototype after the wireframe test.
Solutions-How does the design reflect the problems?
1
"Quickly understand client preferences and suggest suitable properties."
By conducting telephone calls, the customer service team gathers valuable insights into the user's purchasing preferences. Based on these tendencies, the system showcases properties that align with the user's interests.
2
"Efficiently jot down clients' details during a phone call."
In order to enable users to efficiently input contact information, I have designed a new set of text input interaction components. By implementing a blur-saving approach, the number of clicks required by users is reduced.
Users can quick edit contact info by hove&click
3
"Track clients' sales stage and relevant records"
The contact log plays a vital role in a CRM system. With the expansion of contact method categories, it has become crucial to provide users with quick access to important calls or meetings. To address this need, I have strengthened the contact log feature through the following enhancements:
User can quick update the contact log and connect project to this log.
Reorganize the log layout to highlight high-priority information.
The related sales feature supports users in quickly directing to the sales advice page.
4
"Siftly transfer a client to a sales agent for follow-up."
After initial communication with the client, the customer service representative can assign the client to an agent and schedule a meeting if needed.
User test & Iteration
To validate my design decisions and uncover hidden usability issues, I invited our sales team to participate in a high-fidelity prototype test. They were asked to complete common tasks performed by call center staff.
Think-aloud test with the sales team
Think-aloud test with the sales team
All tasks were successfully completed during the test, resulting in a significant improvement in system efficiency. The completion time for common tasks has been reduced by over 40%. However, based on hight-fidelity prototype test results and AI-driven heatmap test results, the elements on the top right of this page are likely to be ignored. Therefore, I made the necessary adjustments before handing over the prototype to the development team.
Heatmap
Focusmap
Move the action area to top left.
Handover & Design file management
To ensure the feature aligns perfectly with my design, the final handoff files include design annotations and measurements. These handoff files are organized by function and separated from the "in design progress" files, making it easy for the development team to access them. This ensures a seamless transition from design to development, with precise guidelines for implementation.
Handover design files to development team
You have reached the bottom, thanks for watching : )
