Building an eCommerce store from scratch
Helped build an eCommerce MVP to 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. They wanted validation of the concept through 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:
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.
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.
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:
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 behaviour 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.
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 🎲
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.
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.
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 :(
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.
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.
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 in the first week. 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.