Visual Lease Design System
Creating a design system for a lease management SaaS platform, that fixes existing usability problems, while bringing consistency and efficiency
Strategic modular thinking advances a companies UX maturity.
Overview
Visual Lease is an established SaaS software company specializing in lease management and accounting platforms.
2020
Company Type
Software Company
Platform
SaaS Web App
Frameworks
• Storybook
• Material Design
Research and Design Timeline
3 Months
Role
Lead UX Designer, Lightmatter
Team
Brian Edelman, Dev Lead - Lightmatter
Ben Beecher, CTO & Founder - Lightmatter
Greg Hausheer, CEO & Founder - Lightmatter
David Johnson, VP of Engineering - Visual Lease
Product Manager - Visual Lease
Problem
VL had many problems with the current state of their platform. Firstly, a lack of cohesion leaving the experience “not so easy to understand” in an instinctive, unconscious way. Implementations and iteration were slow and vastly limited.
VL had accrued a large amount of technical and design debt over the years, hindering their ability to release enhancements and new features in a timely fashion. There go to market strategy was impossible to meet and users were getting frustrated.
There was no single source of truth for designers or developers. The lack of a code based design system or application based style guide was becoming more problematic as the platform and organization grew.
And, lastly there was exceedingly too much documentation and training on how to use the product — if we have to explain it, it’s not good. VL knew that they needed to meet the demands of there users and something had to be done about.
Solution
Our shared vision was to create a basis for the new VL living design system — we called Alchemy.
VL wanted to make sure it wasn’t a complete retraining effort for users, therefore we worked together to prioritize usability issues. Our goal was to bring cohesion, simplicity and optimization to the platform — resulting in a set of reusable patterns and components.
We would define a cohesive visual language that would impact the perception of the UX along with any major usability issues. And, always keeping scalability, process and simplicity at the forefront of our design. As a result, VL would have a single source, living breathing design system that will provide the team with artifacts needed to do their job more efficiently and successfully… overtime.
They also requested that we create and implement a design system process tailored to their level of UX maturity.
Strengths:
• Customer Service Oriented
• Potential
• Quick to Learn
Weaknesses
• Lack of Flexibility
• Glitchy
• Unclear Feedback Messaging
Discovery
We conducted an onsite session where they provided us product demo’s and a demo environment for me to use, a Q&A with key stakeholders so that we could learn more about there short and long terms goals in addition to a document intake where we reviewed all previous research and any problems currently identified by the business.
Learnings
Visual Lease had a basic understanding of what a design system was but it was out job to make sure
we communicated what it was, what it meant
and what it didn’t mean.
We categorized them into 3 primary themes…
Consistent Product Experience
What it means: If there is an established page template, pattern or component there is no reason to reinvent the wheel.
What it doesn’t means: It’s a one-size-fits-all solution.
Efficiency Through Modularity and Reusability
What it means: We can produce designs and iterate quicker.
What it doesn’t means: Nothing new will ever be designed or architected.
Achieving Design at Scale
What it means: Meeting the ever growing company expectations
to produce more.
What it doesn’t means: No more creativity or innovation.
Process
Our process was simple. We updated, simplified and enhanced the UI by:
• Auditing and documenting existing platform UI
• Prioritizing most popular workflows and features
• Reducing duplicate UI and improve the overall quality of the elements and the overall design
• Interview users to identify the applications strengths and weaknesses; 10 users & 13 power users
Organize
Opportunities (7)
Apply
Finally, we made small suggestions and enhancements
to the UX by implementing user centered design thinking and UX best practices to create a consistent user experience.
An accessible web version of the design system (using Material Design components) was created using Storybook. This would be design and development single source of truth and provide visibility into the modular approach throughout the organization.
Organization and Hierarchy
Discoverability
Glanceability
Space and Density
Scalability
Areas of Focus
Alchemy Design System
Outcome
Through collaboration, partnership and best practices, we’ll leveraged our talents and infrastructure to build the most relevant, living design system to aid in consistency, efficiency — while improving the Visual Lease platform.
Allowing Visual Lease to remediate technical and UX debt faster and more efficiently so that you can deliver a better product experience and improve there go to market strategy.
In the long run reducing the level of effort, time and money needed to deliver, and leaving users with more confidence and consistency within the platform. While driving growth and revenue. And, delighting users with an appealing, easy to use the platform.