UX Case Study - Ecommerce Store
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
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
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
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
Action Item List
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.
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
Product Close Up Image
Product Overview Image
Landing Page
Catalog Page
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
Testing Confirmations
In Store Payment
In Store Pickup
PayPal Pay and Ship
Follow Up Review Email
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.