Envisioning a new e-commerce site.
This case study outlines the entire process involved in revamping the full e-commerce site experience of Onlinemetals.com.
Overview
Who is Online Metals
Online Metals is a small/medium (10-50 employees) e-commerce company at the time of this project.
They were acquired by Thyssenkrupp, a german metal manufacturing group. Online Metals is specialized in providing small quantity cut-to size materials for individuals and organizations of any size.
Online Metals was promoting the following services
Knowledgeable, friendly customer service
Account features that support professional level needs
Rewards for spending more - preferred pricing & discounts, email discounts
Continually growing inventory to meet more customer needs
Problem Statement
Why is this new experience needed?
After their acquisition by Thyssenkrupp, Onlinemetals.com needed to be more competitive and grow its business exponentially
The site was currently built/coded on ColdFusion. That platform was not capable of supporting further features
Thyssenkrupp had chosen SAP as the new e-commerce platform and wanted to use Online Metals new experience as a test
Online Metals e-commerce site was looking outdated and lacked visual direction
The site was becoming too complicated and confusing to navigate and buy from
The product database needed to be redesigned and re-organized to connect to the new platform
Scope and roles
Scopes and Constraints
Small budget, tight deadlines, you know the drill
Small/medium company with limited budget
Project turnaround : 3 to 4 months from first meeting with client to final design delivery
18,000 Product SKU’s at the start of the project
They already had a team of outsourced developers located in India
There will be no customer research or interview outside of the marketing study and personas developed prior to starting this project
Create a full e-commerce experience for mobile, tablet and desktop
I’m a team of one on the creative/design front
Roles and Responsabilities
Michael : Creative direction, UX/UI product design and project management
Ryan: Production designer - redlines and design specs
Michelle : Marketing Manager and main point of contact
Pragati group: Development team from India
Tools
Sketch
Invision
Excel
Notes
Audience and Personas
Persona 1 - Pro Buyer - Pete Barton
Dedicated Purchaser for his aerospace focused company
Efficiency, precision and reliability are highly valued
Has international clients that he sells to on a tight deadline
It is Petes’ jobs to find the best quality precisely matched items as quickly as possible. Price is important but not the most important part
He relies on suppliers he trust and needs good product information, specs and mechanical details to inform his choice
He likes to keep himself informed about any changes that might affect his ability to get the products he needs
Persona 2 - Shop Guy - Sal Green
Central in the small business he works in - Pro Machines
He is going to do the books and the machining, fabricating and building
His business is mature and profitable but not likely to grow in size with a steady stream of projects
He needs fast shipping for faster turn around on his projects to get paid
He knows what he is looking for in materials. He will likely stock-up materials when purchasing to do multiple jobs with similar materials.
He is price sensitive, he looks for better deals and usually will be part of a reward program to save as much as possible
Persona 3 - Maker Mary - Mary Munroe
As an independent designer and creator for small furnishing and lightning fixtures, her company’s clients are mainly architects and designers working on commercial projects
She is tasked with creating products that meet specifications and will showcase skills and garner accolades
She is price sensitive in her material choices. She is still exploring the potential of different types of materials
She relies on suppliers that give her the straight scoop and understand that she is working on a scrappy budget
She is monitoring for niche blogs and social media and trend watching services
Process and what I did
Identify the good, the bad, the ugly
The site had some elements that were useful
The homepage was working and offering all sorts of clickthrough points
Top navigation was clear
Side navigation offered some good additional information options
The top material module was offering some additional “direct to product” links
Identify the good, the bad, the ugly
The pre -product detail page offered low value to customers
A “pre-detail” page added an obstacle between seeing a product and being able to add to cart
No list page presenting products and CTA to add products to cart
Apart from going to the product detail page it was not providing a clear CTA to purchase
It felt very repetitive, redundant and was just there to parse the large amount of SKU’s available
Inconsistency when it came to images and diagram annotations
Identify the good, the bad, the ugly
The product detail page was hiding valuable information behind tabs
The qty and “Add to Cart” button were too low on the page
The page was very basic and could offer more information of value to the customers
The site and pages were targeting two out of three of the personas described
The layout was not mobile friendly
The site looked visually outdated
Identify the good, the bad, the ugly
No search function or way to find a product fast without having to click deep to a specific material or shape landing page
The cart was also part of the checkout - an unconventional cart to checkout flow
Each step was a separate step with no way to go back in the process unless using the back arrow
The site was not responsive or mobile friendly as a whole
Identify the good, the bad, the ugly
There were 18,000 SKU’s to go through
Lots of “deep” clicking to find and purchase one product
No real product information available unless you were willing to “dig” through multiple layers to find it
Information was separate from Shop-able pages
As a user you had to already know precisely what you were looking for and wanted to buy
No way to easily start a new search or change your mind
Colors, Typography, Layouts used throughout were old, clashing and unclear in their function
No Design System in place
Let’s do this! Assess, manage, inspire
Assess - Identify and Streamline Flow
Creating a match between business needs and site architecture
Met with in person with client to get a sense and define the overall site flow that would make respond to their business needs
Started an inventory of all pages needed and grouped them in sections that made sense
Assess - Inventory of all necessary pages
Accounting for all pages, categorize and group
Manage and Collaborate
Collaborating to define roadmap and sprints
I collaborated with Michelle to discuss groups of pages needed to be delivered as sprints
Several meetings with Michelle and the development team were necessary to define and organize sprint cadences as we worked through a mix of agile and waterfall process
8 Sprints
Plan to deliver in 3 months
Inspire - Competitive research of similar e-commerce
Inspire - Colors and typography
Getting a feel of the company and industry
...There are always more questions
As the project progressed and I started wireframes more questions came up
Wireframes - Round1
Balancing simple pages with more complex pages to create time
During the manage part of the process I was able to gage and categorize which pages would be complex versus the ones that were simple
Here is a summary of all the deliverables
Navigation
Header
Footer
Homepage
Material landing pages
Shape landing pages
Product category landing page
Product detail pages
Product listing page
Cart and mini cart
Checkout path
Sign-in and Password Path
Quotes Pages
“My account” pages
Wireframes round 1 with Client Notes
Wireframes Round 2
Design System and components
Developing components are essential to any large scale projects
From the beginning of the project, I initiated the creation of a series of reusable components.
I began by working on the fundamental building blocks or atoms of the system.
Colors
Typography
Buttons (primary, secondary, tertiary, links)
Input boxes
Containers
As I progressed towards more detailed and refined designs, I transformed many elements into modules that could be applied across multiple pages. Developing this system through iterations allowed me to establish consistency in the overall user experience.
Final Designs
Homepage
Product list pages
Product detail page
Cart page
Checkout page
My Account pages
Outcome and results
Many, many pages and the SAP platform
The complete redesign of the e-commerce experience was completed in 4 months, despite the addition of new pages and redlines.
A total of 1000 pages were designed, with close to 500 pages being redlined, all delivered on time, with the final batch completed by the beginning of September.
As of April, the company was still resolving some content-related issues.
Online Metals faced challenges in integrating the product database, backend, frontend, and the SAP platform.
Additionally, the company needed to establish an image library but lacked a clear plan to do so.
Due to difficulties in setting up the SAP platform, the site was eventually launched in July, 9 months later than originally planned.
Launching the new experience
In the absence of customer interviews conducted prior to the launch, I recommended adding a Hotjar feedback button to the website as an initial move towards organizing customer interviews, enabling customers to provide their feedback on the new experience.
Overall, the new experience received positive feedback.
Customers described it as "fresh" but highlighted the need for additional functionalities.
The website's navigation was significantly improved, enabling customers to locate products more efficiently.
The new launch was only minimally promoted through emails, which caught the Online Metals customer base by surprise.
The first few months post release
By using the hotjar feedback button, the company learned that customers were not fond of significant changes or surprises.
As a result, adjustments were made to various pages on the website to bridge the gap between old and new experiences.
This new approach led to a 66% increase in EBIT and a 45% growth in Billings year over year.
Despite facing challenges, the company managed to leverage the positive outcomes to establish a new process based on design thinking principles.
Through customer research and interviews, customers now play a central role in shaping the development of features and new products.