Guided wizard on API creation platform
Built for IBM - API connect platform
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.
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.
Design: 2 weeks
Development: 4 weeks
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.
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?”
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.
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
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.
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.
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.
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.
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.
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.
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?
We may go back to:
Understand market competition
Testing and evaluation of wireframes
31% drop in how-to support requests
More time for value-added tasks
Check more use chases
Smart application design for US border protection
Company: NTT Data
New features required on a smart application for monitoring and alerting US border protection about suspicious behavior through artificial intelligence technology
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.
Confidential to the client (US Customs & border protection), not available publicly
Ideating, researching, sketching & wireframing, prototyping, designing UI, testing
This project is under construction.
0 min read
Responsive website design for customer summit
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.
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.
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
Ideating, researching, sorting content, wireframing, prototyping, designing UI, testing
This project is under construction.
0 min read