Back

Contact me

Client

BEES

Industry

B2B E-commerce

Year

2023

This guide details the tokens, user scenarios, and interactions related to a graph component designed for the MiNegocio mobile app. While MiNegocio has its own component library, this graph is intended to adopt tokens and styles from the official Design System utilized by BEES mobile functionalities.

Context

MiNegocio was a mobile application designed to deliver comprehensive business insights tailored for analysts, managers, and entrepreneurs. Based in aggregated business data, the application provided month-over-month purchase comparisons and recommended products that could enhance sales performance for specific periods.

 

The app also offered valuable insights into business progress relative to competitors, highlighted upcoming events, and provided strategic tips for increasing sales.

Problem

BEES application users typically purchase various product categories from suppliers, including alcoholic and non-alcoholic beverages, juices, and liqueurs. Currently, there’s no way to track the volume of purchases made through the platform over specific periods or to identify the most popular product categories.

 

Without a comparison visualization, it’s difficult for analysts to track opportunities and identify positive and negative seasonal periods based on purchase amounts.

Goal

This chart was designed to address these issues by providing a clear, segmentable, comparative view of purchase volume over the past 12 months. It compares each month of the current year with the same month from the previous year.

The feature allows users to:

 

  • Quickly visualize seasonal variations by product category.
  • Make side-by-side comparisons of absolute purchase figures month by month.
  • Filter the view by purchase type: general, alcoholic beverages, non-alcoholic beverages, and juices.
  • Users can make evidence-based decisions using updated, objective data.

Exception cases in documentation

Not every product operates in a linear fashion because we rely on data provided by our partners. Therefore, we designed this solution to be adaptable, allowing us to display various scenarios.

 

  • The partner is unable to provide sufficient information for month-to-month comparisons.
  • The partner has been a client for less than 12 months, so no data is available.
  • There are issues with sending information from the partner.

Full documentation

This data visualization component will be used primarily in the MiNegocio Purchase feature. However, other BEES teams can adopt it by making a few changes.

An internal team was also assigned to build this component instead of using common visualization libraries (e.g., Chart.js).

In the documentation below, you’ll be able to find:

  • Anatomy
  • Properties
  • Behaviour/Interaction
  • Exception cases
  • Tooltip and subtitle usage

password: yohana25

Yohana Almeida

Product Designer

Let’s talk

Back

Contact me

Client

BEES

Industry

B2B E-commerce

Year

2023

This guide details the tokens, user scenarios, and interactions related to a graph component designed for the MiNegocio mobile app. While MiNegocio has its own component library, this graph is intended to adopt tokens and styles from the official Design System utilized by BEES mobile functionalities.

Context

MiNegocio was a mobile application designed to deliver comprehensive business insights tailored for analysts, managers, and entrepreneurs. Based in aggregated business data, the application provided month-over-month purchase comparisons and recommended products that could enhance sales performance for specific periods.

 

The app also offered valuable insights into business progress relative to competitors, highlighted upcoming events, and provided strategic tips for increasing sales.

Problem

BEES application users typically purchase various product categories from suppliers, including alcoholic and non-alcoholic beverages, juices, and liqueurs. Currently, there’s no way to track the volume of purchases made through the platform over specific periods or to identify the most popular product categories.

 

Without a comparison visualization, it’s difficult for analysts to track opportunities and identify positive and negative seasonal periods based on purchase amounts.

Goal

This chart was designed to address these issues by providing a clear, segmentable, comparative view of purchase volume over the past 12 months. It compares each month of the current year with the same month from the previous year.

The feature allows users to:

 

  • Quickly visualize seasonal variations by product category.
  • Make side-by-side comparisons of absolute purchase figures month by month.
  • Filter the view by purchase type: general, alcoholic beverages, non-alcoholic beverages, and juices.
  • Users can make evidence-based decisions using updated, objective data.

Exception cases in documentation

Not every product operates in a linear fashion because we rely on data provided by our partners. Therefore, we designed this solution to be adaptable, allowing us to display various scenarios.

 

  • The partner is unable to provide sufficient information for month-to-month comparisons.
  • The partner has been a client for less than 12 months, so no data is available.
  • There are issues with sending information from the partner.

Full documentation

This data visualization component will be used primarily in the MiNegocio Purchase feature. However, other BEES teams can adopt it by making a few changes.

An internal team was also assigned to build this component instead of using common visualization libraries (e.g., Chart.js).

In the documentation below, you’ll be able to find:

  • Anatomy
  • Properties
  • Behaviour/Interaction
  • Exception cases
  • Tooltip and subtitle usage

password: yohana25

Yohana Almeida

Product Designer

Let’s talk

Back

Contact me

Client

BEES

Industry

B2B E-commerce

Year

2023

This guide details the tokens, user scenarios, and interactions related to a graph component designed for the MiNegocio mobile app. While MiNegocio has its own component library, this graph is intended to adopt tokens and styles from the official Design System utilized by BEES mobile functionalities.

Context

MiNegocio was a mobile application designed to deliver comprehensive business insights tailored for analysts, managers, and entrepreneurs. Based in aggregated business data, the application provided month-over-month purchase comparisons and recommended products that could enhance sales performance for specific periods.

 

The app also offered valuable insights into business progress relative to competitors, highlighted upcoming events, and provided strategic tips for increasing sales.

Problem

BEES application users typically purchase various product categories from suppliers, including alcoholic and non-alcoholic beverages, juices, and liqueurs. Currently, there’s no way to track the volume of purchases made through the platform over specific periods or to identify the most popular product categories.

 

Without a comparison visualization, it’s difficult for analysts to track opportunities and identify positive and negative seasonal periods based on purchase amounts.

Goal

This chart was designed to address these issues by providing a clear, segmentable, comparative view of purchase volume over the past 12 months. It compares each month of the current year with the same month from the previous year.

The feature allows users to:

 

  • Quickly visualize seasonal variations by product category.
  • Make side-by-side comparisons of absolute purchase figures month by month.
  • Filter the view by purchase type: general, alcoholic beverages, non-alcoholic beverages, and juices.
  • Users can make evidence-based decisions using updated, objective data.

Exception cases in documentation

Not every product operates in a linear fashion because we rely on data provided by our partners. Therefore, we designed this solution to be adaptable, allowing us to display various scenarios.

 

  • The partner is unable to provide sufficient information for month-to-month comparisons.
  • The partner has been a client for less than 12 months, so no data is available.
  • There are issues with sending information from the partner.

Full documentation

This data visualization component will be used primarily in the MiNegocio Purchase feature. However, other BEES teams can adopt it by making a few changes.

An internal team was also assigned to build this component instead of using common visualization libraries (e.g., Chart.js).

In the documentation below, you’ll be able to find:

  • Anatomy
  • Properties
  • Behaviour/Interaction
  • Exception cases
  • Tooltip and subtitle usage

password: yohana25

Yohana Almeida

Product Designer

Let’s talk