<p>This case study is presented in the voice and perspective of the Dell Developer Hub team. Information regarding DDS components or frameworks may be outdated. Note that the <a href="https://angular.delldesignsystem.com/2.29.0/">Angular Storybook</a> is now updated.</p>
<h2>About the product</h2>
<p>The <a href="https://developer.dell.com/">Dell Developer Hub</a> is an external and internal Dell product, used to access information about APIs and related content. It is a one-stop, self-serve hub facing developers to build, learn, and contribute to our ecosystem.</p>
<p>The users for Dell Developer Hub are engineers, leaders, clients, product managers, and the Dell DevOps team. This place allows them to view, learn and use API documentation, conduct subscription analysis and management, and look for code examples when available.</p>
<p>If you have questions regarding this case study, please reach out to Dell Design System through the <a href="/contact/feedback/">feedback form</a>.</p>
<h3>Design scope</h3>
<p>We discovered that the previous portal, which was called “Developer Portal”, was only providing capabilities related to API and documentation, but did not consider learning curves nor supportive content for new developers. It needed to be a place where public APIs would be available for consumption, documentation, and management. The Developer Portal mostly focused on the marketing and sales of Dell’s products, but did not focus on content integration.</p>
<p>Our design scope was to scale this portal to accommodate a variety of services, learning, and products. In this project, we shifted the portal into a hub to connect all related content into a single place, now called the “Dell Developer Hub”. Our shift to become a hub changed our perspective. Today, we have a more precise and integrated source of information, empowering developers.</p>
<details data-name='image-block' data-images='[{"alt":"Image of the old portal and the new hub created","caption":"Home screen of old Developer Portal and the new Dell Developer Hub.","url":"https://dds.dell.com/site/v2/production/e5/47/Overview_About_The_Product_Versions_c9c445dd97.png"}]' data-numberofcolumns='1'></details>

<h2>Problem statement</h2>
<p>We conducted several interviews with developers and related stakeholders to discover our biggest challenge. Based on the information from the interviews and product research, we mapped out the current journey to identify opportunities and improvements to evolve the project.</p>
<p>Developers and stakeholders often struggle to find trustworthy information scattered around many websites and portals. It was hard to find technical information about our products, because there was no centralized place to search.</p>
<p>Decision-makers could not find useful and reliable information to determine if they should consider Dell as an option for their infrastructure.​ Looking back at the old Developer Portal, we discovered that the content was not effectively utilized, lacked a proper standard format, and didn’t have the desired user engagement.</p>
<details data-name='image-block' data-images='[{"alt":"Graphical representation of the diagram used by the team","caption":"This diagram depicts how the user is struggling when trying to search for a mandatory training.","url":"https://dds.dell.com/site/v2/production/a7/2d/Overview_Problem_And_Impact_User_Journey_1_24bc553178.png"}]' data-numberofcolumns='1'></details>

<details data-name='image-block' data-images='[{"alt":"Graphical representation of the solution to simplify the process.","caption":"This is the suggested solution in order to simplify and add more effectiveness to the process.","url":"https://dds.dell.com/site/v2/production/6b/52/Overview_Problem_And_Impact_New_Journey_44da1e29d1.png"}]' data-numberofcolumns='1'></details>

<h2>Project goals</h2>
<p>The main objective was to transform the portal into a hub that would strengthen our relationship with developers, provide useful information, content, and resources they might need, all in a self-serve manner.<br></br></p>
<p>To do so, we needed to transform the product into a one-stop shop for developers that are:​</p>
<ul>
<li>Seeking information to consider Dell as an option for their company;​</li>
<li>Already using our services or products and wanted to learn, contribute, and update their knowledge.​<br></br></li>
</ul>
<p>The hub, having undergone a redesign using DDS v2, will be a key resource for decision-makers to choose Dell as their default and obvious option.</p>
<details data-name='image-block' data-images='[{"alt":"Home screen of the Dell Developer Hub","caption":"Home screen of the Dell Developer Hub.","url":"https://dds.dell.com/site/v2/production/ac/1d/Design_Project_Goal_Home_d5f71a1a48.png"}]' data-numberofcolumns='1'></details>

<h3>Our approach</h3>
<p>Our entire team, completely new at Dell, needed to break down the business goals for Dell Developer Hub and evaluate which problems to tackle first.​</p>
<p>The first step of the project was to centralize a multitude of content scattered throughout different portals and structures.​ We conducted stakeholder interviews to determine the strategy and the roadmap of the project.</p>
<p>We discovered that we had a bunch to unpack and a tight deadline for Dell Technologies World 2023, so we built an MVP. We also created a cohesive roadmap that predicts when and how to incrementally add new features and capabilities to the project.​</p>
<h2>Research and mapping</h2>
<p>Our <strong>research</strong> process structured the main goals in the following way:</p>
<ul>
<li>Organize and deliver information in a comprehensive and standardized way;​</li>
<li>Onboard new users and instigate curiosity around Dell offerings;​</li>
<li>Build relations within the DevOps community being content focused;​</li>
<li>Amplify focus on hands-on and developer centric information;​</li>
<li>“Show and tell” with existing content: blogs, events, labs, and videos;​</li>
<li>Explore APIs, without being the sole focus.​<br></br></li>
</ul>
<p>After the <strong>discovery</strong> phase, we had a clearer and more objective view of how the Dell Developer Hub should look, feel, and behave. In our discovery, we conducted interviews with developers and stakeholders.​</p>
<p>The old API catalog did not focus on onboarding new clients or developers. The developers that were already using it, when interviewed, explained that they didn’t understand how to get started or which product they were viewing​. Additionally, there was a problem with broken links.</p>
<p>Questions asked in user interviews were categorized and used to understand these topics:</p>
<table>
<thead>
<tr>
<th><strong>Category</strong></th>
<th><strong>Question</strong></th>
</tr>
</thead>
<tbody><tr>
<td>User profile</td>
<td>What is your age? What do you work with? How long have you been working in your area?</td>
</tr>
<tr>
<td>Topic understanding</td>
<td>When was the last time you used a developer portal? What was that portal? How would you describe your experience? Why? Before visiting this portal, did you already know others? Which? How often do you visit any developer portals? How do you prefer to search for specific content on a developer portal? If you could create a ranking of the top 3 features of a developer portal, what would it look like? In any visit to different portals, was anything frustrating? How did you get past her?</td>
</tr>
<tr>
<td>Pains &amp; needs</td>
<td>What do you miss about the portals you used? What would an ideal portal look like for you?</td>
</tr>
<tr>
<td>Insights</td>
<td>Would you mind sharing your screen and showing us how you would use a portal? Would you like to add something that we didn’t ask in this chat?</td>
</tr>
</tbody></table>
<p>Based on the demographic profile identified in the previous steps, we created a persona to best represent our user and understand their needs.</p>
<details data-name='image-block' data-images='[{"alt":"Representation of the persona created for the product","caption":"User persona created to represent the user of Dell Developer Hub.","url":"https://dds.dell.com/site/v2/production/11/e3/Design_Research_And_Maping_User_Persona_3c23108528.png"}]' data-numberofcolumns='1'></details>

<p>Through activities with the team, we mapped the user-developer journey, and identified opportunities and improvements to evolve the project.</p>
<details data-name='image-block' data-images='[{"alt":"Representation of the user journey created","caption":"The user journey was created to map the different steps and process of the user during the experience.","url":"https://dds.dell.com/site/v2/production/97/b8/Design_Research_And_Maping_User_Journey_65ca02faa0.png"}]' data-numberofcolumns='1'></details>

<h2>Prototyping</h2>
<p>Our objective was to provide a self-service hub to integrate a centralized, reliable source for Dell’s ecosystem: a scalable solution where developers can connect, contribute and participate.</p>
<p>The DDS library was a key resource for us to deliver the MVP of our project in record time. We validated each iteration with stakeholders until we got to the current version.​</p>
<details data-name='image-block' data-images='[{"alt":"Screens of the product","caption":"","url":"https://dds.dell.com/site/v2/production/67/ca/Design_Prototype_Introduction_c4bca22471.png"}]' data-numberofcolumns='1'></details>

<p>The platform has been designed and structured based on the Dell Design System v2. All foundations were strictly adhered to. The vast majority of components were used, and some were adapted for the required solution context.</p>
<details data-name='image-block' data-images='[{"alt":"Example of how the tam used the DDS v2 card component","caption":"Example of how we used the DDS v2 card component in different cases. In some cases, we needed to adapt.","url":"https://dds.dell.com/site/v2/production/c3/6b/Design_Prototype_Cards_Adaptation_793d7e4786.png"}]' data-numberofcolumns='1'></details>

<p>Since our hub is a place that has many types of content, we needed to produce some sort of categorization to organize our experience.<br>​<br>By using DDS colors we classified our content in categories and helped facilitate hub usage.</p>
<details data-name='image-block' data-images='[{"alt":"Visual examples of the cards and their topics classified by different colors.","caption":"Visual examples of the cards and their topics classified by different colors.","url":"https://dds.dell.com/site/v2/production/f6/74/Design_Prototype_Cards_b8cdfbc7f5.png"}]' data-numberofcolumns='1'></details>

<p>The product is ever-evolving, with features mapped during the ideation phase. We utilize the Build-Measure-Learn loop to always iterate and deliver a modernized experience.​</p>
<h2>Engineering project</h2>
<p>We listened to developers who were responsible for using DDS in platform development, and our next step was finding the resources available to accelerate our UI development. The idea was to adapt our layout using the DDS grid system and import the CSS files to our application, so we could implement part of the base components.​</p>
<p>The front-end projects were created using Angular as the only framework. The team started with the Angular v12 and continued to update it during some months. Nowadays, we are in the Angular v15.</p>
<h3>About the process</h3>
<p>When it came to choosing components, we were guided by the options available from DDS at that time. When we built our product, the <a href="https://angular.delldesignsystem.com/2.29.0/">DDS Angular Storybook</a> integration was just in its first stage, so it was more of a stylesheet guide instead of a component library. What we found was the most scalable and performance-oriented way to import the CSS files and replicate the component boilerplate available in the documentation on a use-case basis.</p>
<p>We used the Vanilla components and adapted them for Angular. We are working on making these components available on the <a href="https://uxmarketplace.dell.com/">MFE Marketplace</a>, an internal collaborative platform for Dell developers. This way the components can be used by other teams. Adapting Vanilla components to Angular is quite challenging and non-intuitive. Although this required more work in development, the DDS provided plenty of information to make it possible for us to customize their Vanilla components.</p>
<h3>Challenges</h3>
<p>Our biggest challenge was importing JavaScript content from the DDS library. For that, we had to change a bit of how we were importing the DDS content in our application and transform it into an Angular component. The DDS team has an internal <a href="https://teams.microsoft.com/dl/launcher/launcher.html?url=%2F_%23%2Fl%2Fchannel%2F19%3A9354a17c845d4069af19fccdd15fdecb%40thread.skype%2FGeneral%3FgroupId%3De7dbbb3b-12b5-444b-982f-3deb03d25261%26tenantId%3D945c199a-83a2-4e80-9f8c-5a91be5752dd&type=channel&deeplinkId=bf8b06ff-29e5-4173-8c7b-9c550047a7b5&directDl=true&msLaunch=true&enableMobilePage=true&suppressPrompt=true">Teams channel</a> for questions and support regarding the design system, and we used the channel to find similar situations that helped us overcome this barrier. Another challenge was making colors easily adopted through the whole application. In this case, we created two files that allowed the ease of adoption of new colors throughout the application.<br></br></p>
<p>Also, it was a challenge to learn how to use the component script in a scenario where it’s an Angular project using Vanilla DDS. First we tried to implement DDS using CDN, but then we couldn’t find a way to use the component on “.ts” files. At first, we didn’t know about DDS group on Teams, so we didn’t realize we had support. What we did was search how to use DDS properly on <a href="https://confluence.dell.com/display/DDSYS/Dell+Design+System">DDS Confluence</a> pages, an internal resource to find useful information regarding the design system. We found a <a href="https://web.microsoftstream.com/video/4d77d4a5-6e12-4d1f-aa84-aec6413c9e82?referrer=https:%2F%2Fconfluence.dell.com%2F">video tutorial</a> made by DDS showing how to use a DDS component, and that helped us to implement the component.<br></br></p>
<p>When developing and exploring DDS functionalities, the team realized some <a href="https://vanilla.delldesignsystem.com/2.51.2/index.html?path=/docs/foundations-helper-classes--page">helper classes</a> for DDS colors were non-existent. Because of this situation, we had to create and build our own classes for the project.</p>
<details data-name='image-block' data-images='[{"alt":"Visual representation of the product development. The image represents the helper classes being applied on the project.","caption":"Visual representation of the product development. The image represents the helper classes being applied on the project.","url":"https://dds.dell.com/site/v2/production/c0/12/Code_Challenges_Colors_06dec68af5.png"}]' data-numberofcolumns='1'></details>

<h2>Advice for other teams</h2>
<p>Study the documentation and check Dell applications that already use DDS for reference. We found other developers within Dell who have gone through the process of importing DDS components into their library and reaching out to them may hasten the adoption of the design system.</p>
<p>If you’re using Angular, make sure the DDS components you need are already available in the <a href="https://angular.delldesignsystem.com/2.29.0/">DDS Angular</a> library, since there are many in progress and in the backlog. If you’re using Angular, install DDS using NPM instead of CDN. This way, it’s easier to use DDS components scripts in your “.ts” files when it’s installed via NPM​.</p>
<details data-name='image-block' data-images='[{"alt":"Example of the code of a search results page using DDS components and grid.","caption":"Part of the code of a search results page using DDS components and grid.","url":"https://dds.dell.com/site/v2/production/d5/7a/Code_Adoption_Search_57a2c17233.png"}]' data-numberofcolumns='1'></details>

<h2>Support</h2>
<p>The good news is we haven’t needed much support. The current documentation in the DDS Storybook and platform was sufficient for understanding the information needed to implement the DDS. We do recommend joining the DDS Channel on MS Teams​ for support if needed, and to check questions made by other developers that might help you to implement and evolve your product.</p>
<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit the hub","path":"https://developer.dell.com/","type":"External"},"title":"Dell Developer Hub","description":"Explore APIs and see relevant content for developers."},{"image":{"url":"","alt":""},"link":{"label":"View component","path":"/components/card","type":"Internal"},"title":"Card component","description":"Read the documentation and guidelines on card."},{"image":{"url":"","alt":""},"link":{"label":"View component","path":"/components/tabs","type":"Internal"},"title":"Tabs component","description":"Read the documentation and guidelines on tabs."},{"image":{"url":"","alt":""},"link":{"label":"View foundation","path":"/foundations/color","type":"Internal"},"title":"DDS colors","description":"Read the documentation and guidelines on colors."},{"image":{"url":"","alt":""},"link":{"label":"Visit channel","path":"https://teams.microsoft.com/dl/launcher/launcher.html?url=%2F_%23%2Fl%2Fchannel%2F19%3A9354a17c845d4069af19fccdd15fdecb%40thread.skype%2FGeneral%3FgroupId%3De7dbbb3b-12b5-444b-982f-3deb03d25261%26tenantId%3D945c199a-83a2-4e80-9f8c-5a91be5752dd&type=channel&deeplinkId=79ae8816-ad6d-4a1a-b260-b2ffc54abb7e&directDl=true&msLaunch=true&enableMobilePage=true&suppressPrompt=true","type":"External"},"title":"MS Teams Channel","description":"A place to communicate with DDS team."},{"image":{"url":"","alt":""},"link":{"label":"Read information","path":"/getting-started/angular","type":"Internal"},"title":"Getting Started with Angular","description":"Guidelines for Angular with DDS."}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


Dell Developer Hub offers developers reliable information and relevant content to empower and facilitate their work.

Dell Developer Hub

Home

About DDS

Migration guide

A11y annotation kit

Figma

Storybooks

Community library

Tokens

Getting started

Overview

Color

Elevation

Grid

Icons

Spacing

Typography

Foundations

Accordion

Action menu

Badge

Blockquote

Breadcrumb

Button

Card

Carousel

Checkbox

Date picker

Divider

Drawer

Dropdown

File input

Footnote

Link

List

Loading indicator

Message bar

Modal

Notification

Overlay

Pagination

Popover

Progress bar

Progress tracker

Radio button

Search

Select

Side navigation

Switch

Tabs

Text area

Text input

Time picker

Tooltip

View more/less

Components

AI design library

Micro-moments

AI Chat  - Community Library

Area chart

Bar chart

Bubble chart

Donut chart

Gauge chart

Line chart

Metrics card

Pie chart

Utilization chart

Dashboard template

Data visualization

Chart customization

Drag and drop

Empty state

Filter

Form

Microinteraction

Sign-in

Patterns

Accessibility

Brand

Partners

Case studies

Blog

FAQs

Tools

Videos

Resources

Send Feedback

Check My Tickets

Find us on Teams

Support