Overview

About

During my time at IBM, I was responsible for leading the design efforts for the development of Zenitsu. Zenitsu is a platform that comprises four main elements: a core generator, libraries, a user interface, and a DevOps process. The platform is designed to automate many tasks for developers and streamline the deployment process for modules at Sales Systems. By improving the current process, Zenitsu helps to optimize workflow, reduce errors, and improve efficiency for developers and stakeholders alike.

Users

The end-users of our platform include developers, product owners, administrators, analysts, and other support roles, as well as other stakeholders. To better understand their needs and preferences, we regularly gather feedback and conduct interview sessions with end-users. Using this information, we developed Personas, which are fictional representations of our typical users that help us design more effectively for their specific needs.

IBM offers a wide range of tools and frameworks to help designers create exceptional user experiences and uncover new insights. As part of this effort, we developed an "As-Is" Experience Map, which is a visualization of the current end-to-end user experience. This map is a useful tool because it helps us identify pain points and areas for improvement in the user journey. By analyzing the As-Is Experience Map, we can pinpoint specific areas where users may be struggling or where there is room for optimization, which enables us to create a more effective and satisfying user experience.

Once we were prepared to formulate design solutions, in collaboration with Product Owners and stakeholders, I proposed the subsequent design strategies:
Wireframes: Guiding the path to the perfect solution, away from superficial design.

For this project, I utilized Version 10 of the Carbon Design System, employing Sketch to establish the prototype. Carbon is a progressive, open-source design system grounded in the following key principles:

• Accessible to all and encourages contribution
• Advocates inclusivity, regardless of circumstance or ability
• Possesses modularity and flexibility in its usage
• Prioritizes user experience above all
• Promotes consistency by ensuring a uniform interaction experience.

The Carbon Design System includes comprehensive guidelines on foundational design principles, such as color, themes, icons, typography, and layout. For a more in-depth exploration of the resources in the Carbon Design Kit, please visit Carbon Design System official site

Goals

For this case study I won't deep dive into the earlier design phases, such as interviews, brainstorming or wireframing, instead, I am going to talk about the Testing of the Design in a later stage.

The goals of this Usability Testing for Zenitsu project were:
- Establishing and validating user performance measures.
- Identifying potential design concerns to be addressed.
- Validating and measuring efficiency, productivity, and end-user satisfaction.

User Interviews is a UX research method that involves:
- A researcher asking one user questions about a topic of interest (e.g., use of a system, behaviors and habits).
- The goal of learning about that topic.
- The researcher directly observing how people use technology (or not) to meet their needs.
- The ability to ask questions, probe on behavior, or adjust the study protocol to better meet its objectives.
- Feedback Analysis.

The UMUX questionnaire:
- Was developed to offer a shorter alternative to the 10-item SUS questionnaire.
- Valuable insights can be gained from testing with only 5-7 respondents:
- For rolling out new features on a site.
- For evaluating specific tasks.
- For conducting foundational UX research.

Testing

Prototype

After a few iterations on the wireframes, we finally came up with a hi-fidelity prototype. As IBM libraries are very completed, it was easy to develop. In another scenario for earliest stages I would suggest a lo-fidelity approach.

Login and Homepage

We requested users to share their thoughts aloud for every screen they encountered. Their feedback included understanding the terms, navigation, screen objectives, and next steps.

Module list

This screen displayed all existing modules or pages owned by the user, allowing users to manage and maintain them efficiently.

Create new module

The "Create a new module" screen provided an intuitive interface for users to create and previsualize pages within their modules. It offered a simple deployment process and was designed for ease of use.

Step 1: Definition

In the first step, users define their module name and endpoint.

Step 2: Backend

The second step involves backend definition, which includes two views: visual and schema. The objective is to specify backend information, such as data modeling.

Step 3: Frontend

Moving on to the third step, users can customize the frontend based on module options and their specific needs. The frontend is built on Carbon Design System v10 (at the time of this prototype).

Step 4: Deployment

Finally, in the last step, once the module setup is complete, users can easily deploy web applications for their company using Zenitsu.

Final Remarks

Conclusion

In this UX UI case study for Zenitsu, we aimed to simplify the development and launch of scalable applications while optimizing workflow and improving efficiency for developers and stakeholders. Through user research, including interviews and the creation of personas, we gained valuable insights into user needs and preferences.

The "As-Is" Experience Map helped us identify pain points and areas for improvement in the user journey.
During the Usability Testing phase, we conducted user interviews and utilized the UMUX questionnaire to establish performance measures, identify design concerns, and measure efficiency, productivity, and end-user satisfaction.

The high-fidelity prototype allowed users to provide feedback on various screens, including the login, homepage, module list, and module creation.

Based on the test results, several design improvements need to be made. These include reducing memory load on the homepage, enhancing tooltip usage for user understanding, implementing custom experiences based on user proficiency, addressing backend issues with roles, clearly defining Schema Editor features and capabilities, ensuring proper use of icons on frontend pages, defining environment options for deployment, and removing unnecessary information from the status page. The UMUX questionnaire yielded a satisfactory user experience score of 64.