PROJECT FOR AN EUROPEAN CLIENT
Building an eCommerce MVP in a month, with no data, and while managing the process.
Role: Interaction Designer
Timeline: 5 Weeks
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 contract.
When I joined the team, Oniria already had an MVP. They set up a minimal WooCommerce store and the goal was to bring in traffic. They said they failed miserably in their first run.
I studied the problem from my end after listening to the team’s experience with building the broken MVP. I articulated that they were testing the idea for growth and there was no scope set for the product yet. Their concept was to start with a minimal eCommerce structure for selling animal-themed fashion and accessories. For the MVP, they just wanted validation of the concept through initial sales. Facebook Ads were used to target customers specifically in Europe. No sales were made yet.
The data I had was in bits and pieces. I started with going down the rabbit role, went through the past team chats, took 1-on-1's with the team, and read my briefs again.
Here are a few things I concluded from my bias:
There were no observable UX practices followed which reflected in the Information Architecture.
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 in the previous 3 months evolved around launching the MVP so much that the intent for designing it was ignored. This led to the failure in knowing what the consumer and business expectations were.
After rephrasing the problem, I had a few sessions with the team over hangout calls. We decided to move with fixing the experience of the MVP to make it usable and attractive.
Getting done with the initial screening of the problem with the failed MVP and finding the correct intent and idea to fix the design, I started with some research on knowing what everyone was expecting out of the whole hustle.
Starting with competitor analysis my objective was to study similar products in the market and derive the trend.
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 the interface.
My focus here was to determine the metrics for deciding the success of the new MVP. To avoid misunderstandings this time, I wanted the client to list long term goals. My idea was to use an iterative approach and design on components. This way I could prioritize the components for the MVP to fulfill the success metrics.
Here is what I found at the end of this process:
With no established user base, remote work constraints, and approaching deadline I decided to experiment.
Being a solo designer, I prepared a simple questionnaire for other members of my team. And held a session explaining to them how to conduct a basic user testing of the initially broken MVP with a boxed audience locally. Then invited the same audience in a global discussion online to discover pain points collectively. 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. Wasn't the best way of getting data, but fitting to the timeline was a necessity then.
Building to fulfill the success metric and user necessities was the first thing. So I planned a Trello board using an agile approach.
I created multiple lists to manage the design pipeline.
Flow and IA
I started by deciding the flow for the MVP. Upon deciding the flow for our main use case, the idea was to get everyone in the team on the same page so I organized a meeting to discuss the idea across the team.
The landing page utilizes your first 8 seconds to get you hooked. The first impression has to be on point. It should be as clear as possible about what we were selling and how is it different from others. I worked out a copy to convey our theme of an animal-inspired fashion store.
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 consistent with whatever we had. A horizontal menu was put up with a few categories to make it as usable as possible. Instead of shadow, I used the hover approach for depth.
A three-column listing was implemented which was made to stack on small screens. The conventional hierarchy for product cards was used. We replaced all the previous product images. It was redone with copyright free real model mockups to give it a more human look and convey the right fabric quality to the users.
The layout for this was redesigned from scratch. A rating and review system was integrated for engagement. The goal was to design for authenticity. A related product section was set up for browsing products similar in style. Few WooCommerce native components had styling constraints so we had to keep them in that state.
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 design limitations from the dev side because of WooCommerce.
I wished to design it better. Had a lot of limitations here due to it being a WooCommerce native screen. The most I was able to do is style it without changing the structure and UX.
We now provided a back-end to give more control to the user. Previously the MVP had no options to sign in. 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 reviewing system.
We generated 13 sales through the store within a week of launch. Contrary to the previous built, this was a great start. We failed to include two major features in the MVP for the new launch – “Product Filter” and “Quick View”. As a user, I felt “product filter” was a major 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, so it became a backlog. Facebook Ads analytics reported around 8K unique visitors by the end of the first month of launch. This was an outcome of the marketing team's efforts. Surely the new design helped by converting them into buyers.
I had a great time doing this. As a young enthusiast and not even a graduate yet this was a great opportunity.
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. There were a couple of things I could have done right then if I had the same knowledge as I have now. Some meetings could have gone right, we could have reduced some design garbage or could have probably been more patient. But I guess that’s what learning is about.
This is was the last project I did as an independent designer. I was in my 3rd of engineering by that time and my focus shifted to learning more about team dynamics and preparing myself for full-time roles.