01 Project goals
DubHub is a B2B SaaS platform that optimizes database management for development teams.
Following my work on the company’s marketing website, I was tasked with a significant challenge: designing a completely new system from the ground up. This involved creating both the UX and UI of the platform, while maintaining consistency with the visual language established for the website.
In this case study, I will present my work on the process of creating a new DUB, one of the core functionalities of the system.
02 Research & Discovery
To understand the system’s goals and challenges, I began with a comprehensive research phase:
First, I conducted discovery meetings with product managers who highlighted key challenges in the DUB creation process:
- The connection process to the system is lengthy and complex, with multiple potential failure points
- First-time users may experience frustration and helplessness
- Users might struggle to understand the extended process duration
Next, I analyzed competitor systems and solutions to understand industry best practices and potential approaches to these challenges.
Finally, since end users weren’t available, I interviewed the company’s developers who represented our target user profile well. Key insights revealed that our users:
- Are highly technical and professionals
- Can handle complex information effectively
03 Design Process
I Designed a single-page, scrollable wizard for the DUB creation process, to allows developers to anticipate the full scope of the setup.
Cultivate trust by transparency:
- Builds trust and empowers users to troubleshoot independently – Elaborate explanations for each possible connection issue in the complex setup procedure, including proposed solutions to the problem.
- Designed technical diagrams to explain what happens behind the scene during the connection establishment process.
Developed consistent toolbar, iconography, and menu designs aligned with brand visual identity.
After creating the mockups, I worked closely with the development team throughout the entire process – from validating technical feasibility to ensuring the final implementation matched the intended design and user experience.
04 Results & Impact
- Brand Consistency: Successfully translated brand values and visual language from the website into a functional, user-centered product design.
- User-Centric Design: Created a system that respects the expertise of highly technical users while providing necessary support.
- Transparency and Trust: Implemented detailed explanations and technical diagrams, empowering users to understand and troubleshoot the complex setup process.
- Comprehensive Solution: Designed a transparent, informative process for a complex B2B product, reducing potential user frustration.
- Design System Foundation: Developed consistent toolbars, icons, and menus, laying groundwork for future product expansion.
- Stakeholder Satisfaction: Received positive feedback from product managers and internal developers on the design’s effectiveness.
