BACKGROUND

Kind Goods is an international sustainable clothing retailer with in 300 in-person locations. They believe in sourcing and creating clothing made with sustainable practices so their customers feel confident their purchase is environmentally conscious.

DURATION

February 1- March 12, 2021

TOOLS

Figma, OptimalSort, Flowmap, Canva

PROBLEM

Kind Goods runs a successful offline business but they are looking to expand their sales to an online store so that they can get rid of excess inventory, attract new customers, and become relevant in the e-commerce world. They are also looking to rebrand their company.

CONSTRAINTS

This was a project brief and had no access to real clients. The deliverables were in depth and expansive across each section of the design process. Because the brief was fictional, there were no real customers to interview.

GOALS

Interview customers & identify solutions
Create a responsive ecommerce website
Re-brand the company logo

Research

LETS LEARN FROM OUR USERS

This inspired my decision to place sustainability icons within the product pages to reassure customers of the company’s thorough vetting process for their brands.

60% of participants were more inclined to purchase from stores with good values.

I was able to narrow down that "Quick Shop" was an easy to implement feature that would save users time by allowing them to shop and add to cart on the same screen as their search results. This also saved their place in their search history.

90% of participants in the research study said they shop online to save time

100% of customers talked extensively about how reviews were a "must have" feature.

I made sure to keep these openly displayed, and gave options to sort the reviews.

Define

WHAT DO WE NEED TO MAKE THE BEST PRODUCT?

Click image to enlarge

Digging deeper into the site content in relation to the user persona was best mapped out on a user flow.

This detailed the map of tasks and pages that would be shown through the buying process and eventually need to be designed. I found this tool to be the most helpful when discovering which pages I should design first. I used this information moving forward into the wireframe process.

Design

LETS MAKE SOMETHING AMAZING

With low fidelity wireframes in hand, I moved to high fidelity mockups. Going through the details of each of the main pages needed to find an item and add it to a cart, showed me the users’ journey in color and feel alongside the branding elements.

The following showcases the final UI of the homepage followed by the responsive design examples.

RESPONSIVE DESIGN

Prototype

TESTING OUT THE GOODS

See prototype

Testing the prototypes on customers gave me a clearer picture of which screens needed to be edited and what could be changed for an easier interaction.
‍
My final suggestions for this phase were:
- Create a clearer CTA button in the hero section
- Test font colors on the Hero image
- When searching for specific items, add breadcrumbs at the top as well as pre-select gender
- Create more pages to complete an interaction in the women's section (shown here). This will be used for future testing.

Conclusion

WHAT'S NEXT AND WHAT DID I LEARN?

SUCCESS

If this were a real website, I would measure success with further prototype testing. I would look for a smooth search and buying process.

NEXT STEPS

The company’s goal was to create an e-commerce store so they could reach more customers, get rid of excess inventory and create a more well rounded shopping experience for their customers. Moving forward, I would continue building out more screens to further test the buying and checkout process.

CONCLUSION

I am most proud of my ability to take feedback from others and implement new solutions to problems as they appeared throughout the design. In hindsight, I would have spent more time testing multiple scenarios within the purchase journey while I had access to the customers for testing. While this was my first official UX design project, I found my previous experience designing a responsive ecommerce store overlapped this project and made for a smooth ride through the UX design process. I was able to apply the techniques and framework needed to design from a user experience perspective and will continue to use these tools for future projects.