Ui Library and New Website

TF Shop, TF ERP • 2025

Ui Library and New Website

TF Shop, TF ERP • 2025

Ui Library and New Website

TF Shop, TF ERP • 2025

Ui Library and New Website

TF Shop, TF ERP • 2025

Image: UI component library created for TF Shop and used in the new TF ERP website, ensuring visual consistency and development efficiency.

Image: UI component library created for TF Shop and used in the new TF ERP website, ensuring visual consistency and development efficiency.

Image: UI component library created for TF Shop and used in the new TF ERP website, ensuring visual consistency and development efficiency.

Image: UI component library created for TF Shop and used in the new TF ERP website, ensuring visual consistency and development efficiency.

Overview

TF Shop is a company originally from China and part of the TF Software group, as is TF ERP. I was invited to assemble the experience team and create the B2B dropshipping e-commerce in Brazil, enabling product sales without the need for physical inventory.

Overview

TF Shop is a company originally from China and part of the TF Software group, as is TF ERP. I was invited to assemble the experience team and create the B2B dropshipping e-commerce in Brazil, enabling product sales without the need for physical inventory.

Overview

TF Shop is a company originally from China and part of the TF Software group, as is TF ERP. I was invited to assemble the experience team and create the B2B dropshipping e-commerce in Brazil, enabling product sales without the need for physical inventory.

Overview

TF Shop is a company originally from China and part of the TF Software group, as is TF ERP. I was invited to assemble the experience team and create the B2B dropshipping e-commerce in Brazil, enabling product sales without the need for physical inventory.

Objective and challenges

The project’s objective was to develop the information architecture, flows, and user experience for the new TF ERP website, using the component library I created for TF Shop. The new structure was designed to improve usability and make communication clearer for different user profiles.

Objective and challenges

The project’s objective was to develop the information architecture, flows, and user experience for the new TF ERP website, using the component library I created for TF Shop. The new structure was designed to improve usability and make communication clearer for different user profiles.

Objective and challenges

The project’s objective was to develop the information architecture, flows, and user experience for the new TF ERP website, using the component library I created for TF Shop. The new structure was designed to improve usability and make communication clearer for different user profiles.

Objective and challenges

The project’s objective was to develop the information architecture, flows, and user experience for the new TF ERP website, using the component library I created for TF Shop. The new structure was designed to improve usability and make communication clearer for different user profiles.

Key changes include:

• Dedicated pages for each merchant profile, based on monthly order volume; • Pricing page, presenting benefits and allowing direct comparison between plans; • Blog and Help Center with FAQ, tutorials, and ERP usage guides; • Simplified registration and login flows.

Key changes include:

• Dedicated pages for each merchant profile, based on monthly order volume; • Pricing page, presenting benefits and allowing direct comparison between plans; • Blog and Help Center with FAQ, tutorials, and ERP usage guides; • Simplified registration and login flows.

Key changes include:

• Dedicated pages for each merchant profile, based on monthly order volume; • Pricing page, presenting benefits and allowing direct comparison between plans; • Blog and Help Center with FAQ, tutorials, and ERP usage guides; • Simplified registration and login flows.

Key changes include:

• Dedicated pages for each merchant profile, based on monthly order volume; • Pricing page, presenting benefits and allowing direct comparison between plans; • Blog and Help Center with FAQ, tutorials, and ERP usage guides; • Simplified registration and login flows.

My role

I served as Head of Design, leading the project end-to-end: from analyzing the existing experience to creating guidelines, components, and patterns that unified the interface of the new TF ERP website. I developed the group’s library with over 50 components and tokens, providing scalability, agility in creating new pages and products, and standardizing the visual identity. As a strategic leader, I managed two designers, ensuring alignment in deliverables and consistency in applying the visual language. Together, we redesigned the email journey (onboarding and transactional), the new ERP website, and social media assets, maintaining the new brand identity across all user touchpoints. We conducted research to understand the ERP users’ profiles, their interactions with the tool, and the best way to communicate with this audience. We also established KPIs for experience, brand, and engagement to assess the effectiveness of the improvements implemented. During the process, we faced some challenges, such as working with a technical team based in China that did not follow QA standards, leading to inconsistencies. There was a lack of internal organization due to the absence of a marketing team and no UX Writer, which impacted communication clarity with users.

My role

Atuei como Head de Design, liderando o projeto de ponta a ponta: desde a análise da experiência existente até a criação de diretrizes, componentes e padrões que unificaram a interface do novo site da TF ERP. Desenvolvi a biblioteca do grupo com mais de 50 componentes e tokens, proporcionando escalabilidade, agilidade na criação de novas páginas e produtos, e padronização da identidade visual. Como líder estratégico, gerenciei uma equipe de mais 2 designers, garantindo alinhamento nas entregas e consistência na aplicação da linguagem visual. Juntos, redesenhamos a régua de e-mails de onboarding, o novo site do ERP, as comunicações transacionais e as peças para mídias sociais, mantendo a coerência da marca em todos os pontos de contato com a pessoa usuária. Conduzimos pesquisas para compreender o perfil das pessoas que utilizavam o ERP, como interagiam com a ferramenta e qual a melhor forma de nos comunicarmos com elas e definimos KPIs de experiência, marca e engajamento para medir a eficácia das melhorias implementadas.

My role

I served as Head of Design, leading the project end-to-end: from analyzing the existing experience to creating guidelines, components, and patterns that unified the interface of the new TF ERP website. I developed the group’s library with over 50 components and tokens, providing scalability, agility in creating new pages and products, and standardizing the visual identity. As a strategic leader, I managed two designers, ensuring alignment in deliverables and consistency in applying the visual language. Together, we redesigned the email journey (onboarding and transactional), the new ERP website, and social media assets, maintaining the new brand identity across all user touchpoints. We conducted research to understand the ERP users’ profiles, their interactions with the tool, and the best way to communicate with this audience. We also established KPIs for experience, brand, and engagement to assess the effectiveness of the improvements implemented. During the process, we faced some challenges, such as working with a technical team based in China that did not follow QA standards, leading to inconsistencies. There was a lack of internal organization due to the absence of a marketing team and no UX Writer, which impacted communication clarity with users.

My role

I served as Head of Design, leading the project end-to-end: from analyzing the existing experience to creating guidelines, components, and patterns that unified the interface of the new TF ERP website. I developed the group’s library with over 50 components and tokens, providing scalability, agility in creating new pages and products, and standardizing the visual identity. As a strategic leader, I managed two designers, ensuring alignment in deliverables and consistency in applying the visual language. Together, we redesigned the email journey (onboarding and transactional), the new ERP website, and social media assets, maintaining the new brand identity across all user touchpoints. We conducted research to understand the ERP users’ profiles, their interactions with the tool, and the best way to communicate with this audience. We also established KPIs for experience, brand, and engagement to assess the effectiveness of the improvements implemented. During the process, we faced some challenges, such as working with a technical team based in China that did not follow QA standards, leading to inconsistencies. There was a lack of internal organization due to the absence of a marketing team and no UX Writer, which impacted communication clarity with users.

Skills

Benchmark Design Lead Product Design UX Design UI Design Desk Research User Research Generative AI Prototyping

Skills

Benchmark Design Lead Product Design UX Design UI Design Desk Research User Research Generative AI Prototyping

Skills

Benchmark Design Lead Product Design UX Design UI Design Desk Research User Research Generative AI Prototyping

Skills

Benchmark Design Lead Product Design UX Design UI Design Desk Research User Research Generative AI Prototyping

New TF ERP Website

We conducted interviews with stakeholders to understand the needs of the business and users. Our goal was to clearly present the ERP’s main features, highlighting the benefits and value it delivers. We aimed to humanize the site, reinforcing the idea that the platform facilitates and improves the sales process. Starting from the group’s component library, we built a consistent visual identity, ensuring clarity, organization, and easy navigation between modules, content, and services.

New TF ERP Website

We conducted interviews with stakeholders to understand the needs of the business and users. Our goal was to clearly present the ERP’s main features, highlighting the benefits and value it delivers. We aimed to humanize the site, reinforcing the idea that the platform facilitates and improves the sales process. Starting from the group’s component library, we built a consistent visual identity, ensuring clarity, organization, and easy navigation between modules, content, and services.

New TF ERP Website

We conducted interviews with stakeholders to understand the needs of the business and users. Our goal was to clearly present the ERP’s main features, highlighting the benefits and value it delivers. We aimed to humanize the site, reinforcing the idea that the platform facilitates and improves the sales process. Starting from the group’s component library, we built a consistent visual identity, ensuring clarity, organization, and easy navigation between modules, content, and services.

New TF ERP Website

We conducted interviews with stakeholders to understand the needs of the business and users. Our goal was to clearly present the ERP’s main features, highlighting the benefits and value it delivers. We aimed to humanize the site, reinforcing the idea that the platform facilitates and improves the sales process. Starting from the group’s component library, we built a consistent visual identity, ensuring clarity, organization, and easy navigation between modules, content, and services.

Image: TF ERP homepage, highlighting the value proposition and main system features.

Image: TF ERP homepage, highlighting the value proposition and main system features.

Image: TF ERP homepage, highlighting the value proposition and main system features.

Image: TF ERP homepage, highlighting the value proposition and main system features.

TF ERP Pricing Simulator

Section on the homepage for the tool that helps potential clients understand the benefits, better plan their sales, and choose the ideal plan for their business.

TF ERP Pricing Simulator

Section on the homepage for the tool that helps potential clients understand the benefits, better plan their sales, and choose the ideal plan for their business.

TF ERP Pricing Simulator

Section on the homepage for the tool that helps potential clients understand the benefits, better plan their sales, and choose the ideal plan for their business.

TF ERP Pricing Simulator

Section on the homepage for the tool that helps potential clients understand the benefits, better plan their sales, and choose the ideal plan for their business.

Image: Price Simulator section, showing the reduced header during page scroll.

Image: Price Simulator section, showing the reduced header during page scroll.

Image: Price Simulator section, showing the reduced header during page scroll.

Image: Price Simulator section, showing the reduced header during page scroll.

Pricing page

I structured the comparison with column cards, highlighting benefits and giving prominence to the most popular plan to support subscription decisions.

Pricing page

I structured the comparison with column cards, highlighting benefits and giving prominence to the most popular plan to support subscription decisions.

Pricing page

I structured the comparison with column cards, highlighting benefits and giving prominence to the most popular plan to support subscription decisions.

Pricing page

I structured the comparison with column cards, highlighting benefits and giving prominence to the most popular plan to support subscription decisions.

Image: Desktop version of the pricing page.

Image: Desktop version of the pricing page.

Image: Desktop version of the pricing page.

Image: Desktop version of the pricing page.

Sign Up and Login

The improvement of the TF ERP registration and login flow was driven by the need to reduce initial churn and make onboarding smoother for new users. The previous flow was too lengthy, leading to drop-offs and creating friction at the very first interaction with the tool. The solution was to redesign and simplify the process by removing unnecessary steps. Only the essential information required for first access was kept, supported by a clean interface, clear messaging, and convenient login options such as Google. The result is a faster, more accessible experience that strengthens the system’s first impression and encourages ongoing engagement.

Sign Up and Login

The improvement of the TF ERP registration and login flow was driven by the need to reduce initial churn and make onboarding smoother for new users. The previous flow was too lengthy, leading to drop-offs and creating friction at the very first interaction with the tool. The solution was to redesign and simplify the process by removing unnecessary steps. Only the essential information required for first access was kept, supported by a clean interface, clear messaging, and convenient login options such as Google. The result is a faster, more accessible experience that strengthens the system’s first impression and encourages ongoing engagement.

Sign Up and Login

The improvement of the TF ERP registration and login flow was driven by the need to reduce initial churn and make onboarding smoother for new users. The previous flow was too lengthy, leading to drop-offs and creating friction at the very first interaction with the tool. The solution was to redesign and simplify the process by removing unnecessary steps. Only the essential information required for first access was kept, supported by a clean interface, clear messaging, and convenient login options such as Google. The result is a faster, more accessible experience that strengthens the system’s first impression and encourages ongoing engagement.

Sign Up and Login

The improvement of the TF ERP registration and login flow was driven by the need to reduce initial churn and make onboarding smoother for new users. The previous flow was too lengthy, leading to drop-offs and creating friction at the very first interaction with the tool. The solution was to redesign and simplify the process by removing unnecessary steps. Only the essential information required for first access was kept, supported by a clean interface, clear messaging, and convenient login options such as Google. The result is a faster, more accessible experience that strengthens the system’s first impression and encourages ongoing engagement.

Main Benefits of the Change

Reduced registration time: fewer steps, faster process. Increased conversion rate: higher number of completed registrations. Clarity and accessibility: simple language, cleaner and more inclusive visuals.

Main Benefits of the Change

Reduced registration time: fewer steps, faster process. Increased conversion rate: higher number of completed registrations. Clarity and accessibility: simple language, cleaner and more inclusive visuals.

Main Benefits of the Change

Reduced registration time: fewer steps, faster process. Increased conversion rate: higher number of completed registrations. Clarity and accessibility: simple language, cleaner and more inclusive visuals.

Main Benefits of the Change

Reduced registration time: fewer steps, faster process. Increased conversion rate: higher number of completed registrations. Clarity and accessibility: simple language, cleaner and more inclusive visuals.

With the launch of the new website, registrations grew by 82%, proving the effectiveness of the improvements implemented.

With the launch of the new website, registrations grew by 82%, proving the effectiveness of the improvements implemented.

With the launch of the new website, registrations grew by 82%, proving the effectiveness of the improvements implemented.

With the launch of the new website, registrations grew by 82%, proving the effectiveness of the improvements implemented.

Image: Sign-up page and Login page.

Image: Sign-up page and Login page.

Image: Sign-up page and Login page.

Image: Sign-up page and Login page.

Mobile pages

Merchant page, Blog, About Us, and Sign-up.

Mobile pages

Merchant page, Blog, About Us, and Sign-up.

Mobile pages

Merchant page, Blog, About Us, and Sign-up.

Mobile pages

Merchant page, Blog, About Us, and Sign-up.

Image: Profile page designed to handle a sales volume of 15,000 orders per month, blog homepage, About Us institutional page, and sign-up page.

Image: Profile page designed to handle a sales volume of 15,000 orders per month, blog homepage, About Us institutional page, and sign-up page.

Image: Profile page designed to handle a sales volume of 15,000 orders per month, blog homepage, About Us institutional page, and sign-up page.

Image: Profile page designed to handle a sales volume of 15,000 orders per month, blog homepage, About Us institutional page, and sign-up page.

Landind Page

Page optimized for search engines, with a strategy focused on presenting the ERP’s benefits in a conversion-oriented way, encouraging new user registrations.

Landind Page

Page optimized for search engines, with a strategy focused on presenting the ERP’s benefits in a conversion-oriented way, encouraging new user registrations.

Landind Page

Page optimized for search engines, with a strategy focused on presenting the ERP’s benefits in a conversion-oriented way, encouraging new user registrations.

Landind Page

Page optimized for search engines, with a strategy focused on presenting the ERP’s benefits in a conversion-oriented way, encouraging new user registrations.

Image: Landing page optimized for search engines.

Image: Landing page optimized for search engines.

Image: Landing page optimized for search engines.

Image: Landing page optimized for search engines.

Related work

Related work

Related work

Related work

Brand Identity Design

Project Available Soon

Visual identity and strategic brand positioning for a Brazilian dropshipping platform.

UI Kit components for the new website of Culmia, a real estate company based in Spain.

Brand Identity Design

Project Available Soon

Visual identity and strategic brand positioning for a Brazilian dropshipping platform.

UI Kit components for the new website of Culmia, a real estate company based in Spain.

Brand Identity Design

Project Available Soon

Visual identity and strategic brand positioning for a Brazilian dropshipping platform.

UI Kit components for the new website of Culmia, a real estate company based in Spain.

Brand Identity Design

Project Available Soon

Visual identity and strategic brand positioning for a Brazilian dropshipping platform.

UI Kit components for the new website of Culmia, a real estate company based in Spain.

Client Area UI

Project Available Soon

Culmia’s client area UI, using the components for visual consistency.

UI Kit components for the new website of Culmia, a real estate company based in Spain.

Client Area UI

Project Available Soon

Culmia’s client area UI, using the components for visual consistency.

UI Kit components for the new website of Culmia, a real estate company based in Spain.

Client Area UI

Project Available Soon

Culmia’s client area UI, using the components for visual consistency.

UI Kit components for the new website of Culmia, a real estate company based in Spain.

Client Area UI

Project Available Soon

Culmia’s client area UI, using the components for visual consistency.

UI Kit components for the new website of Culmia, a real estate company based in Spain.

Fashion e-commerce

Stone

2024

Creation of images using Generative AI, component library, and UI design for the new e-commerce platform.

Componentes do novo e-commerce da Stone Made in Origin

Fashion e-commerce

Stone

2024

Creation of images using Generative AI, component library, and UI design for the new e-commerce platform.

Componentes do novo e-commerce da Stone Made in Origin

Fashion e-commerce

Stone

2024

Creation of images using Generative AI, component library, and UI design for the new e-commerce platform.

Componentes do novo e-commerce da Stone Made in Origin

Fashion e-commerce

Stone

2024

Creation of images using Generative AI, component library, and UI design for the new e-commerce platform.

Componentes do novo e-commerce da Stone Made in Origin

Salesperson App

Aramis

2024

Development of flows, component libraries, and Design Systems for the app interfaces.

Componentes do Design Systems para o applicativo das lojas Aramis

Salesperson App

Aramis

2024

Development of flows, component libraries, and Design Systems for the app interfaces.

Componentes do Design Systems para o applicativo das lojas Aramis

Salesperson App

Aramis

2024

Development of flows, component libraries, and Design Systems for the app interfaces.

Componentes do Design Systems para o applicativo das lojas Aramis

Salesperson App

Aramis

2024

Development of flows, component libraries, and Design Systems for the app interfaces.

Componentes do Design Systems para o applicativo das lojas Aramis

I’m currently open to new opportunities and projects. I’d love to help you turn your ideas into reality.

Let’s work together.

© 2012 • 2025 dimarques.com. All rights reserved. The images and projects displayed are for portfolio purposes only.

I’m currently open to new opportunities and projects. I’d love to help you turn your ideas into reality.

Let’s work together.

© 2012 • 2025 dimarques.com. All rights reserved. The images and projects displayed are for portfolio purposes only.

I’m currently open to new opportunities and projects. I’d love to help you turn your ideas into reality.

Let’s work together.

© 2012 • 2025 dimarques.com. All rights reserved. The images and projects displayed are for portfolio purposes only.

I’m currently open to new opportunities and projects. I’d love to help you turn your ideas into reality.

Let’s work together.

© 2012 • 2025 dimarques.com. All rights reserved. The images and projects displayed are for portfolio purposes only.