Advantage Web Redesign

To reimagine the old website for Advantage to develop a stronger digital presence

VIEW LIVE WEBSITE
DESCRIPTION
Web, UI/UX, Branding
When
January 2020 - Present
TEAMS
Web and visual designer (me), marketing director, project manager, web developers, SEO experts, and website writer
Advantage Group International is a digital consulting firm that helps global FMCG companies focus on B2B relationship building. Their clients include Walmart, Pepsico, Loreal and more.

In the past year, Advantage has made significant changes to its offerings by prioritizing digitization and innovation. Their digital presence needed a new strategy to market their new face, business offerings, and expertise.

In this case study, I will be focusing on the website redesign project and how I approached the problem with my team.

Project overview

The early year of 2020, Advantage embarked on a new journey to help businesses be better together. After the branding redesign in 2019, it was time for the website to re-align to the new business goals, new branding, and company values.

The website team

When you embark on this kind of journey, you need a diverse team. Me (lead designer), one multimedia designer, one UX designer, marketing director, one project manager, a group of developers, one website writer, and two SEO experts.

All images are photographed by me
1. DISCOVERY

Business requirements and pain points

To create the right solution for this project, we needed to start by revealing pain points and business problems. Since the business's CEO and stakeholders initiated this project, our team had several meetings with them to discuss and gather some pain points.

Key findings:

2. DEFINE

Identifying problems in the old website

Therefore, the user was not able to...

Competitor analysis

Our design team did a competitive analysis to gain insights into features, functions, flows, and feelings evoked by the design solutions of the competitors. Companies we  researched include Bain & Company, BCG, and McKinsey. One thing we found common between these three companies is that they publish a lot of featured insights about the FMCG industry. Knowledge is power - Their smart use of customer insights make it clear that they know what their customers, evoking the feeling of trust and knowledge. Therefore, how may we show Advantage is the leading advisor in B2B engagement by incorporating more insights and research we already have?

The evolution of the site map

I created site maps to visualize the organization and labelling of content to the website team. It is instrumental when I had to discuss this project with other company members, especially during the project's beginning stage. As you see below, the site map has changed since the beginning of the project because the business is growing rapidly, and we have to ensure the site stays up to date.

The evolution of the site map between 2018-present

Creating a user flow to illustrate the content's tagging system

The site is not complicated like an e-commerce site, but I created a user flow to clarify the content's tagging system as the system is tangled between multiple pages which are resources, media, blog, Infocus, and locations (currently being developed). This flow chart helped me tremendously because it mapped out the skeleton behind this system and ensured consistency across these pages and their filters.

A flow chart to clarify the website's tagging and content filtering system (2021 WIP)
3. PROTOTYPing AND USER TESTING

The ideation process

My ideation process started with sketches, low-fidelity wireframes, and high fidelity wireframes which were used for the user testing.

User testing
Our design team wanted to make sure the design works for everyone. Therefore, we did user testings with three internal associates and three external users to validate the prototype. An intro survey was sent to them before the user testing to evaluate how much they know about the business, how tech-savvy they are with navigating the web etc. Then, we asked each user to complete 11 user tasks, so validate the prototype’s usability, identify gaps in design, CTA, navigation, and the language we use to explain what we do.

Key findings:

Low fidelity wireframes
I used Nielsen's 10 Usability Heuristics as a guide to reflect upon the UI design of the new site, and created a UI guide

SEO strategy

SEO is a significant part of this project because we want our business to be more visible in the search engine to reach more potential clients around the world. To achieve more clicks and traffic, we have partnered up with Zuti, an SEO and creative digital agency based in Barcelona, to do keyword research for the business and provide SEO best practices expertise. The marketing director and I have taken on the responsibility to learn more about SEO and implement all the learnings.

4. DELIVERABLE

Repeat prototyping, testing, and SEO strategy

Although the live site has been up for almost a year now, the job is not done yet. Since the business is changing and growing every day, the website's need continues to expand. More features, product pages, written and video contents need to be included in the site. My job as the lead designer is to continue to improve the site’s usability, design and maintain the SEO strategy we have established in the backend.

5. BUSINESS OUTCOME

A 39% increase of quality leads from the website

In 2020, there was a 39% increase of inquiry submission forms and quality leads coming from FMCG clients. Comparing the inquiry forms between Jan - March 2020 vs 2021, this year is experiencing a 50% increase in inquiry forms. As a result of these positive outcomes, our team has been given more financial support to improve the website.

Comparison of the home page design between 2018 and 2021 (wip)
VIEW LIVE WEBSITE

Learnings