Ravelry is a community for knitters, crocheters, designers, spinners, weavers and dyers to keep track of their yarn, tools, project and pattern information, and look to others for ideas and inspiration. The content at Ravelry is all user-driven; the community makes the site what it is. Ravelry is a great place to keep notes about projects, see what other people are making, find the perfect pattern and connect with people who love to play with yarn from all over the world. In May of 2019, there were 147,000 projects added to Ravelry - the most new projects ever added in a month. In February 2019, Ravelry had accumulated 8,000,000 members. The folks at Ravelry are working on making their mobile site better all the time, but are missing out on some of the advantages of a mobile app.
Ravelry is unique within the fiber art community - it holds a monopoly over the organization resources available to knitters, crocheters, and weavers. My research showed that though there are a few apps that pull data from the site, the majority of people who want mobile access to their Ravelry accounts are not satisfied with the solutions available.
In order to get a sense of what potential users would expect when using a mobile app for Ravelry, I sent out a survey to members of the online knitting community on Instagram and Facebook, and got 14 responses.
Once I figured out the user persona, I created an empathy map for her, which offers key insights about her day-to-day experiences in relation to the product.
To organize and prioritize the site features I needed to build, I created a list of features based on my user research conclusions, the business’ needs, personas, and the market. Based on my user interviews and the goals stated in Ravelry's "about" section, I determined which features were absolutely necessary to include. Those features initially included signing up/logging in, finding patterns, purchasing patterns, creating projects, and adding patterns to favorites and to the queue. After working through wireframes and listing out each screen I would need for every interaction, I realized that the pattern library would also need to be in an initial launch of the app. Without the pattern library, users would be unable to access the patterns they have purchased.
After sketching out the main feature of the app, I identified the main flow that users would follow to complete a task - adding a pattern to their queue.
Below are a few key screens from the wireframe process, in both hand-drawn and digital versions.
I put together a mood board to express and evidence the look and feel of the product. I got inspiration from different mediums — ranging from web design to business cards, posters, colors, textures, and typography. I decided to stick with Ravelry's current color scheme, so the branding update wouldn't be too jarring to users and the app would feel like a cohesive part of the overall product. Luckily, the existing green is incredibly close to the shade "Neo-Mint," that forecasting service WGSN has claimed will be dominant in 2020. Paired with updating the rest of the UI, this should give the app a crisp, modern feeling that encourages users to return.
Once I finished the high-fidelity mockups for each of the pages in my user flow, I linked them together in a prototype using Figma. I recruited 15 people from a knitting group on Facebook to test the app. It was important to me to recruit people who were already familiar with the desktop site because they would be the main user base for an initial launch of the app. I gave each participant three tasks to complete:
Initially, multiple people had issues with getting past the log in screen. We worked together to figure out that Figma prototypes don't always load reliably on a mobile browser. Once participants opened the prototype in a desktop browser with a mobile device viewport, they were able to successfully navigate the app and complete each task.
Most people went directly to the search bar when trying to find the Nightshift pattern. I hadn't built out that function, and expected people to navigate through the main screens to find it. Once I got that feedback, I built a path to the pattern through the simple and advanced search screens.
My initial prototype did not take into account the space needed for native iOS elements like keyboards. Once the main functionality and organizational logic of the app was tested thoroughly, I modified screens that required interaction with a keyboard.