OtterTune

Case Study: Dashboard Redesign

About OtterTune: A web app optimizing Amazon RDS and Aurora database performance, focusing on reducing AWS costs and improving performance and efficiency.

Intro: I know it sounds cliché, but most engineers are not designers. In a product’s early days, they are designers whether they like it or not. Designers typically aren’t brought on board until the company is ready to grow, and engineering is relieved to pass along the design process to someone else. This is where I have often entered the picture. If I had my way, a line of code would not be written until a design is completely ironed out. But in startup land, that is difficult to do.

My Role

Ottertune is an A-round startup, having been founded less than 2 years prior to my joining the team in July of 2022. With a team of less than 20 people, most were engineers, one product manager, three co-founders (also engineers), a head of marketing and me, the user experience designer (and UI designer from time to time).

I met regularly with all members of the company on a weekly basis to work out feature definition, improvements, development issues and post release testing and occasionally meeting with customers to get feedback and product wishes and requests.

Discover & Define

Before starting on the path to redesigning the product user experience, I needed to first learn the overall function of the product, meeting with all members of the aforementioned teams, reading through documentation, Jira tickets, deep dives into competitor products and gathering customer feedback and ideas.

Meetings with my teammates were typically over Zoom (we worked remotely), but we made a point for key members to meet in Palo Alto and sit in a room together to hash out key aspects of the product, whiteboarding and brainstorming ideas and concepts until we were all on the same page. Sometimes I would quickly cook up prototype concepts on the spot to help visualize ideas to see if they made sense or not. Very free flowing, everyone speaking their mind. I thrive in this environment.

All of this made a few things very clear in what needed to be focused on in the redesign:

  • While I redesigned all aspects of the site, this case study focuses primarily on rethinking the user experience of the customer dashboard. Everyone agreed that the current version was confusing, largely a list of existing database instances with a few pieces of meta data .

  • Most competitor products were either chart heavy with not enough text explanation or they were text heavy with a lot of required reading for the user to read through before learning what the problem was.

  • Users don’t want to spend too much time on a site like OtterTune. They want to learn as quickly as possible how their database instances are doing and the move on to other things.

  • The dashboard should also be a jumping off point into all areas of the site. Even though the top level navigation accomplishes this, it’s important to create multiple entry points into all areas of the site besides just the navigation.

  • If database instances are not doing well, the user wants to either quickly see a list of what to do to fix the problem or maybe even let Ottertune do it for them through machine learning and AI.

  • The product was aimed at the non-DBA (data base administrator), not heavy in knowledge of how to manage a database, but more a general working knowledge of it.

  • The page couldn’t be overwhelming, show key pieces of data in order for the user to be able to focus on it.

Ideally, one would prefer to be able to create a series of personas and user stories, especially when designing for more than one type of user, but often it is the case that one can’t afford that extra time early in a startup. So Figma is the home for all different types of user flows and edge cases. And for OtterTune, there was a single type of user that was being targeted, the non-DBA, certainly technical minded, but not deep in the weeds of database management.

White boarding discussion time!

Ideate & Design

I generally like to create at least two design concepts to get the conversation going. But depending on how defined things are early on, just one may be enough, as was the case for the OtterTune redesign.

Not only was there a dashboard for a user’s overall Fleet account (a Fleet was all database instances in an account), but there would also be a dashboard for each individual database instance.

As mentioned earlier, the health of a database instance needed to be communicated immediately and accompanied by a series of recommendations. I did this by:

  • Showing an overall average health score with a circle animating around it as the page was loading. If the circle was green, it meant your health score was 80-100 (the highest being a perfect score). Yellow as 60-80 and red, the most serious, was everything south of 60.

  • The score was an average of an instances database, resource, table, index and query health scores. Along with the overall animated health score, each aforementioned category would animated in as well, kind of like a car dashboard starting up.

  • Accompanying a score needed to be a list of recommendations a user needed to perform in order to improve their health score. Generally, the healthier the score, the less recommendations would appear. The lower the health score, the more recommendations that would appear.

  • Users could also be presented with the option to let OtterTune handle some of the recommendations automatically through machine learning and AI, particularly that of database knobs, a series of settings for database instances.

Earlier Dashboard Concepts

Tools Used

Development & Testing

  • Once ready, the development process begins with both the front-end and backend engineering team. Development primarily focused on desktop and not mobile, as database managers (and DBAs) tend to use large screens to monitor the database instance performance and not on their phones.

  • I met regularly with front-end developers to go over my mocks and prototypes to ensure their understanding of what needed to be done. This was followed by regularly synch ups to answer any questions, status updates and testing if ready.

  • Sometimes implementation might highlight deficiencies in the UX process and it would be necessary to return to the Ideate & Design portion of the design process before meeting with engineers again.

Results

The redesign was released to the public and the overall response to the dashboard was a resounding yes in terms of making things clearer to the user, more functional, more intuitive. We weren’t able to get the large amount of traffic to gauge performance metrics, as the company soon pivoted to backend APIs, but management and existing users of the products were very enthusiastic about the redesign.

The old dashboard…

My redesigned fleet dashboard!

Dashboard In Action (prototype)

Additional Designs

As mentioned above, the focus of this case study is on the redesign of the fleet dashboard. But I did work on redesigning the rest of the site and below are screenshots of some of those sections.