Case Studies, UX / UI

My 5-step process in designing TheMarket eCommerce website as Minimum Viable Product

TheMarket is a New Zealand-based eCommerce website for electronics, fashion, sports, toys, essentials, and many more. It started way back in the early year of 2018. The Warehouse Group treats the new business as a startup company so we can keep the ground up and running fast.

I was hired in April 2018 as their full-time UX / UI designer. It was an exciting time where we are changing how New Zealander’s shop online.

For the first month, my focus is on getting familiar with the business, team workflow, and our eCommerce website platform on the technology side. The leadership team explained how critical is the Minimum Viable Product (MVP) in our business and website development process.

The following five months were a huge challenge, getting mockups proposals rejected is common due to technology and time restrictions. It was a constant challenge for me. So I came up with a process that improves production.

Five-step processes in getting the minimum viable product mockup designs delivered to the development team

Step 1: Project brief

I get the project brief with detailed requirements on a task from the CTO or product manager. The task ranges from small (adding text content on a page) to large (designing the cart and checkout pages)

Step 2: Technology

I need to consider the 12-column grid layout, screen breakpoints, data availability, and reusable UI components.

We are using Bootstrap for the 12-column grid layout

Screen breakpoints include 1504px, 1200px, 992px, 768px, 375px and 320px

Data availability means can we use the existing data or do the backend developers need to set it up

Can the front-end developers reuse the code in building the component? can we use any existing UI components or do developers need to set it up as a new one?

Step 3: Time and Resource Availability

I have to estimate the time required for a front-end developer to build the UI and it includes the availability of the developers to build it.

Step 4: Considering all possible scenarios

I have to consider each scenario involves the UI. This includes the min/max amount of contents on each screen breakpoint, answering the questions “What IF” and “What Happens”.

Step 5: Mockup designs

The last step in the process is to prepare the mockup designs following the previous steps. I usually create two or three versions where it shows the fastest and longest time for the developers to build it. The longest time usually has more polished UI or extra features on top of the project brief.

Then I collaborate with the broader team and present the mockups designs. Once signed off, the development team can start building it. If not, I will go through the iteration and collaboration process until it gets signed off.

Outcome

At first, I was concerned that users would not use the platform. I was hesitant to push out the eCommerce website in public due to a lack of user research and unpolished designs. I was wrong. The eCommerce website is pretty much thriving, and we hit most of our sales KPI since we launched it. On a side note, our CTO team lead is very pleased with the work that I contributed to launch the eCommerce website on time.

The lessons I have learned in designing a minimum viable product

The pros

  • I can see the whole picture of the platform, and it allows me to analyse and work on improvements after releasing it to production.
  • We can easily manoeuvre and deploy new functionalities based on the business requirements on time. A good example was during the first Covid-19 L4 lockdown, where the team quickly deployed changes to support pick-up deliveries, sell essential items, and sell food boxes.
  • It gave us time to do user testing and document reports of our findings.

The cons

  • Once a new feature is released, the business tends to move on to the next project and forget to iterate and improve the existing components. If it does, it will take months to go back since there are other projects in the pipeline.
  • Due to time sensitivity, the business team and the developers designed some parts of the website and new site functionalities. The UX team had minimal visibility until it was deployed to the production.
  • Due to the shared components, limited timeframe, technology restrictions, and lack of resource availability, it becomes harder to make minor improvements.
  • It takes ages to make one slight improvement to be deployed in the production due to the pipelines and resources.
  • UX and UI designs are the least priority in the MVP stage, where business requirements and technology always come first.

Connect With Me

I’m currently looking for a new and exciting role and/ or if you would like to collaborate, catch me at

thedigitalambassador@gmail.com / +64 021 157 2214

Under the sea fish wing