top of page
Creating a Design Strategy for a Start-up

Upon joining Wipster in 2019, I observed a lack of defined design deliverables. The previous approach was ad hoc, lacking proper documentation, leading to inconsistencies and design debts in our products. To facilitate scalable design projects, I focused on optimizing the design pipeline.

logos-footer.png
Company
Wipster
Size
22
Role
Director of Design
Industry
Video Production, Workflow Management, Collaboration
Target Audience
Video editors, Creatives, Producers, HR departments,
UX Researchers
Goals

Creating a scalable design strategy that includes:

  • New Product Style Guide

  • Improved Design Pipeline for better developer hand offs

  • Set up a User Research Database

  • Adjust our User Testing Process for COVID times

Challenges
  1. Changing the way products are designed and developed is sensitive mission.

  2. It requires a good understanding of the production environment and a lot of communication.

  3. Our development team was based in Wellington, NZ, while the creative direction was led from Portland, OR, making everything remote.

Achievements
  • Introduced several new design deliverables for the company (Design Brief, Design Manifesto, UX Research Database, Brand Style Guide and a new Design - Engineering Workflow.

  • A holistic design system (Figma + Zeroheight + Storybook)

  • A user testing process using our very own software that significant positive impacts on the product backlog

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

The **top 5** reasons for design debt and visual inconsistencies are often:  - Rushed development - Poor communication - Missing guidelines / design system - Weak design workflows & design handoffs - 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 thorough check of our product design helped me list down areas needing improvement in different categories:

  • Bugs

  • Iconography

  • Colors

  • Font/Tone of voice/Wording

  • Pattern

  • Transition/Animations

  • System feedback


This detailed examination provided valuable insights into areas requiring improvement and optimization within the product design framework.

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 - Wipster Productivity
Wipster  Workflow - Design Tooling
Testing new styles

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

User Research Process during COVID

In-person testing is crucial for understanding user interactions, but with the onset of COVID-19, we adapted to remote testing to maintain insights and overcome technical challenges. Ensuring a seamless experience for our loyal testers was a priority.

Our previous testing approach was loose and unstructured, leading to biased conclusions impacting the product negatively.

 

To counter this, I introduced a structured user research database, ranking entries based on issue commonality. This database compiled feedback from various sources, fostering collaboration among team members.

userdb.png
Workshops to Define the Possibilities

We discussed various testing methods to determine the optimal ratio of moderated to unmoderated user tests for each stage of product development.

For an emerging multimedia-review platform like Wipster, it was crucial to align the desired research outcomes with our product strategy. In our case, we were transitioning from a video-review to a digital review-everything platform. While focusing on this primary vision, we strived to start simple and generic, then incrementally add features to each section based on usage and specific user needs.

For instance, the process of reviewing a video frame-by-frame differs from a page-by-page review of PDF documents or images. Different workflows and participants are involved with each. Approval workflows may also vary among these different media types.

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.

Conclusion

After enhancing our design strategy and receiving immediate results, I consistently refined it based on team feedback. The integration of developers into the design process, such as connecting our design system with a living style guide, required an efficient development pipeline to prevent redundancy.

Team motivation soared during the design system setup, with successful integration of new components that could be reused and modified within minutes.

Key takeaways:

  • Clearly communicate intentions and objectives for quicker commitment and feedback.

  • Proactive attitudes outperform reactive ones; building trust in a remote design setting takes time.

  • Establish clear rules for user research and maintain good data hygiene for successful design decisions.

bottom of page