Pernambucanas Live Commerce - Design System.

São Paulo – São Paulo / remote

Complete Product Design, development of the visual experience ensuring its consistency.

Role

UI

Deadline

6 months

Team

5 Peoples

Goal

  • Swift Design with predefined Guidelines and UI components.
  • Quick Development through clear definition of components and styles.
  • Launch a superior product with a more beautiful and consistent interface.

1. Design System Elements:

1.1 Color Palette:

  • Selection of colors that reflect the identity of Pernambucanas.
  • Primary colors for emphasis and secondary colors for complement.
  • Consistency in live streams, product pages, and interactive elements.

1.2 Typography:

  • Selection of the Roboto font for comfortable reading.
  • Typography hierarchy to highlight essential information.

1.3 Icons:

  • Set of custom icons aligned with the brand identity.
  • Consistent use to indicate actions and functionalities.

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 broadcast.

Examples

Cores
Tipografia
Cores 2
Mobile
Icones

2. Prototyping and Testing:

1.1 Interactive Prototypes:

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

1.2 Usability Testing:

  • Conducting usability tests with real users to identify areas for improvement.

     
     

1.3 Continuous Feedback:

  • Establishing a system of continuous feedback to enhance the design based on user opinions and suggestions.

Mobile Examples:

Produtos
Headers
Menu
Sacola

Desktop Examples

Produtos web
Headers web
Banners
Menu web

5. Implementation and Maintenance:

1.1 Integration with Live Commerce Platforms:

  • Ensure seamless integration of the Design System with platforms used for live broadcasts.

1.2 Updates and Evolution:

  • Establish a plan for regular updates to keep pace with trends and evolve according to the audience’s needs.

1.3 Open Documentation:

  • Create open and accessible documentation to facilitate understanding and implementation of the Design System.

Results

PROJECT CONCLUSION

Upon concluding this Design System project for Pernambucanas’ Live Commerce, we celebrate the ongoing pursuit of excellence in user experience and the 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 diverse audience, ensuring everyone can fully enjoy the live shopping experience.

The prototyping and testing phase not only validated design choices but also showcased 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 only meeting but exceeding its customers’ expectations, and this Design System represents a significant step in this exciting journey.

Note: This is a summary of the project; some data and research have been omitted at the request of the company.