The Client already had a working website but wanted to add extra value to the service.

The Client already had a working website but wanted to add extra value to the service. Initially, it was targeted to single users (order adults) but business owners saw the opportunity to extend service on attorneys and lawyers. The Client hired the team to develop the structure of the service to be intuitive for the attorneys, but at the same time, easy enough to understand for inexperienced users. Also, our responsibility was to redesign the service and give it a modern touch.

The main stages of the process

Empathizing

To understand the problem, we got a detailed description of the target user from the stakeholders, analyzed the competitors, and defined the user stories.

Ideating

To find the solution to defined problems, we gathered ideas and tried to find the opportunities for the visual representation of the solution based on the pain points of the user.

Prototyping

To test our ideas, we prototyped the high-fidelity design and tested it with the attorney, who gave us the impression of usability and improvements.

Design

To get a consistent design, we defined the guidelines and created a design system for the product. Based on those visual rules, we finished the actual design of the service.

The challenges we met

Two functionalities

The main challenge was to combine in understandable and easy to use way two functionalities: Planning that provides a general structure for Client's files, and Vaults that provides the distribution of these files between delegates and recipients.​​​​​​​

Understandable

We needed to create the service to be understandable for both attorneys who would manage Client's records, and for the single users who would manage it for themselves.

Information distribution

We needed to create a system of information distribution between delegates and recipients.

Implementing partners' businesses

The business has a few partners whose services should have been implemented into the design.

User personas

To develop empathy and understand the user's perspective, we asked stakeholders to describe the target audience, and based on that created proto-personas. This project had an agile timeline, so it helped us to get into the theme quickly and have the foundation to build a usable and desirable design.

User stories

User advocacy is at the heart of usability, so to develop a deep understanding and learn for whom we build our product, we created User stories.

Research summary

After analyzing the results of the initial user testing and interview with an attorney, we found the pattern which shows that the target audience (attorneys and legal advisors) want to have a tool that will provide rational structure they already familiar with working on Client's papers. So to achieve the peak experience for attorneys, we need to distribute all the legacy documentation the same way they already do that – between two main groups: assets and debts.

Information architecture

Information architecture
To reduce wasteful cognitive load, we decided to combine four initial categories (Planning, Vaults, Recipients, and Delegates) into two groups: Planning and Vaults. So we decided to cut out Delegates and Recipients tabs and moved them into the planning functionality.

Wireframing

The first version of the design layout had all the information inside the top bar. But it didn't give us enough visual distinguishing of the page elements, so we decided to work with the card design. That allowed us to move all the essential information to the left bar. But the user card still was too big and draw too much attention. So we decided to move the user info above the cards and use the sidebar as the category indicator area. ​​​​​​​

Challenge 01: How to combine two functionalities

The solution: To combine two functionalities (Planning and Vaults), we built the flow where the process is intuitive and consists of simple steps: User uploads the file ↝ Assigns it to the Vault ↝ Assigns the delegates and the recipients ↝ Delivery settings

Challenge 02: Understandable for both attorneys and regular users

The solution: To be intuitive for the legal workers, we redesigned the whole structure the way they are familiar with. And to be simple for the users who will collect docs themselves, we made sure the system is easy to navigate and learn, and also we provided the tooltips for a lot of functionalities.

Challenge 03: The system of information distribution between delegates and recipients

The solution: To distribute all the information between delegates and recipients, we decided to put files to Vaults and assign people to delegate or receive this particular Vault. For quick understanding and control where the file is located, we created a color system of vault tags with the assign/unassign file process.

Challenge 04: How to implement business partners services

The solution: We implemented the partner businesses to the design as the buttons on the starter pages for the different categories of documents. As an example, Users can use the partner tool to add credit card information to the debts section in the Planning tab.

Structure

To make a smoother transition to responsive design from desktop to tablet version, we decided to build two main visual blocks on the page. The first one is the sidebar with categories of legacy planning or vaults information, and the second one is the data block that adapts flexibly to the content. ​​​​​​​

Summary

As the final product, we got easy to use, understandable, and good-looking service that changed the whole quality of the experience. We dramatically simplified the user experience, focusing on interactions, speed, and simple navigation. The result taught me that there are not too complicated information systems but bad built information architecture and unestablished hierarchy.

What have I learned from this project

Research is powerful: We've had to deal with complicated information categorization but hadn't had any experience in a legacy field. The research showed us that the initial information architecture was confusing and unrecognized by the target audience. That led us to develop the information structure properly.

User-driven design will always win: I used to make a decision based on my preferences, but working on this project taught me that I couldn't be an expert in a lot of fields. It was an eye-opening experience, as I understood that my point of view is very subjective.

Next steps

Although this project ended with a completed design and interactions, I would still like to continue refining the design. The next step would be to pass the final prototype screens to developers.