Case Study · B2B SaaS · Design System

Optevo

From a cluttered legacy tool to a calm, real-time workspace for teams

Over 26 weeks I led the redesign of Optevo's project-management platform: research with an existing user base, a new information architecture built around WorkPods, a scalable design system, and adaptation for mobile web, iOS and Android.

  • B2B
  • SaaS
  • Design System
  • UX Research
  • Responsive
Role
Lead Product Designer
Timeline
26 weeks
Platforms
Web · iOS · Android

At a glance

The short version

Optevo introduced a new entity called WorkPods: a shared space where teams run projects, organize tasks, track progress, share files and talk, all in one place.

The legacy product got in the way. Surveys showed users found it illogical, it hid the metrics they needed, and every action triggered a full page reload.

I led the redesign end to end, from user research to a design system and a companion mobile app, turning the WorkPod into the real-time hub for teamwork.

Client
Optevo
Role
Lead Product Designer
Duration
26 weeks
Platforms
Web app · Flutter companion for iOS & Android
Tools
Figma, FigJam, Notion, Lottielab, ClickUp
  • 26weeksEnd-to-end engagement, research to hand-off
  • 4methodsInterviews, prototype tests, journeys, competitive analysis
  • 3platformsWeb, iOS and Android from a single system

What this project shows

  1. 01Research with a live user baseRedesigning for people who already had habits, and guiding them through the change.
  2. 02Information architectureA new hierarchy that made the WorkPod the center of the product.
  3. 03Systems at scaleTokens, components and widgets for a data-dense B2B product.
  4. 04Engineering-aware designPatterns shaped around the backend, cutting full page reloads.

§ 01 / The problem

A legacy tool that fought its users

The client had an outdated product and a rough vision of the new one. The old interface was cluttered and disorganized, and it didn't show the metrics people came for.

BeforeEvery action loads a new page
  1. Click
  2. Full reload
  3. Context lost
  4. Click again
AfterOne hub, updated in place
  1. Open WorkPod
  2. Act in context
  3. Live updates
One of the crucial goals for design and development: radically reduce the number of page loads.

Project goals

  1. G1Create a versatile design system
  2. G2Run usability research on the legacy product
  3. G3Survey users to find their pains and desires
  4. G4Adapt the product for mobile devices
  5. G5Refresh technical pages with a new look while keeping their functionality

§ 02 / Research

Redesigning for people who already know the old way

Optevo had an existing user base used to a cluttered, complex UI. The redesign couldn't just ship new features; it had to test them and teach people how to use them.

  1. M1
    User interviewsPains, workarounds and missing metrics, straight from daily users.
  2. M2
    Prototype testingNew flows validated with real users before development.
  3. M3
    User journeyMapping where time and context get lost across a working day.
  4. M4
    Competitive analysisHow modern project tools structure tasks, feeds and navigation.

Primary persona

Sarah Johnson

Project manager running several client teams

She values tools that fit her workflow and cut the time she spends on admin.

Motivations

  • Efficiency: less manual admin work
  • Collaboration: share notes, files and updates in real time
  • Organization: projects and tasks in one place

Frustrations

  • Too many steps to create or assign a task
  • Tools that don't connect with her calendar and meetings
  • Cluttered UI that buries important information

We synthesized the interviews into a customer journey and persona, then presented and discussed them with the client. That gave us a solid foundation for feature ideation and prioritization.

Prototype tests of task views, persona and user-flow boards

§ 03 / Information architecture

Making the WorkPod the center of gravity

The key goal was to turn the WorkPod into the central hub for teamwork: an efficient, real-time place to collaborate instead of a maze of pages.

Key focus areas

  • Real-time collaboration
  • Centralized task management in WorkPods
  • Cross-platform mobile adaptation
  • A scalable, consistent design system

  • Menu hierarchy

    A clearer navigation structure that reduces cognitive load and surfaces key features.

  • Notifications

    Contextual updates that keep people informed without flooding them with alerts.

  • Relevant views

    Role-based dashboards that show each team member what matters at a glance.

  • Fewer clicks

    Streamlined flows that cut the steps needed for everyday tasks.

Optevo home dashboard with today's tasks, calendar, members, favourite WorkPods and files

§ 04 / Design system

One system, three platforms

A data-dense B2B product lives or dies by consistency. I built the system in layers, from tokens up to full screens, so every page could be composed rather than redrawn.

  1. L1

    Color

    Blue primary and neutral scales, each from 100 to 700.

  2. L2

    Typography

    Roboto with a clear heading and body hierarchy.

  3. L3

    Layout

    12-column grid, 4px spacing rhythm and elevation levels.

  4. L4

    Components

    Buttons, inputs and controls, every state specified.

  5. L5

    Widgets

    WorkPod cards, members and file tables for dashboards.

  6. L6

    Product

    Screens assembled from the layers below.

Tokens

Blue / Primary

  1. 100#F5F7FD
  2. 150#DFDFF4
  3. 200#BBCBFF
  4. 300#7EA5FF
  5. 400#027CFF
  6. 500#005ABC
  7. 600#00397D
  8. 700#001C44

Neutral

  1. 100#F0F1F3
  2. 200#CCCCD2
  3. 300#A4A5B0
  4. 400#7E808C
  5. 500#5B5D67
  6. 600#3A3B43
  7. 700#1C1D23

Type hierarchy

StyleWeightSizeTracking
Heading 1Bold 70028px-1.5%
Heading 2Bold 70020px-0.5%
Heading 3Regular 40020px0%
Heading 4SemiBold 60016px-0.25%
BodyRegular 40014px0.25%

Inside the library

  • Icon buttons: sizes and states
  • Text buttons: variants and states
  • Controls: checkboxes, radios, chips and date pickers
  • Inputs: states and variants
  • Avatars and member groups
  • Widgets: calendar and members
  • Widgets: WorkPod cards and file tables
  • Iconography: fill set
  • Iconography: line and outline set
  • Elevation levels and grid system
  • Spacing scale and border radius
  • Typeface and hierarchy
  • Color scheme: primary and neutral scales

§ 05 / Core flows

Where the work actually happens

WorkPods

Create and manage WorkPods

WorkPods are the core of task management in Optevo. In the new version, participants, updates and current status sit right on the main dashboard.

Only team administrators can create WorkPods and manage who's in them, which keeps permissions simple to understand.

Tasks

Open and complete tasks

The task is Optevo's core unit of work: title, description, assignee, due date, priority and status. Tasks live inside any WorkPod and appear across views.

Open and completed states are distinguished by color-coded indicators and status labels, so a team can read progress without opening each item.

§ 06 / Mobile

Desktop depth, adapted for a phone

Adapting large, complex structures for mobile was a real challenge, especially with a legacy full of nested dropdown menus.

Most Optevo users work on desktop, so mobile-first wasn't the right call for the web app. Every page still had to work properly on a phone.

For iOS and Android we built a Flutter companion app that syncs all notifications from desktop.

  • Activity feed with member filtersActivity feed with member filters
  • Tasks list with prioritiesTasks list with priorities
  • Today's agenda and membersToday's agenda and members
  • WorkPod activity feedWorkPod activity feed

§ 07 / Reflection

What I took away

Optevo was a long, systems-heavy project. The work was less about any single screen than about structure, consistency and bringing people along.

  1. 01

    Design the transition, not just the screens

    With an established user base, every change needs a path: familiar anchors, guided discovery, and testing to make sure people can find their way.

  2. 02

    Constraints can simplify the product

    Designing around the page-reload architecture pushed us toward in-place, real-time patterns that made the product itself simpler.

Thanks for reading.

Have a complex product that needs structure? Let's talk.

Get in touchNext case studyDesigning Fluenza from Scratch