top of page

Eigen platform redesign

Refreshing the user experience of Eigen's proprietary AI software to make for a more holistic and efficient work flow.
My Role:

Senior Product Designer​, Design System Designer

Tools used:

Figma, Experience Design, User Testing, Journey mapping, Prototyping

The Eigen platform has faced enduring UX challenges, including confusing navigation, multiple codebases, and inconsistent branding, resulting in a disjointed user experience, for nearly a decade since its initial release.
Eigen has developed proprietary technology that enables the extraction of text, tables and checkboxes from a variety of document types using AI and machine learning. Models are trained to look for specific 'answers' to 'questions' asked by the user, which can then be used to extract those same answers on tens of thousands of documents at a time.

The original UI was designed for a single use case - the extraction of passages of text - and while new features have been added and new releases continue to be delivered , new use cases challenge the existing design. A confusing navigation, multiple codebases for the same components, misaligned branding and inconsistent UI stylings means that using the platform can be quite jarring at times, and this has been noted by some of our clients. The user experience to date has been a series of organic add-ons that don’t really have a home (e.g. Global Search, Review Hub) and developing new experiences, like Clause Comparison and Pre-Processing Hub has been difficult to implement in the existing UI.

The design team has been hard at work updating the user experience of the platform, which hasn’t been updated for nearly 10 years, since it was first developed.
Eigen old projects screen.png
Eigen platform site map.png
Users faced multiple challenges including readability issues, confusing navigation, hidden processes, and design constraints, necessitating a fresh approach; planned enhancements didn't align with user needs for upfront document information, posing a significant design limitation.

Clients and internal users have catalogued a multitude of issues, ranging from:

  • long document or question names being unreadable due to truncated text;

  • a confusing side navigation that changes depending on the context, creating an inefficient task flow;

  • offline processes not visible in the UI;

  • colour schemes that misalign with the external branding

  • a time-consuming and constraining user flow when performing repetitive tasks to name just some of the more obvious issues.

The decision to stop supporting older technology also required some improvements to the platform and this allowed me and the design team the opportunity to deliver some quality of life improvements at the same time. However, more glaringly, the outdated look and feel of the platform was beginning to make it difficult for new customers to get on board with the product, so a new approach was needed. 

Additionally, the items we had on the roadmap to enhance the product offering simply did not lend themselves to this user experience. As an example, we wanted to provide more up-front information for each document, showing that they have had OCR detection, table and checkbox detection, plugins applied, whether there’s labelling applied and if they’re used in a model. Further, users have expressed a need to see user attribution and the introduction of tags. The current designs (above) do not have the flexibility to show all this information in an intuitive way.

Eigen legacy UI Docs page.png
From a component point-of-view, it was discovered that the frontend developers were having to maintain multiple codebases for the same elements. For example, the annotator view, which is used as the one of the main ways to complete a task on the platform, had four separate instances of code, usability and design. These annotators all required manual updates whenever a new feature had been released on the platform. 

Additionally, an audit of the platform revealed that there were
twenty-one different input component styles across the platform, numerous button styles and around four-hundred shades of the main platform colour. This was obviously unsustainable from both a design and a development point-of-view.
All input types.png
To create a cohesive brand experience in the Eigen ecosystem, we mapped a new UX flow based on user feedback and validated it for alignment with their needs.

The other designer and I needed a goal to aim for with our solutions, so we first mapped out a proposed new UX flow that incorporated the feedback we'd been receiving while making a more intuitive and streamlined workflow. We knew this meant redesigning the entire user experience, but it was necessary to ensure a consistent brand across the Eigen ecosystem. We validated the proposed UX flow with our users to make sure we were on the right track and made amendments to suit their needs.

Eigen high level UX userflow proposal.png
Eigen UX userflow proposal.png

In order to address all of the concerns raised by our users, we set about completely redesigning the UX/UI of the platform, while retaining the main essence of the tasks that need completing. We wanted the platform to feel less like a collection of individual tools and more like a Swiss army knife, one capable of creating a workflow that makes sense for the present but allowing flexibility for enhancing the platform in the future.

 

To do this, we targeted the creation of four new reusable components:

 
It was then decided that these components will form the foundation of the new UI updates, providing a functional but flexible answer to many of the concerns raised by our clients and users. These components will speed up designs, unite codebases into a single source of truth, provide consistency across the platform and unite our external branding with our internal product.
We made the decision to create reusable components that were structured enough to fit the task they were created for, but had enough flexibility about them to be expanded upon in the future. Working with the frontend developers, we decided which would give us the most bang for our buck that would allow us to 'go fast and break things' in a four-week sprint.

As it required the most configuration and was used most across the platform, we built the List View component first, followed by the Global Navigation and then the Page Header.
List types.png
List view component breakdown-1.png
List view component breakdown.png
Global nav.png
Page header hierarchy.png
Page header types.png
Once the components were built, a hybrid integration was considered the best course of action for the MVP, so that we could still use the platform, but take advantage of the new components, and give our clients a glimpse of the future we were working towards. This meant that there would be some elements that remained in the legacy styling, such as the Tables, Annotator view and other bespoke elements. It was decided that the UI redesign would be a 'one-for-one' update, meaning the existing functionality would remain and no new functionality would be built at this stage. These updates were scheduled for future updates to the platform.
Questions list a.png
Questions list b.png
Interactive prototype

Have a click around in the prototype below to get a better idea of how the UI update comes together for a more seamless and intuitive experience!
bottom of page