Β 

Creating a Design Strategy for a Start-up

2020 | Wipster
logos-footer.png

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

Product Design audit - sample.
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.

Wipster  Workflow - Design Tooling
Wipster  Workflow - Wipster Productivity
Testing new styles

After the scope and a product vision had been defined, it was finally time for some prototyping and design explorations.

Landing_Page_-__Draft_4

First draft of the new landing page

App Store Designs

App store visualizations for the new Wipster Inbox app

brandGuide

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.

userdb.png
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.

usertesting.png
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.

userTesting2.png
Wipster Survey

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

Feature Audit

This helpful tool visualizes which features / components are used most during tests

User Test Screenshot

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.

Β