Role
UX/UI
Prototyping
UX Research
Visual Design

Tools
Figma
Illustrator
Photoshop
Optimal
Workshop

Duration
80 Hours

Platform
Responsive Website

Background

Pleet is a sustainable shoe brand founded in 2018 in New York. They sell sustainable shoes made out of recycled plastic bottles from the ocean. They have a successful physical retail store presence. Now Pleet plans to launch its eCommerce site to share its value and products.

Goal

Our goal is to create a responsive online store that will help boost Pleet's sales.

324

Discover

Define

Test

Design

1

Discover

Research Goal

Our research aims to understand what makes users shop sustainable shoes online:

Understand general attitudes towards buying shoes online.
Discover which websites people currently use to purchase shoes.
Find out what features users desire in online shoe stores.
Find out how people value sustainable products.

Competitive Analysis

After assessing the competition's strengths and weaknesses, I identified the common pattern of the key components for Pleet to succeed. Here are the key takeaways:

Users engage strongly with the website when communicating the brand purpose on the landing page.
Outstanding hero image presents brand characteristics distinctively.
Clear CTA leads users to shop easily.

User Interviews and Findings

Persona

As a result of my research findings, I developed a persona to help me understand my users and build empathy with them. I utilized this persona to make design decisions.

Card Sorting

Using optimalworkshop.com, I examined how people categorize twenty cards of products.

After completing the competitive analysis, I reached out to three online shoe shoppers who also occasionally buy sustainable products online.

Here is a sample of some of the interview questions that I asked.
Tell me about the last time you shopped for shoes online.
Where did you buy shoes from? Can you show me the site you bought?
What was the most appealing about that website? Were there any features that helped you to shop easily? Would you show and share them with me?
How often do you buy sustainable products? When was the last time you shopped for sustainable products online?
What are your thoughts on sustainable products or fashion?

As a result of interviewing three different users with varying needs, wants, and pain points, I synthesized my interview findings and highlighted the primary design considerations. The main findings are below.

Users need a trustworthy and sustainable shoe brand with transparency for the materials and methods they use.
Users need to know how the shoes look like in real life via high-quality product video or high-quality product photos with multiple angles.
Users need a simple and safe checkout process.

324

Discover

Define

Test

Design

1

Define

Sitemap

Through my research and cart sorting I was able to develop a sitemap that outlines how users can browse sustainable shoes online efficiently.

Task Flow

I then created a task flow to represent a user's journey through a specific item-shopping task. It allowed me to cover the optimal way to perform a shopping task. Additionally, it helped me identify which pages need to be built out and where improvements can be made to the user experience.

User Flow

My next step was to create a user flow showing how users interact with Pleet's website when shopping for shoes through possible decisions they may make. Using this method, I was able to analyze all possible paths that users could take, so I was able to design the website effectively.

324

Discover

Define

Test

Design

1

Design

Wireframes

Mid-fidelity wireframes were created based on research findings to get quick feedback on user experience and flows. Also, they explained how the layout will be designed and how things would work.

Logo Creation and Style Tile

I designed the logo to emphasize Pleet's sustainability to appeal to eco-conscious shoppers by incorporating the leaf illustration and earthy color, burnt sienna brown.

Responsive UI Design

To ensure that this website would work responsively on multiple devices, I designed the homepage's desktop, tablet, and mobile versions.

UI Kit

I created UI Kit with a collection of reusable UI components to help me create high-fidelity prototypes quickly and efficiently. Furthermore, it improved the user experience and usability of the website by making the UI consistent.

High-Fidelity Prototype

I designed a high-fidelity prototype using UI Kit to gain insight into the end product. In addition, it was used to test usability and validate individual design decisions.

324

Discover

Define

Test

Design

1

Usability Test and Priority Iterations

After I ran my moderated usability test, I created an affinity map to synthesize my findings more digestible and actionable. As a result of analyzing the testing results through the affinity map, I determined what iterations needed to be carried out.

Number of participant: 5
Demographics of participants: 26 – 50 years old
Personality: Prefers to shop online for shoes and buy sustainable products online occasionally

Next Steps

I developed the MVP of the product throughout this project. Still, upon continuing to build it up, I will do more task flows like sign in/sign up and search for a product. Also, with the new changes on the existing and newly built prototypes, I will do more usability testing and gather feedback to improve the product.

← Go to Previous Project : Book ClubGo to Next Project : Melarosa →