Online document editor

Online document editor

application redesign

application redesign

Client

NDA

Role

Senior product designer

Timeline

6 months

Year

2023 – 2024

Background

Online document editors from our client have been on the market for over 10 years, but the last software update was in 2017 — almost seven years ago.

The product team recognized that the outdated visual style negatively impacted user perception, leading to the need for a redesign.

Online document editors from our client have been on the market for over 10 years, but the last software update was in 2017 — almost seven years ago.

The product team recognized that the outdated visual style negatively impacted user perception, leading to the need for a redesign.

Challenge

  • Refresh the application’s design without completely rebuilding the product API.

  • Improve key user flow pain points.

  • Rebuild the outdated design system to align with modern standards.

  • Refresh the application’s design without completely rebuilding the product API.

  • Improve key user flow pain points.

  • Rebuild the outdated design system to align with modern standards.

Results

Document editor screen

Start screen

The project is still in progress, so final results are to be determined. However, we plan to track key success metrics, including:

  • Increase in registrations from the desktop application.

  • Growth in the number of files uploaded to the cloud service.

  • Number of template downloads from the company’s server.

  • Customer Satisfaction Index (CSI).

Initial testing has already shown an increase in CSI.

The project is still in progress, so final results are to be determined. However, we plan to track key success metrics, including:

  • Increase in registrations from the desktop application.

  • Growth in the number of files uploaded to the cloud service.

  • Number of template downloads from the company’s server.

  • Customer Satisfaction Index (CSI).

Initial testing has already shown an increase in CSI.

Discovery

Discovery

We collaborated with the marketing team to analyze user behavior and identified two primary user types:

We collaborated with the marketing team to analyze user behavior and identified two primary user types:

Developers

  • Appreciate the product for its open-source model.

  • Frequently install plugins and develop custom ones.

  • Prefer extensive customization options and use advanced tools.

Essential Users

  • Primarily use one or two editors for work.

  • Prefer a simpler interface and are unfamiliar with many tools.

  • Rarely install plugins but actively use those pre-installed by administrators.

To understand user needs better, we conducted interviews with seven users. Our main question was: How can we encourage users to adopt the product for personal tasks as well?

Additionally, we analyzed customer support requests and feedback from public sources (e.g., GitHub comments). Key insights included:

To understand user needs better, we conducted interviews with seven users. Our main question was: How can we encourage users to adopt the product for personal tasks as well?

Additionally, we analyzed customer support requests and feedback from public sources (e.g., GitHub comments). Key insights included:

01

Users don’t see the benefits of uploading their own files to the cloud system, as the process feels complicated.

02

The desktop application lacks notifications for file updates, new comments, etc.

03

The current file table is uninformative and makes searching for files difficult.

04

Templates are rarely used because they are hard to find and the navigation is confusing.

05

Some users find the interface both complex and outdated.

06

Many users value the product’s flexibility and plugin support — some even develop their own plugins.

♾️

And many more

The biggest challenge was prioritizing which issues to address within the redesign. To avoid scope creep, we selected the problems within our team's control that would have the most impact.

The biggest challenge was prioritizing which issues to address within the redesign. To avoid scope creep, we selected the problems within our team's control that would have the most impact.

Key Problems & Solutions

1. Unintuitive File Navigation

1. Unintuitive File Navigation

Problem: The file structure in the launcher made it hard to find important documents.

Problem: The file structure in the launcher made it hard to find important documents.

Solution:

  • Redesigned the "Recent Files" section to highlight changes requiring user attention.

  • Improved the left navigation panel by categorizing documents by file type, moving templates and revamping "Clouds" section

  • Enabled seamless work across multiple cloud services while maintaining a unified workspace.

  • Enhanced the file list by adding more functionality and bulk actions

Solution:

  • Redesigned the "Recent Files" section to highlight changes requiring user attention.

  • Improved the left navigation panel by categorizing documents by file type, moving templates and revamping "Clouds" section

  • Enabled seamless work across multiple cloud services while maintaining a unified workspace.

  • Enhanced the file list by adding more functionality and bulk actions

Start screen

Editor section

Mass actions

2. Uploading Files to the Cloud Feels Complex

2. Uploading Files to the Cloud Feels Complex

Problem: Initially, the app was designed for local file work, requiring users to manually upload files via a browser.

Problem: Initially, the app was designed for local file work, requiring users to manually upload files via a browser.

Solution: To encourage cloud adoption, we streamlined the process by embedding it into the file workflow:

  • Added file-sharing options directly from the file list.

  • Integrated sharing prompts during document saving.

  • Introduced auto-save functionality.

  • Embedded cloud registration entry points into key workflows.

Solution: To encourage cloud adoption, we streamlined the process by embedding it into the file workflow:

  • Added file-sharing options directly from the file list.

  • Integrated sharing prompts during document saving.

  • Introduced auto-save functionality.

  • Embedded cloud registration entry points into key workflows.

Key points to upload files

3. Difficulty Using File Templates

3. Difficulty Using File Templates

Problem: Templates were located in a separate navigation section, making them hard to find.

Problem: Templates were located in a separate navigation section, making them hard to find.

Solution: We redesigned the navigation structure to make templates more accessible at the right moment, improving discoverability and usability.

Solution: We redesigned the navigation structure to make templates more accessible at the right moment, improving discoverability and usability.

Document Editor Improvements

To enhance usability while retaining familiar workflows, we refreshed the interface while keeping its core logic intact. Based on user interviews, we also introduced a simplified version of the interface for Essential Users.

To enhance usability while retaining familiar workflows, we refreshed the interface while keeping its core logic intact. Based on user interviews, we also introduced a simplified version of the interface for Essential Users.

Two key conditions guided our approach:

Two key conditions guided our approach:

Theme compatibility

The new interface maintains support for existing corporate themes to prevent disruption.

Plugin flexibility

The simplified version remains adaptable, ensuring plugin support is preserved.

Key updates:

  • Main Editor Screen: Refreshed the top toolbar and adjusted canvas behavior.

  • Improved Accessibility: Increased control sizes and enhanced contrast for key elements.

Key updates:

  • Main Editor Screen: Refreshed the top toolbar and adjusted canvas behavior.

  • Improved Accessibility: Increased control sizes and enhanced contrast for key elements.

Plugin panels are now customizable—users can move, pin, and arrange frequently used functions as needed.

The file auto-save system and cloud upload process have been redesigned.

Updated the dark theme of the application and the switching algorithm for the dark theme of the canvas.

Takeaways

Takeaways

This project has been a significant effort for our team, and while it’s still ongoing, I’ve learned three key lessons:

  • Structuring the project process correctly from the start is crucial as it sets the overall direction.

  • Working with constraints helps. The outdated application posed many redesign challenges. Defining clear limitations on the kickstart helped us stay on track and ship a feasible concept.

  • Engaging with users was essential in prioritizing problems and ensuring we focused on impactful improvements rather than unnecessary changes.

Let’s make something together

Contacts

grrrshkv@gmail.com

Dmitrii Gorshkov • 2024

Designed in Figma, developed in Framer

Let’s make something together

Contacts

grrrshkv@gmail.com

Dmitrii Gorshkov • 2024

Designed in Figma, developed in Framer

Let’s make something together

grrrshkv@gmail.com

Dmitrii Gorshkov • 2024