Grouping

the

items...

Product Info

Management.

Product Information Management module of Modular eCommerce application.

Industry

E-Commerce

Responsibilities

UI/UX, Research

Timeline

2022-2023

quick screencast summary

Product Information Management

Key Features

hierarchy screencast Overview

Smart import screencast Overview

quick screencast summary

Product Information Management

Key Features

hierarchy screencast Overview

Smart import screencast Overview

Introduction

In my role as a UI/UX Designer, I engaged in comprehensive research, conducted stakeholder and focus group interviews, created wireframes, handled visual design, presented demos to the stakeholders, and analyzed feedback.

With over 5 years of expertise in UI/UX design, I brought valuable experience to the development of the application, an innovative modular, API-driven eCommerce platform.

This initiative originated as an internal project at TechFabric, an outsourcing company, with the aim of providing cost-effective solutions made for the unique needs of B2B businesses.

client & project background

Background

The first idea of creating such application came to mind once the company figured out that some of the biggest retail clients still used excel files to store the product information.

The key problem was that almost every application that was on the market mostly offered the monolithic systems, where the Product Management part was only the part of concrete ecosystem, but the client needed it just partially.

Our main decision was to create a modular ecosystem, where each client could take only the needed part of the system and use it as they wanted, with the ability to widen the specter of modules usage anytime.

So, in this case, the ecosystem should work perfectly for major groups of businesses, those who wants to use the whole ecosystem to streamline the processes overall, and also those, who wants to replace only some parts of the running businesses.

Modularity vs Monolith

Composable Commerce

Monolithic Commerce

Modular, API-driven,

Microservices-based

Architechture

Single. tightly-coupled,

all-in-one system

High flexibility, easy to modify
and extend its pieces

Flexibility

Limited flexibility, changes can be complex and time-consuming

Faster implementation, incremental improvements, no need to replatform as solution evolves over time

Implementation Time

Slower implementation, large upfront investment, replatform required for new requirements

Independent scaling of components, supports rapid growth

Scalability

Scaling can be challenging, may require complete system upgrade

client & project background

Background

The first idea of creating such application came to mind once the company figured out that some of the biggest retail clients still used excel files to store the product information.

Modularity vs Monolith

Composable Commerce

Monolithic Commerce

Modular, API-driven,

Microservices-based

Architechture

Single. tightly-coupled,

all-in-one system

High flexibility, easy to modify
and extend its pieces

Flexibility

Limited flexibility, changes can be complex and time-consuming

Faster implementation, incremental improvements, no need to replatform as solution evolves over time

Implementation Time

Slower implementation, large upfront investment, replatform required for new requirements

Independent scaling of components, supports rapid growth

Scalability

Scaling can be challenging, may require complete system upgrade

Research and Discovery

01

Research

Conducting thorough research is essential for understanding user needs, preferences, and pain points.

This includes competitor analysis, user personas, user journey mapping, etc.

02

Interviews

Engaging with stakeholders and conducting focus group interviews helps gather insights from various perspectives.

This input is crucial for aligning the design with business goals and user needs.

03

Demonstration

Presenting demos to stakeholders helps in showcasing the progress and getting feedback at different stages of the design process.

It's important for ensuring alignment with project objectives and addressing any concerns early on.

04

Feedback

Analyzing feedback from stakeholders, focus groups, and usability testing allows you to identify areas for improvement and iterate on the design.

This iterative process is essential for refining the user experience and achieving user satisfaction.

Concept and Ideation

The creative process was deeply rooted in research findings and user feedback. User flows were ideated from efficient models identified during research.

The team engaged in regular two-hour brainstorming sessions twice a week, discussing the most efficient approaches and iterating on the wireframes.

On some sessions we went bananas literally,
explaining how the PIM hierarchy is supposed to work

steps were used to cover things up

Design Process

The decision to use the IBM Carbon Design System initially raised some reservations but ultimately proved to be a wise choice due to its clean components and comprehensive documentation. The design process kicked off by establishing the design system, leveraging the familiarity of 80% of the team with the IBM Carbon Design System from a previous project.

Wireframes were crafted for both complex and straightforward user flows, incorporating crucial input from the Product Owner. The collaborative effort was significant, involving frequent meeting sessions (on daily basis) and maintaining a continuous feedback loop.

01

Research

Conducting thorough research was essential for understanding user needs, preferences, and pain points.

This included competitor analysis, user personas and user journey mapping.

The insights were based mostly on the interviews findings.

02

Goals Definition

The main goal was to create the modular application step by step.

We were supposed to completely run the first module, and only after that to head to another one.

This approach helped us to focus on one thing at the time.

03

Conceptualization

Each module required an extended flow of discussions and brainstorm sessions.

This step was important to make the best decisions leant on the diversity of the team knowledge and experience.

Every major flow was wireframed to implement changes with ease.

04

Design

Utilized Figma/Miro for discussions, wireframes, Hi-Fi designs, and prototypes.

Created a straightforward color palette and a font guide to meet the hierarchical patterns and ADA compliancy.

05

Collaboration

The team engaged in regular two-hour brainstorm sessions twice a week, discussing efficient approaches.

Meanwhile, once a week the stakeholder demo took its place to discuss the designed flows right away.

06

Testing and Validation

Discussed and tested each flow closely with the stakeholders and the development team.

Argumented design decisions according to the focus group interviews insights and user-centered design principles.

07

Implementation Support

Collaborated with development and quality assurance teams during the implementation phase to ensure design high fidelity.

Provided design assets, specifications, prototypes and screencasts to be sure that every piece would be done perfectly.

08

Post-launch Evaluation

Due to the project faced setbacks, there were no changes to make any evaluations to understand the results.

The module came to an MVP phase, and was tested outside the box only by a bunch of users who were applied to the focus group built in the beginning.

01

Research

Conducting thorough research was essential for understanding user needs, preferences, and pain points.

This included competitor analysis, user personas and user journey mapping.

The insights were based mostly on the interviews findings.

02

Goals Definition

The main goal was to create the modular application step by step.

We were supposed to completely run the first module, and only after that to head to another one.

This approach helped us to focus on one thing at the time.

04

Design

Utilized Figma/Miro for discussions, wireframes, Hi-Fi designs, and prototypes.

Created a straightforward color palette and a font guide to meet the hierarchical patterns and ADA compliancy.

03

Conceptualization

Each module required an extended flow of discussions and brainstorm sessions.

This step was important to make the best decisions leant on the diversity of the team knowledge and experience.

Every major flow was wireframed to implement changes with ease.

05

Collaboration

The team engaged in regular two-hour brainstorm sessions twice a week, discussing efficient approaches.

Meanwhile, once a week the stakeholder demo took its place to discuss the designed flows right away.

06

Testing and Validation

Discussed and tested each flow closely with the stakeholders and the development team.

Argumented design decisions according to the focus group interviews insights and user-centered design principles.

07

Implementation Support

Collaborated with development and quality assurance teams during the implementation phase to ensure design high fidelity.

Provided design assets, specifications, prototypes and screencasts to be sure that every piece would be done perfectly.

08

Post-launch Evaluation

Due to the project faced setbacks, there were no changes to make any evaluations to understand the results.

The module came to an MVP phase, and was tested outside the box only by a bunch of users who were applied to the focus group built in the beginning.

steps were used to cover things up

Design Process

01

Research

Conducting thorough research was essential for understanding user needs, preferences, and pain points.

This included competitor analysis, user personas and user journey mapping.

The insights were based mostly on the interviews findings.

02

Goals Definition

The main goal was to create the modular application step by step.

We were supposed to completely run the first module, and only after that to head to another one.

This approach helped us to focus on one thing at the time.

03

Conceptualization

Each module required an extended flow of discussions and brainstorm sessions.

This step was important to make the best decisions leant on the diversity of the team knowledge and experience.

Every major flow was wireframed to implement changes with ease.

04

Design

Utilized Figma/Miro for discussions, wireframes, Hi-Fi designs, and prototypes.

Created a straightforward color palette and a font guide to meet the hierarchical patterns and ADA compliancy.

05

Collaboration

The team engaged in regular two-hour brainstorm sessions twice a week, discussing efficient approaches.

Meanwhile, once a week the stakeholder demo took its place to discuss the designed flows right away.

06

Testing and Validation

Discussed and tested each flow closely with the stakeholders and the development team.

Argumented design decisions according to the focus group interviews insights and user-centered design principles.

07

Implementation Support

Collaborated with development and quality assurance teams during the implementation phase to ensure design high fidelity.

Provided design assets, specifications, prototypes and screencasts to be sure that every piece would be done perfectly.

08

Post-launch Evaluation

Due to the project faced setbacks, there were no changes to make any evaluations to understand the results.

The module came to an MVP phase, and was tested outside the box only by a bunch of users who were applied to the focus group built in the beginning.

01

Research

Conducting thorough research was essential for understanding user needs, preferences, and pain points.

This included competitor analysis, user personas and user journey mapping.

The insights were based mostly on the interviews findings.

02

Goals Definition

The main goal was to create the modular application step by step.

We were supposed to completely run the first module, and only after that to head to another one.

This approach helped us to focus on one thing at the time.

04

Design

Utilized Figma/Miro for discussions, wireframes, Hi-Fi designs, and prototypes.

Created a straightforward color palette and a font guide to meet the hierarchical patterns and ADA compliancy.

03

Conceptualization

Each module required an extended flow of discussions and brainstorm sessions.

This step was important to make the best decisions leant on the diversity of the team knowledge and experience.

Every major flow was wireframed to implement changes with ease.

05

Collaboration

The team engaged in regular two-hour brainstorm sessions twice a week, discussing efficient approaches.

Meanwhile, once a week the stakeholder demo took its place to discuss the designed flows right away.

06

Testing and Validation

Discussed and tested each flow closely with the stakeholders and the development team.

Argumented design decisions according to the focus group interviews insights and user-centered design principles.

07

Implementation Support

Collaborated with development and quality assurance teams during the implementation phase to ensure design high fidelity.

Provided design assets, specifications, prototypes and screencasts to be sure that every piece would be done perfectly.

08

Post-launch Evaluation

Due to the project faced setbacks, there were no changes to make any evaluations to understand the results.

The module came to an MVP phase, and was tested outside the box only by a bunch of users who were applied to the focus group built in the beginning.

Design Decisions

Design System: the decision to use the IBM Carbon Design System initially raised some reservations but ultimately proved to be a wise choice due to its clean components and comprehensive documentation. The design process kicked off by establishing the design system, leveraging the familiarity of 80% of the team with the IBM Carbon Design System.

Focus Groups: because the application was supposed to be built from scratch, we didn’t have any active users to become our respondents during the testing. It was decided to build a focus group with a couple of clients who were interested in the product launch and some colleagues, who had some experience in this field.

Initial Testing: by the same initial stage specifics, we didn’t possess the design pieces to do user testing on our assets. So we decided to use some ready-to-go competitors' flows to understand the main pain point to avoid it during the first iteration development.

Visual Design

The decision to use the IBM Carbon Design System proved successful.
CDS had almost all needed components for fast usage, the creation of the rest of the components relied on the Carbon visual experience.

The color scheme aligned with Fiber's futuristic vibe, and typography elements were selected to meet ADA compliance.

01

Unified Design System

The color scheme aligned with Fiber's futuristic vibe, and typography elements were selected to meet ADA compliance.

01

Unified Design System

The color scheme aligned with Fiber's futuristic vibe, and typography elements were selected to meet ADA compliance.

01

Unified Design System

The color scheme aligned with Fiber's futuristic vibe, and typography elements were selected to meet ADA compliance.

02

Carbon design system

CDS had almost all needed components for fast usage, the creation of the rest of the components relied on the Carbon visual experience.

main features description

Product Information System

Hierarchy

Description: manages products efficiently, enabling effective creation of product structure with ease.

Significance: recognizes the diversity of products and ensures easy handling of groups of products.

hierarchy screencast Overview

Smart Import

Description: allows users to connect columns from source files to existing in-app attributes or create new ones on-the-fly.

Significance: enables users to seamlessly integrate products by linking source file columns to in-app attributes.

Smart import screencast Overview

main features description

Product Information System

Hierarchy

Description: manages products efficiently, enabling effective creation of product structure with ease.

Significance: recognizes the diversity of products and ensures easy handling of groups of products.

hierarchy screencast Overview

Smart Import

Description: allows users to connect columns from source files to existing in-app attributes or create new ones on-the-fly.

Significance: enables users to seamlessly integrate products by linking source file columns to in-app attributes.

Smart import screencast Overview

Usability Testing

We conducted usability testing with an involved focus group consisting of both company employees and interested clients.

Prototypes for the PIM and Dashboard modules were thoroughly tested, bringing crucial insights. The testing outcomes led to refinements in key features like PIM Hierarchy and Smart Import.

the results we’ve come to

Conclusion

While the project faced setbacks, the design process showcased adaptability, collaboration, and a commitment to meeting user needs. The decision to use Carbon DS was successful, contributing to a visually cohesive design.

The pause in the project definitely offer opportunities for future development or valuable lessons for similar initiatives of the company.

Now the application is on the stage of closed Alpha, available only for the clients entered the focus group.

Challenges

and Learnings

Challenges and Learnings

To tackle the challenge of managing development time, we decided to postpone certain modules and features. This move led to detailed discussions within the team about refining project priorities.

As the lead designer, my main goal was to highlight and prioritize the key features for the MVP phase. The main challenge I faced was convincing the leadership team to trust the feedback we had gathered.

This turned out to be my most significant lesson from the project – not just researching data, but effectively presenting it to the leadership team and getting them to rely on it.