Re-designing the interface
Before
Salestrekker is a CRM designed to facilitate home loan deals for home loan brokers. Disruptiv were engaged to resolve some of the usability issues in the deal view screen. The issue being, when a broker clicks on a home loan deal the deal view screen was challenging to use. Three key issues were raised.
1. The hierarchy of content and actions were not in a logical order
2. There were multiple buttons with different colours so a user was unclear what they needed to do next
3. Navigation was missing
4. Typically navigation was in the left column however, information in the left column related to the context of the deal, which was being overlooked
Developing user stories
Defining the problem
There was over 40 functions within the interface so to ensure all functions were considered and leveraged correctly in the new interface we created a comprehensive user story document where we explored all of the typical experiences of all users.
This helped us construct the customer experience maps in a way that helped us respect all of the current features and functionality and apply them more effectively to demystify the user experience. Apart from the design issues, by conducting this exercise we learned that there were user journeys which were not being considered, such as:
1. How do I share the deal with a client so that they can fulfil a fact find
2. How do I navigate between screens?
3. How do I obtain establish which document and contracts have been signed?
4. How do I obtain a signature on a contract and store it in the system?
5. What are the key tasks that I need to do on this screen?
6. If there is a task set against this deal we may need to provision for sub-tasks..
UX/UI Design
After
Due to complexities of the interface we constructed the prototype in Axure to facilitate all interactive functions.
Now that the design and functional gaps were identified in the previous steps we resolved the following issues:
- Context: Re-arranged the content hierarchy in a typical workflow, what is the status? What is the context? What do I need to do? And how do I find information relating to the deal?
- Engagement: We introduced an interactive task bar beneath the “Deal Detail” section to create an ‘actionable workspace’ for users to tasks relating to the deal. This removed the need for buttons and multiple ‘go’ colours. All actionable CTA states are now only orange to make the experience consistent and more intuitive.
- Navigation: Real estate in the left column was reserved for a navigation bar and tabs underneath the task bar were broken up into notes, files and documents to make it easy for users to find elements relating to the deal. This made it easy for non technical users to navigate around the screen without having to read complex user manuals.
- Collaboration: In the top right hand corner users can share electronic forms with clients to collect key personal and financial information from the client, which is then integrated into this deal view screen. This tactic reduced manual labour and increased adoption from broker users.
