At DISCO, we have an extraordinary focus on giving our users and clients a magical experience – from software usability to ease of doing business with us. DISCO was founded on the principle of combining world-class engineering with a deep love and respect for the law, and we wanted to share the groundbreaking work done by our engineering team.
#DISCOmagic is a new blog series that takes you behind the scenes to show you some examples of all the hard work that goes into making this magic happen. Our first author is Lead Product Designer Jason Hlavenka.
I started with DISCO as a designer back when we were the new kids on the block. You might recognize my work from such classic DISCO features as Search Visualization, Workflow, and Custom Views. Now I’m one of nine full-time product designers. Combined, we have over 100 years of design experience! Here, I’d like to provide a glimpse into our design process by reviewing a recent feature I’ve been working on.
You might think that a software designer’s job is to prettify: tweak colors and fonts and enhance the overall aesthetics of the application. There’s a running joke in the design community that we’re constantly getting asked to make things “pop” – to take software up to 98 degrees. That’s how many of DISCO’s lawyers (our domain experts) thought about design before becoming a part of our software development process. And, to be fair, I do try to make things look good. In the software world, that side of design is called visual design, or user interface (UI) design.
But there’s another equally important side to our work, the functional design, or user experience (UX) design. UX focuses on information architecture (hierarchy of data), structure, functionality, and usability. If building software is like building a house, then I act as both the architect and interior designer. The UI side of me is the interior designer, focusing on things like paint color, finishes, and flooring. The UX side is the architect designing functional spaces, focusing on floor plan, layout, and flow.
For example, a white porcelain toilet is good UI. Putting the toilet in the middle of the living room is bad UX. It would work there...but the user experience isn’t great.
And just like architects and interior designers, the output of a software designer is specifications - blueprints for the engineers to follow.
The Problem: Deposition Video Synchronization
For the past year, I've been working on DISCO’s upcoming case management product Case Builder. The first MVP (minimal viable product, in engineering-speak) we’re launching of this is witness management and deposition review.
As we set out to design the deposition viewer, we worked with internal lawyers and customers to map out their existing processes, tools, pain points, and desired outcomes – and we identified a key problem. While taking video depositions is fairly common (lawyers from H-town to O-town do it), most lawyers don't fully leverage the video until it’s time for trial. On its face, that makes sense – that's when trial designations are made, and spending hours hunting down DVDs and trying to synchronize videos with the text transcript may not be the best use of (billable) time.
But what if all deposition assets were easily available to the entire team, including the video? What if the transcript text automatically synchronized with the video in an intuitive way? This could change the way lawyers practice.
To get there, we need the video synchronized to the transcript. No doubt the idea of synching video and a transcript may seem straightforward, but, as often happens during the design process, the more we dove into it, the more problems, scenarios, and edge cases we uncovered. There’s always more than one direction you can take a design.
For example, what if a user is reading ahead and doesn’t want the transcript synced? What if the user starts adding notes to the transcript while the video is playing? What happens when the user scrolls the transcript quickly while the video and transcript are synced? As a designer, I try to anticipate all the ways the user will interact with the feature. I put myself in their shoes and ask myself, “If I were this user, how would I want this to work?”
I began by trying to distill video synchronization to a series of behaviors; a set of rules that would make sync (hopefully) feel intuitive. I then walked through these behaviors with our internal domain experts and external users and got their opinions. This is how it turned out:
Note: I’ve included all seven behaviors here for completeness, but I can already see your eyes glazing over...feel free to skim.
The current location of the video is always represented in the transcript as a highlighted line.
If the video is paused, the highlighted line doesn’t move. If the video is playing, the highlighted line moves.
Why: Users should be able to easily recognize which line of the transcript is currently playing in the video. Having a visual indicator connects the text of the transcript to the video, reinforces the linked behavior of the two materials, and helps keep users oriented in the deposition.
Turning sync on via the video panel scrolls the transcript to bring the highlighted line into view.
Why: Users should have a quick way to jump the transcript to the current location of the video so they can read along. Think of Google Maps on your phone. If Google Maps is directing you to a destination it keeps you centered in view and moves the map around you. For us, the sync button is our “Recenter.”
When sync is enabled, the system will keep the highlighted portion of the deposition in view as the video plays.
Why: Users should be able to easily read along as the video plays without having to manually scroll the transcript.
If the user manually scrolls the transcript when sync is enabled, sync is turned off.
Why: When sync is enabled, the system controls what portion of the transcript is in view. Users that decide to scroll away are telling the system that something else is more important now. Returning to the example of Google Maps, if you manually move the map to look at a different area, it stops trying to move the map for you. However, when you press the “Recenter” button (or in our case, the sync icon), it pulls you back to your current location.
If the user starts an annotation, or activates an existing annotation, the video is paused and sync remains on.
Why: Users will often switch from passively watching the deposition to making an annotation. When this occurs, we pause the video and stop scrolling the transcript to give them time to focus on the task at hand. When they’re done, they can hit play to continue on.
If, while sync is enabled, the user manually moves the location indicator on the video, or jumps the video to a certain area, sync remains enabled and the transcript moves to the current location of the video.
Why: When sync is enabled, the user expects the transcript to always reflect the current location of the video. If the user goes forward or backward in the video, the transcript should scroll to keep up.
Clicking on the play icon next to any line in the transcript will start playing the video from that location and turn sync on.
Why: When users see an interesting portion of text in the transcript, they should be able to easily start playing the video from that location to see and hear how the witness delivered the line.
So now we have our blueprints for sync. As you can see, these specifications are focused mostly on the UX and not the UI — there’s more interior designing left to do!
I’ve found that thoughtful design decisions made early on make the build go much smoother. I believe Abraham Lincoln once said, “Give me six hours to chop down a tree and I will spend the first four sharpening the axe, the next hour chopping the tree, and the final hour listening to Backstreet Boys.”
So is this how you would want and expect sync to work? Did we miss something? We’re always looking to improve, so any comments are appreciated. Like any designer, I’m really looking forward to seeing my designs become reality — I can’t wait for users to get their Hanson it!
(PS - We're hiring product designers! Check out career opportunities at DISCO.)