PROJECT
Improving the company website’s information architecture to help increase visitor conversion rates.
OVERVIEW
Details
Website Design, Figma
Team
Thomas Herlem & Myself
Role
UX/ UI Designer, Content Writer
Timeframe
14 days
THE CLIENT
THE PROBLEM
Although a successful international e-commerce player for over 15 years, BMS had lost website traction from April to June 2022.
The number of website visitors had decreased over the past 3 months with 20% folding after the hero banners of the main pages.
This also meant the necessary CTA functions on their website were being overlooked, costing them potential leads signing up for a demo or free trial of their products.
Boostmyshop, is an optimisation software company, helping SME clients manage their online businesses more efficiently and increase sales.
They offer two main solutions that perform different functions:
THE CHALLENGE
BMS wanted to understand where and why the website was underperforming and come up with an aesthetic and functional solution that would help:
Increase the conversion rate of CTA functions e.g Book a Demo, Register for a free trial
Help potential clients quickly and efficiently understand the products offered
OVERVIEW
In the kickoff meeting, we outlined a roadmap, set up check in points with BMS clients and applied a Scrum Sprint framework.
Due to the 14 day timeline of this project, we focussed on improving the information architecture of the website’s key pages and their main solutions: My Fulfillment and My Pricing.
For this we followed the double diamond design process.
To get a better feel for the website and its overall usability, we performed a Heuristic evaluation of the main pages and some that were not in scope. This set us up for the next stage in our discovery phase: Interviews.
THE INTERVIEWS
Conducting interviews with existing customers for feedback on the website however, quickly made us realise that these were not our target audience.
Because these clients had been subscribed to solutions for over 3 years and understood how the products worked they weren’t in need of a demo or free trial.
And they certainly weren’t the reason why website numbers had fallen:
“I have never been on the website”
Game Store
France
SME
“I am unaware of any promo products on the website”
Racing Drone Store
USA
BMS’ international sales manager confirmed that existing customers raised tickets directly with technicians or emailed customer service if they experienced issues with the product.
In other words, they weren’t turning to the website for answers.
"The customers who reach out already have knowledge about the supply chain so we ask them the problems they face in supply chain and how BMS solution can help them solve."
International Sales Manager
Boostmyshop
What we gained from these interviews instead was valuable context around BMS’ clients. Most were small to medium enterprises and CEOs played active roles in searching for potential e-commerce solutions online.
IDENTIFYING OUR USERS
We identified our target users as anonymous online visitors, who use the website as a source of information and potential marketplace.
To better understand how they interacted with the website, we analysed data from BMS’ Heatmap, from the last 3 months (April - June 2022).
The key takeaways from our research revealed:
Visitors were specific in their search categories on Google, looking up “Repricer” and “OMS,”
but were time restricted in their research, spending less than 3 minutes scrolling through the website.
40% of visitors folded after the second banner of each main page.
Visitors were conscious of their budget with most clicks on Price Plans.
The data collected offered visual examples of user pain points as well as their needs when interacting with the website. All of which we identified as potential Design Opportunities.
DESIGN OPPORTUNITY
How might we help prospective customers efficiently navigate the website, understanding key e-commerce features and help BMS increase potential leads?
THE COMPETITORS
If 20% BMS visitors folded after the hero banners, we had to take an in depth look at their main competitors to see how they displayed their products.
All three competitors emphasise the hero image in their home page banners to promote their solutions. They feature product shots, slogans and CTA buttons to Book a Demo.
This is not dissimilar to BMS’ website however we felt inspired to create more exciting visuals that could quickly explain and attractively display their main solutions.
IDEATION
Taking all of our research findings into account, we sketched out how we could visualise the home page banner as a promotional tool.
An idea we experimented with at this stage was featuring BMS’ main products on one page, incorporating a feature from a collaboration with another company, Mirakl.
With our second variation however, we removed the Mirakl collaborative feature from the Hompage to avoid any unnecessary confusion between the product and the other main solutions.
Instead, we promotes Mirakl’s partnership independently within the My Pricing page.
THE STYLE GUIDE
Lastly, creating a guide of the website’s existing styles ensured consistency in our redesign.
This helped us identify fonts, text sizes, buttons and the correct colour palette to use for highlighting key features.
THE SOLUTIONS
We identified 5 key problems in the website and created design solutions to transform Boostmyshop whilst keeping in mind the company’s business goals: increasing conversion rates
Overload of information
The home page, My Fulfillment and My Pricing pages were too long
Users had to vertically scroll for an unnecessary amount of time
Technical Language
Written by Web Developers, the content felt too heavy to read and the website impersonal
Less is More
Rearrange the information architecture of each main page to include only key functionalities of each product
Transform the home page into a window shop promoting the two main solutions and their prices on the hero banner
Encourage the visitor to “click to find out more” engaging them with relevant CTA functions
Its all about the User
Include user-centric language that targets the visitor directly e.g. “La solution cloud omnicanal ERP adaptée à vous!”
Adding images of real humans interacting with the solutions features offers a human touch
Inconsistent Content
The main solutions had assigned colours, pink and blue, but these were used inconsistently across the website
The pages of My Pricing and My Fullfillment differed in length, layout of information and image displays
Colour the differences
Utilise the accent colours to highlight each solutions’ key features and relevant images on each page
Pink and blue CTA buttons with the same command i.e. Book a Demo, Click to Register, offer a visual contrast that is easy to understand.
Frustrating Registration Process
Following a CTA function took users to separate pages where they had to input their details
Empty spaces on these additional pages were filled with more information on each product that didn’t feel necessary
One click is all it takes
Sign up boxes as pop ups overlayed on the current page
This reduces the frustration of inputting details and automatically closes to the current page as soon as the visitor has completed the forms
Static Website
The continuous vertical scrolling and linear layout makes it tiring for the user to sift through all the information on the screen
Give it Movement
Implement horizontal carousels for article and review components
Add simple custom animation for each page i.e. fade and bounce in to create a dynamic feel and alert the viewer to each product
Check out the high-fidelity prototype here to see these solutions implemented in our redesign!
REFLECTIONS
This was an exciting and stimulating challenge where I gained valuable first hand experience working as a UX Designer with a company and balancing the goals of the business with our research findings and user needs.
Working with a Scrum Sprint framework proved crucial to the success of our project, demonstrated also by our participation in the Hackshow.
The greatest challenge proved to be identifying the correct user, especially after having put the effort in to interview the wrong target user.
This oversight may have been prevented earlier on during a checkpoint, however, discovering the mistake ourselves gave us a deeper understanding of existing clients and allowed us to ask the right questions to the SME which led us to truly exciting revelations through data.