Resistitch

Role: UX designer, UI designer
Date: May-June 2023
Team: Troy Waldrop, Krissy Ford, Angela
Moss, Ilori Caldwell
Tools: Figma, Google Workspace, Miro, Slack

Project Summary

Resistitch is a donation-based handmade embroidery shop created by Austin therapist and activist Jessie. Currently, all orders are made through the business’s Instagram page. In order to reach more people and make the checkout process easier for her customers, Jessie asked us to design a responsive e-commerce website for Resititch, with an easy way to donate to various organizations.

Empathize

In the first meeting with our client, Jessie, we established the client’s needs:

  • Website design should be spontaneous and rebellious,
  • Customers need the option to choose what cause the donation goes to,
  • Needs a platform other than Instagram or customers to place stitch orders

Competitive Analysis

We conducted an analysis of direct and indirect competitors, noting some of the strengths and weaknesses, and what we might be able to leverage to give Resistitch a competitive advantage..

User Interviews

During user research, we conducted a survey and interviewed users who frequently purchase art or donate to organizations in order to better understand user’s pain points and specific needs when making purchases.

Competitive Analysis overview
Key Takeaways: User Interview Findings
and Affinity Diagramming

Define

Project Scope

After conducting interviews and surveys to better understand the user, we discovered the main issues users face were not knowing where their money was going once they made a donation, having the ability to donate to causes that they personally care about, and confusing checkout processes that made purchasing art difficult.

Problem Statement

Activists need a way to support causes in convenient ways, such as buying art, and they need to know they are supporting organizations that they personally care about. They need to have control over where their money is being donated and transparency on the donation process.

Ideate

Design Process

From our research and affinity diagramming, we created a feature prioritization map and discovered the most important and valuable features to include in our website design, and mapped a user flow to plan our wireframes.

Wireframes

Wireframe Sketches
Mid-Fidelity Wireframes

Style Guide

For our style guide, we wanted colors to pop out and make an impression. We were aiming for the “zine” style with our text and color palette.

Testing & Iterations

We conducted both remote and in-person usability test. During this process, we discovered user pain points:

  • The checkout process is hard to follow
  • Mobile does not have a shopping cart
  • Inconsistent text, sizing, etc
  • The footer is the exact same as the header

Prototype