Helping developers understand the context of their work.
General Motors — July 2024
MY Role
UX/UI Designer — Interaction Design, Visual Design,
User Flows, Rapid Prototyping
Team
Front-end Developers
Software Engineers
Product Manager
Duration
4 Months, Launched in July 2024
summary
Following ongoing frustrations with scattered, text-heavy API documentation, developers faced challenges in quickly locating relevant code snippets, leading to inefficiencies and errors in their workflows.
I spearheaded the design of the Interactive API Library, introducing a 3D-driven, visual approach to API discovery that streamlined the process. By enabling developers to interact directly with a vehicle model, the new system reduced search time from 8 minutes to 4 minutes while significantly minimizing user errors.
HIGHLIGHTS
A seamless 3D interactive library that allows developers to quickly locate and access API documentation by clicking on specific car parts.
0.1 Interactive API Library walkthrough.
VIDEO LOOP
0.2 Mobile homepage.
IMAGE
0.3 Light and dark mode showcase.
INTERACTIVE
Context
The message was loud and clear.
Improving the API Library page was a highly requested change from external developers using the GM Dev portal – something that should have been addressed long ago.
and many, MANY more…
Amanda
Developer
"I spend too much time scrolling through static documentation trying to find the right API, and its frustrating when I cant locate the specific code snippet I need."
Eva
Developer
"The API library is difficult to use. It makes our workflows inefficient and slows down development."
Mark
Developer
"Spent way too much time trying to figure out which API to use. The documentation is so text-heavy, I often feel lost."
Joshua
Developer
"Navigating through the documentation is frustrating and time-consuming. There has to be a better way to find what we need."
Trey
Developer
"The library is outdated and confusing."
Julia
Developer
"The current API library is just too text-heavy. It takes forever to find the code snippets we need."
Jacob
Developer
"Finding the right API in the documentation feels like searching for a needle in a haystack."
Thomas
Developer
"The visual design of the API library is cluttered and hard to follow."
1.0 Developer portal responses.
IMAGE
The Problem
This wasn’t going to be an easy update.
The challenge was clear, we needed to make the experience faster and more efficient for developers who were losing valuable time navigating through irrelevant or overwhelming content.
The decision was made to overhaul the API Library page— which brought its own unique set of challenges:
Tight timelines, because we needed to streamline the API library quickly to enhance developer workflow.
Overwhelming content. Dense technical documentation made it difficult to quickly find relevant information.
Fragmented information. API details were scattered across multiple pages, leading to inefficient searches.
THE CHALLENGE
Streamline the process of finding and accessing API documentation, replacing a time-consuming search experience with a more intuitive and efficient solution.
Core design principles:
Concise Clarity
Clear, informative, and straight-forward instructions.
Clear Communication
Anticipate and communicate progress and errors.
Product Excellence
Design exceeds expectations.
WEEK 1
Synthesize context
Constraints & considerations
Test, refine, launch
Edge cases, i18n, finishing touches
Rapid ideation & prototyping
Flows, content, wireframe layout and structure
Visual design direction
Component library, product illustrations design execution
WEEK 2
WEEK 3
WEEK 4
WEEK 5
WEEK 6
WEEK 7
WEEK 8
2.0 Project process within timeline.
IMAGE
Updated Flow
The foundation of the solution.
The Project Manager provided me with a list of mandatory requirements for the API Library update, which outlined key information that needed to be included (Figure 3.0). However, these instructions maintained the same fragmented, text-heavy structure, presenting a challenge in creating a more seamless and intuitive experience.
Mary Fields
API Library requirements
To: Steven Walbrick
4/05/24
Details
Hi Steven,
As we move forward with updating the API Library, I wanted to outline the key requirements that need to be included. We need to ensure the new version improves accessibility while maintaining all critical information.
Here’s what we need to include for each car part:
Services
Data types
RPC's
Code snippets
All the car parts and the corresponding information for each car part can be found on the current GM Resource Catalog. Let’s set up some time this week to go over initial wireframes and see how we can best incorporate these elements. Let me know what works for you.
Thanks,
Mary Fields
3.0 Email from Project Manager.
IMAGE
Creating order from complexity.
To navigate the overwhelming set of requirements, I began by reviewing the current GM Resource Catalog (Figure 4.0), carefully examining over 200 common car parts.
After analyzing the catalog, I determined that grouping similar parts together would be the most effective approach for improving organization and usability moving forward.
3.1 Screenshot of GM Resource Catalog.
IMAGE
Pinpointing the issues.
Going through the list of car parts and starting to organize them into groups helped uncover critical usability issues. These challenges primarily stemmed from navigation difficulties and a lack of clear guidance.
Car parts, like doors, appeared multiple times on a vehicle, but their services were only listed once.
The mirrors fit multiple categories, like "interior" and "exterior," creating listing confusion.
A few car parts didn’t fit neatly into any category with other parts (EV Propulsion Sound).
Car parts such as 'Lights' were listed broadly without distinguishing between front and rear.
Implementing immediate solutions.
After several meetings with the team to discuss the issues, I was able to categorize the over 200 car parts into a more streamlined structure. By grouping them under six clear categories, the navigation became simpler and more intuitive for developers to find what they needed (Figure 4.1).
Access
Body
Back Glass
Door
Services
Data Types
Remote Procedure Calls
Code Snippet
Storage Compartment
Window
Cabin Climate
Horn
Lighting Exterior
Lighting Interior
Seating
Braking
Chassis
Suspension
Chassis
High Voltage Battery
Energy
Charging
Charging Station
Power Management
Exterior
Vehicle
Geofencing
Session
Trailering Profile
Trailering
Profile
Camera
Sensors
EV Propulsion Sound
Sound
3.2 Categories prototype.
IMAGE
Layout Patterns
Initial layout design — balancing detail with focus
The first iteration (Figure 4.0) focused on providing simple drop-down menus to help developers narrow down their results. The goal was to enhance the feeling of progression by guiding them through a structured filtering process.
However, internal feedback quickly revealed that the layout was too rigid and time-consuming, making it difficult for developers to find what they were looking for efficiently. In response, a second iteration (Figure 4.1) was developed, where vehicle components were organized into expandable categories, allowing for more flexibility and easier access to detailed API information.
While this version offered more freedom, it still required too many clicks and didn’t provide an immediate visual connection between components and their corresponding APIs. Developers expressed the need for a faster, more intuitive way to find what they needed.
So, onto the third iteration...
4.0 Filter-driven approach.
IMAGE
4.1 Category-driven approach.
IMAGE
The third iteration.
My third design version introduced an interactive 3D car model as the focal point. Developers could click on different vehicle parts to instantly access relevant API details, reducing search time and minimizing errors. This approach made API discovery more intuitive and efficient.
The developers and team loved the idea!
4.2 Interactive-driven approach.
IMAGE
The 3D Car Model — Enhancing interaction flow
A permanent car part side menu was added, allowing developers to easily switch between it and the 3D car model.
A “drag to rotate” label and interior/exterior toggle were added to guide navigation and highlight interactivity.
Permanent car part menu
Always visible for quick access
Provides alternative navigation to the 3D car model
Ensures developers can choose their preferred method of interaction
Clear instruction on 3D model interactivity
Encourages users to explore the car model from all angles
Simplifies navigation between vehicle views
Ensures smooth transition between components
Drag to rotate label
Interior/Exterior button
4.3 Interactive API Library logic.
IMAGE
Interactions
Refining navigation — balancing structure and discoverability.
Navigating vehicle components to access APIs was initially confusing. My first approach focused on efficiency by categorizing car parts into structured groups for the side menu.
Though this seemed intuitive in theory, it was too simplified, requiring developers to already know which category a car part belonged to, making discovery harder.
I pivoted to a subcategory list approach, where car parts were organized within subcategories under their main groups. (Figure 5.0)
5.0 Subcategory list.
IMAGE
Enhancing discoverability in the 3D model.
I opted for dots over every clickable car part to make the experience feel more guided and intuitive, rather than forcing developers to click around the 3D car model blindly in search of interactive components. (Figure 5.1).
5.1 Clickable car parts with dots.
IMAGE
Visual Design
Breaking the mold while staying aligned.
While General Motors had an established design system, they wanted the developer portal—especially the 3D Interactive API Library—to stand out from their other sites.
Instead, custom components were designed on a per-need basis, and tailored to the needs of developers.
This allowed me to experiment with modern UI elements, like glassmorphism for a sleek, futuristic aesthetic, while still maintaining usability and brand coherence.
6.0 Modified button component.
IMAGE
Cards — Functional and transparent.
The card component was highly critical from a content-organization perspective, as the car part side menu was built using it. It was designed to prioritize readability while ensuring responsiveness, flexibility, and support for i18n.
I placed a strong emphasis on documenting design specifications to foster smooth collaboration between design and engineering.
It was also an opportunity to leverage Figma’s new component properties, allowing for faster iterations and seamless adjustments, greatly improving collaboration with the development team.
6.1 Default card component.
IMAGE
Tooltips — effortless identification.
To streamline navigation, tooltips were introduced when developers hovered over the interactive dots on the 3D car model, instantly labeling each car part. These tooltips ensured clarity without disrupting the experience, providing immediate context without requiring unnecessary clicks. Subtle motion design helped draw attention without being intrusive, making the interaction feel intuitive and seamless.
6.2 Tooltip logic.
VIDEO LOOP
Interior Design — Balancing visibility with clarity.
Designing the interior view of the 3D car model came with its own set of challenges—the full-screen layout made it difficult to find the right zoom level that kept all clickable parts visible without overwhelming developers or disrupting context, especially when rotating around the interior (Figure 6.5).
To solve this, I collaborated closely with the software engineers building the 3D model, refining the zoom level to strike a balance between visibility and usability. The goal was to keep key components accessible without cluttering the interface, making interactions more intuitive for developers.
These refinements ensured a seamless navigation experience, maintaining both functionality and visual clarity while aligning with the overall design aesthetic (Figure 6.6).
6.3 Interior of 3D model.
VIDEO LOOP
Responsive Design — balancing usability with touch accessibility.
The design direction for mobile and tablet versions prioritized ease of use and accessibility. To optimize the side navigation for smaller screens, it was replaced with bottom category pills, ensuring that users could easily tap through options without strain (Figure 6.5).
The goal was to keep the experience seamless across devices, so I also optimized the 3D car model to remain interactive while preventing the interface from becoming cluttered. By maintaining clickable functionality, developers could still navigate the model effortlessly without feeling overwhelmed by the layout changes.
This approach aligned with best practices for touch interfaces and ensured a fluid, intuitive user experience across various screen sizes (Figure 6.6).
6.4 Mobile walkthrough.
VIDEO LOOP
Final Design
An effortless experience.
For the most part, the process of finding the right API should take a developer no more than four minutes — five at most (Figure 7.0).
7.0 Full Interactive API Library flow.
VIDEO LOOP
Refining the experience through internal feedback.
There were no major usability issues raised during our internal testing. In fact, over 98% of our internal testers were able to successfully navigate the 3D car model and access the correct APIs without any confusion.
This allowed me to shift my focus toward refining a few edge cases.
Figure 7.1 highlights an issue where, on smaller desktop screens, parts of the 3D car model were being cut off, making some car components difficult to access. To solve this, I implemented a sticky actions container that dynamically adjusted its position when the model reached a target minimum height.
7.1 Different desktop sizes.
IMAGE
Retrospective
A seamless solution.
HUGE SUCCESS
Developers found APIs faster, navigation was smoother, and the 3D car model felt effortless to use—making their workflow more efficient and frustration-free!
Adrian
Developer
"It’s crazy how much time this saves. No more digging through docs—I just click and go."
Alex
Developer
"I love how seamless this feels. No extra clicks, no hunting for information—it just works."
Christopher
Developer
"This is exactly what we needed. Just click a part, grab the API, and get back to coding—no wasted time."
Trent
Developer
"I used to have a separate tab open just to cross-reference everything. Now? One screen, one click, done."
Alyssa
Developer
"It feels so intuitive, like this is how it should have worked from the start."
Hannah
Developer
"It’s not just faster, it’s actually kind of fun to use. Makes my workflow way smoother."
Walt
Developer
"It’s one of those things where after using it, you can’t imagine going back to the old way."
Michelle
Developer
"Amazing work by the GM team <3"
8.0 Developer portal reactions.
IMAGE
Project Takeaways:
Turning challenges into opportunities
Viewing constraints from different perspectives helped brew new approaches to tackle other constraints.
Cross-functional collaboration from day one
Early involvement of developers and the project manager streamlined development, aligning technical feasibility with design intent.
Simplifying without oversimplifying