Redesigning Dyte’s Developer Portal: Streamlining Workflows and Enhancing User Experience
Overview
Dyte provides a real-time video SDK that allows developers to integrate live video, audio, and collaboration tools into their applications. The Developer Portal acts as the central hub where developers manage API keys, monitor usage, access documentation, and configure settings.
As the lead product designer, my goal was to streamline navigation, enhance usability, and create a seamless onboarding experience to ensure developers could easily integrate Dyte’s APIs into their applications.
Key Outcomes
Challenges with the Existing Portal
The existing Developer Portal had several usability challenges:
Research & Discovery
To ensure developer-centric design, I conducted:
🔹 25+ developer interviews to understand workflows & friction points. 🔹 Competitive analysis of portals like Stripe, Twilio, and Zoom. 🔹 Heatmap analysis & session recordings to study user drop-offs.
Key Insights from Research
Through developer interviews and usability testing, I discovered:
Developers needed quicker access to API keys, usage statistics, and organization-level settings.
Onboarding could be faster with better guidance and easier access to configuration settings.
Clear separation between Meetings and Sessions was necessary for efficient session management and real-time collaboration.
Developers wanted more control over permissions, account settings, and the look-and-feel of the portal.
This is what 6-8 hours of brainstorming session looks like 🫡 🫡
I know! These are masterpieces
Design Process & UI Enhancements
1️⃣ Information Architecture Overhaul
Challenges Addressed
Cluttered Navigation: Developers found it challenging to quickly access the key features of the portal.
Confusing Access Between Organizations: Switching between multiple organizations was not intuitive.
Solution
Refined Navigation System:
Introduced breadcrumbs for better tracking of user location in the portal.
Added quick access links to provide one-click navigation to essential settings and features.
Implemented a global search bar to easily locate resources, API documentation, and user data.
Enhanced navigation between multiple organizations by simplifying the organization switcher for easier context switching.
Side and Top Navigation: Clear distinction between the side navigation for primary features (e.g., API keys, Settings, Logs) and the top navigation for global actions (e.g., search, switching organizations).
Visual Clarity: Used consistent spacing and font sizes to declutter the portal, ensuring that important sections are easily visible and accessible.
2️⃣ User & Organization Settings – Personalization and Controls
Challenges Addressed
Developers struggled to manage their accounts and set organization-level controls effectively.
There was no clear separation between personal settings and organization settings.
Oh! Its not over yet...
Solution
Personal Account Settings:
Created a dedicated "Account Settings" section where users could update their personal information, including profile picture, email, password, and notification preferences.
Added 2FA (Two-Factor Authentication) for better security.
Organization Settings:
Introduced role-based permissions to control who has access to specific features at the organization level.
Allowed users to customize the look and feel of the portal, including color schemes, logo placement, and branding.
Improved User Permissions:
Enabled administrators to assign roles and manage access to different levels of functionality (e.g., developers, team members).
Ensured that access rights were clearly defined for each role to enhance security.
💳 Billing & Usage – Transparency in API Consumption
📌 Challenge: Developers found it difficult to track API usage & costs. 📌 Solution: ✅ Usage Graphs & Cost Estimates – Clear breakdown of API consumption. ✅ Real-time Billing Information – Avoids unexpected charges. ✅ Payment & Subscription Management – Developers can upgrade/downgrade plans seamlessly.
🔹 Impact: Increased billing clarity and reduced customer queries related to usage.
3️⃣ Meetings & Sessions – Seamless Collaboration
Challenges Addressed
Meetings and Sessions were not clearly separated, causing confusion for users trying to manage collaborative sessions.
last one!
Solution
Meetings:
Designed a meeting scheduling interface to allow users to set up meetings, invite participants, and manage meeting details like date and time.
Integrated calendar views to help users track and schedule future meetings.
Sessions:
Created a distinct "Sessions" section to allow developers to start and manage real-time collaboration sessions.
Added features for screen sharing, real-time annotations, and integration with Dyte’s video SDK for enhanced developer testing.
Session History and session logs were accessible directly from this section, enabling users to track past sessions and monitor real-time interactions.
4️⃣ UI/UX Enhancements – Improving Visual Design and Functionality
Challenges Addressed
The portal lacked a consistent design across different sections.
Users needed more control over the look-and-feel of the portal to tailor it to their needs.
Solution
Design System Implementation:
Built a scalable design system that includes reusable UI components such as buttons, input fields, modals, and tooltips. This ensured consistency across the entire portal.
Dark Mode: Integrated a dark mode for developers working in low-light environments, enhancing accessibility and reducing eye strain.
Improved Layout & Visual Hierarchy:
Standardized the use of color coding for different sections to help users easily differentiate between personal settings, organization settings, meetings, and sessions.
Improved the responsive design to ensure the portal was mobile-friendly and functional across devices.
Incorporated Developer Feedback:
Based on user feedback, I incorporated features like inline documentation, tooltips, and hover states to ensure that users received contextual help at the right moments.
Conclusion & Learnings
This project reinforced the significance of a developer-first design approach, focusing on usability, efficiency, and accessibility. By simplifying workflows, enhancing personalization, and optimizing real-time collaboration features, the Developer Portal redesign for Dyte created a more intuitive and streamlined experience for developers. The redesign prioritized clear information architecture, effective separation of concerns (distinguishing between meetings and sessions), and a consistent UI design, ultimately improving engagement and simplifying the development process.
Next Steps & Future Enhancements
🚀 Introduce more self-serve debugging tools. 📊 Expand API analytics & insights for developers. 📁 Optimize the mobile experience for on-the-go access.
