Custom Web Widgets

Zenreach (now Adentro) is an Atomic portfolio company based in San Francisco. Custom web widgets is a design tool within Zenreach that enables users to design and publish their own web widgets and web forms. In its initial form, this feature had a high technical barrier to entry; the only way to customize the web widget was by writing code in the dashboard's javascript editor. After conducting a series of user interviews, it was clear that there was a need for greater customization and the ability to create multiple web widgets.

During my internship at Atomic, I worked as the sole product designer for Zenreach. I was responsible for the entire design process surrounding the custom web widgets redesign; I independently conducted explorations on visual and interaction solutions for the user's current pains, created wireframes and prototypes, and validated my proposed solution with user testing. Throughout the design process, I kept stakeholders on the team informed and constantly iterated on my designs with the feedback they provided me.

The new design offers a visual approach to completing the same task, and is now intuitive for the majority of Zenreach’s user base.  Playing to the principle of discrete control activation, tiles were used to symbolize components that could be included in the user's web widget.

Simply dragging the element in from the sidebar allowed the user to customize the form fields and content of the widget.  Once an element has been included in the widget, it becomes inactive in the sidebar; this is to ensure no duplicate form fields are added to the widget.

The user can style elements with in-line menus dictating font characteristics, colours, borders, and other visual attributes. The entire form field section and background of the widget can be styled unanimously with the form and body styling buttons respectively.

The user can export their widget in the form of a pop-up, a separate link, a widget appearing after a click, or as a form on Facebook.  The instructions and custom code can be sent to a developer with the share functionality, or simply copied to their computer clipboard; this is the only place the user sees any code in the redesigned feature.

In order to make sure our solution was viable, we conducted five user testing sessions. Each participant was given a list of tasks to accomplish in order to achieve the overarching goal of creating a customized web widget. The tasks were carried out using a medium fidelity prototype created with Invision. Once the participant had completed the tasks, they were asked a series of questions about their experience; this qualitative feedback was collected more formally and gave the participant a chance to reflect on the overall prototyped experience.

The majority of feedback we received on this prototype was extremely positive. However, one area we wanted to revisit was the expandable and collapsible areas in the publish stage of the flow. Not all of the participants knew the cells were expandable, and would show the export options once clicked. In hindsight, the expandable cells interaction creates some redundant friction, which could be removed easily after conducting further layout exploration.