Docutain

Redesigning Docutain to simplify document management

My Role

UX Designer

UI Designer

Tools

Duration

2 Months

Worked Alongside

Dominik Herrmann
Julia Klotz

Saving documents from 2 Minutes to less than 20 sec

Challenge

The main challenge was Docutain's overwhelming and time-consuming interface. Our goal was to simplify the user experience while preserving its powerful functionality.

Context

Docutain turns your mobile phone into a scanner, and also provides you with a document management system.

Outcome

Find documents with easy keywords
Fill out forms from your sofa

Method Tool Box

What tools did we use for a 8 weeks project?

Research:

Interviews

Inter-
views

Surveys

App Reviews

Competitor Analysis

Ideation:

3-3-5 Method

Crazy Eight

MSCW

Persona Creation

Creation:

Wireframing

Wire-
framing

User Flow

Prototype

Proto-
type

Design System

Current Situation

Understanding User Frustrations for a Streamlined Experience

Analyzing the app's current state and information architecture, along with user reviews, to identify recurring pain points and establish a clear understanding of its current performance.

Folder and simple renaming of documents preferable

Can only be saved as one file type

Good! It would be great if you could export the meta data

Faster scanning, several attempts necessary until a good scan is achieved

Problems with synchronisation

No automatic saving. If you leave in the middle of adding, you lose everything!

Pain Points

Cluttered Navigation

Overloaded hamburger menu linking to almost all pages users felt lost.

Inefficient Search

The landing screen lacked filtering and sorting options, making searches time-consuming.

No feedback

When scans failed, leaving users unsure about what went wrong.

Time-consuming

Entering and sorting data manually felt slow and tedious.

Technical Interface

The app felt too complex and not user-friendly, deterring less tech-savvy users.

Research

Exploring How Users Organize and Manage Their Documents

We interviewed students and professionals to learn how they manage documents.

Key Findings

Efficient search

Search functionality without filters causes friction

Quick access

Users value quick access to important documents from anywhere

Easy scan

A clear, simple scanning process with real-time feedback boosts confidence

Ideation

How does an average User look like?

To ensure that the redesign of Docutain was driven by real user needs rather than assumptions we created a persona focusing on out key findings

Userneed

Noemi, a young student who has just moved out would like to retrieve and organise her documents digitally on demand without too much effort, to minimise the time spent as much as possible

Facts

Does not need the documents often

Managed mainly via file folders. Important PDFs are stored in folders

Wants

Wants to have to do as little as possible with documents

On the road, not where documents are (two residences)

Frustuation

Discreetly stubborn towards digital storage

Somewhat inexperienced in document management Previously parents took over

How Can We Enhance Efficiency and Streamline Key Features?

We facilitated a collaborative workshop to generate and refine ideas for a "Delight" feature, using methods like brainstorming, the 6-5-3 technique, and storyboarding. The process involved three key phases:

Crazy 8: Rapidly generating diverse ideas

Deep Dive: Refining and developing the best concept

Storyboard Creation: Visualizing the final solution

The outcome was a feature that groups documents into collections, incorporating solutions like auto-categorization, metadata autofill, and item-type selection to help users stay organized and track everything effortlessly.

How Did We Bring the App’s Vision to Life?

To gather early feedback without spending time on visuals, we first focused on usability. We used key findings and our delight feature to refine the experience, ensuring a smoother user journey. Improved usability across the main screens presented here with Wireframes:

Visual

How Can We preserve Brand Identitywhile Elevate Functionality ?

Docutain’s redesign focuses on a minimalist, uncluttered style that enhances usability without compromising its core functionality. The new design, presented in dark mode, emphasizes simplicity and discretion while maintaining the app's distinctive look and brand identity. This approach ensures a seamless balance between aesthetics and practicality, elevating the overall user experience.

How Can Animations Improve User Orientation

Without animations, users may become disoriented and lose track of their current location, destination, and the unexpected appearance of UI elements. Content that moves into the viewport slows down (ease out), while content that moves out of the screen accelerates (ease in). Content that moves within the viewport exhibits both behaviors.