‍

A UI redesign focused on decluttering the experience, consistent controls, and product intuitiveness.

‍

Our customers love using Castodia to auto-refresh their Google Sheets from their databases on a custom schedule. Instead of manually exporting data as a CSV or receiving data exports by email, they use our auto-refresh to save their engineers and data analysts hours of time every week.

‍

In this post, we'll walk you through our redesign and the thinking behind our choices.

‍

‍

One of the main feedback points we've heard from our customers is that our design was confusing, that there were too many buttons, and that the use of colors weren't very intuitive.

‍

We decided it was time to redesign. A few of the challenges we started with was that

1. We built and launched our product quickly so we could start getting early customer feedback. As a result, we had to trade of design for functionality
2. Our company's primary color is pink, but our product requires taking actions such as Run and Delete, forming anti-patterns in button colors
3. We were constrained to building within the Google add-on and App Script environment

‍

Since our launch, we've had the opportunity to talk to and watch our customers use our product and inform our redesign. Our primary color pink wasn't intuitive for actions such as Run, Schedule, Save, especially when we had to allow for Delete actions as well. We've also become more familiar with Google and App Scripts (although it is still painful to develop on Google).

‍

For this re-design we wanted to first address customer issues with the UI. Our focus was on decluttering the experience, making functions more intuitive, creating a more consistent style for different actions/functions, and the introduction of a new color palette with additional colors.

• Green is for live actions like scheduling, running and saving
• Blue for actions that require additional steps, such as editing and managing schedules
• Gray is for cancelling actions

‍

We aligned all buttons to the right to create consistency for actions that can be taken with our product. We also made it a lot easier to see and click the buttons for the most common actions taken with our product.

‍

As you can see in the screenshots, we made the Run button a lot wider than it was before, and we turned the Clear button into an action link instead. Notice that the previous color usage resulted in anti-patterns where the Save button was pink and the Cancel button was black. We introduced new colors to match what users expect.

‍

‍

We removed additional buttons through the UI. For example the Select button did not provide much value. Instead we automatically load your selected query. Notice again that we made the Run button bigger and moved it to the right. We added the color blue for actions that were intermediary (or that required additional actions).

‍

‍

We decluttered the experience by removing and repositioning buttons. In the previous design there was a section in the Edit Query section that had 7 buttons all very close to each other.

‍

‍

We introduced more scheduling options and a double dial to select starting and ending times for your scheduled queries. We updated colors to green instead of pink and made the Schedule button bigger and aligned to the right to remain consistent.

‍

We broke down sequenced actions into sections to represent different steps. To reset accounts in our previous design, users had click on then Request to Reset button. This button was easy to miss - most users clicked on Reset first. In the current design, we placed the Reset your account button first. Once you receive an email with the reset code you could paste it in the next section and press on Confirm reset.

‍

We are continuously working to improve our design and user experience. If you have feedback, please reach out to us at design@castodia.com.

‍