Loops home screen for first time users

Loops: a dedicated pattern library for crocheters

Reimagining the way people discover and follow crochet patterns. Instead of piecing together multiple resources, none of which prioritize a crocheter's preferences, you'll be able to find skill-appropriate patterns easily. Think AllTrails or Yelp, but for the fiber enthusiast.

Methods

  • Research: Interviews, Competitive Analysis, Usability testing, Preference testing
  • UX/UI Design: Persona, Information Architecture, Task Flows, User Flows, Wireframes, Prototype

Role

Stephanie Lin (Product Designer)

Timeline

Q3 in 2023

Crochet 101

Skip this section if you're familiar with fiber arts: crochet, knitting, etc.
Continue reading this section if you don't know much about fiber arts

What is crochet?

Crochet is a fiber art craft using a "hook" and "yarn" to create a fabric. This fabric can be used to create a variety of projects from stuffed animals to clothing items.

What is a crochet pattern?

Similar to a recipe you follow to cook, a pattern is a set of instructions a crocheter can follow to make their finished project. The words project and pattern are commonly used interchangeably. Patterns can be visual (eg. a step by step YouTube video) or written (ie. usually some sort of document that details steps).

Observed problems

While this is a centuries old craft beloved all over the world, resources for crochet do not prioritize the user's experience.
When you first get started learning, there are all these different terminologies: sc, fdc, hdc, slst, magic ring, etc. It's a whole new language. Crocheters frequently cross-reference multiple resources to frankenstein a solution that works for them. Beginners lack the knowledge depth to understand effective keywords for pattern finding and troubleshooting.

A crochet beginner's user journey, 2 problem areas including finding the right pattern and troubleshooting while crocheting

Figure 1. What it looks like to learn crochet

Project Overview

Developing the concept of Loops, a pattern library with interactive tutorials for crocheters.

Sad face

Problem

Existing methods of finding a pattern does not prioritize important information beginning crocheters want to know before starting a project.

Magic wand

Solution

LoopsFinder - the MVP feature of Loops, which recommends appropriate patterns for the user based on their knowledge and interests

Highlights of Loops Product Detail Page: Overview, Materials, and Reviews section

Figure 2. Highlights of Loops Product Detail Page

My Design Process

Design process

Figure 3. Design process for Loops

Discover

Discover: User Interviews to Understand the Beginner Mindset

Beginners lacked the depth of knowledge about crochet to choose a skill-level appropriate pattern. Ultimately, it would lead to a lot of frustration for beginners.

insight 1

preferences for patterns

Beginners would typically choose something small and something they found visually appealing.

insight 2

"easy is subjective"

After beginning their projects, beginners would realize that a project labeled as "easy" or "short" is subjective.

insight 3

difficulty troubleshooting

The actual learning process was steep. Beginners referenced multiple sources and had difficulty troubleshooting.

Quote talking about the subjectiveness of an "easy" pattern

Image 1. Insights from a Crocheter after 1 year of learning

""

Discover: Competitive Analysis to Understand the Current Process

In analyzing competitors, I found that the pattern search process was inefficient because 1) it required effective keyword search and 2) the information architecture was not beginner friendly.

competitive analysis highlighting the lack of important details for beginners in Youtube and Etsy and information overload in Ribblr and Ravelry

Figure 4. Highlights from Competitive Analysis

Ideate icon

Ideate: Exploring pros and cons to make the best choice

How might we help beginning crocheters choose a skill-level appropriate pattern so they can complete projects?

idea 1

Pattern analysis

User drops a link and chatbot will tell you if it's good pattern for beginners based on a set of criteria. Chatbot can also recommend patterns.

Pros
  • Takes advantage of beginner's current behavior of pattern finding
  • Simple tasks, low learning curve
Cons
  • Video patterns can't be analyzed, would require a transcript - not all existing video tutorials include audio
  • Chatbot wouldn't be able to generate links unless its affilitated with a creator or its a link within an app.
  • Doesn't address the problem of troubleshooting

idea 2 (chosen one)

AllTrails but for crochet

User is able to browse through patterns with detailed reviews, photos, etc. from crocheters of all skill levels.

Pros
  • Similar to popular reference apps people use like AllTrails, Yelp, etc, making it more intuitive
  • Room for product scaleability and feature add-ons that could potentially solve some of the cons listed
Cons
  • Focused on written patterns
  • Would probably want integration of some sort of existing pattern API which may not currently have information beginners are looking for
  • Doesn't address the problem of troubleshooting

idea 3

Community forum

User can ask questions and get help troubleshooting patterns.

Pros
  • Directly addresses troubleshooting issue and connects beginners with more experienced users
Cons
  • Requires more patience on user's side as they need to wait for response, may not get a response, etc.
  • Potentially a low impact solution depending on the engagement on forum
  • Forum moderation, rules, etc.

During this ideation phase, I brainstormed ideas with Jambot and a few designers. I noticed there were two trends: 1) preventative solution - before they even chose a pattern and 2) proactive solution - after they've already chosen a pattern. I reviewed my top contenders and also made notes on concerns, impact, and feasibility of each solution. The ideas above are the top 3 contenders. I ultimately chose Idea 2 - "AllTrails but for crochet". This is because the issues my interviewees were discussing was a multifaceted problem, and I felt the best way to support them was with a scalable solution. This led me to create a feature roadmap that I iterated over the course of my design process.

""

Design: Insights from design critiques

After finalizing my flows, I sought design critiques to improve my existing screens. Notable insights from design critiques showed concerns about the affordances of the individual screen view and difficulty of swipe gestures. Improvements were made to highlight affordances on each screen. Spoiler alert: the final design is completely different.

Before

Version 1: Recommended Pattern #1

""

Figure 9a. Previous Recommended Pattern Screen

  • no ability for user to exit page
  • unclear there's more options
  • unclear that you can drag the bottom drawer for more details

After

Latest Version: Recommended Pattern #1

""

Figure 9b. Latest Recommended Pattern Screen

  • added back arrow so user can go to previous screen
  • includes number of matches
  • includes other images peeking out to show more options
  • includes arrow to show more options
  • includes handle to hint at users they can add more options
Test icon

Testing: User-Centered Approach to Design

My hypothesis for usability testing was that beginners would want to see *the match* based on my initial interviews with beginners. However, I and other fellow designers during crits had an itching desire to opt for a more user-friendly, transparent approach to matching users with a pattern. I decided to A/B test the screens. Option 1 was the individual view match as pictured below, and Option 2 had a more traditional list/card view. Each view was alternated to prevent sequence bias.

100%

of participants (n=6) were able to successfully choose a pattern that met the scenario criteria.

83%

of participants preferred the List View over an Individual View of matches.

50%

of participants could not find where to leave a pattern review.

Quote where user describes preference for list view over Youtube

Image 2. Choosing Loops over Youtube: Insights from A Crochet beginner

Rejected View

Option 1: Recommended Pattern #1

Recommended Pattern View showing 1 result at a time

Figure 10a. Recommended Pattern View for Preference Testing

  • shows only one result at a time
  • difficult to browse
  • difficult to compare
  • more effort

The Chosen View

Option 2: Recommended Pattern List

list view showing multiple results in one screen

Figure 10b. List view for Preference Testing (the Winner)

  • shows multiple results at a time
  • easier to browse
  • easier to compare
  • less effort
  • saves time

I conducted moderated usability tests with 5 participants over Zoom. Each session lasted approximately 45-minutes. Participants were asked to located the new feature and accurately interpret the feedback from AI. Users were tested in Mandarin (Task 1) and Spanish (Task 2). They were not required to have knowledge of either as the goal was to test the design and not the nature of the content, though language content errors did add some levels of confusion.

""

Design: Exploring the brand

Since photos are a crucial part of any pattern, the branding direction is minimal to keep the emphasis on the pattern designs and avoid clashing with any individual designer's color palette. Blue is the primary brand color to evoke a sense of trustworthiness and community. It is sparingly used and often used in conjunction with a dark stroke to improve color accessibility.

Working style guide including colors, type, logo, and component examples

Figure 11. Latest Style Guide for Loops

""

Latest Design: Making Priority Revisions

Final design highlights and iterations for Loops

Figure 12. Final design Highlights of Loops