Role
Lead UX Designer, Character Artist
|
Category
Desktop
|
Approach
Goal-Directed Design
|
Duration
4 months
|
Tools
Figma, FigJam, Microsoft Teams
|
For my Senior Capstone, I led a team of five to design Wooli- an online platform for fiber artists to design, create and share their knitting and crochet projects. We followed a design process called Goal-Directed Design (GDD) to perform extensive research on our product domain, identify our primary users, and iterate on our design. As team leader, I guided us through the GDD process by keeping my team organized, developing their schedules and deadlines, and making myself available to answer any questions they had along the way.
At the beginning of the semester, everyone in the class pitched their project ideas to a panel of judges (three university professors). Inspired by my passion for crochet and the rising global interest in AI technologies, I pitched an idea that combines these two concepts. With my proposed fiber arts platform, users can easily create a design, then generate the written pattern instructions and list of required materials to make the design. Out of 80 students, my idea was selected to move forward and I became the team leader.
At the beginning of the semester, everyone in the class pitched their project ideas to a panel of judges (three university professors). Inspired by my passion for crochet and the rising global interest in AI technologies, I pitched an idea that combines these two concepts. With my proposed fiber arts platform, users can easily create a design, then generate the written pattern instructions and list of required materials to make the design. Out of 80 students, my idea was selected to move forward and I became the team leader.
Meet the Team
Team Leader
Sydney Bishop
|
Team Member
Dylan Bagwell
|
Team Member
Megan Hagert
|
Team Member
Matthew McNair
|
Team Member
Sarah Pearson
|
From left to right: Matthew McNair, Sydney Bishop, Megan Hagert, Sarah Pearson, Dylan Bagwell
Our Approach: Goal-Directed Design
Our team followed the Goal-Directed Design (GDD) process to ensure our design was focused on the user's goals, motivations and needs at every stage of the project. We started with thorough research to ensure our platform meets user needs effectively. By modeling hypothetical users based on our research, we better understood their behaviors and goals, guiding our development process. Through prototyping and user testing, we iterated on the design, incorporating feedback to refine and finalize the product.
Phases of Goal-Directed Design
Research
In the Research phase of GDD, designers gather essential information about the project. This includes things like what stakeholders expect, what users want, how the website will be used, and what other similar products are out there. This phase is extremely important for GDD because it helps designers make informed decisions about their design and justify their decisions with a backing of research.
The Research phases consists of a Kickoff Meeting, Literature Review, Competitor Audits, Stakeholder Interviews and User Interviews. Following this framework and conducting thorough research allowed us to make informed design decisions that meet user needs and goals.
The Research phases consists of a Kickoff Meeting, Literature Review, Competitor Audits, Stakeholder Interviews and User Interviews. Following this framework and conducting thorough research allowed us to make informed design decisions that meet user needs and goals.
Research Phase of Goal-Directed Design
Kickoff Meeting
Typically, a kickoff meeting is held to establish a project by meeting with business stakeholders. The goal of a kickoff meeting is to understand the product, stakeholder perceptions, user needs, and potential design issues. Insights from this meeting shape the stakeholder and user interviews later on in the Research phase.
However, because this is a class project, no real stakeholders were involved. Instead, we simulated a kickoff meeting using a worksheet on FigJam, an online whiteboarding platform. Guided by the worksheet, we acted as stakeholders to define our main problem statement. Here's what we concluded from our simulated kickoff meeting:
However, because this is a class project, no real stakeholders were involved. Instead, we simulated a kickoff meeting using a worksheet on FigJam, an online whiteboarding platform. Guided by the worksheet, we acted as stakeholders to define our main problem statement. Here's what we concluded from our simulated kickoff meeting:
Problem Statement
|
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/service will address this gap by providing a pattern and material list generator based on user’s design input.
|
Example Assumptions
|
Who is the user?
What problems does our product solve? What is the #1 value a user wants to get out of our service? |
Literature Review
To become more informed about our product domain, we researched literature pertaining to knitting and crochet, with particular focus on pattern making and how to read/interpret patterns. We also looked into eCommerce and social media as a means for our users to share their patterns and find inspiration. Our research led us to some important takeaways:
- There are a lot of different terms and symbols that go into knitting and crochet that we need to understand before catering a platform to people within our domain.
- We should focus on pattern sales, rather than selling physical products. This model eliminates the complexities of shipping and provides users with instant access to their purchased patterns.
- When recommending materials to our users, outsourcing to various yarn and craft shops will eliminate the complexities of shipping and managing an inventory of physical goods.
- Establishing a social media community for fiber artists will help our users find inspiration, seek advice, and freely express their creativity.
Competitor Audit
During the Competitor Audit phase of GDD, we analyzed and compared existing competitors in our product domain. This process helped us identify potential competitors in the fiber arts industry and allowed us to incorporate features that competing services lacked. We reviewed three different "pattern generators" as well as the industry leader for pattern distribution- Ravelry. We then compared them side-by-side in a chart that illustrated their positives and negatives. We referred back to this information during the design process to ensure our platform had the necessary features to stand out in the market.
Comparison Chart of Competitors
Stakeholder Interviews
Wooli is a class project, so the design team completed a kickoff meeting worksheet in lieu of stakeholder interviews. Typically, stakeholder interviews provide an opportunity to ask stakeholders questions about their initial ideas, visions for the product, budget, schedule, and other constraints. During our meeting, we imagined ourselves as the stakeholders to answer questions about their hypothetical goals, desires, and concerns. As a result, we came to the following assumptions:
Who is the user?
|
Fiber artists, people who enjoy designing things/designers, crafty people, craft store owners
|
What problems does our product solve?
|
Our product will enable artists to create patterns quickly and easily. Beginners and users of lower skill level will have the opportunity to create patterns effortlessly with our pattern generator and improve their skills in the hobby. Our product will also provide helpful resources for finding the materials to create the project and learning more about the craft.
|
What is the #1 value a user wants to get out of our service?
|
Effortlessly create a pattern for a knitting and/or crochet project.
|
User Interviews
Persona Hypothesis
We needed to identify potential users and determine if they were suitable for our research. Following the principles of GDD, the design team completed a persona hypothesis to identify candidates for user research interviews. To develop the persona hypothesis, we considered our potential users' behaviors and goals to understand how our product could satisfy their potential needs. As a result, we identified two personas: users who create patterns and users who browse patterns
Users who create
|
These users need easy to understand pattern instructions and an easy to use pattern generator. They also need a way to monetize their patterns and require detailed lists of materials.
|
Users who browse
|
These users are either new to the hobby or interested but haven’t tried it yet (for example, artists who want to try new crafts). These users need to have an easy and functional way to browse and search for patterns.
|
Conducting Interviews
Our persona hypothesis helped us develop specific research questions and identify potential participants for our user interviews. We conducted a total of five virtual interviews on Microsoft Teams with individuals who identified as knitters, crocheters, or creatives. In an effort to gather valuable data from our interviews, we avoided asking leading questions and focused on their goals and behaviors.
User Interview #2
|
User Interview #4
|
Affinity Mapping
After conducting each user interview, we identified our key observations among them and created an affinity map. These maps helped us group the behaviors and feelings of our participants while also identifying common themes and patterns across all interviews. We came away with clusters of sticky notes for each interview that represented the main takeaways from each participant.
Affinity Map from Interview #5
Observations
During our analysis of the affinity maps, we observed that most participants weren't concerned with selling their patterns and preferred to keep fiber arts as a hobby rather than a business. Removing the distinction between buyers and sellers of patterns would no longer justify having two user types. Based on our findings, we decided to pivot from two user types to one user type.
Among our more experienced participants, we noticed they want a better solution for organizing their patterns and projects. Less experienced participants expressed a reliance on visuals like video tutorials and inspiration from social media to create their fiber arts projects. Finally, we observed that a majority of the participants desired an all-in-one hub for purchasing their materials, managing their projects, and connecting with others about the hobby.
Among our more experienced participants, we noticed they want a better solution for organizing their patterns and projects. Less experienced participants expressed a reliance on visuals like video tutorials and inspiration from social media to create their fiber arts projects. Finally, we observed that a majority of the participants desired an all-in-one hub for purchasing their materials, managing their projects, and connecting with others about the hobby.
Modeling
In the Modeling phase, the behavior patterns identified from our research are translated into personas. We use personas to craft narratives for our users, help stakeholders visualize our target audience, and maintain focus on our users and their goals during the design process.
Modeling Phase of Goal-Directed Design
Identifying Behavior Variables
We analyzed the data from our user interviews and identified overlapping patterns of behavior among participants using the affinity maps, notes, and observations we collected.
Example Behavior Variables
|
Values organization (low > high)
Checks reviews (never > very often) Overwhelmed by too many options (low > high) |
Mapping Participants to Behavior Variables
We analyzed 16 different behavioral variables and created a scale for each of them. Next, we mapped each of our participants on a behavioral variable scale to identify any significant behavior patterns. When we noticed a pattern between our participants, we categorized them into two groups based on their fiber arts knowledge: beginner (yellow) and experienced (purple). Using these patterns, we identified characteristics and goals for each group, resulting in one user type with two personas. With this information, we developed personas for our product.
Example of Mapping Our Participants
Our Personas
We created two personas using the data we collected from our interviews to model user behavior. These personas represent the key findings from our research and enhance our understanding of our users’ thoughts and actions.
Primary Persona: Experienced Fiber Artist
|
Secondary Persona: Beginner Fiber Artist
|
Our primary persona, Fredricka, represents a more experienced fiber artist looking for an all-in-one hub to design, create and share her crochet projects. William represents our less experienced users who are interested in learning more about fiber arts and seeing what other talented artists are doing. We chose Fredricka as our primary persona due to her alignment with the main behavior patterns we identified. Fredricka and William have many overlapping goals, with the key distinction that William needs more guidance along the way. We are confident that our fiber arts platform can help both personas without disrupting their experiences.
Requirements
In the Requirements phase, we created a context scenario and a list of requirements to determine what our primary persona, Fredricka Crocherita, needs to successfully meet her goals. By addressing Fredricka's goals, we can also fulfill some of William's needs as our secondary persona. Our team is confident that our fiber arts platform can serve both personas without disrupting their user experiences.
Requirements Phase of Goal-Directed Design
Context Scenario
Our team developed a context scenario for our primary persona, Fredricka, which outlines her typical use of Wooli, and how it meets her needs. We held a brainstorming session to explore Fredricka's motivations, actions, and thought process. As the team leader, I facilitated the meeting, and together we created the scenario.
Context Scenario for Fredricka Crocherita
Requirements List
After putting ourselves in our users' shoes, we identified requirements that our primary user, Fredricka, would need for our fiber arts platform. We used our context scenario and requirements list as the foundation for our prototype framework. Our general requirements include a home page, profile page, artboard (pattern generator), onboarding, trending feed, pattern details, pattern search system, references page, commenting, and settings.
List of Requirements for Wooli
Framework
Once we established the requirements for our personas, we moved on to the Frameworks phase of our project. Here, we developed low-fidelity wireframes and mapped the key pathways for our personas to achieve their goals. Once we determined the layout of our website, we transitioned our design to a high-fidelity prototype.
Framework Phase of Goal-Directed Design
Low-Fi Wireframes
We created low-fidelity wireframes in FigJam to use as a reference for building our prototype. We used the wireframes to establish the information architecture and layout of the site while referencing our context scenario and requirements list to identify necessary screens and features. Within the wireframes, we considered how our personas would interact with the site and mapped out the likely paths they would take.
Wooli Low-Fi Wireframes
We identified our primary persona's key path scenario by referring to the context scenario. The green line represents the key path scenario- the primary persona's most common way of interacting with the website on a daily basis. The blue, purple and red lines represent validation scenarios, which are secondary tasks or less frequently used paths that the user may take within the site. In particular, the red line represents the secondary persona's goal of learning more about fiber arts.
The Prototype
After completing our wireframes, we transitioned to building our prototype in Figma. We began by establishing a robust design system. This process involved developing a style guide, a component library, rules for naming and utilizing elements of the design, and adhering to an 8pt grid system.
To satisfy all potential use cases of our product, we decided to develop color systems for light and dark modes. Our goal was to design the screens for mobile and desktop, but for the sake of time we decided to move forward with only desktop view. In the future, I would love to develop Wooli further and design the screens for mobile.
To satisfy all potential use cases of our product, we decided to develop color systems for light and dark modes. Our goal was to design the screens for mobile and desktop, but for the sake of time we decided to move forward with only desktop view. In the future, I would love to develop Wooli further and design the screens for mobile.
Color Styles
|
Typography Styles
|
In addition to establishing our design system, I also developed our logo and brand identity. I began by researching concepts for various yarn and fiber arts brands. Next, I sketched some ideas and received feedback from my teammates on which design to move forward with. Finally, I transitioned my sketches to Figma to create high-fidelity vectors of the Wooli mascot.
Wooli Logo: Concept Sketches
|
Wooli Logo: Full Character Art
|
Wooli Logo: Hi-Fi Vectors of Logo Variations
As team leader, I divided the responsibility for building the prototype between each team member. I paid attention to the skills of each team member and made sure to assign work that suited their strengths. I gave my teammates guidance and feedback along the way for their screens and audited all screens across the prototype for consistency of spacing, styling and file hygiene. After this phase, we moved into Refinement, where we conduct usability tests to iterate on our design.
Screens I Designed
The following are some of the screens I designed for the prototype:
Discover
Discover knit and crochet patterns uploaded by other users and generated with Wooli's AI pattern generator. With the Discover feed, you can view pattern recommendations based on your preferences. Filter your feed by project type, fiber type, and more.
Discover - Light Mode
Discover - Dark Mode
Learn
Learn more about knitting and crochet with Wooli's comprehensive resources. Familiarize yourself with common terminology, techniques, tools, and more.
Learn - Light Mode
Learn - Dark Mode
Refinement
After creating our prototype, we conducted two user interviews. We utilized various usability testing methods such as A/B testing and assigning task-based scenarios to each participant. As team leader, I moderated both usability tests while my teammates carefully documented the feedback we received. We discussed our findings after each interview and made necessary modifications to our prototype. Iterating on our design in response to the feedback we received helped us make significant improvements to enhance the overall user experience.
Refinement Phase of Goal-Directed Design
Usability Test #2
Design Changes
- Based on our feedback, we felt that the website needed a dedicated home page separate from the discover feed to give users a better sense of their location within the site. Upon login or sign up, users are now directed to a landing page. This landing page features a bright call-to-action button which prompts users to try out our AI pattern generator.
- New users are prompted with a "sign up" modal as they attempt to scroll the content on the page.
- Returning users are given snapshots of their most recently saved patterns, so they can jump right back into their projects.
- New users are prompted with a "sign up" modal as they attempt to scroll the content on the page.
- For uploading patterns, users are now given the option to upload a PDF, rather than input text into a text field. This change helps speed up the process of uploading a pattern and makes the task less demanding of the user.
AI Pattern Generator Demo
Key Takeaways
I am proud of the project my team and I created. We challenged ourselves and managed to pull off a complex design across two viewing modes: light and dark. As the team leader, I was regularly reminded of the value of consistent, effective communication. I also learned a lot about how to create a design system that is easy to implement and easy to change. These are my main takeaways:
- As a project lead, it's important to be consistent about scheduling and reminding the team about deadlines. When you're leading a large team, you must regularly check in with each team member to make sure they're in-the-know and on-track with their responsibilities for the project.
- Utilizing variables in Figma allows for easy iteration and refinement of a design system. Over the course of the project, we regularly altered our light and dark mode color variables to test various combinations for accessibility and visual appeal.