Jonathon Weller’s Portfolio Website

AddThis Tool Configurator Restructure

UX, UI

Restructuring the configuration process on the Internet's most popular website tools platform.

01Context

Context

AddThis creates website marketing tools. They are most well known for their share buttons but also have many other tool types, including follow buttons and list building. As the number of tools increased in the tool gallery, it became less user-friendly and was due for a redesign.

Problem

The previous AddThis dashboard organized tools as cards in a gallery. This solution worked well when AddThis only had a handful of tools but became unwieldy as more tools were added to the gallery. There were too many tools to choose from, and also many inconsistencies between tools.

My Role

AddThis’ organization resembled Spotify’s squads and guilds structure. I was the lead designer on the website tools squad that made the Tool Configurator. I worked with engineers to ensure my designs were in scope, a user researcher for user-testing, and other designers to keep a cohesive brand.

02Process

Personas

A few months before this project, I worked with our user researcher to develop personas for our product. We discovered that our users have a varying degree of website technical savviness, marketing skills, and budget. We kept this in mind throughout the project.

User Flow

This project originated from a broader effort to minimize friction on the first time user experience funnel. Before making changes to the flow, I first documented the current first-time user experience in a flow chart, making it easier to see the whole system and discuss with the team possible improvements. We decided to test if moving the tool configuration process before registration would increase code installs. I created a reordered user flow to help the engineers see which screens needed to be moved. This new user flow made it easy for our engineers to test what we already have without investing any time in developing new screens.

Wireframes

While this test was ongoing, we started focusing on the part of the funnel that involved activating tools. To create a simplified dashboard and make it easier to see AddThis’ suite of tools, we decided to combine all tools into one Tool Configurator. I then started wireframing this new design. I drew on gridded dot paper so I could scan the wireframes onto my computer and create a rough prototype in InVision.

Prototypes

Once I finalized the wireframes, I started creating higher fidelity prototypes with Sketch and InVision. I worked with a user researcher to run research calls with existing users showing them these prototypes. In between each call, I iterated on the design fixing usability uses that came up. With validation from these sessions that the Tool Configurator was easier to use, I started the lengthy process of auditing all of our tools and their settings to reorganize them more cohesively. I documented these settings in InVision and a Google Sheet to share with the engineers.

Animation

I used Principle to export .mov files to show our engineers what animations looked like in between different screens and menus.

03Results

Outcome

The redesign was received well by AddThis users. Unfortunately, the Tool Configurator was such a radical departure from the Tool Gallery that we were unable to A/B test its effectiveness. However, code installations did increase slightly.

Continuing Work

About a year later, we decided to revisit the Tool Configurator. By talking with our users, we discovered that the settings for each tool were not organized well. Some settings were surfaced to make them more accessible, while other settings were placed in an “Advanced Settings” menu. The logic behind this was to try to make more regularly used settings easier to find and tuck away less used settings. Unfortunately, it just made settings harder to find. To fix this, I redesigned the Tool Configurator with tabs and reorganized the settings moving all surfaced settings and Advanced Settings and putting them into more logical groupings. Feedback from some user research calls confirmed this new design is easier to use. Further, even experienced users started discovering settings they didn’t know existed.

While in the middle of implementing these changes, one of our front-end developers left the company. I used this opportunity to start taking on some developer tasks. I fixed a few styling issues Sass and some functionality bugs in React.

I wrote a blog post about the second Tool Configurator update. You can read it here.

End

Case Studies

Other Work