Dev Docs
I designed an enhanced developer documentation experience to support product integration
Role
Lead Visual Designer
Responsibilities
UX, Visual Design, Prototyping
Tools
Sketch, InVision
Overview
WePay's developer documentation, referred to as "Dev Docs," required a significant update. Teams working closely with our customers noticed that the existing Dev Docs posed obstacles for developers seeking to integrate WePay's products. The integration process was time-consuming and overly complex, creating challenges for both developers and WePay teams seeking a smooth experience with the Dev Docs.
Our mission was to modernize the Dev Docs, with the primary goal of streamlining the integration process and improving the overall user experience. Additionally, it was essential to refresh the documentation's visual design to align it with the recently updated WePay brand.
Teams
Product, Engineering
Timeline
8 Months
previous version
The Problem
WePay's developer documentation wasn't user-friendly, causing confusion during the integration process. As a result, customers experienced long integration time before they could process transactions.
Why it Matters to the business
The faster developers can integrate the API, the faster the business can process payments, the faster everyone can make money.
Solution
Redesign Dev Docs landing page
Designed the landing page to establish an intuitive user journey that seamlessly guides users through all the essential steps.
Improve left-side navigation
Simplified the navigation to make it user-friendly for exploring the documentation at any stage of the user's journey.
Update branding and visual design
Refreshed the visual design to align with the updated WePay brand and incorporate visual elements that enhance the overall Dev Docs experience.
Challenges
Stakeholder alignment
Working on a project involving stakeholders with different design preferences can be tricky, but we managed to get everyone on the same page by running a design sprint and keeping up with progress at project milestones.
Timeline
Originally, the project had a very tight deadline, but it became apparent that we required additional time. It was a bit tricky at first to ask for some extra time and support to ensure a great result.
Limited resources
With limited time and resources available when we kicked off the project, we faced a significant challenge. Despite these constraints, we were determined to prioritize usability testing. So, we made the most of what we had to ensure the best possible user experience.
What is Dev Docs?
Developer documentation is typically found on a platform's website and serves as an interactive guide for simplifying the implementation process. It offers comprehensive information about the software, covering design, code, and implementation. This resource is utilized by developers, customer-facing teams, and UX teams to better understand, develop, and interact with the product.
Previous Version
WePay Developer Documentation from 2019
WePay Dev Docs Landing Page & Content Pages
Standard components found in developer documentations
Design Sprint
We kicked off the project with a one-day design sprint to align our project goals. During this session, we conducted an audit of the Dev Docs to pinpoint areas in need of improvement. We delved into the user flow for our target audience, examined our competitors, and strategized our way forward.
My Role
Lead Visual Designer
Team
1 Design Manager
2 Product Managers
Outcome of the sprint
Audited Dev Docs
Defined users
Looked at competitors
Planned strategy
Types of users
API Developers
Developers who are tasked with integrating platform APIs. They play an important role in ensuring integration between software systems is seamless in order to meet organizational goals. They are interested in exploring the Dev Docs to assess the effort required for API integration and seeking a deeper understanding of the process.
Product Managers
Product managers (PMs) are in charge of steering a product through its development, launch, and continuous enhancement. They play an important role in making sure the product meets market demands and aligns with the company's strategic objectives.
Our Target Audience
We decided to focus on API Developers because, among other roles, we were most concerned about how seamlessly developers could initiate the integration process. Our key goal was to gain insights into developers who were new to our platform and determine how best to support them as they engage with the Dev Docs.
New
API Developers in the research phase, evaluating the level of complexity involved in the integration process. Their scope could extend to exploring all available products or focusing on a specific one.
Returning
API Developers ready to start the integration process or are already in the midst of their work. They are looking at a particular product or navigating to a specific section within the Dev Docs.
Site Audit
We reviewed Dev Docs during the design sprint to identify areas to improve
Dev Docs Landing Page
Unclear Journey
Currently, there isn't a straightforward path for users to start the integration process. Various clickable options can potentially steer them away from crucial information, creating a risk of overlooking important details. Users might need to navigate through a maze of links to locate the information that's most relevant to their needs.
General vs. Product Focused
The current landing page offers a general, non-specific flow that includes all products, enabling users to explore documentation for each of them. However, this approach can be confusing as it's not always evident if certain steps are product-specific. Would it be better to have a more structured and product-focused approach to help users integrate more easily?
Overall Style
The visual design in Dev Docs requires an update. The icons don’t provide clear guidance and give the page an outdated appearance. Additionally, the overall style needs to align with the updated WePay brand.
Content Pages
Left-side Navigation
The overview section often goes unnoticed when it's separated from the Link overview section. There's no clear indication of which product you're integrating. Important information that could be useful upfront is unnecessarily concealed.
Content Area
The content area shows an outdated visual style that doesn't align with the brand. We could explore improving the layout and typography to make it easier to read and improve the overall experience.
Design Approach
1. Design the Landing Page
create a more user-friendly journey that's simple to follow and doesn't miss crucial steps.
2. Improve Navigation
Simplify the navigation for a more user-friendly experience when exploring the documentation, regardless of the user's current stage in their journey.
3. Update Visual Design
Refresh the visual design to align with the updated WePay brand and incorporate visual elements that enhance the overall user experience of the developer documentation.
Wireframes
Landing Page
General User Flow
We labeled the layout for both first-time and returning users, guiding them to the appropriate flow. Additionally, the "Getting Started" card included a description of what users could expect.
Product Focused User Flow
The layout prioritized product visibility, guiding users to select a product to use as their starting point. Returning users could easily access the resources they were more likely to need.
Content Pages
Product Focused User Flow
In this flow, we've increased the visual emphasis on the product, making it clear which product the developer is working on. The "Get Started" steps are grouped together to emphasize that they should be completed first, reducing the chances of them being overlooked.
General User Flow
I explored simplifying the navigation, and consolidating the initial integration steps under a "Get Started" section. In the general flow, users select the product after finishing the steps within the "Get Started" section.
Usability Testing
Test Objective & Method
We wanted to test whether users preferred a product-specific flow or a more general approach where they didn't have to select a product upfront. To do this, I created a click-through prototype on inVision. Testers were instructed to navigate the prototype as if they were exploring the documentation for API integration at their respective companies.
My Role & Responsibilities
Visual Designer
Designing the prototype and visual design
Team
1 Product Designer
1 Product Design Manager
User Testing Plan
Test Plan
Using high-fidelity prototypes, we developed two flows and asked users:
Compare a product-specific flow and a general flow
Which was easier to follow?
If someone did not know a lot about our products would it still be easy to follow?
Testers
In this test, we decided to test internal WePay developers who were familiar with different developer documentations. We were able to test with 5 different users.
I took notes as users talked through their experience using the click-through prototype
At the conclusion of the test, I gathered feedback from the users and took note of their preferred choice.
Takeaway
We received more positive feedback from Version B due to its detailed product information, resulting in a more user-friendly and straightforward flow.
Takeaway
Users had trouble picking a path because there wasn't enough guidance, and it wasn't obvious that first-timers should choose "Get Started." People also mentioned that the cards didn't look clickable.
Results
User feedback clearly demonstrated that facilitating upfront product comparisons proved to be beneficial
Users favored choosing a product at the beginning and thought it was a user-friendly flow to follow
Users provided feedback that the cards didn't offer a clear indication of their clickability
“It’s a crisper experience, the bullet points calls things out specifically”
“It gives enough to find what is the right way to go”
Final Designs
Landing Page
The new landing page provides a clear journey to start integrating one of our products while also giving an opportunity for exploration as needed
Returning users will be able to quickly find the resources they need
Navigation & Content Page
We improved the hierarchy and organization of the navigation menu, making it more user-friendly. Users can now clearly identify the product they're reading about and easily switch to another one. Additionally, we've grouped sections to ensure that basic steps aren't inadvertently overlooked.
The overall style now aligns with the updated WePay brand, with improved typography and enhanced visual elements.
Components
I created components for a style guide, showcasing common elements to be utilized across the content pages of Dev Docs. These elements covered various features such as table styles, code snippets, and checklists.
How did we do?
✓ Updated the landing page
We met our goals in updating and improving the Dev Docs landing page and content page
✓ Improved navigation & content pages
We improved the left-side navigation and content pages of the documentation by updating the typography and overall style
✓ New Dev Docs were well received
We received positive feedback from developers who used the new Dev Docs