Building an Experience for Designers @ Rocketium: Unified DesignerX Panel
Redefining our editor experience in the future of design & automation tools for creating visual ads, videos & marketing assets.
This is part 1 of our editor redesign series, starting with styling & on-canvas panel. This project includes different phases & various stages of editor– Size nagivation, layers view, bulk edit & video timeline to be continued.
About Rocketium
Rocketium is a creative automation tool that helps businesses that need to create visual assets on a larger scale. Enabled with AI features like Auto-Adapts in sizes, copy creation and more. Focused on creativity by improving productivity and collaboration between internal teams.
What do I do at Rocketium?
A solo product designer working especially with the designer features and improving the experience for designers persona.
Rocketium is moving forward on the designer focus platform for creating visual ads, banners, and videos on a larger scale and reducing the redundant works of the designers. Our current focus is to improve the editor experience for designers who are using the platform to create banners, videos and visuals. Some of the features in the editor are outdated or found complex to use by our designers.
We, Sukirti (Product Manager on designer features) & I were tasked to rethinking and redesign our editor to create a better experience with other design tools like Figma, Photoshop, and many more. The problem statement at our hand is to redefine the experience of the styling options, solve the pain points of our users (In-House Design Team, Our Users & Our Clients) and building a new designer styling panel.
Disclaimer: We are only focusing on redefining the styling experience on this project, not the content panel on the left side of the editor. The redesign of the content panel to layer based view is on the near future. Stay tuned for it.
The Current Editor Experience
We were trying to improve our editor's overall experience and bring similar patterns by exploring different cloud-based design/no-code tools. Here are the four problems we focused on this.
- Preview experience: On-canvas styling panel on the editor is a floating pop-up module that tends to occupy more space on the preview and need to get expanded whenever we add a new feature.
- Styling/design properties: Modern design tools are moved away from the on-canvas pop-ups to improve the preview experience & having a single space for all styling options.
- Similar Patterns in Design & Experience: As most designers often use modern design tools, replicating the same experience patterns will help us increase product adoption time and find the common experience to use.
- Productivity & Workflow: Reducing the time taken to navigate between different styling options by reducing the number of clicks required.
Various Styling Options: On Canvas Pop-up Module
All the different elements like text, colour, video or background have various styling options. In addition to that, the styling options have two categories for all elements.
- Styling for All Sizes: Any change made here will apply to all sizes.
- Styling for active/single size: Any change made will be applied to only this particular/active size
Interaction between different styling options
Every styling option has its own interface when opening that style option. Some of them have completely different UI in sizes, layout and combined with more complex options. Clicking through all the various options every time is time-consuming and make our users go back & forth for all styling options.
Explorations & Research
Our exploration started with modern tools like Figma 🤩, Webflow 😬, Relate & traditional looks like Photoshop to understand the design architecture of the tool and how to understand the patterns. While exploring all the different tools, there were few patterns across every software.
The first pattern is to have all the styling options in a unified place where the users don’t have to click different menus to apply a style for the same element/layer. And grouping all the styling into a section. For example, Typography can host Typeface, Font style, Size, Alignment, Tracking, Kerning, Decorations & Lettercases.
From various sprint sessions, Our Foundry (In-house artist) Team helped us understand their workflow in the product and how our clients use the editor to create visual creative, ads & videos. Based on those conversations, we created groups from various styling options and how it will impact various sizes creation too. The styling options also divided into text, image, main media, video & shapes.
Brand New Designer Styling Panel
Designing for an experience of designers is something which I never encountered. It’s different, complex & interesting in a way where every designer uses the product in their own & unique ways. Identifying those patterns is become a key objective in our exploration and mimicking the same experience from different tools. The design of the styling panel experience is divided into various parts.
- Styling Properties: The styling properties are constructed to have a similar experience across all the various styles.
- Grouped Panels: All related options for elements are grouped based on this type.
- Unified Styling Panel: All the styling options are combined into a single place to manage an element.
- Patterns & Experience: Bring similar experiences from various modern design / no-code related tools.
Styling Properties
Every styling panel is constructed in a way where it would easy to understand the property and joined together as a single panel. All styling options/properties are designed similarly to make the new panel easy to understand and similar to existing tools.
Grouped Properties
All the various styling options from text, image, videos & shapes are grouped based on each function and style. Some of them are not grouped like Overlays & Drop shadow, because those styles can exist on their own and might have more options already with it. All the styling properties are then stacked one by one on the right-side panel based on this repetitive usage and hierarchy.
Unified Styling Panel
The Styling panel is designed for all the element properties to adapt based on which element is selected is on the canvas. All the styling properties are stacked one by one on the panel. And each styling panel all the elements are designed to have a similar experience in the hierarchy of the options, usage counts & relation between other types of elements too.
On the productivity and workflow improvements, the number of clicks was reduced and the user behaviour was mapped to existing tools. This made the adoption of the DesignerX panel super familiar and easy for our users. Further on experience will be improved on UI changes on the editor for sizes navigation and content panel.
