CEROS STUDIO

INSPECTOR PANEL REDESIGN

Ceros Studio is a SaaS codeless web content creation platform that utilizes a freeform design system for complete control over all visual and interactive elements. The Studio Inspector Panel was not particularly easy to use, and it was organized in a way that made accessing a selected object’s properties tedious and slow. I set out to create a modernized panel that would more closely align with designer’s expectations while improving efficiency, findability, and usability.

ROLES

Research, Information Architecture, UX Design, UI Design, Testing

ORIGINAL METHODS

The original panel was a floating module that contained every canvas object type’s visual properties within tabs that were always visible, even if that object type was not selected. For example, if a shape was selected, the tab containing all the text box properties would still be shown, only disabled. In addition to specific object type tabs, the module contained a universal layout tab, a tab for applying interactions to any object type, a tab for adding animations to any object type, and an object specific settings tab that was only available for certain object types. Due to this mixture of object specifc tabs and universal object tabs, users were required to manually move between the tabs after they selected an object since the module never really knew what the user was actually going to do once the object was brought into context. We had been hearing the panel was causing frustration to designers, and on top of that, the module had a very dated look and feel, so a redesign was prioritized.

INITIAL RESEARCH

I started off conducting some comparative analysis on how other web builders and design programs handled editing object properties, looking at the interaction patterns and information architecture of their solutions. I also made note of the visual design language of these programs to understand look and feel, but also to gauge clarity on the operations.

During this time, I was conducting user research with designers of various backgrounds, including graphic designers, UX designers, and web designers, since Ceros Studio users tend to sit somewhere between these disciplines. Some were current clients while others were not familiar with Studio at all. My research was made up of user interviews to understand platform expectations and overall design workflows, usability testing with the current Inspector Panel to dive further into user pain points, and information architecture exercises like card sorts to increase findability in the redesign.

EARLY DATA

Once an appropriate amount of data was collected, I began to synthesize everything to gain insights. I started to identify some general trends I could use to guide the redesign.

Key Takeaways

The panel organization was confusing, and users weren’t always sure what to expect when bringing a tab into focus, especially since the tabs were not consistent in terms of contextuality
Users found interacting with the tabs generally cumbersome and slow
Having to manually move between the tabs after object selection meant some properties could be hidden on selection, so information could not be seen at a glance
The floating panel was in the way; many users wondered why it wasn’t docked like most other design programs
Iconography in the panel was not clear
In general, the Inspector Panel was not meeting users needs or expectations

SCOPE

Before any actual design work started, my team and I determined the scope of the project. We had a set timeline since the Inspector Panel was due to hit general availability alongside a number of other new Studio features as a product release update. This also meant resources were being stretched across a number of projects.

Because of the release deadline and resource allocation, it was decided we would generally aim for object property parity with the original inspector panel and avoid adding a lot of new functionality. We would also try to keep as much of the backend logic as possible, although this was a little more fluid in order to accomodate any model changes we might need to implement.

DESIGN PHASE

Using the information gathered from the initial research, I began working through potential design solutions. My main goal was to create a panel that was intuitive and efficient while remaining within the scope my team had previously determined. In addition to updating the UX of the panel, we felt the UI needed a refresh as well. I worked with Ceros’ creative director to achieve this.

ARCHITECTURE & ORGANIZATION

Since I had heard a number of users complain about the floating nature of the original panel, I decided to dock it. This would keep it out of the way of the canvas and would also help modernize the feel, matching the layout of the majority of professional design programs. Docking the panel also allowed me to expand the height of the panel so more information can be displayed at one time and lends itself to scrolling for any overflow.

Combining object properties that were spread across multiple tabs in the original panel and making displayed information more contextual was also a top priority. Users felt the old organization was cumbersome, and they didn’t like that all the information for a selected object was not shown at the same time. An object’s visual design properties, interactions, and animations would all be combined under a respective tab in the Inspector Panel.

I also added modules for groupings of properties in the panel. Users can add or delete eligible properties via the modules, and when a property was active, the values would be shown in the expanded module. This cleaned up the panel and helped hide information that was not needed, which made scanning much easier.

Values within modules can also be expanded if necessary. Some values can globally affect an object or be individually fine-tuned. The Corner Radius value is an example of this - if multiple corner values are not active, the entered value applies to all corners on an object. Clicking the mutli-corner selection displays editable values for each corner. Flyouts were also implemented for secondary object properties and elements like the Fill’s color picker.

INTERACTION & ANIMATION PATTERNS

Updating the Inspector Panel model meant the patterns for creating and editing interactions and animations would need to be reconsidered. The basic functionality and architecture for interactions and animations was not going to change (as it was out of scope), so I couldn’t make any huge changes to the specific models, but I could modify the flows and interfaces to better fit with the panel’s new direction.

Some users lost track of where they were in the creation flows for both interactions and animations in the old panels, so I looked to streamline the patterns as much as possible. Adding multiple interactions or animations to a single object also caused user confusion in the old panel, especially for animations. Interactions don’t follow any order when applied to an object - they just fire when the trigger is initiated - but their organization in the pane could be hard to understand. Animations, however, do trigger in a linear order, and the old panel didn’t make that clear, so I updated the pattern and panel feedback to highlight this.

MULTI-SELECT & MIXED STATES

The old panel model lacked much contextuality, and due to its initial organization, there was not much consideration given to how properties were displayed for object multi-select. The new model would be showing much more information at one time, and it was very important to work out the logic for surfacing global and object specific properties when varied object types were selected at one time.

In order to achieve this, I logged every property for each of the ten object types in Studio alongside every available property for the various interactions and animation effects and then broke them into groups that could be shared or not. If properties could be shared, I determined how mixed states would work and be displayed. Properties that were not shared across any objects would need to be displayed in the Inspector Panel as individual modules.

USER INTERFACE

User feedback on the old panel’s UI was not great - the iconography was confusing, the way things were labeled were not clear, and certain elements for property manipulation were not expected and therefore not recognizable. This feedback, along with the amount of structure and pattern changes for the new version, made it clear that a general UI update was necessary. After working through the UX and interaction flows to set a foundation, I worked with the Ceros’ creative director to design a new interface for the panel. In full transparency, there were a number of disagreements during this UI redesign, but ultimately we created something that would help users with findability and efficiency.

We focused on modernizing the interface and reducing some of the visual noise of the old panel. We also tried to maximize avialable object information without overwhelming the user. I designed a new set of icons where needed in order to more closely match UI standards across design products, and we modified text styles and element colors to fit with some of the global changes that were happening with Studio at the time.

USER TESTING & BETA

Throughout the design process, I talked with users about design decisions and conducted usability testing. I was able to lean heavily on Ceros' in-house agency to test, but I also made sure to have clients involved in testing as well. Tests generally consisted of users trying to create a specific type of object and then modifying it's properties in the panels. I was able to use prototypes and early code builds for this.

Early on, we did notice some confusion over some of the iconography. One example commonly arose during the addition and deletion of object properties. Users knew that the "+" would add a property (and therefore expand the module), but early builds had a "-" icon to remove the property. Users thought the icon for removal was going to minimize the module, not delete it. Because of this, I changed the deletion icon to an "X".

I also saw some issues arise over the labeling of properties and some of the options for animations. Additionally, I discovered editing animation properties could be a little cumbersome, so a streamlined way to edit animation properties was added to the animation list module. Essentially, a user no longer would need to enter the general animation creation flow to make updates; they could edit properties directly in the informational list.

I continued receiving feedback during the beta, with one standout concern being the scroll-in-scroll presented when users built interactions and animations. This was something that I had raised earlier in the design process, but stakeholders pushed back. The data would now give me more leverage to make this change in the future.

IMPACT

Since the new Inspector Panel was completely replacing the old one, my team needed to rely on qualitative data to track impact. On the user end, people expressed added efficiency when creating and editing objects on the canvas. Increased access to the properties allowed them to make changes more quickly. Users were also very excited about the Inspector Panel being docked. They felt they had spent too much time moving floating panel around and that it seemed to obstruct the canvas far too often. We also heard that the organization of the panel felt more familiar to a large portion of users, and this helped with both efficiency and findability.

We actually began to hear that both potential and current clients were mentioning that the tool looked more polished, professional, and modern, which added some trust to using the Studio. Whether or not this directly added to sales or renewals, I am not sure, but in retrospect might have been an interesting metric to try and track.