Workstreams.ai: Creating a Design System and a Visual Brand
Objective
To build a design system and a brand identity for a young B2B SaaS startup.
Results
Increases in monthly active users, increases in user activation, and improved conversions from our marketing funnel.
Background
In early 2019, I Joined Workstreams.ai and was given the responsibility of building a design system library that also aligned with a visual brand identity that needed to be created from scratch. This was done in collaboration with just one other designer.
Workstreams.ai is a task manager that lets companies using Slack or Microsoft Teams keep track of their channel activity with channel-specific kanban boards. At that point, the startup was primarily comprised of developers and very few resources had been devoted to producing a design system library or a marketable visual identity. There had, however, been some solid work done on creating a webapp that integrated smoothly within the chat tool Slack - creating a unique advantage for the user base.
Problem
Users lacked a polished and visually consistent interface while they navigated the Workstreams application.
Workstreams lacked a visual brand identity that could differentiate the product alongside established task management tools with much larger marketing budgets.
Concept
Workstreams.ai integrates with Slack, and lets users create tasks within Slack that can be edited and viewed both in Slack channels and on channel-specific taskboards via the Workstreams.ai webapp. To make this key product advantage clear in both the product UI and in the product’s brand, a visual style needed to be created that could work both for brand materials and for UI components with minimal upkeep efforts, due to a small team. We needed to distinguish our visual identity while still appearing complementary when placed next to design-centric tools like Slack, or other popular integrations in Slack’s app directory.
This is what a standard taskboard looked like in 2018, before I joined the company.
This is what a standard taskboard looks like in October, 2020.
Here is the process for how we got there.
Understanding and Observing
On issues regarding product and brand, Where does marketing end and user experience begin? If an ad is clearly marketing and UI is clearly a UX topic, what about onboarding? What about product support? For us, it needed to work together as a single, unified user experience.
Our reason for connecting product design so closely with our visual brand was based on the following hypothesis: When your product is a SaaS product, your product is at its core a digital experience - an experience where it’s not always clear where the marketing ends and the product begins - at least from a user perspective.
What organizations often see
What users see
Based on this hypothesis, and the need to validate many of the assumptions behind it, the first thing that our UX team did was expand our collaborative efforts with our head of marketing. We did this by identifying where UX goals and marketing goals indeed did overlap from our respective points of view. This MUX approach, as we later called it, formed the basis for how we tackled feature releases, campaigns, onboarding, and support topics from that day onward with marketing. Together, we co-created some basic brand guidelines, from which our visual brand and the UI library could take form. For some core brand identity topics, such as our logo, several prototypes were made based on some essential criteria decided with the entire team before selecting the final version in a company-wide meeting.
It is also worth noting that back then (as well as today) every Workstreams employee used Workstreams as their primary task management tool. Whenever a company is using the very tool they are developing for others in their own ofice, though often very helpful for gathering ideas and feedback, it is important to create different spaces for product feedback from the user base and product feedback from the team. It was critical to be sure that we were building a product for our user base on Slack, not something overly-focused on ourselves and our needs. This distinction helped us prioritize what UI components we chose to work on first. Whatever we worked on, we were asked to keep the world-famous “pirate” KPIs in mind: Acquisition, Activation, Retention, Referal, Revenue (ARRRR).
Competitive Analysis
Close collaboration with marketing also proved very helpful in identifying competitors, ranging from larger rival task managers with already established brand names (Monday, Jira, Asana) to popular integrations in the Slack App directory (Polly, Donut). Additionally, we studied the effectiveness of other popular web-based taskboards whose interfaces were also heavily shaped by a Kanban-like task management structure (Trello, Workast).
We recognized that both successful Slack integrations and big task management players often struck a balance of both playfulness and professionalism in their visual style, something well embodied by popular bots like Donut and Polly. In a market environment that endlessly promotes efficiency, speed, and productivity, newer tools were embracing a message that didn’t just promise a higher output, but a more pleasant, playful and community-powered work environment too. They were rolling out UI frameworks and fanciful illustrations that reflected a friendly collaborative spirit, one that suggested you’d never left alone in a silo full of solitary spreadsheets ever again.
All of this informed how we set our visual guidelines, and how efficiently we could align the color schemes of both our branded illustrations and our product UI.
Personas
Basic personas were built around the goals and needs of HR, Marketing, and IT teams. This choice of focusing in on users working in these sectors was based on user data collected on the number of teams working in these fields that were using workstreams and how frequently they used the product over a daily, weekly, and monthly period. These personas were also decided upon because many HR, Marketing and IT teams are heavy Slack users, and our product at that time only could be used with a Slack account.
We also began including how our application provided unique solutions for HR, Marketing and IT use cases in our online campaigns and on the solutions page of the Workstreams.ai Website. The success of this approach led us to also expand it to include a Sales and a Personal Task Management use case.
Iterating and Testing Prototypes
Long after our initial brand guidelines and basic UI characteristics were established, we worked continuously on improving how they were adapted to different app features and brand materials. For this, we turned to analytics. Marketing analytics could show progress on the visual brand, as illustrations were tweaked based on their performance during Google Display Network (GDN) campaigns promoting our product. Styles that improved our acquisition were prioritized and brought onto the company website to improve user engagement.
Our UI library and use of components was adjusted continuously based on data showing where in our onboarding process users most frequently got confused, failed to find a feature, or just plain dropped out. Live testing sessions were also conducted to test assumptions about how to solve these problems. I took ownership for writing user test questions, conducting tests, and providing a list of UI change recommendations based on feedback notes. These changes then needed to be adapted to both the desktop view of our application and on mobile for our PWA - Progressive Web App.
We consistently improved user retention with each major UI adjustment, both on desktop and on mobile.
Brand and UI Libraries
To maximize the speed and efficiency with which we could design and deploy features, as well as design and share branded content, two libraries were created: one for our design system and one for our branded illustrations. Empty states in our application gradually were filled with branded illustrations and our in-app feature announcements gradually came to feature more brand-centric content.
UI Library: Draft of UI component layout on a task ticket from early 2020
Example of an illustration in an empty state within the Workstreams application
Section of graphics library for ad campaigns and video animations
Example of a high-performing graphic from a 2019 marketing campaign.