Problem
JDocs was introduced to me as a startup e-Discovery tool that emphasizes the user experience for modern data collection. With a working back-end, the founder asked me to join the team to design and develop a dedicated front-end experience while also solving a main problem:
How can we display multiple types of data that includes mobile domains?
Words from the founder
Jake Downie (JDocs Founder) via LinkedIn Recommendations
“
Nick was an invaluable addition as one of our founding team members at JDocs. His expertise in UX research and design were critical to our success, a sentiment echoed by the entire team. Impressively, Nick also rapidly mastered React and delivered high-value features, making a tangible impact on our codebase.
My Role
UX Designer
Front End Developer
Acted as the primary UX/UI Designer during the first half of the project to create wireframes and prototypes.
Transitioned to the Front-End Developer to develop the designs into working software.
Tools
Figma
React
Material Design
Wireframed and prototyped the web app with Figma, utlitizing its advanced component and layout features.
Used React and the Material UI toolkit to implement the wireframed components into MUI components.
Scope
Summer 2022
This project took place from May - August of 2022.
Video Prototype
Watch a video of our prototype.
Research
What is e-Discovery?
E-Discovery software is used by legal professionals to process and review electronically stored information as evidence in legal cases. While numerous e-Discovery software exists, the volume and complexity of clients’ data leads to a complicated user interface and a non-intuitive user experience.
Competitive Analysis
In order to better understand the process of e-Discovery, I tested other leading web apps in the industry and analyzed their strengths and weaknesses. I found common UI concerns including:
•
Cluttered interfaces
•
Steep learning curves to use the software
•
File types that display as dumps of data output, making it difficult for users to parse through
Our Users
Because the users of our system are legal professionals, they are not particularly tech-savvy. Instead, they want to use the software to make their work easier, not harder.
Design System
Before designing the UI itself, I needed to come up with a solid brand identity for JDocs, including a new logo, a consistent color scheme, typography, and components.
Logo
Before hiring me, JDocs commissioned a logo online to use temporarily. The logo lacked a meaningful identity to the company and required a redesign.
I combined the iconography of a document into the J of “JDocs.” As the document fuses with the letter J, blue fragments appear throughout the letter, mimicking torn pieces of paper. This symbolizes the software allowing a once paper-dependent industry to transform into the digital world.
Color Scheme and Typography
Sticking with the colors and font of the logo, I opted for a blue and gray color scheme and a Helvetica-style font to portray a professional and trustworthy identity.
Components
Next, I designed the initial components based on Material UI. I used Figma’s auto-layout features in order to translate to flexbox later on, and used Components and Variants in Figma to utilize consistent design.
Here are some examples, including TopNavBar, Cards, ActionButtons, and SideNavComponents.
Solution
Mobile Data Displayed
With so much of our data on social media and mobile apps, it was important to display this data intuitively.
As a result, data coming from messaging apps and social media conversations would be parsed on the back-end and displayed just as it would if it were viewed natively on the client’s smart phone.
Real Feedback
As is the nature of fast-paced startups, we were able to test this feature rather quickly. During this period, we were working with a client who needed to view evidence from two mobile messaging apps that were extracted as large JSON files.
Our client was able to use a beta version of our web app to successfully view the JSON files as formatted conversation-style messages.
Conversation Card
Used to represent a message or group conversation, parsed from data files.
Translating to React
Using flexbox and React’s prop state management, it was intuitive to translate my Figma components like the Conversation Card into React MUI components.
Full Wireframes
Take a look at some of the full wireframes for the web application.
Dashboard
The dashboard of the JDocs web app showing pinned cases, number of hours worked, and recently viewed files and queues.
Files
Tile View
A view showing the files and folders of a case in the form of large tiles.
At the top right, users have the option to sort and filter the files, as well as save one or more files to a Queue.
List View
A view showing the files and folders of a case in the form a list.
File View
An example file showing a PDF that contains the tags 'Privileged' and 'Finances'. The user can traverse through the files using the arrows at the top. The user also has specific file actions like download, delete, and view more information.
Queues
List of Queues
When users save a group of files, it gets collected into a Queue. This allows the users to organize groups of files that need to be reviewed.
Each Queue card displays the amount of files that have been reviewed, the total hours worked within each queue, and a progress bar giving a quick indication of how many more files are needed to review.
Single Queue View
Within each Queue is the progress bar, the members that have access to the Queue, and the reviewed and unreviewed files.
File View Within a Queue
Unlike the default file view, the Queue file view contains the progress bar in the nav bar. As users traverse through the list of files and mark each file as "Reviewed", the total progress increases.
Searching
Search Dropdown: Level 1
Showing the search dropdown, with the user entering a search field and selecting various filters and tags.
Search Dropdown: Level 2
When the user clicks on "Advanced Search" a more thorough dropdown is presented, with advanced filter options including date and file types. Users also have the option to change 'AND' selectors to 'OR' to further refine their search.
Search Results
Showing the list of search results from the user's specified search, highlighting the file types and tags that were selected as well as the search term in bold after each file.