Building a Creative Review App

2020 | Wipster

Wipster is a start-up from New Zealand that allows creatives to give feedback and approve media assets like videos, images, audio or pdfs. In 2019 I started designing the mobile app.

Goal

Exploration and prototyping of the Wipster mobile experience. The core feature focuses on collaboration during review & approval of creative assets on the go.

Challenges
  • Very limited resources

  • Missing roadmap and product vision

  • Product team located in NZ (+21hr)

What I've achieved
  • Successfully launched the the first Wipster Inbox app in closed beta

  • Created a product vision including visual strategy

  • Improved the user testing flow and feedback documentation

  • New design deliverables including:

    • Design Brief & Design Manifesto

    • UX Research Database

    • User Testing Process

    • Design System

    • Component-based design principles

    • Brand Style Guide

What I've learned
  • Only having access to the engineering team remotely and in a different time zone is a challenge for documentation, workshops and QA.

  • Good design needs clear product requirements, especially when resources are limited. Involving the VP of Products along the way made approvals very smooth.

  • Being proactive in a small and very lean environment pays off.

  • Testing, testing, testing + good insights documentation.

  • Notion app as a design management tool is a blast
     

Planning the mobile app

With only a fuzzy goal, I began drafting basic requirements from a design point of view, to provide estimates and scope for team discussions.

UX Audit

Before I even think about designing, understanding the product ecosystem and it's customers is always my first step . I took a deep dive into Wipster and all its use cases.

 

We conducted customer interviews to build up our roadmap and understand the essential scope of the product. A stakeholder map workshop helped us to find good interview groups and target customers to drive the design further.

Stakeholder map

Stakeholder mapping workshop // Organizations+Relationships+Goals

Mobile _ Strategy - WOYR - The Mobile Re

Radar map of functionalities based on customer preferences

Ideation & Scope

Once I got some basics down, we adjusted our roadmap, based on the new insights. The next step were ideation workshops and early prototypes to figure out what was possible.

 

I worked directly with the CEO during this time to make sure product design and expectations were in sync. Since the mobile experience was tied to the web browser application, our opportunities for substantial UX changes was limited. Feasibility sessions with the engineering team helped me to get some rough estimates for new ideas.

Miro Snap

The asset lifecycle is core to the product and needed to be fully understood (status, communication, notifications...)

Mobile _ Strategy - Creative Asset Lifec

A simple customer journey, based on feedback and interviews.

Asset Lifecycle __ Mobile - The Asset Li

The asset lifecycle is core to the product and needed to be fully understood (status, communication, notifications...)

Roadmaps are a critical tool that need frequent updates and high visibility. I've tested several roadmapping tools and decided to use CODA.io. Different data views, Gantt charts and easy scalability convinced the team after the first demo. If I had to do it again, I would probably use Notion since it also includes a timeline feature.

product_roadmap__wipster.gif
Rapid Prototyping

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

Screenshot 2020-11-19 213325

First drafts to explore color schemes based upon the brand style guide

style_exploration2

First drafts to explore color schemes based upon the brand style guide

User Research & Prototyping
Design__study

Successful usability testing also depends a lot on the provided content.

 

The more realistic the content, the easier it is for the user to build up a mental model around everything connected.

 

Designers might make poor decisions if contextual content is ignored. This often results in less progressive designs.

Effective User Research

The majority of user research was done remotely in 30 - 60min sessions.

Every recorded session was then uploaded to Wipster where I analyzed the session to mark points of interest and gather insights.

 

I used Wipster as a post analysis tool to share all insights with the whole team. I then created a new user research database in Notion. This allowed us to prioritize and categorize feedback very fast. The process in a nutshell:

  1. Upload the recorded interview to Wipster

  2. Annotate highlights / insights within the app

  3. Share with the team

  4. Collect in Notion to organize customer feedback

  5. Discuss items and send them to the backlog

Screenshot - Recorded session in Wipster

Wipster as user feedback aggregator worked out very well

User Research DB

User feedback database in Notion - each entry has a detail page where more information can be stored

Scaling back & more testing
wip_Mobile__Inbox__full.gif

Back to reality and timelines:

We decided to use the IONIC 5 framework which comes with some limitations on the design side (when used out-of-the-box).

 

I had to scale back and keep components basic to keep the design changes minimal for the first launch. At the same time I was working on a design vision that explored the final version with highly styled designs.

 

The last part of the new tooling workflow was the documentation and hand-off. We decided to use zeroheight.com as our design system in conjunction with Storybook for all codified components.

wipster_mobileP1

Wireframe + Prototype board for Phase 1 launch

Sticker Sheet

Screen grab of the master component file

Untitled

Ionic 5 conform design with low development effort

Wipster Inbox
Conclusion

Ongoing scope changes and administrative work was unanticipated and became a weekly routine. I had to provide a lot of basic workflows and tools that did not exist when I joined the team.

Having a good infrastructure is sometimes more crucial than wireframes.
I utilized a lot of my past experience to bring the whole design strategy to a mature and scalable level. Communication was not always easy due to time differences with New Zealand, and a lot of changes in the production team had significant impacts on the roadmap. I think this is a typical hurdle for small start-ups that try to run fast while also being smart with priorities.

 

We avoided a lot of potential mistakes with the help of rapid prototyping and user interviews throughout the whole development process. The overall response was very good and the product is scheduled to leave beta in early 2021.

© 2021 by MARCEL VOELZ | Product Design & Strategy

Screenshot - Recorded session in Wipster

Wipster as user feedback aggregator worked out very well