MP.Michel Preto
Projects

Pernambucanas Live Commerce Design System

São Paulo · São Paulo / remote

Full Product Design engagement, building the visual experience and keeping it consistent.

RoleUI
Timeline6 Months
Team5 People

Objective

  • Fast design with predefined guideline standards and UI components.
  • Fast development through a clear definition of components and styles.
  • Launch a better product, with a more polished and consistent interface.

1. Design System Elements

1.1 Color Palette

  • Selection of colors that reflect Pernambucanas' identity.
  • Primary colors for emphasis and secondary colors as complements.
  • Consistency across live streams, product pages and interactive elements.
Primary color palette of the Pernambucanas Design System
Secondary and supporting color palette of the Design System

1.2 Typography

  • Choice of the Roboto typeface for comfortable reading.
  • Typographic hierarchy to highlight essential information.
Typographic scale of the Design System using the Roboto typeface
Typographic hierarchy

1.3 Icons

  • Set of custom icons aligned with the brand identity.
  • Consistent use to indicate actions and functionality.
Set of custom icons from the Design System
System icons

1.4 UI Components

  • Development of reusable components, such as product cards, buttons, navigation bars, etc.
  • Flexibility for adjustments according to the specific needs of each stream.

Some Examples

Mobile components of the Design System applied to app screens
Components in a mobile context

2. Prototyping and Testing

2.1 Interactive Prototypes

Development of interactive prototypes to evaluate the user experience before implementation.

2.2 Usability Testing

Usability testing with real users to identify areas for improvement.

2.3 Continuous Feedback

Establish a continuous feedback system to refine the design based on users' opinions and suggestions.

Some Mobile Examples

Mobile product cards from the Design System
Mobile headers from the Design System
Mobile menus from the Design System
Mobile shopping bag from the Design System

Some Desktop Examples

Desktop product cards from the Design System
Desktop headers from the Design System
Desktop banners from the Design System
Desktop menus from the Design System

3. Implementation and Maintenance

3.1 Integration with Live Commerce Platforms

Ensure smooth integration of the Design System with the platforms used for live streams.

3.2 Updates and Evolution

Establish a plan for regular updates to keep up with trends and evolve according to the audience's needs.

3.3 Open Documentation

Create open, accessible documentation to make the Design System easier to understand and implement.

Results

Wrapping up this Design System project for Pernambucanas Live Commerce, we celebrate the ongoing pursuit of excellence in the user experience and in a consistent expression of the brand identity.

The visual cohesion established through the color palette, typography, icons and UI components reflects careful attention to detail, resulting in a distinctive identity. Prioritizing usability, accessibility and responsive adaptability reinforces Pernambucanas' commitment to serving a wide range of audiences, ensuring everyone can fully enjoy the live shopping experience.

The prototyping and testing phase not only validated the design choices, but also demonstrated a dedication to listening to the user's voice. Effective implementation, integration with Live Commerce platforms and open documentation now provide a solid foundation for the continuous evolution of this Design System.

Pernambucanas is committed to not just meeting but exceeding its customers' expectations, and this Design System represents a significant step along that path.

Note: this is a summary of the project; some data and research were omitted at the company's request.