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

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

""

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