A Complete Site Redesign With Layouts Now Built in Less Than a Day
- Art direction
- Product design
- Design system
- Information architecture
Helping the #1 legal practice software scale faster and smarter
- Client:
- Clio
- Role:
- Art Direction + Product Design Lead
- Timeline:
- October – Jan 2020
Clio is the #1 legal practice management software built specifically for law firms and trusted by clients worldwide.
Problem: As the leading legal tech provider, Clio had recently acquired a CRM and needed to reflect this expanded offering in their site navigation. This milestone presented an opportunity to redesign their entire website.
However, the existing site was inconsistent and difficult to manage; pages had been designed as one-offs, resulting in a clunky, unoptimized experience that lacked cohesion and scalability.
How we solved it: We restructured the site’s navigation using information architecture principles to reflect Clio’s evolving product journey.
Then, we built a comprehensive design system with reusable components, making the website easier to scale and maintain.
We also refreshed the brand’s visual language, introducing brighter, bolder, and more inclusive elements and developed templates to empower the internal team to launch new initiatives with speed and consistency.
Branding
We aimed to launch the new website alongside Clio’s announcement of its expansion through the acquisition of CRM software.
To differentiate the two core products Clio Grow and Clio Manage, we developed distinct yet cohesive identities for each.
This allowed users to easily understand the unique value of both offerings within a unified brand experience. As part of the refresh, we also refined the logo for improved readability and balance, and redesigned the icon system to be simpler, more modern, and visually consistent.
Custom header illustrations
Before the website revamp, header images were inconsistent, varying in size, style, and illustration quality. To bring cohesion and visual impact, we collaborated with a 3D artist to bring our header concepts to life with custom, consistent visuals.
A friendlier icon system
We refined the icon system to be clean, minimal, and intuitive, incorporating subtle color accents to enhance clarity and convey a sense of personality. Wherever possible, we replaced static images with scalable SVGs to improve performance, ensure consistency, and maintain visual sharpness across all devices.
Website design principles
- Consistency creates trust
We unify visual elements, icons, images, and layouts to create a cohesive and reliable experience. Consistency across components builds user confidence and reinforces brand identity.
Example: Standardizing header images, icon styles, and converting visuals to SVGs for visual sharpness and scalability.
- Clarity over complexity
We simplify visuals and structures to make interfaces intuitive and easy to use. Clean design and minimalism help users focus on what matters.
Example: Refining the icon system to be minimal with purposeful colour accents; simplifying the logo for readability and balance.
- Scalable by design
We design systems, not just pages. From design systems to templates, everything we build is made to grow with the product.
Example: Creating reusable components and templates that allow teams to update or launch new pages quickly and consistently.
- Structure informs experience
We use information architecture to bring logic to navigation and page layout, making complex products feel intuitive and accessible.
Example: Rebuilding site navigation around product growth (e.g., Clio Manage vs. Clio Grow) to better guide users through the experience.
- Design reflects brand emotion
Visual language should evoke how a product feels to use. We bring in colour, tone, and illustration that align with the product’s personality, whether that’s joyful, bold, or professional.
Example: Updating brand visuals for Clio to showcase products’ functionality with ease and clarity.
- Empower the team
Good design doesn’t stop at aesthetics, it enables others. We create tools and templates that make it easy for internal teams to build, scale, and maintain their content.
Example: Working closely with developers to make sure the components we design are scalable and easy for the content team to update.
Navigation redesign grounded in UX research
Through client interviews and user behaviour analysis, we identified two primary mental models for how users search for product information: by product name and by practice type or firm size. Using this insight, we restructured the navigation with clear entry points for both paths.
We also consolidated resources and events into a single, organized tab to reduce clutter and improve wayfinding.
This information architecture overhaul resulted in a navigation system that feels more intuitive, aligns with user goals, and scales with Clio’s growing product offerings.
Sara McCormick | Senior Management Product Marketing“We knew our navigation needed help, but we didn’t realize how confusing it had become until we saw it through our users’ eyes. The new structure is not only cleaner, but it’s exactly how our clients think. It’s made a huge difference in how people engage with the site.”
UX improvements rooted in user understanding
- Defined clear user priorities through research and behavioral insights, ensuring the site architecture aligned with what mattered most to visitors.
- Renamed key sections using language that reflected how customers naturally search and think, improving clarity and navigation flow.
- Optimized above-the-fold content to quickly communicate value and guide users to the right actions.
- Integrated intuitive iconography to support visual scanning and enhance content hierarchy.
- Streamlined the main navigation, reducing friction and making it easier for users to find what they need with fewer clicks.
Custom visuals that highlight real product value
We designed fully customized images and animations that showcase key product features, bringing clarity, functionality, and personality to the user experience.
To meet the December launch deadline, we took a phased approach: phase one focused on delivering static visuals, while phase two introduced animations to bring key product interactions to life. This strategy allowed us to move quickly without compromising on quality or storytelling.
We saw a 15% increase in conversion rates immediately after launch.
Praise from team and customers
Jack Newton | Clio CEOSuper proud of the work #teamclio has put into the new clio.com. Not just an incredible visual redesign, but a ground-up rethinking of how we articulate our values as we evolve into a multi-product company. Say hello to Clio Manage, Clio Grow, and the Clio Suite!
Trevor Molag | Digital Marketing ManagerAle was a true design partner: innovative, organized, and passionate about delivering top-quality work. Despite tight constraints, she consistently found creative solutions, bringing the brand to life.
Derek Hopfner | Co-founder of NookLooks great! Congrats on the redesign. Especially like the new serif font for H1 & overall messaging.
Results
- 15% increase in conversion rates immediately after launch, driven by a clearer structure and more cohesive user experience.
- Faster rollout transitioned from custom, one-off pages to a scalable design system, reducing layout build time from weeks to under a day.
- Streamlined navigation using user research and information architecture to better match how users search for legal solutions.
- Refreshed brand identity with a more modern logo, brighter colour palette, and a simplified, friendly icon system.
- Clear product differentiation between Clio Grow and Clio Manage, visually and structurally supporting their evolving platform.
Credits
Creative Director: Jeff Bates
Art Direction + Product Design: Alejandra Porta
Designers: Thaira Tabout + Renee del Valle
Content Strategists: Sasha Perrin + Sara McCormick
Developer + SEO: Trevor Molag + Randy Wilander