Earlier this year, we decided to build a design system for Lexoo – see this post on our thinking behind this. Once the decision was made and we had audited our existing designs, the next step was to work closely with our designer, Jack, to actually create the design system. This post explains the process we followed.
Building a reference point
We spent the first week with Jack mocking up refreshed designs for a few key pages across Lexoo. We focused on what we felt was the essence of Lexoo’s offering:
- a lawyer’s profile and quote that’s presented to the client;
- the messaging feature between the client and the lawyer; and
- the ‘submit a request’ page on our marketing site.
The lawyer quote page old (left) and refreshed (right)
We then shared the revamped pages across the company to gather feedback, as we needed to make sure we had captured how we collectively wanted to present our product.
The designs were further refined, before being used as a reference point for the actual design system work.
Based on the refreshed designs, we created the UI for a collection of base styles: colours, typography, grids and icons. This was followed by the UI for a collection of components (a shopping list we landed on following our initial site audit), which included buttons, banners, inputs, layouts, lists, modals, tabs, and more.
Getting the company involved
We wanted to involve the broader Lexoo team as much as possible. In addition to seeking feedback on the initial designs, we also asked everyone to help us name our colours.
We voted on colours to reflect our culture and identity. We named a dark green colour “Prospect of Whitby” in honour of our local pub; a charcoal colour “Game of Thrones” for our office-wide obsession with the TV show; and an off-green colour “Avocado Toast”…because we have a high percentage of millenials. This encouraged buy-in, and gave everyone an easy point of reference when discussing colour across all departments.
.png?w=1439&ssl=1)
Our Lexoo colour survey conducted in Notion (one of our favourite tools!).
Navigation – horizontal or vertical?
At Lexoo, we have two different user interfaces – one for our lawyers and one for our clients. Up until this point, the client interface had a left-vertical navigation bar, whereas the lawyer interface had a top-horizontal one. This wasn’t by design, and we thought this would be a great chance to standardise the navigation across the board.
Choosing between a horizontal and vertical navigation bar was harder than we expected. We used Maze, a user testing platform that let us set up tests to compare user comprehension on prototypes using a horizontal navigation bar with those showing a vertical navigation bar. We created a succession of tasks for testers to perform, such as finding a previously hired lawyer on the client interface, and measured things like the time it took for a user to find the page, mis-click rates and click heatmaps.
Unfortunately the tests didn’t show a clear winner (which can often be the case with user testing!), so we delved into the UX research and laid out the information architecture for both interfaces to help us decide. We needed to design for the future, and knew that we would soon be adding greater volume and complexity to both interfaces. Taking all this into account, we landed on a top horizontal navigation bar, which provided us with more space and no loss in information hierarchy.
Housing our Design System
The Product team at Lexoo uses Figma to create our wireframes and prototypes, so naturally we wanted to have the component library created and accessible in Figma so that we can simply drag and drop components right into our designs.
We worked closely with Jack and after one month of iteration and stress-testing of individual components, we were happy with the overall design system.
Turning it into code
Armed with a new design system, we were ready to turn this into code. Our developers were all busy with other projects, and this was a perfectly discrete piece of work requiring little interaction with the rest of our codebase, so we decided to hire a contract developer to help us with this.
We hired Nicolai to help us build the design system components in Vue using Storybook. The process took roughly 6 weeks, and by the end we had all our design system components built in isolation.
We were only halfway there – the next step was to integrate the components into our user interfaces, which we’ll cover in our next post!