Rokoko is a motion capture software and hardware company with products that allow their users to breathe life into animated characters with intuitive real-time full body motion capture system.

Client

Rokoko

Year

2023

My role

UX/UI Design, Wireframing & Prototyping, Brand identity, Web Design, Design Systems

Tools

Figma

Figjam

Linear

Webflow

Project Background

I entered Rokoko at a very exciting time, just before a complete rebrand which was facilitated by the Copenhagen-based brand agency E-types. They delivered a high level brand manual defining the new look & feel, and my tasks after that revolved around implementing the new art direction into all Rokoko's marketing touchpoints including complete overhaul of the website.

The Challenge

The website redesign had to address a complex set of needs and audiences while staying true to Rokoko’s new brand vision. As the product line expanded and the user base became more global, it was essential to create a site that balanced clarity, scalability, and consistent storytelling. The project demanded an adaptable framework for marketing, seamless navigation to support and e-commerce, and a design system that would keep everything cohesive as features and content evolved.

01. Audit and Research

Overview

COMPETITOR BENCHMARKING

HEURISTIC EVALUATION

USER PERSONAS

USER NEEDS & FEATURE PRIORITIZATION

Understanding the Landscape

The project began with an audit of the existing Rokoko digital ecosystem, assessing usability, branding alignment, and technical strengths and weaknesses.

Competitor Benchmarking

I conducted Competitive Market Analysis on major motion capture brands’ websites to identify industry standards, trends, and opportunities for differentiation.

Heuristic Evaluation

This evaluation provides a baseline for iterative user experience improvements and highlights successful elements worth preserving or evolving in a rebrand.

1. Visibility of System Status

The site provides direct feedback, such as filter selections and page navigation for user stories. Loading states and active selections are clear, ensuring users know where they are within content modules.

2. Match Between System and Real World

Language is clear and matches the expectations of the creative and tech-targeted audience (e.g., “User Stories,” “Motion capture made easy”). Calls to action like “Download now” use conventional terminology.

3. User Control and Freedom

Users can navigate between content modules (e.g., filtering stories, switching pages in the carousel). However, there is room to further surface navigation back to the homepage or key product pages, especially for first-time visitors.

4. Consistency and Standards

Navigation labels and interaction patterns are standard for SaaS/creative tech sites. The visual style has quite a few inconsistencies and overall brand feels dated.

5. Error Prevention

With clear categories and filter tags, the site prevents user error in browsing stories. However, error states (e.g., for failed searches) are not highly visible.

6. Recognition Rather Than Recall

Stories are visually presented with tags and preview images, allowing users to browse at a glance. Filtering and story selection reduce the need for users to remember exact story names or features.

7. Flexibility and Efficiency of Use

The filtering system supports efficient story discovery by topic, software, and industry, benefitting power users as well as newcomers.

8. Aesthetic and Minimalist Design

The site is visually not clean and minimal, it definitely needs more white space and focus on featured content. Some sections (like the footer) could be simplified for scannability or optimized for mobile.

9. Help Users Recognize, Diagnose, and Recover from Errors

Obvious error feedback (such as for failed logins or downloads) is not visible. Labels and calls to action are clear but could be reinforced with helper text where actions (e.g., newsletter sign-up) have consequences.

10. Help and Documentation

A help section is evident in the footer, and there are multiple CTAs (call to action) for users to download, subscribe, or learn more. Quick access to user support resources is present, but could be made more prominent.

User Personas

To ensure Rokoko’s website and digital ecosystem meet the needs of real users, three distinct personas were developed. These personas are based on insights from previous company research, customer support feedback, and interviews with active motion capture users from indie creators and educators to professional studios.

User Needs & Feature Prioritization

This section narrows down the most important needs of Rokoko’s diverse users: creators, studios, educators, and researchers. By centering real user goals and pain points, the design ensures the site delivers clear value, easy navigation, and a seamless experience across marketing, support, and e-commerce.

02. Define - Shaping the Site Structure

Overview

SITEMAP

WIREFRAMES

COMPONENTS LIST

Website Foundations

Collaborated with stakeholders to map out a revised information architecture. Created sitemaps and low-fidelity wireframes to clarify user journeys, define core pages, and ensure the new design would support growth team needs for flexible landing pages and clear content hierarchy.

Sitemap

The sitemap was created to provide clear, logical pathways for each audience, whether they’re exploring products, seeking integration support, learning from community resources, or reaching out for help. By organizing content around user journeys and frequently accessed areas, the new structure ensures visitors can quickly find relevant information.

Wireframes

These wireframes visualize the core templates for key pages on the Rokoko website, from product overviews to software, help, and user stories. Each layout prioritizes clarity, feature highlights, and intuitive calls to action, resulting in a streamlined user experience that guides visitors from discovery to engagement and purchase.

Components List

Creating an overview of needed components was essential for creating a roadmap of the project. The idea is to design a website that has consistent, modular repeating sections that can be quickly reused to make a new page for whatever purpose.

03. Ideate - Visual Exploration

From Systems to Screens

Explored layouts, color schemes, typography, and interaction patterns reflecting the new brand identity. Iterated on key page templates in Figma, balancing boldness and clarity to make complex product offerings engaging.

04. Implementing the New Design

Overview

DESIGN SYSTEM

HIGH FIDELITY SCREENS

From System to Screens

I developed a modular Figma design system for all website components, supporting easy updates and rapid site building via drag-and-drop blocks. Coordinated closely with the Webflow developer to translate the design system into ready-to-use website structures, ensuring pixel-perfect and maintainable implementation.

Design System

High Fidelity Screens

I. Marketing Website

Each section was built with flexibility in mind, allowing the team to easily showcase new products, highlight user projects, and launch campaigns with minimal effort. The result is a visually engaging, intuitive platform that adapts seamlessly to Rokoko’s evolving needs while placing user stories and product discovery at the forefront.

II. Knowledge Base

help.rokoko.com is a knowledge base site including articles and guides on how to use and handle hardware and software products. Users are also able to submit requests through this platform which the tech support team will answer.

III. Webshop

The webshop was modeled based on a minimalistic Shopify template to follow the brand's visual direction. Part of this task was also to design a number of custom functions, and layouts for selected pages.