Responsive webpage for crafters:
Craftalog
Craftalog is a mobile-first responsive site that is designed to help crafters or individuals interested in starting a certain craft to research and prepare for their crafting journey.
About Craftalog
This project started with me looking back on the things I’ve tried to learn in the past 6 months, and reflecting on any difficulties or barriers I encountered during the various phases of my learning process. Over the years, I’ve accumulated crafts supplies that I’ve planned on using and half finished projects. And I am sure I am not alone with this issue, in fact, there are many articles and blog posts about why crafters often have unfinished projects.
Craftalog aims to tackle this problem by helping crafters or even potential crafters understand what they are getting into and get them adequately prepared for a craft or project suited for them.
The project was done over 12 weeks:
-
User Research
-
Define the problem and Ideation
-
Usability testing and further iteration
-
Final revisions and hand off
User Research
Secondary Research
First, I conducted secondary research to better understand the craft and creative industry, and if there are any existing solutions in the market. Increasingly people are viewing crafting as a productive way to spend free time and a creative outlet for self-expression. In the past, this industry was mainly focused on selling craft supplies, but in recent years there is a shift towards selling digital products and online classes. Currently, most craft related information is available either through craft supplies store (e.g. Michael’s) or blogs and sites often dedicated to a specific craft (e.g. knitting).
User Interviews
Based on the secondary research, I wanted to better understand the actual learning process and why it was hard for individuals to stay on track learning on their own. So I conducted user interviews with 4 different participants who tried learning a new craft on their own to understand about their experiences and any underlying motivations, including what prompted people to start, how they are learning, and any challenges that made it hard to stay consistent.
Click here to see more details about the user interviews
Research objectives for user interviews:
Determine why people choose to learn on their own
Determine what makes people stay motivated when learning or starting a new craft
Determine what makes people decide to learn a new craft, and what craft to learn
Determine what are some potential barriers when learning
Quotes from participants:
“Wanted to learn and do it at my own pace”
“Wanted to be comfortable doing the craft, without having to refer back to videos”
“Track progress based on how final products turn out, in comparison to the reference”
“Did research online to find out how others learnt and what supplies are needed”
User Research Insights & Analysis
All participants started learning a craft as hobby or for personal interest
Measure success by completion of a project and their ability to recreate a product, rather than tracking progress in terms of time (do not require a habit tracker type product for crafting)
Flexibility & convenience are key factors when choosing what craft and how to learn
Most participants opt for digital learning, as it allow them to learn at their own pace and is easily accessible
Have difficulty finding quality free resources
While digital learning is very accessible, it takes a lot of time and effort to research for tutorials for projects they like
Defining the problem
To define the problem, I started with creating an affinity map based on the responses from the user interviews, to identify any commonalities among the participants to help with understanding the users.
The common themes generated are used to outline any potential opportunities by creating point of view (POV) and how might we (HMW) statements.
I started with 4 POV and HMW statements, then narrowed down to 2 statements that were helpful in generating the personas, as well as explain their needs and expectations.
Common themes generated from affinity map:
Demographics and time available
Preference for visual and video learning
Goals and projects
Money and investment
Progress and success
Internet and getting started
Hard to find
Point of view statements:
I’d like to explore ways to support people with full time careers who are interested in crafting as a hobby, because they are deterred by crafts that are too complicated or require large investment of money and time.
I’d like to explore ways to support new crafters to feel more comfortable and confident with doing their respective crafts, especially with troubleshooting and correcting any mistakes, because people measure their progress in their ability to replicate the reference project and their ability to create on their own.
How might we statements:
How might we help people with full time careers choose a craft as a hobby that fits their interest, budget and priorities?
How might we help new crafters feel more comfortable and confident in their ability?
Personas:
Based on these statements, I then created 2 personas to help describe the target audience of Craftalog, which are beginner and expert crafters.
Kimberly - the explorer; beginner crafter
Looking to find a new craft as a hobby and a creative outlet for self-expression
Limited free time; complaint of having to spent time and effort to research different types of crafts and tutorials
Need to learn with flexibility and convenience
Struggled to determine if projects are beginner friendly and suitable for her
“want to have fun and be creative, instead of just watching netflix all weekend”
Lucy - the creator; the expert crafter
Looking to find a new project ideas that utilize existing supplies that she already own
Want to find new craft as a pastime
Feeling uninspired, and want to enjoy crafting again
Want to minimize spending, including paid tutorials and purchasing more specific supplies
“I already have a lot of craft supplies and tools so I just want to find new ways to use them and have fun along the way”
Information architecture
I conducted a card sorting activity on Optimal Workshop with 4 participants to understand how people will group information and content together. 54 cards were included based on various topics that might be included on Craftalog. An open card sort was done where the participants were provided with the cards and instructed to create groupings and name them.
Click here to view similarity matrix
I then created a sitemap with the results, along with the common pages that would be found on a site (e.g. contact us, account creation, help etc.)
Finalized categories from card sorting activity:
Types of craft
Difficulty level
Tools & materials
About the craft/planning
Craft ideas.
The sitemap was created based on the results of the card sorting activity, along with common pages on websites
At this point, I restated the project goals, based on the commonalities between goals of the business and the users, while also considering any technical goals before moving forward.
The overall goal is to make a responsive site that helps create an enjoyable crafting experience, especially for beginners or people potentially interested in crafting get started.
Project goals diagram is created to determine what are the users trying to achieve, and understand how the business can provide value to the users.
Based on the problems generated from the how might we statements along with the defined project goals, I then brainstormed for potential solutions using analogous inspiration (exploring how other industries are solving the same problem) and playing opposites (exploring bad ideas).
Click here to view more about the brainstorming process
I then used the MoSCoW (Must have, Should have, Could have and Won’t have) method to prioritize the various ideas, and concluded the 3 main features to focus on would be:
Account creation
Explore crafts
Explore project ideas
MoSCoW chart for feature prioritization
I also created the below task flows and user flows for these 3 main features, to understand what are the steps needed for the users to achieve the task, and how the users will move through the product to achieve their goal.
Account creation task flow: maps out the steps users will have to take to create an account.
Account creation user flow: map out how the user will move through the site to create an account.
Explore crafts task flow: maps out the steps users will have to take to search or browse for different types of crafts.
Explore crafts user flow: map out how the user will move through the site to search or browse for different types of crafts.
Explore project ideas task flow: maps out the steps users will have to take to search or browse for different types of project ideas.
Explore project ideas user flow: map out how the user will move through the site to search or browse for different types of craft project ideas.
Design & Branding Process
Once I determined the above flows, I began to sketch for potential ideas of the screens required for the users to be able to complete the 3 tasks: create an account, explore different crafts and find a craft project idea. Since this is a mobile first project, I prioritized creating more screens for the mobile version of the site. These were then created digitally in Figma to create the mid-fidelity wireframes.
After gather some feedback through group critique sessions, I improved the mid-fidelity wireframes before moving forward to the visual design portion of the project. This included changing the layout of the explore pages. Initially, I created sections on the explore pages, such as popular ideas, and project trending among crafters of different experience levels etc., which was meant to better assist users to find what they need. But based on some discussions in the group critique sessions, I found that these labels are not necessarily helpful for everyone, which I then opt for a continuous scrolling layout and added filtering labels on top instead.
Initial sketches of Craftalog screens
Version 1 of mid-fidelity mobile wireframes
Mid-fidelity desktop wireframes
Version 2 of mid-fidelity mobile wireframes after some feedback (added filter tags and removed categories on the explore pages)
The branding process started with reflecting on the project goals, to understand what the brand is trying to achieve for the users, as well as the values that will guide the brand and the product. I then created a moodboard to visualize the overall feeling that it is trying to create in the users.
Moodboard created to get inspiration for the branding for Craftalog
Brand values: creativity, playfulness, enjoyment, fun, exploration
For the colour palette, I wanted to use orange as it is a warm colour, and is often associated with happiness, friendliness and being inviting. I think that would go along with the overall playful and fun tone of the project. I also picked a complementary blue colour as the primary colour, since the orange might be less accessible for buttons and UI features.
For the typography, I opted for a sans-serif font, Poppins. Readability is key, since craftalog is an informational and text based site.
For the logo, I brainstormed for different ideas, including wordmarks and monograms. In the end, I liked the idea of creating a pictorial mark of common craft tools and supplies, and finalized on a combination mark of a ringed sketchbook and ‘craftalog’.
Summary of Craftalog branding, including colour palette, typography and logo design
High-fidelity wireframes and prototype for both mobile and desktop, after applying branding elements and images
Testing & Improvements
After applying the UI visual elements to create the high fidelity wireframes, I conducted a round of usability testing with 5 different participants to determine if users are able to easily complete the 3 tasks on the mobile version: create an account, explore types of crafts and explore different craft project ideas. And if the prototype and flow of the screens make sense to the users.
Key feedback from usability testing
All participants found the 3 tasks to be easy and were able to complete them
(1 - easy; 10 - difficult)
Account creation: 1.2/10
Explore and learn about a craft: 1.6/10
Explore and choose project idea: 1.6/10
Most people would rather just browse, and would not create an account
Participants questioned the benefit of creating an account (e.g. personalization etc.)
Participants noted that craftalog is likely to be helpful for beginner crafters who are doing research, since there are so many types of crafts out there
MoSCoW chart for usability testing feedback
Key changes from usability testing
Directly included search bar on the explore page to avoid extra step for user
Consolidated navigation to using hamburger menu / only top navigation
Redesigned account creation screens and buttons
Original design only included a sign in page and a sign up page, based on the feedback, we made sure to display the appropriate options for users that are returning vs new user that is trying to create an account
Created homepage/landing page to help direct users
Iterations made based on usability testing feedback, including the revised hamburger navigation menu (instead of a bottom navigation bar) and updates to the explore screen to directly include the search bar
Conclusion
So, here’s Craftalog. An informational site created for beginners and potential crafters to help them research and prepare for their crafting journey!
-
Stay curious!
Always start with understanding before doing any kind of designing or even brainstorming for solutions.
Focusing on the users’ problems will ensure all decisions are user-centered.
-
When making the research plan, I placed the majority of the focus on the actual learning phase itself when it comes to the questions in the user interviews. Looking back I should have included general questions about the entire process, including the pre-learning phase which is what craftalog is focused on. In that situation, I think I should have also done a survey to ask more specific questions to gather quantitative data as well.
-
Further develop pages of different crafts
Further develop other less prioritized features