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

Platform: Web

Getting Started

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.

Initial Opinion

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:

  1. Inconsistency of design across the storefront.
  2. No visual hierarchy and a defective sitemap.
  3. Lack of branding.
  4. An outdated interface with no call to action.
  5. The back-end was full of inactive and irrelevant plugins adding to code junk.
  6. Unoptimized media slowing things down.
  7. No optimization for vertical screens that hold a higher share in the eCommerce market.


There were no observable UX practices followed which reflected in the Information Architecture.

Big Idea

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.

Research

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.

Competitor Analysis

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.

  • 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 two or three per page.
Stakeholder Interview

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:

  1. The client wanted to move his Amazon and Etsy goods to his private store.
  2. He was thinking this could be more profitable, flexible, and authoritative.
  3. He wanted the MVP to be able to list items and perform transactions. And later functionalities to build upon them without complexity.
  4. This needed to be done quickly as the marketing team was on standby with good money invested there.
User Research

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.


Findings:


  1. The lack of User Dashboard gave no options to save details like addresses.
  2. Direct payments without Sign In looked shady to the users.
  3. No proper documentation to comply with the GDPR. Europe was the target demography.
  4. Unclear hero section conveyed the website sold pets.
  5. Non-responsive design on small screens.
  6. The flow was incomplete as no modes of payment were listed for checkout.
  7. Lack of proper categorization added to the navigational difficulty.
  8. The font size was very small adding to readability issues.
  9. A small number of products on the store made it look empty and inactive.
  10. The product images were 2D vectors. They did not convey the right color and texture of the accessories.
  11. The absence of a rating and reviewing system made the store look less authentic.

Pipeline Planning

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.


  • 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.

Design

01


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.

02


Landing Page


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.

03

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.

04


Product Listing


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.

05


Single Product


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.

06


Cart


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.

07


Checkout


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.

08


User Account


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.

Outcome

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.

Learning

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.