2022
UX Research
UX Design
UI Design
Interviewing
Synthesis
Prioritizing
Prototyping
Miro
Figma
Google Analytics
HotJar
Useberry
Unchained Robotics was founded in 2019 with a mission to simplify and accelerate industrial automation. We started off as an integrator providing machine vision automation solution and expanded into the marketplace business model in Q4 2020.
Redesign and elevate the look of the robot product page.
As a result of this redesign, we've seen an improvement of 7% in the exit rate, 43% increase of leads through the robot product page, and a decrease in number of inquiries for product specification details.
It all started by a complaint from the marketing manager about the quality of inbound messages from the livechat when users are in the robot product page. After looking deeper into how the page is currently performing and how users are behaving in that page, I have decided to redesign the robot product page.
of inbound livechats from robot product page are asking for robot specification, even though the information is already shown on the page
When we looked at Google Analytics, almost 50% of our visitors land to the robot product page from search results and online campaign. However, the exit rate is quite high.
The heatmap from HotJar shows that most visitors don’t scroll or even click the content below short description & price. From there, I hypothesize that users didn't notice that the page already provided robot specification
How will we measure if this redesign is a success?
Valuable time resource is saved when we don't have to answer questions about information that the users can find in the product page.
Drop in exit rate
Increased the perceived of value of the products through increased rate of engagement with the content.
To understand more of the problem space, I conducted usability testing with 3 of our customers who recently bought a robot in the last 6 months. The scenario involved asking users to walk me through how they use our website to find a robot to purchase, learn about any pain points they encounter and what improvements we could make to improve their experience better.
Product attributes
I synthesized a list of product attributes that users are looking for in a robot. Most importantly, they are looking for use cases and what components the robots can be used with.
User behavior
The users are comparing product specification by downloading the spec & comparing the windows side by side
In-page navigation is not prominent
Likely due to the location, users are not aware of in-page navigation
How users perceive the page
One user said "The page is very text heavy & doesn't spotlight the values of cobots worth tens of thousands of euros."
Similar products
Users couldn’t tell why these robots were recommended as ‘Similar products’, and they tend to ignore that section. Hence, it’s less effective in making them explore other products.
To understand the rank of importance of each robot attribute to a wider audience of users, I conducted a survey to visitors of the existing robot product page using HotJar. 21 users answered the survey.
Product attributes
The order of product attribute from the most important to the least important: use cases, suitable components, system compatibility and information about programming interface of the robots.
Not only did I do a competitor analysis of other products of the same category (robots), but I also did one for other consumer electronic products. The consumer electronic category was taken as an inspiration because the high competitiveness within the industry consequently raised the bar for exceptional digital customer experience. Therefore, I could learn a thing or two on how their product page is set up
With a clear understanding of the problem space and the competitive landscape, I started defining the order of information that we need to put in the product page.
In this phase, I sat together with the marketing manager and the sales engineer to prioritize the content that we’ll put. A cross-functional team collaboration was necessary because the solution has to fulfill several constraints: it has toh elp users make informed decision about the product for their automation process, and it has to perform well in SEO ranking.
For the ideation process, I started with looking at the product pages that I evaluated during the competitive analysis process. I created multiple rough sketches of the layout on paper and then translated the designs into Figma. Thanks to the design system that I have built, I can move from sketches to high-fidelity prototype in no time.
The design underwent multiple iterations after 2 rounds of design feedback from our in-house automation engineers and sales engineers.
The final solutions that would get sent for the validation process.
These changes brought solution to the issues found in the Understand phase.
Before
Likely due to the location, users are not aware of in-page navigation
After
The in-page navigation is turned into a left sidebar, which makes it more prominent.
Heatmap Before
Heatmap After
Before
As one user said during the interview, the existing product page is "very text heavy & doesn't spotlight the values of cobots worth tens of thousands of euros."
After
Elevated high-resolution imagery and product video emphasizing robots' capability when working on a use case.
Before
The specification only takes up a small section that's barely noticeable. It's also only showing a small percentage of the overall specifications, which is not detailed enough for engineers. Users always have to download the specification PDF to compare, or contact us via livechat about these specifications.
After
Users can see which other robots can be an alternative to the one they’re looking at, along with the main product attributes that are comparable between robots. All are provided without the extra steps/clicks.
Before
Users have no idea what use cases the robot is capable of carrying out. They have to get on a consultation call to inquire which components can be used with a certain robot & for a certain use case.
After
A list of use case for the robot & matching components, and its prices.
Before sending the design to development, I conducted usability testing with 4 users. They were recruited after they signed up using a form that was triggered when they spend >2 minutes on a product page.
The scenarios used were the same like in the first usability testing.
On one of the scenarios to observe how users would get in contact with us from the product page, we found that users were confused why the button "Enquire now" was disabled. It was a 100% fail scenario.
It turns out that the product has a variant that has to be selected before you can send an inquiry.
So, I decided to fix this by enabling the "Enquire now" button even when the variant is not selected, and then giving an error message that prompts users to select the variant first.
Before
"Enquire now" button is disabled and user could not figure out why & how to proceed.
After
"Enquire now" button is active, but when user clicks on it, they get an error message saying they should select a variant first.
Here are the impacts of the design in relation to the problem statement above.
increase of leads through the robot product page.
on the exit rate
inbound livechats from robot product page that are asking for robot specification details.
To ensure that we’re on the right track of problem solving, we should define concrete success metrics in the very beginning. By doing that in a redesign project, we don’t just elevate the product aesthetic, but we also make sure that the new design is valuable for the users and helps achieve business impact.
