In Creatopy (formerly Bannersnack) we had 2 separate editors: the Single editor, where you could make only 1 design, and the Multiple editor, called the Generator. With the Generator you could generate multiple designs at once (the cool one). We needed to merge them to solve 2 main problems:
- Business problem: everything was designed, developed and tested for two different editors. Merging them would cut the time for developing new features almost in half.
- Creation problem: if you can create multiple designs at once, why shouldn't you create a single design in the same place?
A little history
The Generator started as a hackathon project, where we ended up with an editor where you could edit multiple elements at once. No drag and drop, no on-stage editing, just some basic bulk editing. It was very well received, users started using it, and we got a lot of feedback on it. But it was far from perfect.
In 2018 or 2019 we managed to build a “bridge” between the 2 editors. Starting from one size in the Editor, you could make 2 more layouts in a simple process and end up with 30+ display ad sizes.
But after this update we didn't really touch the algorithm or make any big updates to it. Other functionalities and features were added along the way, but the generating algorithm itself wasn't updated anymore.
In 2019 we started thinking about how we could improve all this: make some tweaks so it's much more user friendly and eliminate a lot of the back and forth users were struggling with.
So we started mapping out the problems and came up with ideas and solutions around them.
The problems and how we solved them
1. The sizes weren't arranged in a logical way
Solution: we realized that all ad sizes can be grouped into 3 layouts: square, vertical and horizontal. After many variations, we came up with a solution that was logical and much easier to overview. Showing the designs in 3 columns, one column per layout type, made it much clearer.
2. After you placed an element on the stage, you couldn't move it in bulk anymore
Solution: change the flow. Don't ask for the positioning before the placement, but after the element is placed. This way, you can still move the element after placing it.
3. Adding elements to specific layouts
For example, adding a vertical logo to vertical sizes and a horizontal logo to horizontal sizes. This was only possible with a workaround: add 2 elements to every size, then delete one of them from each design.
Solution: we added layout filters, so users can select which layout type they want to work on. With a filter for specific layouts (for example, only horizontals), users can place an element on those sizes only. The idea was partly inspired by web design tools, where you switch between desktop, tablet and mobile views.
4. Creating master sizes
We knew our algorithm could resize a design very well within the same layout type (about 90% success, with only small adjustments). But from a square to a vertical or horizontal layout, the success rate was much lower (about 50%), and you had to edit a lot afterwards.
So we thought about a “main” layout. Once the main layout is complete, you can push all the edits to the other similar layouts. When we tested it with the developers, we were happy to see it worked like a charm.
We added 3 main sizes: square, vertical and horizontal. If users focus on and finish these, all the other layouts are completed with one action at a 95% success rate. So the solution was to show the main (master) layouts on top, with actions to trigger once the main size is ready.
5. The timeline and animations problem
In the Generator we had a “focus mode”, where you could enter each size separately and make changes only to that design. You could add animations in focus mode as well. The problem was that you couldn't edit animations on multiple sizes at once.
We did have a way to “send” animations from one size to other layouts, but it was very hidden: make a “build in” animation, go to advanced mode, copy and paste it with a dropdown, and select where to paste it. User friendly, right? And after pressing “Paste to rectangle layouts”, nothing happened. There was no visual feedback. It wasn't a good experience at all.
Solution: bring the timeline into the view where all the designs are visible, and edit them in bulk right there. With the layout selector, users choose where the animations apply.
Select square layouts and boom: everything you do is added to all square layouts! No more hidden-feature treasure hunt 😅
Testing the ideas
After we mapped out all these problems and found ideas and solutions for them, it was time to test them. We formed a small team of 3 developers and me to build these ideas into a working prototype, a kind of MVP.
After 3 to 4 weeks of working closely with the developers, we had a limited working prototype. Some of the complex functionality was left out; we kept only basic elements like text, images, buttons and shapes, which worked fine.
Now the good part 🙂 We began testing it with some of our heavy users. The user testing went phenomenally well. We received a lot of positive feedback, plus many other ideas we could build on next.
We gathered all the feedback in Miro.
User testing, May 10 to 14, 2021
After receiving the feedback, we iterated and tested again in June.
Mind map
A fresh interface
After several rounds of user testing, we started focusing more on the UI elements. We wanted to refresh the interface at some point anyway, so this was the right time.
We started building a new design system with smaller components and a more professional look. As the app grew over the years, we added a lot of functionality, but the components were large for ease of use (36 and 42 px). We wanted them smaller for better use of space.
While working on the new UI and layouts, we also tried to integrate updated functionality and find better solutions for areas like the layer list, the animation timeline and the properties bar, including a floating properties bar that works for both the Editor and the Generator.
