Building an Experience for Designers @ Rocketium: Unified DesignerX Panel

Vidhunnan Murugan
6 min readJul 11, 2021

--

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.

A short video about Rocketium.

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.

Rocketium’s old editor experience

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.

Various styling options for different elements.
  1. Styling for All Sizes: Any change made here will apply to all sizes.
  2. 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.

Styling option module for various styles.

Explorations & Research

Different tools — From top left 1. Webflow 2. Relate 3. Photoshop & 4. Figma.

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.

Various Styling Panel — 1. Webflow, 2. Relate, 3. Figma, 4. XD, 5. Sketch & 6. Pitch

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.

Sprint Session on FigJam

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.

  1. Styling Properties: The styling properties are constructed to have a similar experience across all the various styles.
  2. Grouped Panels: All related options for elements are grouped based on this type.
  3. Unified Styling Panel: All the styling options are combined into a single place to manage an element.
  4. 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.

Construction of a styling properties panel — Typography Styling

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.

Various Styling Panel for Images, Videos & Text Elements

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.

Updated Editor with Right-side Styling Panel
All the styling options for various creatives & elements.

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.

“Building a habit-forming product is an iterative process and requires user-behaviour analysis and continuous experimentation.”
Nir Eyal on Hooked.

Thank you so much for reading.

If you like this article, please share it with your friends. 👋 Don’t hesitate to reach out to me on Instagram or Linkedin.

--

--

Vidhunnan Murugan

Product Designer at BigBasket | Creating meaningful experiences through design.