CREATING AN END-TO-END MOBILE APP

Designing a Mobile App for

Project Overview

Ravelry is a widely-loved platform for fiber arts enthusiasts, offering a robust collection of patterns, yarns, and social features. Nearly 1.3 million patterns are available on the site, and in 2020, there were 1 million active users. However, Ravelry does not have a mobile app; rather, users must rely on the mobile and desktop websites to purchase patterns, access their pattern library, and engage with forums. This lack of a dedicated mobile app presents challenges for users who need access to their patterns and community while on the go.

Timeframe

5 weeks

My Role

UX + UI Design, Research, Prototyping and Testing, Integration of Design with Existing Brand

Tools

Figma, FigJam, Microsoft Teams transcription, ChatGPT, Reddit

The Challenge

The Goal

Without a native app, Ravelry users have to rely on the mobile and desktop sites for all of their crafting needs. As it stands, the mobile site does not meet the needs of users, who often use the website and craft on-the-go. Users need to be able to:

  • download and access purchased patterns offline,

  • browse for new patterns and yarns, and

  • connect with their fellow Ravelers using Forums.

Learn about the challenges that users are facing as they navigate the Ravelry website on their phones, and use these insights to make design decisions for the native app. Understand which features of the Ravelry site are essential to integrate into the mobile app, based on feedback from users during initial research and interviews.

The Approach: UX Design Thinking

Empathize

User Research

Before I began designing, I wanted to hear from real Ravelry users to understand:

  • What challenges/pain points users currently encounter with the Ravelry mobile website

  • What features are most important to integrate into the Ravelry app

I started this project by diving into Reddit forums where there has been discussion about both the Ravelry mobile site, as well as third-party apps that use Ravelry’s API to act as an unofficial Ravelry app. I combed through posts in r/Knitting and was able to learn a lot about the experiences of users as they navigate this lack of a Ravelry app.

1

2

3

Through this research, several key themes emerged.

Some users rely on third-party apps, such as Ravit and Stash2Go, to have a Ravelry mobile experience. Some of these apps are free, but others require a subscription or a one-time purchase. These apps have most of Ravelry’s functionality, but can be buggy.

There have been issues with Ravelry’s accessibility in the past. The site was redesigned in 2020, and changes, such as low-contrast in the updated color scheme and subtle animations in the screen, made it difficult for many to use the site. Some users reported migraines, and few users even had seizures. Many users left Ravelry and instead relied on Etsy to purchase patterns and yarns.

Example of low contrast on the site.

Because Ravelry offers so many advanced pattern and yarn filters, it can be cumbersome to search for and purchase new patterns and yarns on the mobile site. Users also find it challenging to navigate Forums on the mobile site, which limits their ability to connect with their community.

Define

To narrow the focus of my project, I created proto-personas, focusing on the needs of two specific user types. These proto-personas allowed me to think more critically about the kinds of features I could add to the mobile app and elevated three primary use-cases for Ravelry mobile:

  • Pattern browsing and purchasing

  • Community forums

  • Project and stash management

Advanced Pattern and Yarn Search

The Ravelry desktop site’s advanced search filters for patterns and yarns are a favorite feature. In the mobile app, users will be able to toggle between pattern and yarn search and apply advanced filters to find exactly what they need.

This solution addresses user challenges with filters;

  • It is difficult to navigate the advanced search filters on mobile

  • Some filters do not appear in the mobile search.

Ideate

As I was limited in time for this project, it was critical that I elevated the most impactful features. To do this, I created a prioritization matrix with the most popular features that users suggested.

Pattern Library

In the My Notebook tab, users will be able to view their pattern library, update the status of their projects, and access their favorited patterns.

This solution addresses problems highlighted by many users;

  • It is challenging to access patterns on the go, as there is no centralized place to download patterns.

  • Project management is difficult on the mobile site.

Community Forums

Using the Community tab, users will be able to access the seven primary forums available on Ravelry’s site. Users can ask and answer questions on the go, creating a more active and diverse community of users.

This solution addresses a problem that some users noted;

  • Forums on the mobile site are frustrating to navigate

  • Third-party apps often exclude forums entirely.

After creating an impact vs. effort matrix of potential solutions, I moved forward with designing the Pattern Library, Advanced Search, and Community Forums, as these are the most critical features for users of the mobile app.

User Flows

I created a user flow to help me understand how users would complete a few key tasks:

  • Creating a Ravelry account

  • Logging into an existing Ravelry account

  • Downloading a previously purchased pattern to My Library

  • Adding a new yarn to personal stash

  • Browsing for and buying a new pattern

Creating these flows provided me with an understanding of what screens I would need to develop in wireframing, while also encouraging to think more about which features were absolutely necessary for the MVP.

Prototype

Low-Fidelity Wireframes

I first sketched key screens, playing with different designs while trying to maintain the feel of the existing Ravelry brand, without replicating the accessibility problems with the current site. These low-fidelity wireframes helped me define the key tasks I would ultimately want users to be able to complete in usability testing:

  1. Download a pattern from your library

  2. Search for a pattern using advanced filters

  3. Make a post in a community forum

High-Fidelity Wireframes & Prototype

After getting and incorporating feedback from peers and mentors in my design course, the first iteration of high-fidelity screens were ready for user testing.

I was working with an existing design system and brand, so I had to make sure that the new mobile app matched the feel of the brand. I spent a lot of time looking at the Ravelry desktop and mobile website and replicated/redesigned key components in Figma, creating a UI kit.

Testing the prototype

Usability Testing

I spoke with 5 users for this formal usability testing. Four of the 5 users are regular Ravelry user; the other interviewee is an avid knitter who has not used Ravelry before.

Users were asked to complete four tasks using the clickable prototype of my high-fidelity wireframes.

“It seems very like user-friendly, which I like.”
— test participant

2

“Yeah, this is pretty much exactly what it looks like when you buy it currently [on Ravelry].”
— test participant

Sorted advanced filters into two categories and moved the search button up.

Added additional PayPal screens to replicate actual purchase process and a purchase confirmation screen.

Reordered information on the pattern purchase page to elevate the pricetag over the pattern designer profile.

While the usability tests demonstrated overall user comprehension of the design, a few areas of improvement emerged.

Provide more feedback when users download a pattern, make a purchase, or publish a forum post.

5/5 users were able to download a pattern, purchase a pattern, and make a forum post. However, 2 users seemed confused afterwards, unsure if they had completed the task as intended, as they were not given feedback.

Make advanced search filters more digestible by grouping them into categories.

All 5 users appreciated the advanced search filter options, as this matched their expectations of a Ravelry site. However, 3 of the 5 users noted that the filter options were overwhelming and would prefer to see filters organized by category, rather than alphabetically.

Iterations

Give users more flexibility by providing back buttons on more of the screens.

There were several instances where a user wanted to go back to the previous page and instead had to restart a task to revisit a page. 5/5 users requested the ability to navigate more seamlessly between pages.

With user feedback in mind, I made changes and created a final prototype of the Ravelry mobile app. To start the flow, “enter” your username and password and log in.

Added a confirmation post when a forum post has been made and highlight the user’s new post in the forum in orange.

3

1

Select the “Sophie Hood” pattern that is housed in your Library. Download the pattern.

Use advanced search to search for a new pattern. Use an advanced filter for your search.

From the advanced pattern search results, purchase the Summer Soul top pattern.

4

Make a new post in the Patterns forum.

Conclusion

In my personal life, I am a huge knitter, so I was super excited to take on this project. As I began really diving into Ravelry, I realized just how many features live on the site. I knew I would need to narrow down the focus of the app and prioritize the most important and well loved features. After conducting usability testing, I feel confident that I have elevated the right features and made a design that Ravelers of all abilities will want to use.

The final prototypes reflect the needs and wants of Ravelry users. Having a native Ravelry app would allow users to more easily meet their crafting needs on the go. This design allows users to buy and view patterns, while also providing a space for users to connect with and support each other.

This project had a short timeline of just a month, so I wasn’t able to design every feature that I originally wanted to implement. With unlimited time and funds, I would have considered:

  • Building out the project management pages more, such as allowing users to publish project updates and upload progress photos,

  • Adding in the yarn stash management page, with potential AI integrations, and

  • Making the favorites page/allowing users to add patterns to their favorites page.

P.S. If anyone from Ravelry sees this - let me know if you want to collaborate and make this app reality. ☺