Oniria

Fixing an e-commerce store in a month. A tale of speed UX.

Summary

An animal-themed fashion and accessories store I designed and developed for in June of 2019. My client was based in Poland. I was hired on a contract to fix the initial MVP. I conducted research, designed the interface and developed the same over Woocommerce on WordPress.

Part 1

Research

This section is all about understanding the problem and my users. If you are scanning for UI Design they are right down there.

The Case

When I joined the team, Oniria Pets already had an MVP. They set up a minimal Woocommerce store and the goal was to bring in traffic. They failed miserably in the first run. The UX was completely broken.

Finding The Intent

The data we had was in bits and pieces. I studied the problem from my end after listening to the team’s experience with the broken MVP.

As expected, 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.

The Big Idea

After rephrasing the problem, I had a few brainstorming sessions with the team over hangout calls. We decided to fix the experience of the MVP to make it usable and attracting.

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.

We had no good data at hand. It became necessary to find the conventions and design on them. A time of 3 months already got wasted and the client was losing motivation to invest. I reciprocated that and decided to put the research process on a fast track. 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.

  1. The core design principle was to keep it neat and informative.
  2. Distraction was cut down by removing any kind of micro-interaction or keeping it to a two or three per page.

My focus here was to determine the metrics for deciding the success of the new MVP. The initial MVP had ambiguities that led to misunderstandings followed by failure.

To avoid it this time,

I wanted the client to list the 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.

The outcome was simple:

  1. The client wanted the MVP to be able to list items and perform transactions. And later functionalities to build upon them.
  2. Also, this needed to be done quickly as the marketing team was on standby.

With no established user base, remote work constraints and approaching deadline I decided to experiment.

I asked my team to conduct a 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 to work on without a need for dedicated interviews or persona.

I am sure ditching interviews wasn’t a good thing but based on the scenario there was no better way than this. For the new MVP, fitting into time constraints and budget was a need. 

This user research gave us some pain points to work on concerning the broken MVP:

  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 transactional flow was incomplete as no modes of payment were listed.
  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. Good product photography was required.
  11. Absence of a rating and reviewing system made the store look less authentic. 

Here are a few things I concluded from my intuition after studying the initial MVP.

  1. Inconsistency of design across the storefront.
  2. No visual hierarchy and a defective sitemap.
  3. Lack of branding.
  4. One Page design with a vertical list of categories. A bad try of reinventing the wheel.
  5. An outdated interface with no call to action.
  6. The backend was full of inactive and irrelevant plugins adding to code junk.
  7. Unoptimized media slowing things down.

There were no observable UX practices followed which reflected in the Information Architecture. There was a need for foundational UX for a more thoughtful product. 

Planning

Building to fulfill the success metric and user necessities was the first thing. So we planned a Trello board using an agile approach. 

We created multiple lists to manage the progress.

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.

We synthesized the data collected from the users. After a few technical considerations, we created a roadmap and structure for the design process.

Part 2

Design

This section is all about visual design with context.

Wireframe

We started with some wireframes. Upon deciding the flow for our main use case, the idea was to get everyone across teams on the same page. Low fidelity always helps communicate the core of the design without any makeup.  Here are a few wireframes I sketched.

User Interface

Landing : I wanted the first impression 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 an opener to convey our theme of an animal-inspired fashion store.

Navigation : As this MVP was 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.

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 real models to give it a more human look and convey the right quality to the users.

Single Product : The information structure 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.

Cart : Simple and informative. To reduce cognitive overload at checkout, we 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. We had a few technical limitations with WooCommerce.

Checkout : We wished to design it better. We had a lot of limitations here. The most we were able to do is style it without changing the structure.

User Account : We now provided a backend 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 later wanted to build the functionalities of the seller account, customized prints and provide downloads for digital content.

Mobile

A very standard approach to responsiveness was adopted. We did not follow the mobile-first approach but our consideration for small screens while deciding the technology stack worked out very well. Keeping usability as our principle since the very start, every phase of design and development was simultaneous for desktop and mobile.

Using my component approach, we first designed a module for desktop and then worked on making things end to end responsive. Columns more than one in a row were stacked to a single column for screens below 1000px.

Part 3

Values & Lessons

“Rather than love, than money, than fame, give me truth.”

― Henry David Thoreau

As a team,

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. We tried hard but were not able to make it work the way we wanted it to work and had to schedule it for the next phase.

It took a total time of 2 months to get the new store ready. We took a month to design the UX, then I worked for another month with the development team to get it functional. But that’s a story for another day. My coding experience in frontend came handy during handoffs, it gets easy if you can speak their tongue.

As an individual,

I had a great time doing this. As a young enthusiast and not even a graduate yet this was a great opportunity. In fact, this portfolio and the case study didn’t exist at that time. Had nothing on paper to prove my proficiency and still got hired, god knows what worked. The client taught me a couple of things about the agile process, the high and low context cultures we followed in India and Poland and how it made us different, and he also taught me how to market myself.

Now that I think of it, there were a couple of things I could have done right then if I had the same perspective 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.

By the way, I realized it’s really amazing how less biased your thoughts are during active recall.  Thanks for reading :  )