UX Case Study - Ecommerce Store

Chemtech Logo Wht-01.png
The Project

Chemtech is a chemical supplier that was looking for an ecommerce store to sell their products online. I was the sole designer on this project and was responsible for taking it from concept to a working platform. 

Duration: 7 months

Method: Discovery meeting, Research, Prototyping, Photography, Hosting, Design, User testing, and Analytics

Tools: Adobe XD, Microsoft Excel, Wix, Google My Business, Google Analytics 

Starting Point

The client was in the Oil & Gas industry for 30 years and was dependent on that industry to survive. They started selling their product online via eBay and were starting to get traction on a new customer base. They weren't satisfied with the cost associated with eBay and wanted to reduce the money being paid to commissions. Removing the 10-12% they were paying per sale would keep their pricing lower than their competitors and not affect their margin of profitability. 

The Process
Arrow 1.png
Arrow 1.png
Arrow 1.png
Arrow 1.png
Arrow 1.png
Arrow 1.png
Arrow 1.png
Arrow 1.png
Arrow 2.png
Arrow 1.png
 
Discover

I met with both stake holders to find what they expected out of the site. One of the two would be the primary contact and decision maker (Ray). He shared with me his experience with eBay, and what he wants this site to do without the commission off each sale. He also gave me names of what he saw were their biggest competitors, and their advantage over them. For this meeting I created a project briefing form in excel that would allow me to get all the necessary information upfront. This would be referred to regularly when preparing to meet with Ray. 

Project Briefing Form
Chemtech Briefing Page.jpg
Chemtech Briefing Page.jpg
Research

I looked up each competitor Ray gave me, and went through their website, and purchasing process if it was available. Purchasing was all very similar, I would stylize it like Amazon or eBay. The sites varied from informative to vague, and clean to cluttered. The menu navigations was one thing I took away from one particular competitor as it was very smooth and well laid out. Imagery and terminology was another big take away. I was new to this industry so I learned from this research what some standard terms meant. 

 
Prioritize
Chemtech - Prioritize-01.png
 
Ideate

I compiled what I researched, what Ray and I had discussed, and added my own experience of online shopping into the mix and began to develop the fit, form, and function of this project. 

Organization is the key to long term success. I created two documents to assist in keeping everything organized.  An excel sheet called "Product List and Description"  and a word document called "Action Items List". These documents would be the tools that would be updated regularly as we built the website to keep us on target and avoid confusion. 

 
Product List and Description
Chemtech Product List and Options. .jpg
Action Item List
Chemtech Action Items List.jpg
Chemtech Action Items History.jpg
Prototyping

With the help of an Adobe UX kit I was able to create a prototype with ease. My background with Illustrator definitely helped me to navigate XD and use similar tools that I had used for the last 10 years. I ordered a course from Udemy that taught me the basics of creating links and presenting abilities that XD has. 

 
Chemtech Wire Frame Home Page.jpg
Chemtech Wire Frame.jpg
Landing Page
Catalog Page
Discuss

Ray was impresses and made the comment, "This is much more than I expected for this initial layout" He had questions on categorizing and menu options as he had current customers that were in the Oil & Gas industry and wanted a separate category for those products. This was not an issues to integrate but did create some confusion later on with duplicate products. 

 
Approve

The layout and prototype was approved for high fidelity mock up and build.  Plans were made to get me samples of the products to create the high resolution images. 

 
Build

Time to generate graphics, take pictures of the products, edit and size the images, then put them together with all the content I acquired up until this point.  

 
Studio Setup
20200602_164336.jpg
Drilstar - Starch - Fluid Loss Control 3
Drilstar - Starch - Fluid Loss Control 1
Product Close Up Image
Product Overview Image 
 
Landing Page
Catalog Page
Chemtech Home Page.jpg
Chemtech Catalog.jpg
Testing

Once the site was built it was time to put it to the test. 

We confirmed all links work, the search bar finds the right products, menus go to the correct page, purchasing options run smooth, automatic emails and receipts are sent, and money transferring was deposited into its designated account. 

Also, I checked how it worked on mobile and everything was at an acceptable layout and worked just the same as the desktop version. 

Mobile View
iPhone 8-01.png
iPhone 8-01.png
iPhone 8-01.png
iPhone 8-01.png
iPhone 8-01.png
Chemtech - Mobile - Google Search.jpg
Screenshot_20201129-202151_Chrome.jpg
Chemtech - Mobile - Home Page.jpg
Chemtech - Mobile - Menu.jpg
Chemtech - Mobile - Product Page 2.jpg
Testing Confirmations
In Store Payment
Chemtech - Receipt - In Store Payment.jp
In Store Pickup
Chemtech - Receipt - In Store Pick Up.jp
PayPal Pay and Ship
Chemtech - Receipt - PayPal Checkout.jpg
Follow Up Review Email
Chemtech - Purchase Follow Up Email .jpg
Challenges and Learning Experiences 
 

Hosting the site and being able to build what I had already designed was a challenge. I decided to use Wix.com because it had the best reviews for the editor

In the discovery meeting I let the customer kind of run off the page with expectations with no answers because I did not know what was possible yet. In my follow up meetings I was able to control the interaction much better. 

Maintaining the documents was critical in keeping the products list organized. The customer kept making changes which created more work for me in the end. 

Planning up front was a little lack on this project because I was so new to the process. I learned the hard way to make the plan as detailed as possible in the beginning, AND document it.