Creating a Design Strategy for a Start-up
2020 | Wipster
When I joined Wipster in 2019 there were no defined design deliverables. Everything up to that point was done ad hoc and without proper documentation. This resulted in many inconsistencies and design debts in our products. In order to move on with scalable design projects, I had to optimize the design pipeline.
Goal
Creating a scalable design strategy that includes:
-
New Product Style Guide
-
Improved Design Pipeline for better developer hand offs
-
User Research Database
-
New User Testing Process
Challenges
Changing the way products are designed and developed is a sensitive mission.
It requires a good understanding of the production environment and a lot of communication.
What I've achieved
-
Introduced several new design deliverables for the company:
-
Design Brief
-
Design Manifesto
-
UX Research Database
-
Design System
-
Component-based design
-
Brand Style Guide and a customized Design - Engineering Workflow.
-
-
A holistic design system (Figma + Zeroheight + Storybook)
-
A user testing process that resulted in direct impacts on the product backlog
What I've learned
-
Communicate your intentions and the objectives clearly to get faster commitment and feedback
-
Proactive attitudes beat reactive attitudes. The production team was not used to working with a remote designer and it took some time to build up trust and a good collaboration culture.
-
Mistakes during user testing can have a ripple effect on design decisions. Clear rules around user research and good data hygiene were keys for success.
Holistic Design Audit
Consolidating existing designs can be a tough job. Over time a product usually collects a lot of design debt and sloppy solutions.
The top 5 reasons for design debt and visual inconsistencies are often:
-
Rushed development
-
Poor communication
-
Missing guidelines / design system
-
Weak design workflows & hand-offs
-
Dissonance between brand experience and product experience
Besides an in-depth analysis of all products, I also took a closer look at all communication channels and related media that communicated our brand and it's values.
A product design audit helped me to document existing design debt of the following categories:
-
Bugs
-
Iconography
-
Colors
-
Font / Tone of voice / Wording
-
Pattern
-
Transition / Animations
-
System feedback
Design Process Audit
A smooth design process includes the whole enchilada, from ideation to developer hand-off. It was quite a challenge to work from Portland 🇺🇸 remotely with our engineers based in Wellington 🇳🇿. We needed a new and robust workflow that minimized margins for error.
Testing new styles
After the scope and a product vision had been defined, it was finally time for some prototyping and design explorations.
 First draft of the new landing page |  App store visualizations for the new Wipster Inbox app |  First draft of the new landing page |
|---|
User Research Process during COVID
In person testing is one of the most valuable ways to find out how users interact with your product. When COVID-19 hit the world, we had to come up with new plans that still gave us as many insights as possible while avoiding technical blockers. Wipster has a nice loyal crew of returning testers and we wanted to make sure they felt as comfortable as possible when testing our prototypes remotely.
Our old way of testing was pretty loose and unstructured, which often resulted in false conclusions that had a negative impact on the product.
To avoid such biases I came up with a new user research database that ranked each entry based on the commonality of the issue. This user research database collected feedback from different sources (Intercom, Userfeed, the customer service team, testing results and interviews). Every team member could contribute to this database.
Workshops to Define the Possibilities
We discussed different testing approaches to find the best ratio of moderated & unmoderated user tests for each phase of product development. The pros and cons of each option also highlighted pitfalls of bad user testing.
Planning the First Round
Testing workshops helped to find gaps in the planning and determined the amount of effort to prepare for several test rounds. The idea was to create an autonomous testing scenario using company devices, so every test was equal and comparable.
I trained the team in New Zealand to conduct in-person interviews (with zero Covid cases, this was possible). The training included simple walk throughs of every step, as well as an additional document with all test scenarios and questions.
 This elaborate planning board enabled the team in New Zealand to conduct in person interviews even during COVID due zero cases in the country. It included simple walk through of every step as well as an additional document with all test scenarios and questions |  This helpful tool visualizes which features / components are used most during tests |  Record of a local test session - stored in our own system |
|---|
Conclusion
After improving our design strategy, we were able to see results right away. I consistently iterated the design strategy based on discussions and feedback from the team.
The design process becomes more complex when developers must actively contribute. For example, our design system was connected with a living style guide (Storybook). This required a good development pipeline to avoid redundant work.
One big advantage was team motivation and collaboration in setting up the design system. It is rewarding to see when new components are successfully integrated, and can be reused and changed within minutes.