Wooli
My senior capstone project: an app for fiber artists featuring a pattern database, AI pattern generator, and a multitude of fiber arts resources.
Created using GDD (Goal Directed Design) over the span of a semester.
Introduction
Our team leader initially proposed an app focused on generating patterns for fiber arts like knitting, crochet, and cross-stitch. The concept involved a pixel grid where users could color in their artwork, and the app would then translate it into a pattern. The app would then recommend supplies, potentially from our own shop. While we ultimately went in a different direction, it's worth acknowledging our initial idea as it laid the foundation for our project.
Team
Sarah Pearson
Sydney Bishop
Megan Hagert
Matthew McNair
Dylan Bagwell
Kickoff Meeting
This meeting was a substitute for what would be a Stakeholder meeting. Since there were no actual stakeholders, we took on the role ourselves.
We had a discussion of what assumptions we had going into this project and identified our problem statement.
Literature Review
To better understand the topics of fiber arts, social media, and e-commerce, we gathered a variety of reputable resources. Here were some of the main takeaways we had after reading the resources we gathered:
The broader question of how we want to integrate E-commerce into our app necessitates an assessment of the pros and cons. It might be more effective to just focus on pattern selling, and not physical products. This model eliminates the complexities of shipping and provides users with instant access to their purchased patterns.
We might have our branding revolve around the story of Arachne. The story underscores the cultural, religious, and social importance of weaving in ancient Greek society. It showcases weaving as a skill with both practical and symbolic significance, reflecting the broader cultural values of artistic excellence and respect for the divine.
Reddit gives insight into what information fiber artists look for when looking for inspiration, along with what we should avoid that would cause our users to think negatively about our product.
The core feature of our project is the design canvas—a scalable pixel grid functioning as an artboard. This aligns with the essence of Graphghans, where crafters use a visual graph or chart to create patterns. The digital design canvas will essentially serve as a virtual representation of the graph, allowing our users to intuitively design and visualize their own patterns.
Personas
A key part of the modeling phase is creating a persona. A persona is an imagined person that represents the target user for our app. We used the variables from the previous step and drafted a potential user of our app.
Personas are important, as they help us understand who we are designing for. They can help us to understand what the app should do, and can additionally be used as a tool for communicating with stakeholders.
Originally we thought we would need two personas, as we envisioned two different types of users: experienced fiber artists and beginners. With the direction our app turned, we ended up only needing a primary persona.
The new design of Wooli will help users achieve their goals of designing, creating and sharing their fiber arts patterns. It will allow them to design patterns with an interactive artboard, view recommended materials to create their patterns, and share their patterns with other users.
Wooli will provide an accessible, efficient, and organized interface for users to keep track of their projects and ideas. This will dramatically improve Wooli’s influence in the fiber arts community and lead to increased market share.
Prototyping
Next, we began designing a high-fidelity prototype. We split up the work in order to maximize our productivity. Here are some of the areas I worked on:
Component Library
Before commencing our prototype, I collaborated with Sydney Bishop, the team leader, to establish a component library. We set up everything using color variables. This setup allowed us to seamlessly toggle any component between light and dark themes with a simple click of a button.
Conclusion
Interaction Design I
Problem and Vision Statements
In order to figure out our product requirements, we considered the problem statement from our kickoff meeting. From this, we crafted a vision statement. (to the left)
Context Scenario
After creating a persona, we created a context scenario. This is an imagined day in the life of our persona, and their interaction with our app throughout that day. Context scenarios give us an idea of how a user might interact with our app.
When drafting the context scenario, we considered the persona’s personality, goals, and motivations.
Context Scenario - Fredricka (Primary Persona)
Fredricka's mornings are synonymous with Wooli, the ultimate hub for fiber arts enthusiasts. With her laptop and a steaming cup of coffee, she delves into the platform's vast array of patterns and designs, seeking inspiration for her next masterpiece. Wooli's user-friendly interface and extensive database of eco-friendly yarns facilitate her creative process, allowing her to effortlessly bring her design visions to fruition while staying mindful of sustainability.
But Wooli offers more than just design tools; it cultivates a vibrant and supportive community that Fredricka cherishes. Engaging with fellow users' creations and sharing her own projects on her profile page fosters a sense of camaraderie and appreciation for the diverse talents within the community. Through Wooli's transparent material recommendations and notifications for new posts and trending patterns, Fredricka feels not only inspired but also empowered to push the boundaries of her craft, confident that she's part of a community that values both creativity and sustainability.
A Change in Plans
Shortly before beginning wireframing, we started questioning whether our idea of a pixel grid artboard would be realistic. Logistically, we couldn’t figure out how it would be able to exist, and if it could exist, we weren’t positive it would be worth using. Because of this, we started brainstorming different directions we could go. We landed on the idea of pivoting to an AI pattern generator. We did some research about AI, and realized this idea would be much more practical and useful to our users. So, we decided to not continue with our original idea of an artboard feature.
Wireframe
Wireframes serve as a very basic framework that maps the pages and structure of an app. To create our wireframe, we essentially worked our way down the list of requirements, and crossed off each item as they were included. Creating a wireframe is similar to creating an outline for a paper. It gives us a blueprint for when we actually start prototyping.
We started by making sketches, and then moved to digital wireframes. Below are the wireframes I completed, which are the profile pages.
Pattern Details Page
I was also in charge of creating the pattern details page. This involved extensive research to determine the key details to include. I began by studying Ravelry as a reference point and leaned on the insights gathered from our user research to inform my decisions.
I also pulled from my studies in technical communication to make decisions about information hierarchy. I decided that the download pattern button should be one of the first places the users eye is drawn to, so I used a bright, gradient style button.
Other
Usability Testing
The current state of the fiber arts apps has focused primarily on the distribution of existing patterns.
What existing products/services fail to address is the ability to generate a pattern easily and immediately know what materials are needed.
Our product will address this gap by providing a pattern and material list generator based on user’s design input.
Competitive Audit
In order to increase the chances of success for our app, we looked at the pros and cons of four different potential competitors: Stitchboard, Stitch Fiddle, Winstitch, and Ravelry. This gave us insight into what would be effective for our app, along with areas for improvement.
Old
AI Pattern Generator
I faced the challenge of dynamically displaying results depending on whether the user opted for crochet or knitting. Leveraging Figma's variables, I ensured that the text fields auto-populated with the relevant content upon selection. To further refine the user experience, I implemented conditionals, which directed users to the corresponding pattern page (either knitting or crochet) when they clicked "generate pattern" based on their initial choice.
Upload Pattern Page
I created the upload pattern page. I kept the same categories as the pattern details page, as this page would lead into that one. It was important to me to make the design aesthetic and layout match across both pages. This allows for a seamless transition between pages.
Other tasks I did were double-checking that our apps pages were aligned to the grid we created. I also helped my team to incorporate auto layout across our designs. These two things allow for an easier handoff of our design to front-end developers.
I also helped with file hygiene. My team wanted our design to be neatly laid out and accurately named. This ended up being very useful, and made it much easier to change things later on when we were refining our prototype.
We conducted two usability tests. For these tests, we observed users interacting with our website. While they navigated the website, we encouraged them to make comments.
Ultimately, there were many observations from both participants. A few notable changes we made after testing were:
Making important buttons stand out more
Allowing users to upload pattern instructions as a PDF, as opposed to writing them in our website
Changing our learn page to make it more visually engaging (before and after screens below)
Usability Test #1
New
In summary, this project has presented unique opportunities for me to grow as a designer. One challenge that I overcame particularly was tackling the complexities of the AI pattern generator. It pushed me out of my comfort zone in my search for an effective solution.
A key takeaway from this experience is the importance of keeping an open mind. While initially attached to the artboard concept, our pivot to the AI generator proved to be a game-changer. I learned that being flexible throughout the design process is essential.
As for potential improvements, I would have liked to explore the development of a mobile app counterpart. I think the concept would have been equally as effective on a mobile device as it was as a desktop website.
In terms of my own growth, I’m amazed to see the difference between my designs in Interaction Design 1 vs now. I added a comparison below. I feel so much more confident in terms of layout and prototyping. I am excited to continue growing, and am very grateful for my time at KSU.
Capstone Project
Problem Statement