Incorporating New Contents into Existing Product
UX | UI | Responsive Web | Content Strategy
Casetext is an AI-powered legal research service. They were planning to adding new databases to their existing search engine. The new features (Black Letter Law and Holdings) are intended to help researchers to quickly hone in on key rulings and common law doctrines.
I have previously designed the interface for the new databases.
But since the current interface has no spaces for additional contents, they asked me to help them optimize the site before they could incorporate and release the new features.
- User research
- User flow
- Information architecture
- Responsive web optimization
- UI design
- How might we integrate the new modifications as unobtrusive as possible to minimize the negative consequences of change aversion on our current users?
- How to organize and display information in a useful way.
- How to prioritize features and contents for the mobile version.
Tools of Choice
- Adobe XD
- Pen & Paper
What needs to be improved?
I started out by evaluating current interface to define what needs to be changed and worked on. After spending some time speaking with the user researchers and product manager, I came up with some suggested improvements:
1. Repositioning jurisdiction filters to free up more spaces
Currently jurisdiction filters are taking up 1/3 of the interface. By relocating the filters will create more room and helps to declutter the interface.
2. Declutter and simplify current interface
Current interface consists of many box-styled elements making the interface looking very cluttered. By simplifying the interface structure will increase readability and creating more spaces for new content types.
3. Expand and relocating current navigation tabs
The horizontal format of current tabs doesn't allow enough spacing for new additional tabs. The new formation and location of the tabs need to provide substantial spacings to accommodate new content tabs down the road.
4. Adding new filters
Users would like to further refine their search results by having the options to preview contents from most recent to least recent and the other way around.
Design a site that lasts a decade
After defining what needs to be redesigned and improved, I started experimenting with several different design approaches and making iterations based on feedbacks from the team.
When selecting ideas, we paid particular attention to:
- how well a template would address user needs and how it would fit in the larger picture of the user flow
- how well it adapted to guide novice users and help experts be efficient
- how flexible the template was in the long run
- how the views on each device responded to each other to give the most appropriate display in each context
A new design to accommodate the new features
Here are the hi-fidelity mockups of the final design:
Let's look at the details
1. Increases accessibility to the contents without disrupting current user' behaviours
In the original version, the jurisdiction filter selections were located directly on the search result page. Users had to scroll further down to have access to other contents since not all selections were immediately visible.
The new version takes the contents into a separate model where all the options are within the first glance. The design helps to declutter the search result interface which yields more room for the new content types.
The structure of the original filter selections were kept the same to avoid extra learning curves and can also fits into current users' search habits.
2. Design for flexibility and adaptation
Knowing Casetext is planning to implement several new features within the next couple months, this design needs to remain malleable enough for future changes.
Separating the horizontal navigation tabs into a vertical format creates leeway for new content additions in the future. This helps to increase the lifespan of the design so the team doesn't need to make major adjustments on the site every single month. In return, this would increase efficiency of the product development cycle in the long run.
3. Clean up the interface
The original design had incorporated a fair few of box style UI elements which made the interface look cluttered. I've explored with several design variations without the box elements and had also did a quick A/B testing comparing the new design with the original.
It turned out that the box elements didn't seem to benefit current users' search experiences. So we've decided to simplify the interface by replacing the boxes with " " marks. This approach helps to clear up the interface while it is also a common practice for lawyers to separate search terms with quotation marks. Leveraging a well-established UI pattern helps the users to better adapt to the new changes on the site while minimizing the impact of disruptions to their current search flow.
3. Options to further refining search results
Filters were incorporated into the new design based on numerous users' requests. Users would like to more control over the way how information being displayed based on their search results.
4. Designing and incorporating new databases into the existing product
I have designed the user interfaces for the two new databases that are being implemented into the existing user flow. I've worked closely with the user researcher and product manager to organizing and structuring content to help lawyers quickly find the cases that are most relevant to their search.
5. Prioritizing features for mobile design
I worked with the product manager to prioritize features for the responsive mobile view. We started by ranking the existing web features based on the business needs, the user needs, and the technology requirements. We identified each feature as one of the following:
- Nice to have
We ended up leaving the filters out after going through this process. The reason was due to that user would still be able to access and navigate through the search results even at its absence.