Building an Experience for Designers @ Rocketium: Unified DesignerX Panel

A short video about Rocketium.
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. 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.
  2. 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.
  3. 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 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.
Various Styling Panel — 1. Webflow, 2. Relate, 3. Figma, 4. XD, 5. Sketch & 6. Pitch
Sprint Session on FigJam

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. Grouped Panels: All related options for elements are grouped based on this type.
  2. Unified Styling Panel: All the styling options are combined into a single place to manage an element.
  3. 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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vidhunnan Murugan

Vidhunnan Murugan

119 Followers

Product Designer at BigBasket | Creating meaningful experiences through design.