2023 - 2024

A Premium Online Presence for BYD

Creating a premium online presence for BYD involved a thorough design and UX Research. In just two and a half months, the project led to securing 100 license plates. The focus was on crafting an engaging and user-friendly website, enhancing brand visibility, and ensuring seamless navigation.

Contribution

Competitive analysis

Sitemap

Wireframing

High fidelity layout

Design system

Prototyping

Design QA

Project details

Design challenge(s)

This project aimed to establish BYD as a leading player in the Portuguese EV market by creating a digital presence that not only reflects the brand's premium image but also offers an engaging and informative experience for potential customers.

Project details

Design challenge(s)

This project aimed to establish BYD as a leading player in the Portuguese EV market by creating a digital presence that not only reflects the brand's premium image but also offers an engaging and informative experience for potential customers.

Project details

Design challenge(s)

This project aimed to establish BYD as a leading player in the Portuguese EV market by creating a digital presence that not only reflects the brand's premium image but also offers an engaging and informative experience for potential customers.

The Challenge

How might we craft a distinctive visual identity for BYD, so that it establishes a strong presence in the EV market?

🔥 What's the goal?

The goal of the BYD website project is to craft a compelling and emotionally resonant online presence that captivates visitors from the moment they arrive. By leveraging striking and evocative imagery, the website aims to forge an immediate emotional connection with users, drawing them into the brand's narrative. The design philosophy centers on minimalism, ensuring a clean and uncluttered interface that allows the visuals and content to stand out and engage the audience without distraction.

🔥 What's the goal?

The goal of the BYD website project is to craft a compelling and emotionally resonant online presence that captivates visitors from the moment they arrive. By leveraging striking and evocative imagery, the website aims to forge an immediate emotional connection with users, drawing them into the brand's narrative. The design philosophy centers on minimalism, ensuring a clean and uncluttered interface that allows the visuals and content to stand out and engage the audience without distraction.

🔥 What's the goal?

The goal of the BYD website project is to craft a compelling and emotionally resonant online presence that captivates visitors from the moment they arrive. By leveraging striking and evocative imagery, the website aims to forge an immediate emotional connection with users, drawing them into the brand's narrative. The design philosophy centers on minimalism, ensuring a clean and uncluttered interface that allows the visuals and content to stand out and engage the audience without distraction.

💪 David vs Goliath

In this project, BYD is positioning itself as a bold challenger in the competitive automotive market, taking on industry titans like Hyundai, Nissan, Polestar, and other established giants. Despite the daunting competition, BYD brings a unique blend of innovation, sustainability, and design excellence to the table, aiming to disrupt the portuguese market distribution.

💪 David vs Goliath

In this project, BYD is positioning itself as a bold challenger in the competitive automotive market, taking on industry titans like Hyundai, Nissan, Polestar, and other established giants. Despite the daunting competition, BYD brings a unique blend of innovation, sustainability, and design excellence to the table, aiming to disrupt the portuguese market distribution.

💪 David vs Goliath

In this project, BYD is positioning itself as a bold challenger in the competitive automotive market, taking on industry titans like Hyundai, Nissan, Polestar, and other established giants. Despite the daunting competition, BYD brings a unique blend of innovation, sustainability, and design excellence to the table, aiming to disrupt the portuguese market distribution.

Info

It's worth noting that for this competitive analysis, only the portuguese automotive market was analysed.

Info

It's worth noting that for this competitive analysis, only the portuguese automotive market was analysed.

Info

It's worth noting that for this competitive analysis, only the portuguese automotive market was analysed.

Fierce competition

I started a Comparative Analysis with the current app market which this product would fit in order to find opportunities and what the product’s positioning would be towards its competitors.


In my research I found that it’s main competitors would be:

  • Hyundai

  • Nissan

  • Polestar

🧩 Flexibility as a priority

Components were crafted and organized into a library that reflected BYD's quality standards, while offering their team full flexibility and autonomy. Each component was designed to be reusable and adaptable to various states and scenarios, allowing for high agility in creating new pages for BYD's website.

🧩 Flexibility as a priority

Components were crafted and organized into a library that reflected BYD's quality standards, while offering their team full flexibility and autonomy. Each component was designed to be reusable and adaptable to various states and scenarios, allowing for high agility in creating new pages for BYD's website.

🧩 Flexibility as a priority

Components were crafted and organized into a library that reflected BYD's quality standards, while offering their team full flexibility and autonomy. Each component was designed to be reusable and adaptable to various states and scenarios, allowing for high agility in creating new pages for BYD's website.

Info

Embracing atomic design principles allowed us to effectively manage design debt, maintain consistency, and promote scalability within our layout, ultimately enhancing the overall quality and coherence of the website.

Info

Embracing atomic design principles allowed us to effectively manage design debt, maintain consistency, and promote scalability within our layout, ultimately enhancing the overall quality and coherence of the website.

Info

Embracing atomic design principles allowed us to effectively manage design debt, maintain consistency, and promote scalability within our layout, ultimately enhancing the overall quality and coherence of the website.

A practical example of the atomic design principle used in the BYD website.

Atomic Design Principles for scalability and modularity

Following the atomic design methodology, we broke down our layout components into their smallest, most elemental forms, akin to atoms. This granular approach facilitated modular design, allowing me to construct interfaces from these fundamental building blocks.

An example of the figma prototype done.

Prototypes for defining userflows and interactions.

Userflows and prototypes served as a guiding light to the developer team, to ensure consistency for future and previous established logic.

📱 Great mobile experience was a must

I aimed to provide users with a mobile experience that is not only functional but also delightful, ultimately enhancing user engagement and satisfaction.

📱 Great mobile experience was a must

I aimed to provide users with a mobile experience that is not only functional but also delightful, ultimately enhancing user engagement and satisfaction.

📱 Great mobile experience was a must

I aimed to provide users with a mobile experience that is not only functional but also delightful, ultimately enhancing user engagement and satisfaction.

💎 Outstanding results

100+

registered licence plates in just under 2.5 months

More information

100+

registered licence plates in just under 2.5 months

More information

100+

registered licence plates in just under 2.5 months

More information

💭 Time to reflect

This website project has underscored the crucial role of client alignment in achieving success. By closely collaborating with our clients, we ensured that their vision and requirements were thoroughly understood and seamlessly integrated into the design. This alignment fostered clear communication, streamlined decision-making, and enhanced mutual trust, ultimately resulting in a product that not only met but exceeded client expectations. The project's success demonstrated that client alignment is not just beneficial but essential for delivering impactful and satisfactory outcomes.

🎉 Team credits

Some of the extraordinary people behind this project.

  • Tiago Ferreira (Tech Delivery Manager)

  • Ivan Hirskyy (Front-End Developer)

  • João Vasconcelos (Front-End Developer)

  • Bruno Braga (Tech Lead)


And many more…

Designed in Figma and implemented in Framer by Daniel Marques.

Designed in Figma and implemented in Framer by Daniel Marques.

Designed in Figma and implemented in Framer by Daniel Marques.