Guided wizard on API creation platform

Built for IBM - API connect platform

Executive summary

IBM API Connect® is an API platform that lets you create, securely expose, manage, and monetize APIs across clouds.

With 500 clients and growing, it became crucial for this IBM group to adopt a workable, efficient self-serve guide.

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.

Tasks

Ideation

Research

Sketch

Wireframes

Prototype

UI design

User test

Tools

Sketchapp

InVision

Team

Design lead

User researcher 

UX designer

Product manager

Business manager

Developers

Time 

Design: 2 weeks 

Development: 4 weeks

Process
  • Brainstorming with stakeholders to get their feedback from the technical perspective.

  • Meet with user researchers to identify user’s frustration and pitfalls.

  • Meet every 2 days with fellow UX designers to showcase different design concepts and gather feedback.

  • Conduct in-house user testing for both device types and analysis/ iterate on the feedback users give.

Benefits
  • Eliminate time wasted fixing user errors.

  • Track and analyze system usage with machine learning.

  • Reduce support costs with contextual guidance.

  • Increase user engagement in new and existing systems.

“How do we assist users to complete tasks easily within BlueMix API connect platform?”

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.

The Neutral Gray family is dominant in the default themes, making use of subtle shifts in value to help organize content into distinct zones.

The core Blue family serves as the primary action color across all IBM products and experiences. Additional colors are used sparingly and purposefully.

Inspiration & research

We have researched a few competitors of a similar feature like 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
Activities
  • Study of competitors’ approaches

  • Research on similar features in the world

  • Analysis of latest UI/UX trends, design principles, and rules

  • At the same time,  I kept an eye on your own UX guidelines

Design thinking
Empathy map

After we defined one or more personas, we get to know them at a deeper level.

Capture what they think, what they feel, what they say, and what they do.

 

By doing so, we began to develop empathy for this person and identify their major pain points.

Defining persona

Collecting information and answer a wide array of questions about personas.

  • Who are they?

  • What are their personal demographics?

  • What are their normal tasks?

  • What motivates them?

  • What problems do they face?

  • What frustrates them?

User researchers gathered information from many sources, including surveys, forums, direct observation, and interviews.

Playbacks

After each step of the process, two teams “played back” their findings.

Each team explained how we worked through the task at hand, any difficulties or questions that came up, and our conclusions from completing the exercise.

Other members of the groups offered any relevant questions or comments. We discussed common themes from the two groups’ findings.

Scenario mapping

Our As-Is Scenario for our persona with pain points circled. We looked at our persona's current experience in a typical day, step by step.

 

And again, we identified pain points and clustered them by theme.

Storyboarding

For better understanding of why the user does something in a given situation. The storyboard review allowed me to get feedback: the story created could be a real user story? Does it match reality?

User flow diagram

Representing how all of the systems and user interfaces will work together to produce an integrated user experience.

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.

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

We may go back to:

  1. Understand market competition

  2. Testing and evaluation of wireframes

  3. User Interface

Result
  • 31% drop in how-to support requests

  • Simplified self-service

  • More time for value-added tasks

Check more use chases
NTT-Port-heroshot.jpg

Smart application design for US border protection

Company: NTT Data

Requirement 

New features required on a smart application for monitoring and alerting US border protection about suspicious behavior through artificial intelligence technology

Solution 

Design and implement a user-friendly real-time dashboard that presents a clear and concise snapshot of all critical information to the end-user to monitor and respond in a time-sensitive manner.

Result 

Confidential to the client (US Customs & border protection), not available publicly

Process 

Ideating, researching, sketching & wireframing, prototyping, designing UI, testing

This project is under construction.

0 min read 

DWS-thumbnail.jpg

Responsive website design for customer summit

Company: Hortonworks

Problem 

  • Existing website difficult to navigate as it was built over time without a cohesive design.

  • Unsatisfactory user experience and a high volume of queries due to poor design and confusing layout. 

Solution 

  • Review and organize existing information in categories to create a simple logical flow

  • Redesign user experience to reflect the team's vision and create a website that is responsive and user friendly.

Result 

  • Easy and seamless process that increased registration by 37%

  • Website bounce rate dropped by 30% and traffic increased by 46% with a high volume of return visits

Process 

Ideating, researching, sorting content, wireframing, prototyping, designing UI, testing

This project is under construction.

0 min read 

© 2020 by JOYCREATION.US 

Persona 1