top of page
Project context
Case study
CentrumXP Store
E-commerce UX/UI
A brief context
The CentrumXP store is primarily directed towards B2B customers. The assortment mainly consists of software, hardware, and training related to Microsoft applications. The store itself coexists with the CentrumXP portal, where experts share their professional knowledge
and skills.
The CentrumXP Store was established based on the Onex Store, which was dedicated to B2C customers. This approach allowed for a faster Minimum Viable Product (MVP) implementation and the launch of the new store. Despite this clear advantage, various issues arose due to the lack of visual coherence with the CentrumXP portal itself, to which the new store was meant to relate. As a result, I was tasked with the challenge of harmonizing the store with the CentrumXP portal in terms of UI, as well as identifying customer pain points that were adversely affecting perceptions and experiences associated with the store.
Result
The UX audit allowed us to detect issues on the store's website, both in terms of UX and UI. I found broken links, visually inconsistent elements, incorrect redirects, problems with product listings, and improperly implemented interface elements. Along with these issues, I provided solutions.
User research revealed pain points. I observed moments that were not entirely clear to potential customers and caused them trouble. This made it easier to design something that actually needed improvement.
Main goals
-
Identifying customer pain points.
-
Identifying inconsistent UI elements on the website.
-
Enhancing and improving user experiences.
-
Design new sub-page views, improve home page and product listing.
My role and actions
My role and actions
-
Conducting a UX audit.
-
Conducting user research.
-
Competition analysis.
-
Wireframing.
-
Low Fi/High Fi mockups.
Stages of design process
RESEARCH
Defining problems, business requirements, collecting data.
TESTING
After implementing the project according to the provided prototype, I proceed to testing
the website.
DESIGN
Creating wireframe layout,
tweaking the design until the layout and the structure are worked out with all the ideas incorporated based on the requirements.
LAUNCH
When the website has been thoroughly tested and all corrections are already implemented, it's time for the launch.
DEVELOPMENT
When the prototype is approved, it goes to the developers.
ANALYZE
After launch it's necessary to conduct an analysis of heat maps, click maps, user flows, and conversions.
Research (UX audit and moderated user research)
UX audit - Heuristic analysis
The goal of the audit was to increase conversion rates, improve user experience, and extend the time a potential customer spends on the store's website.
One of the first activities that took place when starting work on improving the CentrumXP store's website was conducting a UX audit. Such a diagnostic tool allows for the assessment of user interaction quality with the e-commerce platform by examining various aspects of their experience. In this way, we obtain an objective view of the interface and an evaluation of how effectively it meets the expectations and needs of visitors to the site.
I chose the heuristic methodology, which is a method based on evaluating the site for compliance with accepted principles and best practices in the UX field. I used the most well-known usability heuristics by Jacob Nielsen.
Areas examined for compliance with heuristics
Navigation
Evaluation of the readability
of the website, intuitiveness
of navigation, menu structure, links, and breadcrumbs.
Searching
Evaluation of search efficiency and accuracy, filtering. Checking the accuracy of product recommendations.
Information Architecture
Analysis of the organization,
clarity and presentation
of information on the site.
Interface Design
Evaluation of the interface design, including colors, typography, icons, forms,
and buttons.
Purchase Process
Analysis of the clarity, simplicity, and efficiency of the purchasing process, including the cart, payment forms, action buttons, and confirmations.
Final Report
During the audit, any identified issues were gathered in a document. Each issue was described, included a screenshot, and was appropriately linked. Collecting this type of information assists in easier navigation and facilitates further work.
Moderated user research
Another form of research was user testing. I managed to recruit 5 respondents from my immediate environment, and in the end, 4 people actually participated in the study. Participants who took part in it had no previous experience with the CentrumXP store. This allowed me to observe fresh reactions and attempts to reach the goal unclouded by previous experiences.
Task-based study plan
-
Introduction - establishing contact with the respondent and familiarizing them with the situation, encouraging them to share conclusions and thoughts - about 10 minutes.
-
Task - the content of tasks to be carried out independently by the respondent under the supervision of a moderator - about 30 minutes.
-
Summary - a final interview with the respondent about their impressions of using the product - about 10 minutes.
Tasks for respondents
Create your account, log out of it, and try to log in again.
Create your account, log out of it, and try to log in again.
Find product
A on the store page.
Find product
A on the store page.
Find a way to contact technical support.
Find a way to contact technical support.
Compare
product A with product B.
Compare
product A with product B.
Purchase the selected product
as a guest.
Purchase the selected product as a guest.
Selected feedback from respondents
-
The main page was chaotic and monotonous - respondents quickly resorted to using the search function.
-
Difficulty in finding the CTA for registration and guest purchase. The right side of the interface looked like an advertisement.
-
The search engine did not list the relevant products in terms of hardware equipment.
-
The product listing was chaotic.
-
The laptop price on the product listing was different than the price on the product card.
-
Respondents did not know how to finalize the purchase of the product, as they did not notice the required checkbox and felt embarrassed.
Information architecture
After conducting an audit, user research, and analyzing the results, I began working on a new information architecture that will assist in navigating the project in its subsequent stages.
Below, I have included a sample information architecture.
Wireframes
Wireframes
After preparing the information architecture, I started working on wireframing. I began with initial sketches, drawing out the layout of the page on paper, and then proceeded to work in Figma. During the iterative process, we managed to develop the final layout.
Final designs
Final designs
During the design of the new views, I relied on the design system that was already in place at CentrumXP. The new prototypes are based on feedback from users who participated in the research, a UX audit, and a competitor benchmark. The pages I designed are still awaiting implementation.
Homepage
So far, the homepage looked monotonous. Carousels with products took up 80% of the view. There was a lack of color and elements that could diversify the design. Thanks to the feedback from respondents and looking at the scroll map, I became convinced that the homepage did not encourage scrolling.
I conducted additional research in the form of competitor benchmarking, found a lot of inspiration, presented it to stakeholders, and began drafting mockups.
-
The slider with advertising banners also contains captions of promotional actions, so customers will know what the promotion is about. This increases the chance of them taking an interest, as we're not just relying on a potential customer stumbling upon a particular banner.
-
The next section features bestsellers - the store has products that are most often chosen. The purchase rate of these products is much higher than the rest of the assortment. By pushing top products to the top, we can shorten the buying journey of a potential customer. Additionally, this section can help make a purchase decision, as there's a reason a particular package is a bestseller. B2B, in particular, is guided by recommendations and aims for trusted and proven solutions.
-
To add variety, below the bestsellers I introduced a simple instruction / information about the process that will take place during the purchase of the software. This shows how simple the process is and dispels doubts.
-
The next section contains colorful tiles leading to product listings. These elements draw their color scheme from the product covers themselves, so they look consistent. The products photo itself is ultimately the product in a given category that enjoys the greatest popularity and interest.
-
Next, we have a small bar with information about the store, which the business found interesting and important.
-
Right after the products, we have carousels with recommended products.
-
On the homepage, we also want to emphasize being experts in the field of Microsoft, and since CentrumXP is mainly associated with valuable content from the world of Microsoft technology, there should also be a section referring to articles and the CentrumXP portal itself.
-
The penultimate section contains trusted reviews. By using TrustedShops, we can boast great opinions about the store and the support offered by the CentrumXP brand. Customer reviews further strengthen the brand's position and show transparency. If someone has not previously dealt with the store, they can be sure they are in the right hands.
-
Finally, I included a contact section (consistent with the contact section on the modernized product card by the other designer).
Delivery subpage
A simple redesign and organization of content on the subpage. Previously, the subpage looked unattractive. It was entirely made up of text only. The current proposal is easier to understand, and the most important aspects are prominently highlighted, which helps in quickly locating the most needed information (prices and delivery method).
Product listing
During the UX audit I conducted before starting user research, I noticed a mismatch of product listings under given product categories. When clicking on the categories "For Business", "For Home", "For Schools", "Services", the user was redirected to a very chaotic listing, which not only contained all product categories but also displayed suggested products at the very top.
The navigation was severely disrupted and left users confused. I decided to improve navigation among categories and subcategories of products. To this end, I enhanced the category listing on the left side and added the ability to navigate through categories using tiles. Each tile contains an icon of the given product. This will make it easier to associate a given category with the offered products/services.
I also improved the product cards themselves. I organized their layout, which will allow for easier exposure of content that should be available right on the listing. Depending on the type of product displayed, there will always be a packshot, product name, its most important features, price, potential licensing period, CTA, and the option to add the product to a comparison tool.
Registration
The new design is clearer and simpler. During the research, respondents admitted that they didn't read anything on the right side and didn't even remember what was there. They considered the right part of the interface as an advertisement. Therefore, the most important information related to the benefits of creating an account was presented in a non-imposing and minimalist manner. Password validation was also improved. Previously, it was unclear what the messages referred to that appeared after entering characters into the password input.
Login
The login process underwent similar changes to the registration itself. I focused on simplicity and minimalism. No unnecessary content and images.
Purchase as a guest
Here, similar changes were made. In one of the final stages of the purchase path, the customer can choose to purchase as a guest. Previously, this option wasn't noticeable. Such an option is often the first choice for many. Since we want to build a customer base and encourage them to create accounts in our store, we primarily promote account creation. Additional options are secondary, but they are still easily noticeable.
Password change
The design has been updated in line with how the new login, registration, etc., will look. Password entry validation has been improved and should be more understandable.
bottom of page