IBM
Project
❺ – ⑤
° Info
I worked as a Product Designer on IBM’s API Connect team, a API management solution that utilizes an intuitive experience to help consistently create, manage, and monetize APIs.
During my time at IBM, I worked on designing features primarily around assisting API developers in visually assembling and testing APIs. I also worked on IBM’s highly extensible Node.js and TypeScript framework called Loopback by designing a visual identity, illustration style, and web components.
Timeframe
2017 - 2018
Responsibilities
UI/UX, Visual Identity, Illustration
Platforms
Web
Visualizing code
✺
API Connect is an all-in-one product to manage the entire API lifecycle from start to finish. Our main focus is to empower API architects and developers to create and edit APIs through a visual assembly tool.
The assembly tool allows API developers to add and edit operations and policies so they can have a high-level overview of an API flow. Developers would be able to visually compose an API as well as test the request and response to see if the API is behaving as expected.
° Team
Sichao Wu, Shane Claussen, Winston Lee, Krista Starr, Jesse Ellenbogen, Wayne Chou, Keesa Robinson
Add, edit, test, and debug all-in-one
We designed API Connect’s assembly tool to visualize code by providing a diagram which felt like reading a map—tracing the tracking of an application request as it flows from backend services and databases to frontend devices.
Like a map, we provide an interactable canvas for API developers to define a path for their application. The canvas is accompanied with a palette of pre-defined components, a property sheet, and a catches output to allow for adding, editing, and testing their API directly within assembly.
❶
Developers can add a property to their API directly on the canvas which will give them a set of pre-set or custom properties out-of-the-box. When a property is added, the developer can edit the property visually or directly through source code.
❷
The bottom panel was designed as a central region where API developers can focus on editing and testing their properties. Developers can dogfood their properties by generating fake inputs and test what outputs return.
❸
Rather than constraining developers to select a particular path, we wanted to give them the flexibility to select which components to test. Developers can use selection or keyboard controls to test a string of components which form an API endpoint.
❹
Rather than showing a large log of inputs and outputs, we allow developers to debug their API by analyzing each property in isolation. When a property is isolated, the developer can progressively advance the canvas to see how the output changes through each property.
A visual system for design and code
We built a comprehensive component library for the assembly tool which captured all the interaction states for the assembly’s canvas and properties.
This created a shared language which scaled design initiatives for our team as it related to the product experience.
Building a new loop
✺
IBM acquires StrongLoop in 2015. StrongLoop are the creators of LoopBack, an award-winning, highly extensible, open-source Node.js and TypeScript framework.
With the launch of the newest version of their framework, LoopBack 4, I worked with their team on rebranding their identity to tie closer to IBM, while also extending their own brand strategy through an illustration system and cohesive public website.
° Team
Sichao Wu, Raymond Feng, Diana Lau, JJ Tang, Taranveer Virk
Big Blue holds true
Early on in the process, I explored logo concepts based on a loop—a structure, series, or process, the end of which is connected to the beginning. The style of the concepts and color were purposely meant to be developer forward by feeling structurally geometric and often abstract.
We landed on a direction that encompassed a feedback loop and went with a color that felt like an ode to Big Blue which refers to the IBM corporation, an early developer of both business machines and personal computers.
← Concepts • Process →
Consistency breeds brands
As we got ready to launch the logo, we were strategic by partnering with Loopback’s internal team to make sure they were set up for success. I provided the tools and guidance to allow their team to confidently own the brand moving forward by delivering a comprehensive set of brand guidelines.
As a proper excercise in the application and launch of the rebrand, I worked on redesigning their website with the new visual language—applying the language into a comprehensive set of web components.
❶
Interaction states for primary and secondary buttons.
❷
Interaction states for cards and illustrations.
❸
Component specs with layout values and design attributes.
Storytelling through illustration
Expanding the brand strategy beyond just the logo, I crafted an illustration identity with of a set of icons and large-format illustrations to best exemplify the spirit of the Loopback's framework and capabilities.
I created a comprehensive documentation that catalogs all these visual choices as a guide given to the Loopback team so future designers and illustrators can create new artwork that is aligned with the illustration identity.
˚Projects ↓
HowlDesigning for a startup in an $1.2 trillion influencer e-commerce industry focused on building tools for creators and brands to sell products across social platforms.
SquareBuilding an ecosystem of integrated set of tools for all kinds of businesses and people through the power of Market Design System.
TwitchBuilding experiences where millions of people come together live every day to chat, interact, and make their own entertainment together.
NagarroThinking breakthroughs through innovation by helping companies build technology that revolutionizes how customers use their products.
IBMHelping API Developers build on more than just code by providing simplified methods and a built-in toolkit to build smarter solutions.
