Portfolio | Bluesky | OtterTune | Triple Point | Topix

OtterTune

Title: Principal Designer

Cloud Data: OtterTune was based in Pittsburgh, PA and had a team of around 25 distributed around the country remotely. OtterTune created a web app optimizing Amazon RDS and Aurora database performance, focusing on reducing AWS costs and improving performance and efficiency. The company was founded out of Carnegie Mellon University.

Design Results: Redesign of user onboarding improved registration completion success rate from 10% to 35%, increasing number of (paying) customers for newly redesign application.

Recommendation from a Co-Founder at OtterTune:

“… a thoughtful and methodical Ul/UX designer.... a circumspect attention to detail on highly technical concepts and comes up with simple solutions that both look great and are functional.”

Dashboards

Dashboards were the starting point for redesigning the OtterTune app. Here you will see an evolution of dashboard designs, starting with original concepts during the research and ideation phase, followed by wireframe designs that ultimately turned into prototypes for engineering and demo purposes..

* Note: navigation may differ from screen to screen, as that too evolved over time and is out of scope of this presentation.
* Important: Click on image to enlarge.
* Videos: Clicking on some of the images below opens up a related video illustrating its function.

Related videos of Figma prototypes: Fleet Dashboard Final Design | Fleet Dashboard Comparison (old vs new) | Dashboard With Tabs (2nd iteration)

The original 'fleet dashboard' as it was when I joined the team. It was a collection of active and inactive database instances in a user's database fleet on Amazon AWS. This is what I was set out to redesign, working closely with product and engineer

The original 'fleet dashboard' as it was when I joined the team. It was a collection of active and inactive database instances in a user's database fleet on Amazon AWS. This is what I was set out to redesign, working closely with product and engineering. CLICK TO VIEW VIDEO (old vs new)

Some of the white boarding session notes taken in person (tweaked later over Zoom). Result of discussions between design (me), product and engineering.

Some of the white boarding session notes taken in person (tweaked later over Zoom). Result of discussions between design (me), product and engineering.

Initial sketches following white boarding sessions.

Initial sketches following white boarding sessions.

My first design for a potential dashboard prior to white boarding sessions described already. When I joined, a third party company was handling UX design, which I quickly took over soon after joining.

My first design for a potential dashboard prior to white boarding sessions described already. When I joined, a third party company was handling UX design, which I quickly took over soon after joining.

Iteration on the dashboard with sections broken down into tabs. Some of these sections (e.g. health checks, indexes) would not make it into the final approved design and instead appear deeper down in the application. CLICK TO VIEW VIDEO OF PROTOTYPE

Iteration on the dashboard with sections broken down into tabs. Some of these sections (e.g. health checks, indexes) would not make it into the final approved design and instead appear deeper down in the application. CLICK TO VIEW VIDEO OF PROTOTYPE

Final design approved for development by the engineering team. This is a screenshot of the prototype I built in Figma for testing and demoing to customers.

Final design approved for development by the engineering team. This is a screenshot of the prototype I built in Figma for testing and demoing to customers.

While the previous screens show the dashboard for a user's AWS fleet (account), each database instance had its own dashboard, which was intentionally designed to resemble the fleet dashboard.

While the previous screens show the dashboard for a user's AWS fleet (account), each database instance had its own dashboard, which was intentionally designed to resemble the fleet dashboard.

Recommendations

OtterTune’s selling point was using AI and machine learning to provide users with recommendations on improving one’s data on AWS. It ultimately helped users reduce their overall spend on AWS. Recommendations covered all major features in the application, ranging from (auto) knob tuning, indexes and tables, queries and more.

The following screens show recommendations throughout the site, ranging from top-level dashboard pages to specific features deeper down.

Related videos of Figma prototypes: Index Recommendations

Knob Tuning was, at launch, the primary feature that allowed users to use OtterTune to automatically make tuning changes to knot settings. If the user chose not to do so, they could use SQL code provided by OtterTune for them to make on their servers

Knob Tuning was, at launch, the primary feature that allowed users to use OtterTune to automatically make tuning changes to knot settings. If the user chose not to do so, they could use SQL code provided by OtterTune for them to make on their servers. Users could then compare those configurations with past edits to compare performance.

If indexes became too large or there were unneeded duplicates, OtterTune would provide the user with the necessary SQL code to remove those files. The application could not yet automate this. CLICK IMAGE TO VIEW FIGMA PROTOTYPE

If indexes became too large or there were unneeded duplicates, OtterTune would provide the user with the necessary SQL code to remove those files. The application could not yet automate this. CLICK IMAGE TO VIEW FIGMA PROTOTYPE

Query recommendations were more informational, providing recommendations of best practices for coding. The ultimate plan was to use ChatGPT to provide the improved code directly.

Query recommendations were more informational, providing recommendations of best practices for coding. The ultimate plan was to use ChatGPT to provide the improved code directly.

Clicking on a query recommendation item opens up the recommendation info.

Clicking on a query recommendation item opens up the recommendation info.

The fleet dashboard contained a list of top level critical recommendations from different database instances within the fleet.

The fleet dashboard contained a list of top level critical recommendations from different database instances within the fleet.

Recommendation from a Co-Founder at OtterTune:

“… a versatile and creative designer and a true team player … ability to create elegant designs for a complex technical product.”

Miscellaneous

Variety of features I designed site-wide, working closely alongside product and engineering.

Related videos of Figma prototypes: IAM Permissions (onboarding step)

My redesigned IAM permissions page, which was a critical part of the user onboarding process. I have a case study about this project. CLICK TO WATCH VIDEO OF FIGMA PROTOTYPE

My redesigned IAM permissions page, which was a critical part of the user onboarding process. I have a case study about this project. CLICK TO WATCH VIDEO OF FIGMA PROTOTYPE

Tuning options, where a user could decide between allowing OtterTune to auto-tune knob settings or preferring to approve it beforehand. Or they could copy SQL code and make the change themselves.

Tuning options, where a user could decide between allowing OtterTune to auto-tune knob settings or preferring to approve it beforehand. Or they could copy SQL code and make the change themselves.

Redesign of system emails, both weekly reports and system messages. More brand friendly.

Redesign of system emails, both weekly reports and system messages. More brand friendly.

Portfolio | Bluesky | OtterTune | Triple Point | Topix