A new way your team engages with features and tasks on Zepel

Zepel team invited me to do a Design Sprint on their old editor. Their old editor had several problems with usability and it needed a new and better look and experience before they would redo their editor in the back end as well.

Project

UI & UX Design, Design Sprint, User Testing, Industry Research

Platform

Web

Industry

Project Management

Problems

  • Users were complaining about how the editor works and is connected to the rest of the site,
  • A number of UX issues that users were either getting used to or leaving because they didn’t understand it.

Goals

  • Design an editor that will suit users needs and be as easy and as intuitive to use as possible

Process

Researching the industry

First part was me getting to know the industry and fully understanding what is the problem the are trying to solve. I spent good amount of time reading articles and studies that I found, but also documents that they already made for their internal use. I created a very big Notion file that consisted of a big number of my summaries of articles and researches I found online.

A notion document I created on the start of our project

Design Sprint Workshops & Preparation for Design

After I got to know the industry and it’s problems we were ready to start defining Zepel’s problems, goals and find out how to design for them. We went with Design Sprint as a perfect and quickest solution for this. We did a number of workshops and since we did everything online we used Miro for collaboration and Zoom for video conferencing. In the workshops we did we defined probles, long term goals, we got ideas out, and all of this was to prepare for the next step - design.

Screenshots from Miro board

UI & UX Design

At this point we knew exactly what needed to be designed so I got straight into Figma and started designing. After I finished design part I also did an interactive prototype and a whole plan for user testing. We tested with their real users, as you will see later on. The design is divided into three parts: Creating a feature, Editor and Templates.

Creating a feature is very simple process

Blank state (left) vs feature tasks, stories and bugs entered (right)

Users loved this bottom bar where you can add or edit elements in the selected line

Things that you can do inside a feature

Templates

User Testing & Results

Once we have finished designs we started testing them with real users. We emailed a number of users in the first phase and scheduled time that was suiting for both sides. As always, testing gave as great feedback about how to improve our new designs and make them better. It also told us what users really needed, like that bottom bar for adding or editing stuff, but the thing they liked the most was a new sidebar that replaced what was before modal.

Notion file with User testing flow and test results

Thank you for going trough this
Case Study!

Have a project for me?

Say hi ✋ - momcilo.milijasevic@gmail.com