E-Commerce platform for ROCKWOOL Group
ROCKWOOL Group is an industrial company that uses the natural power of stone wool technology to enrich modern living.
UX Designer at Vertic working alongside the UX Lead of the project. I was responsible for the Information Architecture, Competitor & Best Practice Research, Wireframes, Interactions and creating solutions that align with the business strategy and user insights for the My Accounts section of the platform.
December 2018 - March 2019: Discovery, UX, Visual Design and Implementation
July 2019 - August 2019: Platform Optimizations and UAT Testing
A responsive E-Commerce platform for ROCKWOOL group.
The goal was to design an E-Commerce platform for three brands including ROCKWOOL, Rockfon, and Rock Panel. We needed to leverage business needs and users insights to launch the pilot in France but needed to consider the needs of the different markets. KPMG was the development partner for the UX and Visual Design team to validate all technical capabilities and interactions.
Understanding the Problem
Creating a scalable solution across all regions that would accommodate the needs of different users.
Complex checkout flow
Existing customers need a lot of flexibility in placing orders for different dates, quantities, times and addresses. Often times customers will split quantities of the same product into different delivery dates. But there are a lot of variables that impact placing an order such as the truck type and the quantity to fill a truck before their order is placed.
Often times users will place an order but have to go back and modify the date, quantity, etc. Unfortunately, existing customers always have to rely on customer service to make modifications which is not ideal for customers that need more flexibility. Customers don't have a way to track their order modifications.
Complex order management
Customers need a simple way to track the status of their order because some products may have different delivery dates.
No track and trace capabilities
Rockwool has full vision of the process until the product leaves the factory, after that there is no insight into the status of the shipment. For the customers, this is important information to have but Rockwool isn't able to provide it because in France all deliveries are made through external carriers.
Delivery addresses are not accurate
Delivery drivers are often getting lost trying to drop off shipments. A building site may not always have an actual address and even though providing latitude and longitude coordinates can be helpful for the divers. Those coordinates may not always reflect where the drop off location actually is for that shipment.
Various languages and markets
For each market there are different business needs that need to be accounted for. Although we were designing for France, we had to consider the user and business needs for various markets.
Building a simple and intuitive
experience for all users.
The 6 persona groups
There are 6 key groups of personas for ROCKWOOL that exhibit similar intent, hold similar roles, and have similar information needs.
There are no direct competitors for ROCKWOOL in the French market. The goal of the platform is not to sell more but to offer simplicity and an intuitive experience for customers.
The e-commerce platform needs to be a core model with only translations per country being different but having a streamlined experience across all regions and markets.
Flexibility in making modifications to orders.
Agile process in collaboration with a development partner.
The UX Team used Intershop which is an ecommerce platform as the foundation for the project. We worked with the development partner KPMG and ROCKWOOL Group to understand what needs to be defined in the functional requirements based on user insights, the ecommerce platform out-of-the-box capabilities and potential internal business processes that ROCKWOOL Group needs within the ecommerce platform for the B2B procurement users. The UX team and KPMG worked in parallel to meet the development deadline but faced these constraints:
Functionality constraints due to short development timeline.
Aligning communication across the client, agency and development partner.
Working in various time zones.
Defining the sitemap and user flows.
In order to inform the sitemap we had a workshop to map out all of the potential tasks a user would be doing on the E-Commerce platform. From there we synthesized and mapped out each page of the sitemap using Axure. We continually developed the sitemap throughout the project and would present the changes to the business. The business provided us with the product categories that would be used across all three brands.
Each user flow illustrated entry points points and how pages are inter-connected. As well as various path the users can navigate in the new E-Commerce based upon the platform capabilities and subsequent systems related process flows defined by ROCKWOOL Group and their implementation partner.
Validating the designs.
Validating designs with users, stakeholders and development
Our process was agile and we worked in sprints with KPMG. Throughout each process milestone, we met with KPMG and the ROCKWOOL team to test, validate and then iterate based on learnings from the business and users.
A new E-Commerce for ROCKWOOL Group aligning with the complex needs of the users and business.
When a user registers to the E-Commerce platform there needs to be a way for the user to select whether they have an existing customer number or not. If they do have an existing customer number, the RockCommerce Database must be checked whether that ID exists. This is because an admin user may have already created a RockCommerce account associated with the customer number. I chose to use radio buttons for the user to select whether they had a customer number. Depending on what the user selects there are different fields for the user to fill out.
User management permissions
Admin users need to be able to assign users access to different sold-to accounts. Sometimes these accounts can be over 200 accounts. The list of cards shows different sold to accounts. There is a max amount of 3 rows of accounts, the panel changes into scroll if the max amount is exceeded. The user is able to use search as a way to refine the results. A user can select all to assign users access to all sold-to accounts or a user can select individual accounts. As a user selects a card, the total selected amount will update.
Users log in to the E-Commerce platform and can manage everything related to their account. Depending on the user role information may be hidden on the dashboard. I designed the dashboard for the admin user but had to consider how the page adapts depending on the user role. At the top of the dashboard the user gets an overview of all of their account financials and links to manage their account. The rest of the dashboard showcases a breakdown of their recent order and invoice activity, features promotions and shows users their recently purchased products.
Order detail page.
Users need a quick and simple way to access all of the actions related to an order. I added a quick actions button for users to complete key tasks. The list of options are organized by actions specific to managing an order at the top and actions specific to all of the billing information at the bottom. I prioritized order modification at the top of the list because about 90% of all orders are modified and this is an important feature that needs to be accessible within an order detail page.
Since delivery drivers are have a difficult time finding delivery locations, it was very important to have a geolocation functionality within the E-Commerce platform. This functionality would be accessible to users when they are in the checkout process and when they are editing or adding a shipping addresses within their account settings. This functionality is meant for users to specifically verify the building drop off location. A a user types into address line 1, city, region, or the postcode this triggers the map to update. Or the user can click anywhere on the map to drop a pin or long press on the screen for mobile and tablet devices. As the user selects a point on the map the address line 1, city, region, postal code, latitude and longitude should update. When a user selects a point on the map, there is a small overlay to indicate to the user the address details of the point they selected.
The new E-Commerce platform successfully met project objectives.
Numerous hours of brainstorming, careful planning, sketching, designing and developing has brought the results desired for the ecommerce platform. We were proud to present the new face of the product to our clients. The final result of the ROCKWOOL group ecommerce platform is a functional, scalable and an intuitive ecommerce solution that meets the needs of each user role. Before launching the platform to other markets I continued to work with our development partner KPMG to optimize the platform.
What I've learned throughout the process.
Continuously collaborate with development
Often times UX and Development may end up working in these siloed paths. But, it is so important to constantly keep that communication and validate work with development. Although it is not just about validation, it is also about understanding each other. UX has insight into what the needs are for the user and business. Development has more insight into the technical capabilities, limitations and business needs. Understanding each other's needs overall will allow for better collaboration and to find a solution that works for the user, business, and the whole team.
Thank you to everyone for making this project happen!
UX Director: Stacey Eggiimann
UX Lead: Fiona Baudner
Visual Designers: Michaela Hampachelova & Bertil Abildgaard