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
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
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
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