DIV2021

Building an eCommerce store from scratch

Helped build an MVP of an animal-themed fashion and accessories store to let the client test the idea for growth.

Some recap ⏳

An animal-themed fashion and accessories store I designed and developed for in June of 2019. My client was based in Warsaw, Poland. I was hired on a 2-month contract to lead the overall design as a single designer along with helping developers with front-end done on WordPress and WooCommerce. The team was small with 2 people to do the back-end, one for the front-end, one graphic designer, and few folks for marketing and social media.

When I joined, Oniria already had a MVP in place. They were testing the idea for growth. The approach was to start with a minimal eCommerce structure first. For the MVP, they just wanted validation of the concept through some initial sale. Facebook Ads were used to target customers specifically in Europe. No sales were made yet. 

What can be instantly improved ⚡

I started by going down the rabbit role, went through the past team chats, and talked with our two developers.


Here are a few things I concluded from my bias:

  • Inconsistency of design across the storefront.
  • No visual hierarchy, a defective IA, no proper SKU tagging of items on the store.
  • Too many category levels with not as many items in the store, it looked empty.
  • A very edgy design with no proper CTA even on buttons.
  • The back-end was full of inactive and irrelevant plugins adding to code junk.
  • Unoptimized media slowing things down.
  • No optimization for vertical screens that held a higher traffic share in the eCommerce market. The site was not responsive.


There were no observable UX practices followed which reflected in the net feel of the MVP.

Rephrasing the problem statement ✍

The problem was with the “problem statement” itself. Instead of “How can we bring traffic to the store?“, we needed to design for “How can we make the store user ready?”. The work mindset previously involved maintaining pace so much that other facets to achieve the outcome were ignored, like user optimization. This led to the failure in knowing the consumer expectations.


After rephrasing the problem, I had a few meetings with the client over hangout calls. Convinced him to invest time in redoing the design of the MVP with a focus on completeness, cleanness, and trustability.

Looking for more clarity 🧼

I started with some research to know what everyone was expecting out of the whole hustle.

What are the conventions?

My objective was to study eCommerce sites in the market.

I discovered that all the stores irrespective of the market they were selling followed a similar architecture and user flow.

They focused on replicating the offline experience by making the online store similar in style through interface and copy.

  • The core design principle was to keep it neat and informative.
  • Distraction was cut down by removing any kind of micro-interaction or keeping it to a max of two or three per page.
  • The user flow was largely similar across platforms like Shopify, BigCommerce, WooCommerce, etc
What business wants?

I wanted the client to list long term goals. My idea was to design phase-wise. This way I could prioritize the sections of the MVP. But this conversation wasn't of much use.

Here is all I found at the end of it:

  • The client wanted to move his Amazon and Etsy goods to his private store.
  • He was thinking this could be more profitable, flexible, and authoritative. He wanted to avoid paying platform charges.
  • He wanted the MVP to be able to list items and perform transactions.
  • This needed to be done quickly as the marketing team was on standby until then.
What people think?

With remote work constraints and approaching deadline, I decided to experiment.


I asked everyone in the team to get 2 volunteers each for a virtual discussion to discover pain points collectively in the previous version of MVP. As the team operated remotely, I saw an opportunity to gather diverse opinions from the users and use their gradient of behavior to derive common pain points. I don't think this brainstorming session was the best way to get some user data, but it was necessary.


Findings:

  • The lack of User Dashboard gave no options to save details like addresses.
  • Direct payments without Sign In looked shady to the visitors.
  • There was no proper documentation to comply with the GDPR. Europe was the target demography and natives measured the trustability through these docs.
  • Non-responsive design on small screens.
  • More modes of payment were needed in checkout besides Paypal. The same needed to be indicated in the product pages.
  • Lack of proper categorization added to the navigational difficulty.
  • The font size was very small adding to readability issues.
  • A small number of products in the store made it look empty and inactive.
  • The product images were vectors mocks. They did not convey the right color and quality of the store items.
  • The absence of a rating and reviewing system made the store look less authentic.

Planning our sprints 📌

Building the bare minimum was the first thing. We planned a Trello board very intuitionally for this:

Task – Every task planned for the week came under this.

Active Sprint – Contained tasks being worked on for the day.

Sprint Backlog – Backlogs from the previous sprint.

Done – Tasks that were completed.

A functional design 🎲

Low Fidelity

First thing was to design our main user flow. Once I had one in place, I discussed it with our back-end developers as well to know their opinions. Below is an image of what it looked like.

Menu & Navigation

As this MVP was the inception for Oniria, we were short of things to put on the store. This highly affected the navigation system. So I decided to keep it clean and populated with whatever we had. A horizontal menu was put up with a few categories because that's all we had. Instead of shadow, I used overlays for depth.

Product Listing

Went ahead with a three-column layout which was made to stack on small screens. We replaced all the previous product images. The entire thing was redone with mocks with a model posing to give it a more human feel. Printful was the fulfillment service so we used their official mocks to convey the correct fabric quality to the users.

Single Product

Used a very conventional layout of the product page to not mess up the UX unknowingly. A rating and review system was added for engagement. The goal was to design for authenticity. A related product section was added as a hook for browsing products similar in style. Few WooCommerce native components had styling constraints so we had to keep them in default design :(

Cart Page

Simple and informative. To reduce cognitive overload at checkout, I wanted users to fill in the shipping details on the cart page itself to output the taxes and give them a better idea of the subtotal. I had a few visual builder based design limitations because of some issue in WordPress Rest API and Printful integration.

Checkout Page

I wished to design it better. Had a lot of limitations here due to it being an entire WooCommerce native screen. The most I was able to do was style it like the rest of the site without changing the layout.

User Account

We now let the users create accounts. Previously this was missing. The direct checkout functionality was made optional and registration was encouraged. This helped the users track the status of the purchase, save details for faster checkout, and was a necessity for the user to add product reviews.

The outcome 💹

We generated 13 sales through the store within a week of launch. Comparatively, this was a great start. We failed to include two major features in the MVP for the new launch – “Product Filter” and “Quick View”. I felt “product filter” was an important thing to include. I tried hard but was not able to make it look the way I wanted it to look because of WooCommerce's limitation.

A lot to learn 💕

I had a great time doing this. As an early enthusiast, this was a great opportunity to do things first hand. I wasn't able to monitor or test any of my designs because the scale of the project and the interest of the stakeholder were nowhere aligned, still grateful to do this job.

The client taught me a couple of things about the high and low context cultures we followed in India and Poland and how it made us different in the way we approached communication. There were a couple of things I could have done right when it comes to process if I had the same knowledge as I have now. But I guess that’s what learning is about.

Thanks for your time.

Best, @divyakant360