Case Study 1: eCommerce Shopping Experience

Mighty Meeple is a game and hobby retailer with an average revenue of $35,000 per month on brick and mortar sales. They have a wordpress website that allows them to showcase their brand, events, and products but won’t allow the customers to add products to cart, create an account, or checkout. They have been getting feedback from their regular customers to have a website that would allow them to shop online even when the store is close (since the store only operates during the day). It was also emphasized that having the website accessible via mobile will make it easier for them to browse products.

Increase monthly revenue by 15% on the first three month after launch.

Problem Statement

Mighty Meeple needed to replace their wordpress site with a robust e-commerce backend that supports seamless checkout, marketing tools integrations and mobile experience– using this as an opportunity to improve a noticeably better user experience online and in-store kiosk.

Approach

To gather insights on the current Mighty Meeple experience from customers and staff with a focus on improving online and in-store experience.

Goals

– Site Redesign
– Understand Customer Journey
– Responsive Design
– Use of Marketing Tools
– Better User Experience

Design Process

I created and defined research methods to use and the design process structure to follow for the project delivery based on given requirements, discovered user pain points, and defined goals.

1 Information Architecture

On synthesizing the customer research and requirements presented, I’ve created the structure of how the content would flow in the site and how the user completes the process of buying a product.

2 User Interview

On synthesizing the customer research and requirements presented, I’ve created the structure of how the content would flow in the site and how the user completes the process of buying a product.

3 Persona

Based on quantitative data from analytics (demographics, location, etc.) and user interviews. I created a simple persona profile to reference the user.

4 User Journey Map

Based on quantitative data from analytics (demographics, location, etc.) and user interviews. I created a simple persona profile to reference the user.

5 Ideation/Prototype

For rapid prototyping, I set up a lo-fi clickable prototype using InVision to help aid the customer conversations, design critique/ideation sessions, and also provide usability insight.

6 Usability Testing/Design Iteration

After getting a good amount of feedback from my team, my client, and the users. I started designing hi-fi clickable prototype that I used for usability testing and design iteration phase.

6 Fidelity Evolution

After getting a good amount of feedback from my team, my client, and the users. I started designing hi-fi clickable prototype that I used for usability testing and design iteration phase.

7 UI Development

As a Senior and Lead Designer, my role is to offer end-to-end solutions to my clients. I developed the new Mighty Meeple’s website’s UI and front-end in addition to user research and UI design.

Technology used

HTML
SASS/CSS
JS
Liquid

Learnings Summary

– Seek critical feedback early
– Planning ahead on recruiting Usability participants
– Involve the backend developers early in the process

Visit mightymeeple.com