Guided wizard on API creation platform

Process: Ideation, Research, Sketch, Wireframing, Prototyping, UI design, User testing

Tools:

Sketch App, InVision

Executive summary

IBM API Connect is a Platform as a Service that enables developers to quickly and easily create, deploy, and manage applications on the cloud.

Problem
  • 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.

Solution
  • 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 
My role

UX and UI design

Team

of 9 people: 

  • Design lead & other UX designers

  • User researcher

  • Product manager

  • Business manager

  • Lead Developer & Developers

  • Test specialist

 

located across the US west coast, east coast, and the UK.

collaborative-design-11.jpg
collaborative-design-11.jpg
My daily activities
  • Collecting data from user researchers to identify user frustrations.

  • Building user flows, prototypes, wireframes, and UI designs.

  • Brainstorming with stakeholders and technical teams to gather feedback.

  • Documenting design for consumption by dev teams.

  • Conducting iterative user testing with in-house IT and reviewing feedback

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

Benefits
  • 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. 

Ajay Patel

Age: 30 

Location: Hyderabad, India

Title: IT Developer

 

Domain knowledge: Beginner

Tech comfort:

Above average

Activities
  • Creating and deploying API

  • Connect APIs to data sources

  • Updating details of existing APIs

  • Managing API support requests from development teams

Frustrations
  • 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

Goals
  • 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.

We were inspired by a few competitors with similar features

WalkMe, Iridize, Toonimo, Whatfix.

While doing research, I start thinking about possible layouts and options to provide the desired experience.

Screen Shot 2020-06-18 at 2.53.36 PM.png
Developing empathy for our user

Getting to know Ajay's major pain points

Ajay Patel

IT Developer

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

Playbacks

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.

I analyzed Ajay's current experience with API creation step by step

What I have learned 

steps.png

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?

Playbacks

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
Sketches

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.

Wireframing

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.

Style guide

This project has been designed according to Carbon Design System. 

 

Carbon’s default themes are derived from the IBM Design Language color palette.

UI design
  • 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

Implement
  • 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.

Findability test

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?

Quantitative studies

Outcomes & Lessons
  • 31% drop in how-to support requests

  • Simplified self-service

  • More time for value-added tasks

We may go back to:

  1. Understand market competition

  2. Testing and evaluation of wireframes

  3. User Interface

© 2020 by JOYCREATION.US