Ravelry // 2019
I designed an easy to use app that addresses the complexity of Ravelry’s functionality and updated their brand identity to connect better with their modern user base.
01 // background
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.
02 // discovery
03 // synthesis
Market Research
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.
User Interviews
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.
- Most people use Ravelry to find patterns to match yarn they have or want to purchase, and to see how patterns look on different body types through the projects feature
- Each interviewee found the current desktop site clunky and difficult or tedious to navigate
- Those who used third party apps to access Ravelry on the go found the experience better than the mobile website, but not as useful as they would like
- Most people did not use (or seldom use) the community features like groups or message boards - their main objective was to keep their projects organized
Product Roadmap
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.
Task Flow
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.
Wireframes
Below are a few key screens from the wireframe process, in both hand-drawn and digital versions.
Mood Board
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.
logo
UI Kit
mockups
Prototype & Test
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:
- Log in, browse patterns, add Nightshift to your queue and move it to the top of the list
- Purchase the Nightshift pattern with promo code "SPOOKYSEASON"
- Look at your current projects, and mark "Ursa" as 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.
Final Designs
Priority Revisions
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.
