Project Timeline:
12 weeks
Role:
Responsive UXUI Design
Tools:
Figma, Figjam, Canva, Miro, Google Workspace
Background
Creative spaces, while historically based in community and collectivity, have become more of a solitary and disjointed activity. Though creators can find instruction online, there is an overwhelming amount of information scattered across websites, a lack of easy learning sources, and a lack of safe community spaces. These issues impact beginners unsure of where to start their process, people actively learning a new craft, and even the more experienced users who have technical questions for their peers. In 2024, out of the 85 million active creatives in the United States and Canada. the most common age range of crafters was 18-29 and 30-49 at 26% of crafters each, then close behind at 23% was age range 50-64. As of October of 2024, per customcy.com, the total revenue was $50.9 billion. VerifiedMarketResearch.com stated 2024 reached $44.71 billion as of October and was still growing due to users wanting to make personalized gifts and utilizing it as therapeutic behavior.
The Problem
There is not a singular place to access information clearly and concisely for learning terminology and instruction with a community attached to be able to ask questions to fellow crafters.
The Objective
How can we get users to find value in a space where they can find like-minded creators to be able to ask questions and learn new and interesting craft and hobby skills.
01. Research
Primary Research Goal and Methods
We wanted to get more detail into what crafters value during their learning processes and how would they react to an online community space where they could feel welcomed and encouraged to begin or enhance their skills. This would be done through an unmoderated online survey through Google Forms as well as six interviews conducted over video call. The survey was open for six days and completed by 14 people. The user interviews were conducted over the course of a week and included six interviewees.
User Surveys
The purpose of these surveys was to learn about how people who craft have traditionally learned how to do their crafts, whether through structured classes, online videos, or from a community of like minded individuals. By doing these surveys, I learned valuable information about areas users typically struggle with, what they enjoy, areas that need improvement, and the users’ needs and motivations for learning their crafts that would eventually inform how I conducted my interviews.
Surveys allowed me to find background information on a wide range of potential users, specifically about what their habits are when learning a new craft. As expected, I found many of the crafters were multi-disciplined, as myself and many people I know in the crafting world partake in at least two different types of crafts. I was surprised, however, at how few were actually a part of a community, either online or in person. The people surveyed are typically outgoing, extroverted people, so it was interesting to find they kept this part of their lives back for themselves.
It was also surprising to see how people learned. In the past, crafts were handed down generation to generation. But with the growth of a more throw away culture, learning these timeless skills had become a thing of the past, therefore people are not learning from their families any longer. They instead have to turn to the internet, specifically YouTube, and for many, TikTok, to learn how to crochet or do metal work, or paint. It is interesting to see that shift over the last one hundred years or so, the turn of the century industrialization seems to have affected even more than I had previously thought.
Fourteen people completed the survey, 11 of which were age 25-34. Most of them identified as women or non-binary who partook in crafting as a hobby. I tailored the questions for the interviews of the next step towards that demographic to get more in depth information based off of what I had already gathered in the surveys.
For a more in depth look at what the survey answers entailed, a link to the results has been provided: Learning New Skills (Responses)
User Interviews
Background
The purpose of these interviews was to learn about how people who craft have traditionally learned how to do their crafts, whether through structured classes, online videos, or from a community of like minded individuals. By interviewing people from a range of disciplines I was able to gain insight on how different backgrounds go about learning. There is, unsurprisingly, a lot of overlap in learning styles. By doing these interviews, I learned valuable information about areas users typically struggle with, what they enjoy, areas that need improvement, and the users’ needs and motivations for learning their crafts.
Observations
Observation 1: Most of the participants use a variety of online video tutorials, typically through either TikTok or YouTube, to learn their crafts. There are similar complaints about not being able to find the exact information or there being extraneous information included in the video when they would prefer having the answer quickly and moving on.
Observation 2: Many of the users are multi-disciplined, but their skills are not connected. The crafts are not interchangeable and most are learned because they have a specific goal in mind: creating something they could not find otherwise, or saving money by making it themselves.
Observation 3: Subscription based learning is hit and miss with the users. It was split down the middle on whether they would use it or not. Those who said they would preferred an option where they would buy access to a single class while those who said they did not like a subscription model focused on the fact they could find the information they needed for free elsewhere.
Observation 4: Communities are not utilized as much as I had expected. While some use comments sections to see if the information they need is in the video, they do not participate themselves. If anything, there are a few people they know who do the craft and may ask questions, but they are predominately solo crafters.
Observation 5: It was a resounding yes to the question: If there was a website where you could search quick answers to technique questions, would you use it? Most would want some sort of video and text option on the technique pages to help with their various styles of learning. The stipulation is that it would need to be well organized and easy to use. If they have to search more than they would on a regular YouTube tutorial video, they would rather just use what is on the internet now.
Included in the link below is the full Affinity Map with the organization of the user interview findings, including quotes from the participants.
Secondary Research
Research was also done to find out how competitors structured their businesses and learning services, what we could learn from their successes, and what we could avoid from their mistakes. It was found that many of the competitors either had too broad a scope, not centralizing on the crafting aspect of learning, or were not focused nearly at all on teaching others to do crafts. With that in mind, the path for creating a business focusing on creating short form craft tutorials was clear of direct competitors and the next steps could begin.
For a more in depth look at the competitive analysis, click here.
02. Define
Defining Parameters
I utilized an iterative approach in defining the structure of CraftyQuest by testing and refining based on feedback through the information gained in conducting the interviews and surveys of the previous section. The primary deliverables created were the user personas, user flows, and task flows which were used to provide a strong foundation for the website's design and a more in depth knowledge of what user base we were designing towards.
POV Statements and How-May-We Questions
Point of View, or POV, statements are used to get a glimpse into the minds and lives of possible users. Coming up with a variety of potential users from different backgrounds allows designers to focus in on their main demographic. In this project, five such POV statements were created using information from both the survey and interviews done in the research stage.
How-May-We, or HWM, questions are ways for the designers to turn the problems the point of view statements identify and turn them into design opportunities. This allows the designer to get into a creative mindset, to think outside the box, not focusing on whether things are possible.
POV
Kellan, a mid-twenties new crafter with limited time, needs a streamlined way to learn new crochet techniques online because they are making gifts for friends and a short amount of time to make them.
Rachael, an early thirties introverted seamstress, needs a way to build a community outside of work because her coworkers do not have insight on the specific projects and technical questions she has.
Alice, a late twenties crochet hobbyist, needs a better way to sort through project ideas and patterns because there are too many options to decide on one singular project.
Mason, a busy thirty-two year old, needs a teaching style that keeps information brief and succinct because he is impatient with the current videos allotted online that are filled with “fluff” content.
Val, a mid thirties crafter, needs one space for their crafting resources because they find it easy to lose track of their current projects and where they got the information from.
HMW
Kellan
Find quick and easy patterns?
Narrow down options to find new crafts and projects?
Streamline the learning process for new crafters?
Create a course for those with limited skills and time?
Rachael
Create a safe space for crafters?
Connect users based on craft type?
Make a space for introverted crafters to post questions?
Easily mark what crafts each user does?
Alice
Organize saved content?
Group pattern types together by skill level?
Link patterns and project ideas to tutorials?
Mason
Cater to different learning styles?
Narrow down learning types?
Have a space that feels educational and personal without overwhelming crafters with outside information?
Val
Finds ways to organize information?
Track current progress?
Save patterns and videos?
User Personas
User Personas created based off of goals and pain points from the user interviews help the designers get into the headspace of the potential users as people before being users. The How May We's and the Point of View Statements were the starting point eventually leading to these more developed personas. In focusing on two "typical" users, we were able to design the pages for the prototype that would be most beneficial for these two types of users.
Kellan is a multi-disciplined crafter mainly focused on crochet who does so as a hobby. They want to find a reliable tutorial resource to learn new techniques for her craft. Rachael is a professional seamstress who is looking for a community to answer specific questions she has her coworkers cannot answer.
For a more in depth look at the personas, click here.
Storyboards
The personas were then used in order to create Storyboards, or hypothetical situations in which the users would come across the website.
As seen, Kellan is needing to find a specific tutorial when her friend tells her about the website Crafty Corner (later changed to CraftyQuest) to help her on her learning journey.
Rachael is needing to lean on a community to find answers to specific craft questions she has when she finds CraftyQuest through a coworker.
These, once again, help in the design phase to see what kinds of situations the users may encounter the site in to see what to design towards.
Task Flows
Task flows help designers see what pages they need to create for their prototypes. Doing these three task flows for the login sequence, finding a tutorial, and getting to the community page helped in the planning for how many pages were required and what could be needed on each page. This became the outline for how many pages would be needed, give prioritization to the main pages, and show where overlap between the three tasks would converge.
User Flows
Designing user flows was essential in ensuring the key tasks were easily completed and intuitive. The three primary user journeys we focused on were creating an account/logging in, finding a specific craft tutorial, and sharing that tutorial to a post on the community pages. These would be the paths created for the final prototype of the project.
Design
Overview of the Design Process
Designing CraftyQuest was a process of trial and error. There would be many design avenues explored until the final product could become the intuitive, engaging, and user-friendly website it turned out to be. Each decision was made with the intention of balancing functionality and creativity while consciously reinforcing CraftyQuest's brand values of Creativity, Collaboration, Inclusion, Inspiration, and Exploration.
Low Fidelity Sketches
The possible home, sign in, and community pages had to go through a few rounds of iterations because some of the designs weren't working properly for what we were trying to convey. Some looked too much like other websites while others were just too cluttered. What is shown here are the pages which were most like the finalized pages created for the project.
Mid Fidelity Prototype
We created Mid Fidelity wireframes so we could test the digital design on with actual potential users. These wireframes included the three flows combined into one to make the user’s ultimate goal of signing up for CraftyQuest, finding a tutorial, and posting onto the community page.
This design, in particular, was helpful in the testing range. It showed what aspects, especially for the mobile design, were and were not working for users. Though it had more of a simplified look to it, the elements were recognizable enough to get the point of the tasks across to the users to complete the tests in relatively quick times.
Mid Fidelity Test Results
Ultimately, through the testing, the users were able to complete the tasks at a 100% success rate, though at points, got held up with phrasing slight design choices. Each task was completed within the hour allotted. In fact, for all three tasks to be completed, the average time was around 15 minutes, which included instructions and final comments from the users. Notable errors included users talking through what they had planned to do in the test rather than completing the task itself, specifically during the sign up phase. They did, ultimately, realize they could complete the task, and did, however, the first of the three tasks did take longer than the other two. With minor changes after the mid fidelity testing and cosmetic changes the website would be ready for the high fidelity testing.
The user testing for Mid-Fidelity came up with two main issues: the navigation wording was too confusing for the users which lead to longer times on the tests and the community post commenting areas were not clear enough as to where the typing was occurring versus the interactive buttons. The average score given by the testers was a 4/5 on the website design with them liking the intuitive layout being the top rated aspect. Complaints included that the website was not completed and they could not use the search function, which is to be expected in the mid fidelity testing phase.
For more in depth information on the test results, click here.
Navigation
The category names were too similar, which made finding the correct place to get to their tutorials difficult. ¾ users found Tutorials to be too general and ended up looking in Courses and Crafts before finally settling on Tutorials to find what they were looking for. After following up with the tested users post naming changes, each of the users found the navigation easier to use.
Community Post
The community post was overall fine, save where the users would post their information. Since the text area was no different from the rest of the box, the users were not sure if that was what they had “posted” in the prototype or it was just another part of the page.
Branding
Branding includes more than just the name of a company or the logo, though those is also important to the image you are wanting to create. It is important to harmonize the website through color and theming, which in this case, was leaning into the fantasy theme. Through the surveys, interviews, and personal experience it was found that those who enjoy crafting and those with what society deem more "nerdy" interests had a significant overlap. Thus, the medieval/fantasy theme was brought into the mix.
I explored many options for the site name. Initially, I had Crafty Corner, but it ended up feeling too generic and not with what I was wanting for the site idea as a whole. Many of the others ended up being very popular already through social media or other websites. I wanted to focus on the fantasy-like quest element and the gamification of learning. This name felt the most cohesive with that idea.
Evolution of the Color Palette
There were a couple inspiration images for the color palettes I looked into for the branding. The first I called "Sunset Dragon" and, while I love the image and the colors seemed like they could work well for a website, being cheery and bright, ultimately the colors were too similar. They did not pass accessibility testing and did not meld as well together as I had hoped initially.
The next palette I considered was one I called "Storybook Forest," utilizing colors that focused on the mysterious and soothing forest all our favorite childhood stories came from.
This then evolved to the palette I ended up using in the website. I cleaned up the colors, made sure everything was accessible as combinations, and really dug into which I wanted to keep as primary, secondary, and tertiary colors for the site itself. While most of the colors stayed mostly the same, the peach color I called "Enchanted" went by the wayside, as it was the least cohesive of the colors and there were, ultimately, too many colors in the palette.
The cool tones of the primary, secondary, and tertiary colors all have calming undertones to them. The greens and purple are associated with creativity while the browns of the two neutral groups are very grounded and reassuring. They remind one of the earth, going back to nature, and can evoke craftsmanship.
This palette feels very much like a fairytale forest of your childhood where nothing but one's imagination can limit them from creating magic in the world around them.
Core Values
While building the branding, I came up with core values the company wanted to stand by in their operating and structural beliefs.
Creativity - We want to foster a passion for creativity and learning.
Collaboration - Working together with other crafters to learn or teach. Creating a community.
Inclusion - No one will be left out. It will be a safe place for people to support one another through their learning processes.
Inspiration - Fostering a desire to better yourself in creative endeavors.
Exploration - Allows for discovery of new skills, curiosity towards the unknown, and excitement about the adventure of learning.
Logo
Logos have to be eye catching-have to stand out from the competition and be memorable to those interested in joining the userbase. The process is initially kicked off with brainstorming and sketching multiple concepts, exploring ways to incorporate the creative nature of the company with the ideal logo being unique, simple, and easily recognizable.
Ultimately, the shield with the banner and crossing paintbrush and crochet hook won out for this design as it kept with the medieval theme while conveying this company wants to focus on many varying crafting types. It was ultimately refined in Figma with variations for the desktop (top) and mobile (bottom) pictured here.
Typography
There were initially two typeface selections to choose between, Libre Franklin and Mulish, but Libre Franklin ended up winning out in the end. It is a clean design with easy legibility, an even spacing between letters, and many weights and styles to add in the variation necessary when designing a website. Having one cohesive typeface allowed for a cohesive design, which is important for a website users are going to primarily to learn.
Icons
While mostly "normal" icons were used in the design, there were a few custom made to fit into the branding. The shield was designed to be the home button as well as the logo for both the mobile and tablet websites. The witch icon was designed for the account before users personalize them with their own image if they so desired. Color combinations from the palette would be randomized for each user while keeping accessibility in mind. The castle was the home button for the desktop website. The scroll was a fun rendition of the menu button used on the smaller screens. These all added a bit of whimsy to the otherwise standard icon set.
04. Prototype
High Fidelity Prototype
To ensure CraftyQuest provided a seamless user experience, I conducted a second round of usability testing, this time on the high-fidelity, polished prototype. The difference between this and the mid-fidelity testing is the finished look. Branding that was created above has been applied, pictures have been added, and more of the buttons function, though still not all of them.
This functional, interactive prototype was tested by three brand new participants who had not seen any iteration before so there would be no previous knowledge of the design going in beforehand.
Though here is the mobile version, their test was done on the desktop site prototype linked here.
Usability Testing
Goals Being Tested
To see if the website is intuitive and easily repeatable by users from various backgrounds.
Double checking structuring of the navigation.
Making sure the flows made sense to new users.
Testing Methods and Execution
I conducted task-based usability testing, asking participants to complete the same three primary flows from the mid-fidelity testing, checking to see if the updated content was still easy to understand and tasks able to be completed. The tasks included: signing up for the website, finding a specific tutorial (the half-double crochet), then sharing it to a specific post on the community page. Once again, participants were encouraged to think aloud while completing the tasks and I was present as both a spectator and potential facilitator in case participants got stuck.
For more in depth results, please click here.
Success Metrics
To be a successful test, I was checking for a high percentage of participants to complete the task, how long it took to complete each task, what the frequency of errors was, and the overall user satisfaction with the website. With the information in hand, iterations would be made on areas identified as needing improvement before the final project would be submitted.
Overall Summary
Users were able to complete the tasks in quick times, though at points, got held up by phrasing of the navigation options.
Every task was completed at a 100% success rate.
With minor changes after the mid fidelity testing and cosmetic changes after the high fidelity testing, the website will be ready for the next step.
Key Findings
Completion Time
Each task was completed within the time limit allotted. In fact, for all three tasks to be completed, the average time was about 15 minutes which included all of my instruction as well as the final comments from users.
Task 1: Sign Up
Average Time: 21 seconds
Task 2: Find Tutorial
Average Time: 1 minute, 49 seconds
Task 3: Share to Community Pages
Average Time: 47 seconds
Completion Success Rate
Every task was ultimately completed in every user test.
Notable Errors
During the mid fidelity testing, users were more talking through what they had planned to do in the test rather than actually completing the task, specifically during the sign up phase. They did end up completing the task, but that first one took longer.
All users wanted to use the search function rather than going through the navigation system.
Overall Experience (Rated 1-5)
On average, over the eight user tests, the score was a 4/5 for how much the users liked the website and how easy it was for them to use. The main issue was the navigation during the mid-fidelity testing, but after doing a follow up with the users who had the issues with the new phrasing, they found it much easier to use.
Tester Feedback
Overall Experience (Rated 1-5)
On average, over the eight user tests, the score was a 4/5 for how much the users liked the website and how easy it was for them to use. The main issue was the navigation during the mid-fidelity testing, but after doing a follow up with the users who had the issues with the new phrasing, they found it much easier to use.
05. Iterations
Finalization
From the final user testing to the submission of the prototype, there were only a few cosmetic changes on the website design. These were quick and easy to edit, mostly having to do with button colors or wording pointed out by my mentor.
01. Header
The only change made on the header was the wording for "Search Categories." This was changed to "Craft Tutorial Categories" as this drop down menu did not have a search function and was noted by users in the testing phase as being too generic of wording.
02. Login
Everything for the login/create an account page was fine, save the button itself. There was already one with this same coloring, so to differentiate, it was changed to a dark green background with the white text.
03. Tutorial Page
The tutorial page had the most to change, though it was all in the same section.
Under the tutorial video, there are pages titled "Tutorial," "About," "Resources," and "Reviews." Clicking these would show different sections for the user to get more information. The buttons themselves, however, used colors previously used in the design, so they were changed to more neutral colors with the brown and light green accent. The selected page became the dark brown with light green text and the other, non-showing pages were light green with brown text.
The final change has to do with the share button. Originally, I wanted to have the share button in line with the tutorial video to make for a clean stack. This, however, meant the pop out menu for sharing would be either blocking or behind the "Reviews" page button. With that in mind, I shifted over the share button and reduced the padding between the page buttons so all aspects would fit more evenly in that section.
04. Community Pages Post
The final section changes had to be made was in the comments section of a post on the community page. Much like the other aspects that needed to be changed, the "Comment" button shared coloration with another previously used. Therefore, it was changed to be a dark brown color with the white writing, an inverse of the cancel button, which I thought was a nice touch.
06. Conclusion
Working on CraftyQuest was an incredible rewarding experience that pushed me to think outside what I thought I could do. One of the biggest challenges I faced was the fact this was the first real, hands-on project I had full control of which was both daunting and illuminating. I found myself overthinking some of the defining process, which did slow down progress, wanting to get each aspect "perfect" instead of using the projects as a tool to move forward.
During this process, I have sharpened my research skills, allowing me to have a good foundation on which to build my designs and on which to defend design choices.
Overall, this project is near and dear to my heart. It ended up being a true passion project for me, and one day, I hope to possibly make the prototype into a reality. It has shaped how I will approach my future design projects and taught me how to be confident in my choices.
Get in Touch!
Email: dswithen@gmail.com
Dana Swithenbank © 2025