What is Couchbase Capella?
Capella is Couchbase's cloud SaaS offering. It's the easiest and fastest way to begin with Couchbase and to eliminate ongoing database management efforts. You can find out more here or try it out here .
Features & Work Streams
During my 2-year tenure at Couchbase I was heavily focussed on improving the devEx of the product. I was involved in gathering both internal and external feedback and performed regular design audits of the product, raising bugs where necessary to improve the overall consistency and quality of the UI. I worked on a multitude of features and work streams across multiple cross-functional teams simultaneously whilst being a strong advocate for design in the wider organisation.
Storage Auto-Expansion
The Challenge
End users were experiencing outages due to sudden spikes in traffic and therefore running out of storage before they had a chance to react.
My Role - Lead UX Designer
- UX review of existing Service Group level functionality
- UX review of data grid component
- Proposed design changes to toggle switch component for improved accessibility
- User Flow Diagrams
- Low Fidelity Wireframes
- High Fidelity Prototypes
- Presentation of designs to multiple stakeholders including product manager, engineering manager, engineers and QA engineers
The Solution
Providing the user with the ability to enable storage auto-expansion at a Service Group level so that it would allow them time to address the cause in a sudden spike in traffic and prevent an outage of their application.
This feature would also improve the user's experience as they would be notified when an expansion event occurred and, subsequently, it would mean that they could avoid having to raise a support ticket.
So, how would the feature work?
If the logged in user has the appropriate permissions to edit their Service Groups on a cluster, then they would be able to switch Auto-Expansion on or off. For existing clusters this feature would have to be manually switched on. All new clusters created after the feature was added would have Auto-Expansion switched on by default.
If the user utilises AWS as their provider then they would only be able to expand their storage once in any 6-hour period as this is a restriction that AWS impose.
What design changes were needed?
Toggle Switch:
- Added a new column to the Data Grid for Service Groups
- Added text to the switch to explicitly inform the user whether it was enabled or not, rather than solely relying on colour alone as the differentiator
- Documented proposed design changes to the toggle switch component so that accessibility could be improved
Information Banner:
- Added an Information Banner on the Service Groups page to explain the purpose of the Storage Auto-Expansion feature
- Banner was designed to persist on the page as the type of change that would be initiated had a cost implication for the end user
XDCR from Self-Managed to Capella
The Challenge
Users did not have the ability to set up cross data center replications to self managed targets external to Capella.
My Role - Lead UX Designer
- UX review of existing XDCR functionality in the Couchbase Server UI
- UX review of data grid and radio button component
- Proposed design changes to data component to accommodate new content type such as alert icons and labels
- User Flow Diagrams
- Low Fidelity Wireframes
- High Fidelity Prototypes
- Presentation of designs to multiple stakeholders including product manager, engineering manager, and engineers from the server and Capella teams
The Solution
Providing the user with the ability to set up replications from their Capella clusters to self managed targets such as an AWS bucket.
This feature would also allow the user to have visibility of within the UI as to whether there were any issues or errors with their replications.
So, how would the feature work?
Users would be able to set up replications to self managed targets, as long as they were using the same cloud provider for both the target and replication source, from the Capella UI - functionality which already exists in Couchbase Server.
What design changes were needed?
- Translating the existing content of the Server UI for XDCR into the UI components of Capella
- Modified existing data grid cell types to accommodate content that included alert icons and coloured labels/pill badges
- Documented proposed design changes to the data grid component to improve accessibility and extend usability
Read more about Couchbase Capella XDCR to self managed target
Billing Observability Dashboard
The Challenge
Users found it difficult to keep track of how many basic or developer credits they had in their account and where they were spending their credits.
My Role - Lead UX Designer
- UX review of proposed wires and list of requirements from product manager
- Research into design patterns for billing and observability dashboards
- Proposed design changes to layout of navigation on Capella to accommodate the addition of billing as a top level item
- User Flow Diagrams
- Low Fidelity Wireframes
- High Fidelity Prototypes
- Presentation of designs to multiple stakeholders including the product manager, and senior cloud FinOps manager
The Solution
Providing the user (with the necessary RBAC role to view billing information) with the ability to monitor their expenditure, see visualisations of credit utilisation in filterable charts and graphs, and being able to filter by service e.g. backups etc., and be able to purchase credits through the UI rather than having to contact Couchbase Sales or via AWS Marketplace.
So, how would the feature work?
Users would be able to view their credit usage and purchase credits through the Capella UI 24/7 without having to contact the Sales team. They would have the ability to filter the graph views by dates and usage type to gain a better overview of credit expenditure at a glance.
What design changes were needed?
- Modifying the layout of the main navigation to include billing as a top level item
- Creating new design components for multiple graph and chart types
Free Trial UX Gap Analysis and Review
The Challenge
During the transition and launch of the new UI, and subsequent significant changes in the information architecture, I identified that there were some missing steps in the Free Trial process which would negatively impact on the ability for trial users to move from free to paid accounts.
My Role - Lead UX Designer & Product Manager
- UX review of existing Free Trial process
- Research into process in previous iteration of the UI to confirm gaps
- Gathering extensive feedback from the field team and closely collaborating with them in order to provide the best solution
- User Flow Diagrams
- High Fidelity Prototypes
- Presentation of designs to multiple stakeholders including the director of engineering, engineers, director of cloud solutions engineering, QA
- Liaising with multiple teams to ensure the delivery of amendments needed could be delivered with a tight turnaround
The Solution
Providing the trial user with the ability to upgrade toa paid account without the need to contact Couchbase Sales.
What changes were needed?
- Modifying the free trial experience by adding additional screens in the UI to include a means to upgrade
- Documenting changes to the upgrade process and sharing with the field engineering team
- Creating an overarching epic within Jira to track proposed areas of improvements and engineering requirements
As a follow on from this work stream I also liaised with the product marketing team with my proposals for UX improvements for the free trial process in order to increase adoption and potential conversion to a paid account.
Style guide & Component Library updates
The Challenge
As a fully distributed UX team it was occasionally difficult to ensure the work that we were all producing separately was consistent.
My Role - Lead UX Designer
- UX review of exisitng Figma design components and component library
- Accessibility review of design components
- UX review of overall UI to identify components that needed particular attention
- Presenting proposed component changes with other designers and front end engineers to solicit feedback
- Iterating based on feedback and creating associated engineering tickets for proposed changes once designs were approved
The Outcome
- Creation of a revised version of the design components within Figma and associated component library on Storybook
- Documenting all design changes through a series of DDRs (Design Decision Records) so that colleagues could understand the rationale behind changes
- Drafted UX guidelines for items such as tone of voice and text content for error messages so that the UI was consistent regardless of which designer or engineer(s) worked on a feature/improvement
Social Sign-On
The Challenge
Users could only sign in either with their email address and password or by using Single Sign-On (SSO).
My Role - Lead UX Designer
The Solution
Providing the user with the ability to sign in/up to Capella without needing to create a separate account with email address and password credentials, thereby leveraging their existing social account instead.
So, how would the feature work?
Users would be able to sign in/up to Capella with the options of either their Google or Github account.
What design changes were needed?