Job Description

Information Architecture

Card Sorting

UX Research

UI Design

Usability Testing

Timeline

2 weeks

Tools

Figma

Miro

Overview

Makers Market is a local organic food and garden store in Miami, Fl. They have had a storefront for over ten years and proudly serve the community with locally made products. Maker's Market wanted to give the community an easier way to shop by creating an e-commerce store. Tasked with creating an e-commerce website and mobile app for the market, I wanted to present the store's dedication and love for Miami and its environment.

‍

My Role

To create a successful website for Makers Market, I needed to visit its store and get to know its shoppers. I began conducting interviews with local residents and business owners that shop at the store. I utilized all my research to develop intuitive designs, which were then usability tested to assure that my website design was successful for the store.

Introduction

Lila, the owner of Makers Market, has been providing the community for 10 years and realized that it was time to rebrand her store and give the website an overhaul. She wanted to make it more accessible for people to view products online and learn more about the market's mission.

‍

Lila believes that the Miami community is unique because they have access to locally grown foods, both common and exotic. She would like the city to experience the joy of an organic lifestyle. Lila's goal is to provide the Miami community with organic, locally produced foods, and products while also providing local fruit and vegetable seeds and plants to grow themselves.

User Research

Makers Market has two types of target customers, the local resident, and the business owner. To successfully create a website for the store, I needed to complete research from both types of customers.

Card Sort

I used items from the store to complete an open card sort, a technique where participants are given a list of words, and they arrange them into categories that make the most sense to them. Users then assign titles to the groups that they created. This technique helps create information architecture that matches the users' expectations.

[Click to enlarge]

User Interviews and Surveys

By conducting video interviews, I was able to get an idea the target customers' shopping preferences. The local resident has desire to to grow foods at home, and they will usually spend time browsing the store to see what they offer. The business owner wants to shop in bulk and have their groceries delivered to them.

Knowing the user's preferences helped me design the Makers Market website to fit their needs. While in the short term helped me create two user personas for the target customers.

Personas

Using all of the information gathered from the interviews, I created the Proto-Persona for both the local resident and the business owner.

‍

[Click to enlarge]

After the synthesizing research and creating personas, I honed in on the problem and the solution.

Ideation

User Flow

I worked on some user flows, demonstrating how users might go through the website. From my research, business owners often know what products they want to purchase and thus utilize the search bar to make their experience quicker. While the local resident is more likely to browse the site in search for items.

‍

Design

I began by creating sketches and drafting wireframes to get an initial idea for the website's layout. Using the wireframes, I conducted an A/B test of the checkout process to determine if the users preferred to have the shipping and billing address inputs on the same screen or separate screens. I found that users preferred when the shipping and billing addresses were on separate screens, and so I moved forward with that flow.

Test A: Customer inputs shipping address and billing address on the same screen

Test B: Customer inputs shipping address the presses "Continue to Billing Address" to input the billing address

Prototype 1

After my initial A/B test, I proceeded with creating a higher fidelity mockup. I fleshed out more screens to fulfill the goals of both the local resident and the business owner. I began by designing the product list page and the product detail pages.

Next I began to design the landing page, I needed to capture the essence of what Makers Market was about, organic, and locally produced products.

As Makers Market cares about local makers, it was essential to create a Meet our Makers page to showcase the creators of the products that the store sells and some background about their role in the community. The about page explains more about the store's vision as well as contact and store location information.

‍

Usability Test Round 2

After the second round of usability testing, a few challenges arose. Some users had difficulty reading some of the headings during the checkout flow. I believe that accessibility is essential, so I changed the text from grey to black. I also learned that customers desire to purchase products online but pick up at the store, so I added feature to the checkout process.

The Mobile App

‍

After the initial launch of the e-commerce website, Lila realized that many of her clients preferred to shop online. We conducted some user interviews and surveys to determine if creating a mobile application would be beneficial, and it turned out many users shopped on their phones and prefer using a mobile application. We then started to create the mobile application.

The Final Prototype

‍

Because both users have different goals when utilizing the Makers Market website, I believe it best to present the prototype twice, once through the eyes of the local resident and then the business owner.

‍

Landing Page + Meet our Makers + About Us

The customer needed to have a welcoming landing page that demonstrates the brand's commitment to the community and the environment. I created a Meet the Makers page to allow clients to know the community members making the products. The About Us page is a space where visitors can learn more about the market's vision, location and can contact the store.
‍
‍

‍

Lessons Learned

In completing this project, I honed my research skills. I was able to conduct card storing activities that helped me determine how to arrange the website's products. This activity helps take the user involvement one step further, asking the user to create the categories.

‍

In creating the Makers Market website, I had the added challenge of designing for both a business customer and a resident and creating different experiences for both. Luckily, the website was successful in bringing in customers so we decided to create a mobile application. Sometimes business need to see a successful product in action before taking the full leap and developing multiple products.

UX Research and Visual Design

Makers Market