Base London Homapage Revamp

Base London Homapage Revamp

Footwear brand based in London, United Kindom

Footwear brand based in London, United Kindom

Team

Team

1 Project Manager

1 Marketing Manager

1 UX/UI Designer

1 Developer

1 Project Manager

1 Marketing Manager

1 UX/UI Designer

1 Developer

Role

Role

User Research

Web Design

User Experience Design

User Research

Web Design

User Experience Design

Tools

Tools

Figma

Figma

Timeline

Timeline

Feb - Mar 2024

Feb - Mar 2024

So, what project is it?

So, what project is it?

Project Overview

Project Overview

Base London is a London-based footwear brand primarily targeting British men with a passion for high-quality shoes. The client sought to reinforce their bold and premium brand identity through this project, so I focused on creating an authentic website design while ensuring a seamless user experience.

Base London is a London-based footwear brand primarily targeting British men with a passion for high-quality shoes. The client sought to reinforce their bold and premium brand identity through this project, so I focused on creating an authentic website design while ensuring a seamless user experience.

Quick Overview

Quick Overview

Strengthen brand identity of Base London

Strengthen brand identity of Base London

Quick Overview

Quick Overview

Enhance user engagement and browsing efficiency

Enhance user engagement and browsing efficiency

Understanding Our Client Need

Understanding Our Client Need

Base London is a well-known premium footwear brand in United Kingdom, established in 1995. As a premium footwear brand in London with long history, Base London has been aiming to convey bold and premium brand identity to to their male customer base.


Therefore, our client wanted to strengthen this identity on their website to have more opportunities to connect with their potential customers. They aim to reinforce their strong brand identity through this project and affect business growth eventually by not only providing a visually appealing web design, but also delivering seamless user experience where potential customers can easily find the product they are looking for.


The core objectives of the project included reinforcing the brand's identity and increasing user engagement.

Base London is a well-known premium footwear brand in United Kingdom, established in 1995. As a premium footwear brand in London with long history, Base London has been aiming to convey bold and premium brand identity to to their male customer base.


Therefore, our client wanted to strengthen this identity on their website to have more opportunities to connect with their potential customers. They aim to reinforce their strong brand identity through this project and affect business growth eventually by not only providing a visually appealing web design, but also delivering seamless user experience where potential customers can easily find the product they are looking for.


The core objectives of the project included reinforcing the brand's identity and increasing user engagement.

What do potential customer want, and why?

What do potential customer want, and why?

User Research

User Research

We conducted interview with 5 potential customers to identify the main pain points to comprehend the difficulty they encountered in exploring products and the impression of the brand through the experience.

We conducted interview with 5 potential customers to identify the main pain points to comprehend the difficulty they encountered in exploring products and the impression of the brand through the experience.

Key Insight & Problem Analysis

Key Insight & Problem Analysis

Based on interview, I gathered key insights to identify the major needs of our targeted audience. Through this process, I figured out that the brand identity was not effectively conveyed and also, online shoppers highly value time efficiency and other customers' opinions when making purchase decisions.


With these isights, I came up with three problem definitions that connected user’s needs with expected outcome of this project, aligning with our business goals. With this process hereafter, I would have a deeper analysis of the three key points to consider to help me keep on track.

Based on interview, I gathered key insights to identify the major needs of our targeted audience. Through this process, I figured out that the brand identity was not effectively conveyed and also, online shoppers highly value time efficiency and other customers' opinions when making purchase decisions.


With these isights, I came up with three problem definitions that connected user’s needs with expected outcome of this project, aligning with our business goals. With this process hereafter, I would have a deeper analysis of the three key points to consider to help me keep on track.

How can I approach to solve the problems?

How can I approach to solve the problems?

Brainstorming

Brainstorming

Now I understood the need of our clients and potential customers, I decided to dive into the brainstorming steps to have concrete solutions.


I kicked off brainstorming by conducting current website audit to identify the space of future improvement and competitive analysis to understand how other websites communicate with their online shoppers. This process allowed me to visualize how I can approach this project, solving problems efficiently.

Now I understood the need of our clients and potential customers, I decided to dive into the brainstorming steps to have concrete solutions.


I kicked off brainstorming by conducting current website audit to identify the space of future improvement and competitive analysis to understand how other websites communicate with their online shoppers. This process allowed me to visualize how I can approach this project, solving problems efficiently.

First approach

First approach

Current Website Audit

Current Website Audit

Before conducting this audit, I divided the areas for improvement into three major categories to address both user needs and business objectives. By having a detailed website audit, I could identified specific areas for improvement and took the time to consider how I can change those. This process allowed me to picture how the site could be enhanced.

Before conducting this audit, I divided the areas for improvement into three major categories to address both user needs and business objectives. By having a detailed website audit, I could identified specific areas for improvement and took the time to consider how I can change those. This process allowed me to picture how the site could be enhanced.

Second approach

Second approach

Competitive Analysis

Competitive Analysis

I compared 3 premium men's footwear brands — John Lobb, Lacoste, and Ralph Lauren — to understand how they showcase their products and their brand identity. My goal was to see how these brands show their premium brand image and how their websites attempt potential customers from making confident decisions.

I compared 3 premium men's footwear brands — John Lobb, Lacoste, and Ralph Lauren — to understand how they showcase their products and their brand identity. My goal was to see how these brands show their premium brand image and how their websites attempt potential customers from making confident decisions.

After conducting a competitive analysis, I could be able to find common area of these competitors that can be adapted to this project. Therefore, I tried the following actions:

After conducting a competitive analysis, I could be able to find common area of these competitors that can be adapted to this project. Therefore, I tried the following actions:

Highlight specific line of products or promotions in the top banner with CTAs.

  1. Highlight specific line of products or promotions in the top banner with CTAs.

Include clear product information along with a save feature for easy user reference in product cards.

  1. Include clear product information along with a save feature for easy user reference in product cards.

Utilize layouts that effectively convey a luxurious brand image.

  1. Utilize layouts that effectively convey a luxurious brand image.

Solution

Solution

By gathering the insights that I gained during brainstorming stage, I have solutions to execute ideate homepage design.

By gathering the insights that I gained during brainstorming stage, I have solutions to execute ideate homepage design.

Enhancing Brand Identity: Implement bold, premium visuals, including full-sized images, rich colors (like deep reds), and striking typography to strengthen the brand's identity.

  1. Enhancing Brand Identity: Implement bold, premium visuals, including full-sized images, rich colors (like deep reds), and striking typography to strengthen the brand's identity.

Improving Product Exploration: Introduce intuitive navigation features, allowing users to browse products more efficiently and filter by options such as new arrivals or bestsellers.

  1. Improving Product Exploration: Introduce intuitive navigation features, allowing users to browse products more efficiently and filter by options such as new arrivals or bestsellers.

Attempting Call to Action: Place visible, action-oriented CTAs at key touchpoints, such as highlighting bestselling products and showcasing seasonal offers, to prompt immediate user interaction.

  1. Attempting Call to Action: Place visible, action-oriented CTAs at key touchpoints, such as highlighting bestselling products and showcasing seasonal offers, to prompt immediate user interaction.

How did it work and developed?

How did it work and developed?

Ideation

Ideation

Now that we’ve identified how to solve the key problems, it was time to visualize the solutions. To have better understanding the client’s needs, I created three different options for both the overall homepage design and the product card.

Now that we’ve identified how to solve the key problems, it was time to visualize the solutions. To have better understanding the client’s needs, I created three different options for both the overall homepage design and the product card.

Iteration

Iteration

Based on feedback that I gathered in our team and from our clients, I had a few opportunities to tweak design to represent clean and simple, optimizing user engagement.

Based on feedback that I gathered in our team and from our clients, I had a few opportunities to tweak design to represent clean and simple, optimizing user engagement.

And here we are!

And here we are!

Final Proposal

Final Proposal

A bold and premium homepage design for the Base London homepage, enhancing user experience and encouraging instant engagement.

A bold and premium homepage design for the Base London homepage, enhancing user experience and encouraging instant engagement.

Solution

Solution

Strengthening Brand Identity

Strengthening Brand Identity

Based on the client’s needs and insights from potential customer interviews, the brand image needed to reflect a bold and premium men's footwear identity. Hence, I mainly used a striking red colour palette which is Base London’s main brand colour, with clean and bold typography, and impactful imagery to convey a strong brand presence.

Based on the client’s needs and insights from potential customer interviews, the brand image needed to reflect a bold and premium men's footwear identity. Hence, I mainly used a striking red colour palette which is Base London’s main brand colour, with clean and bold typography, and impactful imagery to convey a strong brand presence.

Solution

Solution

Promoting the Brand - Bestsellers & Benefits

Promoting the Brand - Bestsellers & Benefits

To increase user engagement, the website highlighted the benefits of shopping online with Base London and introduced a section for bestsellers to attract users to browse more products, encouraging users to when they make purchasing decisions.

To increase user engagement, the website highlighted the benefits of shopping online with Base London and introduced a section for bestsellers to attract users to browse more products, encouraging users to when they make purchasing decisions.

Solution

Solution

Supporting User Efficiently Browsing

Supporting User Efficiently Browsing

Call-to-action buttons were strategically placed to enable users to quickly access new arrivals and bestsellers. Additionally, by adding colour options and product status labels, users can browse and compare products easily. Also, save and add-to-cart buttons will prompt user to show actions, enhancing the shopping experience.

Call-to-action buttons were strategically placed to enable users to quickly access new arrivals and bestsellers. Additionally, by adding colour options and product status labels, users can browse and compare products easily. Also, save and add-to-cart buttons will prompt user to show actions, enhancing the shopping experience.

Note:

This project was part of a marketing agency proposal for Base London. The designs presented here were proposed to address the client's needs, and are currently undergoing additional iteration processes within Base London for potential future implementation.

Note:

This project was part of a marketing agency proposal for Base London. The designs presented here were proposed to address the client's needs, and are currently undergoing additional iteration processes within Base London for potential future implementation.

What did I learn from this project?

What did I learn from this project?

Takeaways

During this project, I could deeply understand of the importance of having solid foundation of the project before diving into visualizing stage. To be more specific, the key takeaways were:

The Importance of Clearly Defining Problems: Identifying the problem definition prevents the project from going in the wrong direction which often happens when designers do not have clear goals. This way, it enables efficient development, not waste time for many times of revisions.

Value of Iteration: Although this project relied mainly on internal feedback since it was a proposal to an external company, the iterative process proved valuable for refining the design, allowing us to see the whole process from different perspectives.

Let's connect! —

Feel free to say hi to me 👋

Let's connect! —

Feel free to say hi to me 👋

Let's connect!

— Feel free to say hi to me👋