Verizon Location Technology (VLT) launched a web-based, SaaS developer portal in Spring 2019 to allow developers to utilize their APIs and SDKs. VLT partnered with a third party—Elevated Third—to develop the Drupal CMS that is used to create the portal’s front end. Once Version 1.0 was launched, the VLT team realized that the CMS did not offer the level of customization needed to adhere to Verizon branding guidelines.
Because I was aware of the gaps in the first version of the Drupal CMS, and was most familiar with Verizon’s branding guidelines, I was tasked with heading the redesign process for the developer portal’s Version 2.0.
When approaching the redesign, I sketched out and created wireframes to reflect what I would ultimately want the user interface to look like. I drew inspiration from Verizon’s existing websites to understand what new components and interactions we could repurpose and utilize for our developer portal, and outlined what improvements we required from existing components. Additionally, I took into account the feedback we received from developers on what was missing in V1, and learned how they typically navigate through other developer portals. With this, I adjusted the information architecture and user experience accordingly.
This developer portal will reach users that have migrated from an older version of this platform, in addition to new users that will interact with the site for the first time. I needed to be sure that the information architecture was scalable for future APIs and SDKs that will eventually be added as VLT continues to grow their products and documentation.
A Developer who actively utilizes APIs and SDKs to integrate within his company’s applications more quickly and seamlessly.
An Executive whose role as the decision maker selects which vendor to utilize their technology to meet the company’s KPI’s and business goals more effectively and efficiently.
A Product Owner who’s job it is to assure that the documentation will achieve the needs of the business while also making the developers’ lives easier.
With the current functionalities and components, VLT has very few options for varying the design for specific intentions. For example, the box component we utilize beneath the banner on the landing page is one that is commonly used within the Verizon Wireless website and is featured within Verizon’s Branding Guidelines. We also had to utilize that same box component within the Products’ landing page for each API and SDK. Though convenient, it is not an ideal UI for how we would like to display the different product offerings.
The CMS also did not allow us to specify the colors used for text and buttons throughout the site—which ultimately hindered us from things like being able to use certain photos for banners because the text would not be legible.
As I began to reimagine what our next iteration could look like, I first began to look at Verizon Branding Guidelines and existing Verizon platforms like verizonwireless.com.
Knowing that we needed the Location Developer Portal to exist as both a source of marketing for decision makers, as well as a source of truth for Developers who would utilize Verizon Location Technology’s SDKs and APIs, I wanted to assure that there was a cohesive style that adhered to the Verizon brand throughout.
I began by sketching out my designs on paper and translated my designs over to Lo-Fi Wireframes in Adobe XD.
After my lo-fi wireframes were reviewed and approved, I then began to transform my designs into more hi-fi wireframes that included product documentation provided to us by our Tech Writer and Developers, and upgraded the imagery with approved imagery—that could be found in our Verizon Branding Guidelines—to have a more modern and cohesive feel to that of existing Verizon websites.
From here, I worked backwards to find out what our existing Drupal 8 CMS was missing in functionality, and assisted in constructing our 4th Scope of Work (SOW) with our third party development company. As we went from concept to tangible changes within the CMS, we were able to successfully launch our second iteration of the Location Developer Portal in April 2021.
I was also tasked with designing the adaptive mobile experience for the second iteration of the Location Developer Platform.
As we began to put together the second iteration of the Location Developer Portal with the Drupal 8 CMS, we recognized the design was not translating over appropriately as it responded to a mobile device. We then pivoted to an adaptive design approach in order to consider non-technical decision makers and how they are more likely to utilize their mobile devices to view the available SDKs and APIs.
Because I was the Designer that was most familiar with the Drupal CMS and initial design of the Location Developer Platform, I was tasked with this redesign. This was an opportunity that has allowed me to present to management and work with developers, Project Managers, and a 3rd party company to strive for a user-centered and brand-compliant design.
Initially with how we structured the LDP 1.0, we bucketed the product documentation based on APIs, SDKs, Web SDKs and Mobile SDKs. After further user research, we found that developers were more familiar with navigating to their desired documentation based on a specific product. For example, rather than bucketing all products based on their type, we siloed the different types of documentation beneath its related product—i.e. Search, Geocoding, Maps, etc.
Some additional feedback we recieved was that some developers were having difficulty with the large amount of white space that was utilized—when the documentation itself was most important to them. Per Verizon’s Branding Guidelines, the white space was required to stay, but I came up with the idea to utilize a horizontal navigation for the lowest tier of the left hand menu, to double as a menu anchor, and have the left hand menu be collapsable. That way, when the menu was collapsed, the user would still have the ability to navigate within that documentation page appropriately without the white space taking up too much real estate.
In regards to the Verizon Branding Guidelines, they are ever-changing and receive updates about once every few months. With this, I wanted to keep scalability, without the need of Elevated Third’s developer intervention, in mind. Finding the balance between what was possible, and what we needed to anticipate changing was an exciting challenge from a design perspective. Since the beginning of the redesign efforts, we have brought in a Drupal Developer to assist in the smaller, functional changes that we would need to make within the CMS in the future.
Overall, I believe the combination of bulk improvement to the CMS functionality and consistent maintenance and compliance will allow VLT to scale the platform successfully post-redesign.