Starting Fresh: Everlaw’s Redesign Process

Last year, we kicked off Everlaw’s ediscovery redesign with a new logo. Since then, I’ve been working with everyone on the team to revamp our look—and to reflect it in our software and marketing materials. We’ve been focusing on not only our visual presence, but on the usability of our product.

old screens
Screens from our old design.

We were specifically looking to address pain points identified by users and by our team. For example:

  • Inconsistent and outdated icons
  • Confusing or cluttered interfaces
  • Unproductive homepage
  • Lack of optimization for small or extra-large screens
  • Vague language

Creating a New Visual Language

I started the redesign by creating a new visual language that we could use across our product. I began by creating color swatches, which are harmonious color palettes with specific purposes to be used across our brand. They can significantly improve a user’s understanding of an interface and enhance its interactivity. We use these new colors, fonts, and illustration styles in our ediscovery tool, emails, and print collateral.

swatches

Creating a Style Guide

However, colors and fonts are just the beginning: next is the shape and experience of the platform. Starting from scratch, I redefined every interface element used consistently across the product. Every button, box, pop-up, form, and card is now consciously styled, based on its context and function. For example, dashed borders represent buttons that can create a new element, and drop shadows are only applied to elements that overlap others to signify depth. To make sure our icons look crisp at any size, I manually created over 150 custom SVG icons.

UI samples
A sample of common user interface elements.

Improving the User Experience

Just as important as interface elements is what happens when you interact with them: how will the user know what’s clickable, or how will the user know that their batch process is actually working? Our ediscovery tool now has much more fluid and obvious animations that help users understand their actions.

Old and new search
Left: old search. Right: new search, where badges gently responds to your cursor.

Card User Experience

A bold interface element that makes up our new homepage are cards: boxes that hold your individual searches, binders, outlines, and tasks. We decided to create these color-coded cards after I brainstormed heavily with the team to address the lack of organization and priority in the old homepage. After much discussion, we felt that cards were the right choice because they take chunks of content and organize them in a way that’s easy to sort through, modify, and use. Because many of our users have lengthy lists of binders and would be frustrated by vertical columns, we also created an “expanded view” that hides other columns and alphabetizes the cards. On the previous homepage, you had to scroll through a table list to resume a binder or search, but with cards, it’s very easy to hide irrelevant content by using the fast and smooth Filter Box.

Filter Box
Quickly filter through all your cards.

We also decided users should be able to “favorite” cards, and designated the leftmost column for them on the homepage. By letting you aggregate the cards most relevant to you, those cards will be right there when you log in to immediately resume your review or outline. You get to choose what’s important to your workflow.

Creating Prototypes

Prototyping is a crucial part of the design process because it’s a quick way to show exactly what you’re thinking. Changes can be made and undone rapidly to explore lots of options. As a result, it is much easier to stay unattached to ideas that might not be the best solution for our users.

Therefore, after receiving feedback on the visual language and style guide, I applied them and created prototypes. I used Sketch to recreate every platform page and compiled a clickable prototype using InVision. In total, I made over fifty pages and states to interact with. For animations, I used Adobe AfterEffects to get my ideas across. With these tools, I was able to solicit helpful feedback and start great conversations with every member of the team.

Collaboration
Using InVision’s commenting system to collaborate.

Engineering the New Design

Our engineers translated the mockups into a working site for everyone at Everlaw to test rigorously, which took a tremendous and amazing amount of engineering effort. We examined every corner of the product and made changes accordingly. At every step of the way, we kept asking ourselves, “Will this actually benefit the user? Does this solve the problem?” I sat right next to the engineers to work closely with them and answer any questions while they implemented the new user interface. This collaborative process helped us revisit old problems and brainstorm new ideas on the spot.

New Screens
A few screens from the redesigned Everlaw platform.

The new look is now live! Though the big redesign is complete, we’re still working hard to keep improving our platform with our users in mind. Our pride in the fresh platform we’ve delivered to kick off the new year has only encouraged us to keep innovating. We always enjoy receiving feedback on how Everlaw can continue to push ediscovery forward!

 

Leave a Reply

Your email address will not be published. Required fields are marked *