Project Overview

Challenge

Small local yarn shops, including Knit Unto Others, are suffering from a decrease in demand for both their products and community services due to the recent COVID-19 pandemic. Because of Knit Unto Others' dated website and lack of an online store, users are unable to purchase products or access up-to-date information about community gatherings and opportunities.

Outcome

To update and expand Knit Unto Others' brand identity and online presence to include aspects of operational simplicity, product promotion, secure shopping, and modern visual elements. The redesign offers a user-friendly shopping experience that is effortless, giving users convenient access to niche, local products — and opportunities to build a community.
CATEGORY
Responsive design
Web redesign
Logo design

MY ROLE
UX Designer
UX Researcher
Logo Designer

TOOLS
Figma
Miro
Photoshop
VIEW PROTOTYPE

DISCOVERY

Research
Secondary Research
Competitive Analysis
User Interviews

DEFINE

Themes and Insights
Affinity Map
Empathy Map
User Flows

DESIGN

Ideation
Wireframes
Visual Design

TEST

Interactive Prototype
Usability Testing

Evaluation of Original Website

I began by assessing the current online interface and conducting a heuristic evaluation to identify possible issues. Although there were some positive qualities, the original interface was lacking in many ways, including general usability principles and the absence of an online shop.
◇ Lack of call to action
◇ Lack of e-commerce or online shop
◇ Lack of updated schedule for community gatherings
◇ Navigation is confusing and inconsistent
◇ User flow is unclear and not intuitive
◇ Lack of style guide and inconsistent branding
◇ Little credibility and trust

Competitive Analysis

To begin research for Knit Unto Others, I focused on analyzing their direct competitors to understand how other yarn shops organize their inventory, what special offerings they might have, and how they manage online and local events.

Looking beyond the competitors, I also explored some secondary research and data about knitting's impact on general well-being — including a neuropsychiatry study that found that engaging in activities such as knitting could reduce the chance of developing mild cognitive impairment by 30 to 50 percent for seniors.

User Interviews

I interviewed five individuals who create projects within the realm of textile arts including knitting, crocheting and weaving — and who regularly buy yarn both online and in-person. In order to design the best possible experiences for the user, I needed to understand and empathize with them.

Empathy Map

To help me better understand the user, I created an empathy map after conducting the user interviews in order to capture and represent the real-life attitudes, feelings, and behaviors of the participants.

Insights and Themes

Research confirmed some of my assumptions and a few clear patterns emerged from the interviews.
◇ A desire to support local yarn shops and indie dyers
◇ Wanting the convenience of shopping online
◇ Accurate and beautiful representation of the products
◇ A sense of security and safety when buying products online

Project Diagram

Next, I identified key business and user goals to ensure all needs were being met. The addition of the e-commerce shop would be a new feature that would allow both Knit Unto Others and its users to achieve at least some of their individual and common goals. Following a brainstorming session, I created a project diagram.

User Flow

Using the Miro, I created a user flow for one of the main functions of the site — buying yarn.

Sketches and Wireframing

After sketching out my initial design ideas, I digitized them into wireframes to help me visualize the flow. During the wireframe process, I made sure to include an online shop and incorporated common website patterns such as a consistent menu, distinctive footer, and clear buttons to improve web usability. Additionally, I also added a page for community gatherings that offered a registration feature to sign up for in-person or virtual knit nights.

Brand Redesign

With the goal of elevating Knit Unto Others' brand, I created a modern, stylized logo and a consistent style guide for its website and branding. The previous logo looked dated and colorful; the updated version is simple and easy to read. It's also recognizable from a distance, whether it's used on the shop's signage or stamped on a bag.

Design

The color palette and style guide was influenced by clean, modern, simplified elements that are delicate and welcoming, reminiscent of soft yarn. The goal was to make the website accessible to all and easy to use, inviting the user to come back for updates and news.

Prototyping & Testing

With my UI designs ready for the Knit Unto Others online shop, I created a high-fidelity prototype for usability testing. I then drafted a usability testing protocol outlining the test objective and methods, and defining the core tasks for users to complete. The plan also included a script for each session. The goal for usability testing was to evaluate the user's interactions with the Knit Unto Others website, identifying current and possible future pain points and the success of navigation, flow, architecture, and design.

Test Objectives


◇ Observe and test users' impressions about the overall usability of the site

◇ Test overall flow from the homepage to purchasing an item via checkout

◇ Identify pain points and opportunities for improvement

Methods


◇ Remote and unmoderated

◇ Subjects will test the Figma prototype and will record their voice and actions using voice memo as they work through both tasks

Tasks


◇ Task One: Explore the homepage

◇ Task Two: Buy a particular brand of yarn
FIGMA PROTOTYPE

Reflection

Overall, the prototype was a success because the design was implemented with both the user and stakeholders in mind from the beginning. As I interviewed and tested the users, each participant was able to successfully navigate the two tasks I assigned to them. The final reactions to the high-fidelity prototype were equal parts positive and excited.  

However, this project was created during a two-week sprint, so there are a few things I would do differently if I had the time and resources:
◇ Interview a larger, more diverse group of individuals for 1:1 interviews
◇ Send surveys to gather quantitative data
◇ Conduct user testing after making revisions to continue iterating and improving the product
◇ Spend more time perfecting the UI, in particular adding animations
◇ Experiment a bit more with color and gradients
Have questions about this project? I'd love to chat about it.
CONTACT
An arrow pointing upwards.
© 2025   ✷   Arshia Khan