Guided wizard on API creation platform
Process: Ideation, Research, Sketch, Wireframing, Prototyping, UI design, User testing
Sketch App, InVision
IBM API Connect is a Platform as a Service that enables developers to quickly and easily create, deploy, and manage applications on the cloud.
Complex interface leading to poor user experience and a huge volume of support calls and tickets.
Heavily constrained by time and resources to alter or rebuild the interface from scratch.
Simplified self-service used to assist clients to create, build, and deploy API.
Intuitive in-app guidance to reduce client support calls.
Eliminate the need to alter or rebuild the API platform interface.
Collaborated with a self-directed team
UX and UI design
of 9 people:
Design lead & other UX designers
Lead Developer & Developers
located across the US west coast, east coast, and the UK.
Solving problems with an agile design framework
It's referred to as “The Loop” - a methodology developed by IBM.
A continuous cycle of:
Observing - immersing yourself in a user's world.
Reflecting - understanding your situation, your purpose.
Making - giving form to your ideas, prototyping.
Design: 4 weeks + Development: 8 weeks = 2 sprints
“How do we assist users to complete tasks easily without needing external help?
We came up with the idea to design a self-service wizard to assist clients to perform API tasks
on top of the existing platform and without major alterations to the interface
Make the platform more user friendly by creating an improved and intuitive user experience.
Reduce support costs with contextual guidance.
Our typical user is a young IT professional
Ajay is a collective image representing API Connect users, based on insights gathered from actual customers through surveys and interviews performed by the research team.
Location: Hyderabad, India
Title: IT Developer
Domain knowledge: Beginner
Creating and deploying API
Connect APIs to data sources
Updating details of existing APIs
Managing API support requests from development teams
Complex interface that requires significant study to perform simple tasks such as creating, building, and deploying API.
Many hours wasted on call with customer support to get the help needed
Intuitive and clear way to perform routine API tasks with step by step guidance.
Easy access to help information within the platform at any step without needing to contact tech support.
Developing empathy for our user
Getting to know Ajay's major pain points
Inexperienced with API connect platform.
He wants to avoid spending time studying "How to" documents and needing to call customer support.
He wishes to be more productive at work.
He says: -"Yes, I can do that" -"I need more time for that"-"I did what you asked for"
He hears from his manager - “Are you sure you can meet this deadline?”, “Do you need any help to finish this project?”. Ajay hears from his peers - “API connect is a complex platform”, “Best of luck figuring the platform by yourself”.
He thinks: -"I do not what to bother my peers with stupid questions" - "Oh no, I have to make another phone call to customer support and waste my time on hold."
He feels anxiety around completing the task in time. Often feels anger, confusion, and dislike for his job.
Ajay needs to have a better understanding of the API connect platform.
Obtained feedback to improve the product and focus on what the customer wants
The members of the team explained how we worked through the task at hand, any difficulties or questions that came up, and our conclusions from completing the exercise.
Making sense of research data & ideating potential solutions in order to identify opportunities for improvement
As-is Scenario - uncovering what we know or do not know
First, we identified our user steps, what he does, what he thinks, and feels.
Then we brainstormed individually on what is our user is doing, thinking, and feeling throughout their experience.
After that, we got back to a whiteboard, and together we circled and labeled areas that are particularly positive or negative for a user, as well as blank areas where we need to learn more.
To-be Scenario - creating Ajay's ideal experience
In this step, we also identified our user phases, what he does, thinks and feels, but in this case, we want to see how our ideas would fit within Ajay’s world, and how he might address his needs.
Then we reviewed and identified phases - circled & labeled areas that are positive and negative for a user as well as blanks area where we need to learn more.
Spotted his highs and lows and various changes this To-be scenario could bring.
After creating As-is scenario we shared what we’ve observed, reflected, and made by telling a story about our user:
We compared our user's ideal experience (To-be map) to our user's current experience (As-is map)
How this new scenario improve it?
What are areas are we certain are true?
Where are there still gaps in our team's knowledge?
The storyboard review allowed me to get feedback if the story matches reality
Representing how all of the systems and user interfaces will work together to produce an integrated user experience.
User flow diagram
To get a better sense of the to-be outcome, I've created a set of low-fidelity wireframe sketches with various alternatives.
After that, I have shown those alternative sketches to stakeholders and to actual members of our target audience to get feedback.
After gathering more actual content, I created a high-fidelity wireframe.
Moving toward the life-like qualities of design, but without distracting from the focus of function.
1st level: Expand getting started
2nd level: Lessons list
3rd level: Topic list
4th level: Tasks list
The concept is presented in the API connect frame.
This project has been designed according to Carbon Design System.
Carbon’s default themes are derived from the IBM Design Language color palette.
Define the final theme, specs, and guidelines required for implementation
Design icons to display on screens
Sessions with stakeholders to get their feedback from business and technical perspective
The development team builds front & back end functionality first and connects it with UI when they get design artifacts.
In this step, we always involve the Design team to help in the development phase. While implementing, it is possible to raise the need for minor changes in design.
Evaluate - User testing
We did the evaluation based on a few factors:
Whether the system is usable?
Is it easy to use for the end-user?
Is it flexible and easy to change?
Does it provide the desired solution to user’s problems?
Does the product have the credibility that makes someone want to use it because of the experience it provides?
Usability testing methods preformed
First impression study
Time out test. After looking at the page for 20 seconds, what information was the user able to digest? What captured her attention? This is an important test for every dashboard or monitoring console.
Can users quickly and easily find the information they need? Was the page visual hierarchy helpful in this task? Can they spot all the alerts or warnings?
Iconography & Semiotics.
Can users understand the symbols, and how long it takes them to interpret the symbols?
Looking at the aggregated data from multiple users, what are the areas of most and least interest?
Can we suggest visual hierarchy improvements?
Outcomes & Lessons
31% drop in how-to support requests
More time for value-added tasks
We may go back to:
Understand market competition
Testing and evaluation of wireframes