09. 2020
Étude Smart Document Reader Redesign
This is a new look at a startup project that I took on with JADE Technologies. Étude is a desktop client of a smart PDF reader that uses AI to help users better understand a document.
Context
In 2019, I worked with the Georgia Tech startup JADE Technologies to develop an early concept for their user interface for their AI-powered document reader Étude.
The startup went on to place 1st in the Georgia Tech's Inaugural Catapult Competition, 2019.
Looking back, I see a lot of opportunities to improve on the original design, so I decided to revisit this project and see what I would do differently.
The startup went on to place 1st in the Georgia Tech's Inaugural Catapult Competition, 2019.
Looking back, I see a lot of opportunities to improve on the original design, so I decided to revisit this project and see what I would do differently.
What's Étude
Étude is a desktop document reader.
Étude allows you to search the document using questions, and can give you a smart summary of the document, all using artificial intelligence.
Why Étude
Reading long documents is slow and painful
Higher education students on average spend 14.1 hours a week reading a variety of academic materials. Étude aims to not only make reading faster but to also improve comprehension .
Designed to
facilitate reading.
facilitate reading.
A clean, gray-scale interface replaces the large, gradient-filled banner from the previous design. You can focus on what's important, but still easily find the feature you need.
The Tab System
You can now open multiple documents at a time with the new tab system. Library is now also a tab, keeping all things document in the tab bar.
Smart Summary
The AI-powered summary will scan through the document and make a summary of what's most important.
Hybrid Search Bar
The new search bar lets you search for questions in the document and exact text match in the same place.
Save Answers
Found an answer that you find really helpful? You can now save it.
Collection
You can now find all of your bookmarked pages and your saved answer in an organized collection.
The Design Process
Problems With the Old Design
The old design lacked depth in feature implementation and lacked a clear structure for its features.
The summary button is in the way and the save button doesn't correlate to the page.
The search bar doesn't distinguish between smart and exact search.
There's no place to store the summary, and the summary includes unnecessary information.
The library and document management system can be better.
Research insights
To understand how I can improve on the previous design of Étude, I interviewed three different students on how they read PDF documents and what their opinions on the previous design.
01
Be a good PDF reader first and foremost.
Bright colors and buttons over the text might be cool to look at, but they can distract from reading and understanding the document.
02
Multiple documents opened at a time.
The old Étude design only focus on one document, but students oftentimes have 3 to 5 documents open at the same time to cross reference. A better document management system is needed.
03
Store the results
The old design doesn't provide ways to save what comes out of the smart search and summary features. Users don't want to have to search/summarize again every time.
New Structure
I distilled the user flow of Étude down to three main branches so that I could focus my design on these important parts.
Early Search bar iterations
While Étude's smart search is an important feature, many users also wanted the conventional ctrl + f exact search. Here I explored different ways of toggling between smart search and exact search in the tool bar.
Design E was chosen because users like how you can see the number of search results before you have to toggle the two modes.
Tool bar iterations
The tool bar is one of the most important UI elements in the design, and I went through many iterations to find the optimal placement for all of the features.
Designs that grouped similar features together proved to be more straight forward when testing with users, and design G was picked. Both the collection button and the summary button leads to stored information, while the search bar finds information.
Visual Language Iterations
With the new design structure, I iterated on different ways of incorporating the branding gradient into the interface to make it feel more coherent.
Final Design
The final design accentuates the tab-focused structure of the design. Controls that affects the current document are all inside the tab.
Next Steps
Refine summary functionality
The summary feature feels a bit simple at this stage, and it is also constrained by the technology behind it. It would be great if I can dive deeper into making it a feature with more depth and utility.
More animations and interactions
I would love to work on more animations and interactions for the design especially for summarizing the document to encourage users to use the features.
What I learned
How to focus and scope down the project
Designing the whole PDF reader interface is a very daunting task. I had to learn to focus on the features that matter most to keep myself from over extending.
