Johannes Klein
MenuClose

doorlin

Product Design (UX/UI): Collaboration Patform "doorlin"

Scope

  • Founder
  • CEO and Lead Product/UX Designer: concept
  • design system
  • UI
  • brand
  • marketing

Duration

2015 – 2024

A platform where notes, files, messages and whiteboards no longer live in separate tools but work together.

doorlin is a cloud collaboration system in which different services are deeply connected: notes, email messenger, whiteboard and file manager on one interface and one data model. I also show the apps as separate case studies.

As founder, CEO and product designer I designed the entire product line: user stories, personas, design system, user flows, UI, (micro-)interactions, brand and landing pages.

01

Goal

Business and user goals – and my contribution to defining them.

Business
Position a B2B SaaS product of our own: one platform instead of many single apps, with a value proposition that sounds the same in brand, website and product.
User
Teams capture, find, edit and share content in one place, without switching tools or maintaining things twice.
02

Problem

The data, insights and pain points the solution builds on.

The starting point is the everyday work of teams in small and medium-sized companies: content is spread across email, chat, file storage and notes. I mapped these paths as journeys and derived personas and user stories from them.

  • Information lives in separate tools and has to be pieced together.
  • Files, notes and messages have no shared context.
  • Sharing and collaborating take many steps.
03

Solution

Approach, UX patterns, screens and design process.

Approach & UX patterns

Connect services deeply: every object – note, file, message – can be found, embedded and shared everywhere. From a concept map of objects and their relationships I derived the patterns: shared file manager, consistent sharing dialogs, continuous navigation and search.

Product Design (UX/UI): Collaboration Patform "doorlin"
Concept map: objects, services and their relationships.
Product Design (UX/UI): Collaboration Patform "doorlin"
Overview of views and states.

Screens, UI flow & process

From user flows and low-fi wireflows through detailed screens to the design system that makes components and behaviour binding. File manager, profile, filters, lists and dialogs follow the same rules.

Product Design (UX/UI): Collaboration Patform "doorlin"
User flows: tasks played through step by step.
Product Design (UX/UI): Collaboration Patform "doorlin"
Wireflows as the low-fi basis of the screens.
Product Design (UX/UI): Collaboration Patform "doorlin"
Product Design (UX/UI): Collaboration Patform "doorlin"
Product Design (UX/UI): Collaboration Patform "doorlin"
Product Design (UX/UI): Collaboration Patform "doorlin"
Product Design (UX/UI): Collaboration Patform "doorlin"
Product Design (UX/UI): Collaboration Patform "doorlin"
Product Design (UX/UI): Collaboration Patform "doorlin"
Product Design (UX/UI): Collaboration Patform "doorlin"
Dialogs: context on top, action at the bottom.
Product Design (UX/UI): Collaboration Patform "doorlin"
Product Design (UX/UI): Collaboration Patform "doorlin"
Product Design (UX/UI): Collaboration Patform "doorlin"
04

Impact & Validation

Outcome and validation.

Outcome
A consistent platform interface with a shared design system that works as a product family – including brand, landing pages and product presentations.
Validation (planned)
User tests of the core flows (sharing, finding again, collaborating), metric time to first share.
Product Design (UX/UI): Collaboration Patform "doorlin"
Product presentation for website and marketing.
Product Design (UX/UI): Collaboration Patform "doorlin"
Product Design (UX/UI): Collaboration Patform "doorlin"
Product Design (UX/UI): Collaboration Patform "doorlin"

All projects →

Let’s get your project moving.

Discuss a project →