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 mapping workshop // Organizations+Relationships+Goals |  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.
 The asset lifecycle is core to the product and needed to be fully understood (status, communication, notifications...) |  A simple customer journey, based on feedback and interviews. |  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.
Rapid Prototyping
After the scope and product vision were defined, it was finally time for some prototyping and design explorations.
 First drafts to explore color schemes based upon the brand style guide |  First drafts to explore color schemes based upon the brand style guide |
|---|
User Research & Prototyping
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:
-
Upload the recorded interview to Wipster
-
Annotate highlights / insights within the app
-
Share with the team
-
Collect in Notion to organize customer feedback
-
Discuss items and send them to the backlog
 Wipster as user feedback aggregator worked out very well |  User feedback database in Notion - each entry has a detail page where more information can be stored |
|---|
Scaling back & more testing
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.
 Wireframe + Prototype board for Phase 1 launch |  Screen grab of the master component file |  Ionic 5 conform design with low development effort |
|---|
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.