A More Intuitive Printing Experience
UX / UI / Web design / Feature redesign
Printing Search Result is a redesign of current Casetext’s search result print feature aiming to improve existing printing experiences for the lawyers while giving them the ability to select and print multiple legal documents.
Legal profession relies heavily on paper documents for recording case information, so it is no surprise that lawyers often print out their documents to do offline review and editing on a daily basis.
We’ve received high number of complaints from users regarding the printing experience and this project aims to investigate and improve the current user flow.
Leading this project from design perspective, I worked in a cross functional team with user researcher, product manager, and engineer. My contribution included:
Casetext is a legal research company that helps legal professionals find the most relevant cases using algorithmically queries.
Casetext currently only has the ability to print one content type.
"One of the main challenges for this project is to integrate the new design into existing user flow and making it work within a users’ current researching habits."
My Design Process
Discoveries & Pain Points
The analysis of the current print experience was central in the redesign project I have undertaken. It was important to capture the entire user-flow of the current print experience. The in-depth analysis of the current interface helped me define what I had to work on.
After 2 days of investigation, I gained a good understanding of the strengths and weaknesses of the product. Here are some of my discoveries after speaking with the user researcher and end users:
1. Users said they would like to have the option to print full case content, case summaries, or both. Casetext currently only allows users to print full case content.
2. Users complained that current Print button on the search result is not visible enough to find.
3. Users want to have the option to preview the selected content prior to print. Currently there are no options for user to preview individual selected content.
4. Current Print flow is not intuitive for users to navigate. When user clicks on the Print button, the interaction for the pop-out selection checkboxes is too subtle for the users to take notice. Also users assumed that by clicking on the Print button it will automatically print the whole search result. The motion of checkboxes popping out besides the contents is an unexpected feedback for the users.
5. Users wanted to have the option to select all of the content at once. Currently users have to scroll through the full length of the search results and to manually select each individual content, which is both very time consuming and inefficient.
Synthesis & Define
With my new discoveries, I quickly reframed the design objective and worked with product manager to define key features and scope of the project.
After going through several discussions and research, I started working on an improved version of the navigation and user flows. This allows me to understand how users would work their way through the product and to ensure a smooth and intuitive navigation along with the new features.
Ideations & Explorations
Once I got a better understanding of what key features needs to be included and the problems that need to be solved, I took some time to sketch layouts and try different design approaches. I like to draw low fidelity layouts as they help me determine very quickly what works and what doesn’t. I can iterate easily. Sketches are also a good way to gather feedback before jumping ahead to detailed wireframes.
Usability Testings & Feedbacks
Based on user’s feedbacks, 7 users out of 10 prefer the partial-screen overlay over the full-size overlay. The reason is that people get anxious when they click on the Print button and the screen they were working on disappears. They thought that they’ve lost all of their previous works.
"Having the ability to still oversee the previous screen, gives people the feeling of being in control that they have the option to always return to their previous works whenever they wanted to."
Outcome: A more intuitive and better printing experience
The overall user feedbacks have been positive, so I started creating the high-fidelity mockup in Adobe XD. I used my research and wireframes as a basis and iterated from there.
These is a brief walk-through of the high-fidelity mockups:
Lets take a closer look at the details
1. Simplify the interface and ease access to key features
Isolating the print flow from on-page manipulations to a separate model removes the frictions that new features having to compete for attention with other elements on the search results interface. Therefore makes it easier for users to navigate and solves the navigation problem.
2. Leverage common user behaviour
Granting users the quick access to scroll-through contents in a list format and the ability to preview selections helps users to locate contents they wanted to print more efficiently with higher accuracy.
Also adapting a well-established UI pattern reduces overall cognitive overload for the users which results in faster adoption rate. The less users have to think or learning about the interface or design, the more they can focus on accomplishing their goal on the website.
I’ve used the similar UI pattern as an email application since both shares similar behaviour properties such as ability to select all items on the list with one click and the ability to preview selected contents.
3. Increase visibility and accessibility
Making Print button more prominent increases visibility, making it easier for users to find it. The revised button uses a prominent blue bold font on top of a contrasting white background with a thick blue border. The new button is much bigger and more distinctive than the original design.
4. Reinforce immediate feedbacks
Providing instant warning confirmation when user is about to print large quantities of files reduces potential frustrations, resulting in a better user experience.
I have to make design compromises due to technical constraints by changing initial number of selected page warning to number of selected document. The reason was due to the fact that we don’t currently have the ability to detect the number of pages contained in each selected PDF documents.
The goal of this project is to give lawyers more control over the contents they wanted to print while improving existing printing experience.
Continuously testing out my design and receiving feedbacks from the end users throughout the design process has really helped me to making sure the designs are addressing the right problems while also making sure the experience is intuitive and easy to use for the users.
I’ve worked closely with our product manager to breaking down the final design into small incremental releases. We focused on prioritizing features that are easiest to implement while yielding big results.
We’ve chose to implement the new print button design during the initial release since it’ll help to attract more attentions to the print feature therefore could potentially increase the current printing conversion rate.