Cohesion has experienced a lot of growth in a short amount of time. During the pandemic, we closed on a $6.5M round of seed funding and tripled the size of our team. With this, we knew it was time to create a unified design system that would be able to scale quickly alongside our product.
A visual design language is a communication framework for all stakeholders on a product development team to ensure that the company’s brand identity is communicated effectively. We use a design system as a tool to specify visual elements including fonts, colors, shapes, and icons. This creates consistency within our product and streamlines the development process.
The Importance of a Design System
A unified design system empowers the team and improves the product. It allows us to create repeatable elements with a cohesive design that can be replicated across various platforms and devices. It’s important to us that our users have a consistent experience, and a visual system guides our team to effectively design this in our product.
Consistency: Software design has very few physical constraints, which gives designers ample flexibility when it comes to a user interface. However, this can quickly lead to inconsistencies throughout a platform. Our goal is to create a consistent user experience whether a person is using their mobile device or a computer. To achieve this, we’ve defined reusable and cross-platform components and styling guidelines.
Brand recognition: When users interact with a platform that has an aesthetically pleasing visual language, they remember their experience. We’ve identified the colors, typefaces, photos, illustrations, and animations that are all part of the personality of our digital brand to make it recognizable and distinguished from competitors in the market.
Clarity: We’ve designed our product with the intention of creating an intuitive and delightful experience. By identifying what elements would be most useful for users of the app, we created visual hierarchy and natural flows to make users more efficient and productive.
The Process
The team set out to create a visual design language by following tried and true best UX practices: research, ideate, design, validate, and implement. Our team had goals in mind of creating a more beautiful and accessible design that was well-defined. We began by narrowing our scope to the mobile home screen to stay focused. From there, we knew we could expand the visual language across our platform.
Research: We began by auditing our current mobile application and identifying the elements currently being used. We also looked at the functionality of our product as well as the upcoming features on the roadmap. The Product team interviewed internal stakeholders from sales and marketing to engineering to ensure their perspectives were taken into consideration from the beginning. Externally, we conducted different types of user research ranging from interviews to preference tests, to card sorting.
The team also took this time to identify strategic design opportunities and analyzed the competitive space. We considered how other industries have approached their design language, and how Cohesion could create its own novel design identity.
Ideation and Design: Our product designers worked through several unique design directions, building out initial style tiles that evoked different emotions. The team collected feedback from the internal team and advisors and settled on a style that was reflective of our brand: Sophisticated, Forward-thinking, Intelligent
Next, the design team explored home screen design iterations. While the team knew that the final design needed to be modular in nature, they considered what the foundational building blocks on the home screen needed to be based on stakeholder input. Once this framework was identified, they were able to explore the finer details such as a raised versus flat design, rounded versus sharp edges, and how visual elements such as illustrations and gradients could play a role in the design system.
Validate: The team validated the designs with both internal and external stakeholders. After each step in the process, the designers shared their designs across the team to gather feedback. UX testing was done to garner preference for visual design details from a wide participant pool. This allowed our team to establish an understanding of what our users see, think, and perceive when presented with different options for elements.
The team used this testing to narrow down specific styling elements for the screen design including details such as icons, shadows, and list structures. They also collected insights on how users evaluated the designs to inform the best path forward.
Implement: Upon finishing the new design of the mobile home screen, built of elements from Cohesion’s new visual design language, the development team implemented the new screen for iPhone and Android. The new home screen can be seen in your Cohesion app today (if you don’t have access to Cohesion’s app, our team is happy to share with you via a free demo).
What’s Next
Moving forward, our new design system greatly streamlines new feature development on our platform. Development time is reduced by using repeatable elements, and designers are able to share one common language. This allows our team to focus on the user experience of our platform rather than on button size, padding, or text sizing.
Creating a new visual design language to guide Cohesion’s evolving product was a big project. And really, we’ve only just begun. While this was a task that required efforts from nearly every team at the company, we are excited to translate our new design language across our entire platform to continue building the best experiences for spaces of the future.
