Have ewe any wool

• Responsive Website
• Logo Design & Branding

• UX/UI Designer

• 4 weeks

• Sketch
• Concepts
• Airtable
• Whimsical
• InVision
• Affinity Designer
• Adobe Illustrator

OBJECTIVE

Have Ewe Any Wool is an independent yarn shop in the Buffalo area, serving customers in Western New York for fifteen years. They have a wide array of hand-dyed yarns from independent companies, knitting supplies, and patterns. They also hold classes and knitting circles for the community, focusing on connection through craft. Their existing website and branding is non-responsive and outdated, and they’re looking for an update. 

This is a speculative project.

RESEARCH

Goal: Understand the user’s needs and frustrations when using a local yarn store's website
Process: Market Research | Competitive Analysis | Provisional Personas | User Interviews

Market Research

I started this project by researching local businesses, the yarn industry, and crafting in general. I wanted to learn more about the potential markets, and people who would be using the website. Why do they go to a local yarn store? What do they want from it? These questions began my secondary research.

While knitting isn't exactly a niche hobby, the people who choose to go to independent yarn stores tend to be more serious hobbyists. I needed to learn more about the overall market for fiber crafts, as well as the existing market for those who go to a LYS or Local Yarn Store.

crafting market

• 50% of all adults in America have made art in the past year
• 13% of those knit, crochet, or do other fiber crafts

• Crafting Demographics

  • 72% are women
  • 42% have children
  • Largest age group is 35-44 years old
• Approximately 5% of crafters knit (11.9 million) and 6% of crafters crochest (approx 14.7 million)
• Crochet & Knitting sales on Etsy had over 50% growth from 2010 to 2012
• Ravelry (a fiber craft social network) had 8 million registered users as of February 2019

local yarn store

Statisticts are from 2013

• Revenue Breakdown

  • Yarn Sales: 62%
  • Needles & Hooks: 12%
  • Classes: 6%
  • Other: 20%
• Yarn sales trended upward 40% - 9% in 2013 depending on type (wool, cotton, mohair, silk, alpaca, etc.)
• 80% of sales are in-store
• Only 31% of yarn retailers had an eCommerce store
• Average gross sales $158,375
• Most yarn stores spent less than 5 hours updating social media
• 50% of businesses surveyed made a profit, with an average profit margin of <10%

• Major Competitors:

  • Online retailers (yarn.com, Etsy, Lion Brand)
  • Other yarn shops
  • Craft chains (JoAnne Fabrics, Michaels, Hobby Lobby)

Competitive Analysis

Once I understood the existing market, I compared websites of various primary and secondary competitors for Have Ewe Any Wool. Unlike Mirror, I had an existing website that I could compare against the variety of competitors, to see how it would stack up.

The primary competitors I chose were other local yarn stores in Buffalo: Raveloe Fibers and The Knotty Buffalo. For secondary competitors, I compared it to River Colors Studio, a LYS in Cleveland, OH; Webs, a large online retailer; and Michael's, a major box store.

Provisional Personas

Provisional personas are meant to guide user research, and begin building empathy. These personas were based on secondary research, and the people I knew from my experiences in the hobby.

For the provisional personas, I wanted to get a variety of users that covered different experiences shopping. The interview phase would test these personas, which would either be validated based on primary research, or be proven wrong.

User interviews

After doing my secondary research, learning more about the knitting community and how local yarn shops work, I needed to talk to people. I went to Have Ewe Any Wool on a Saturday, and spoke to some of the patrons as they came in to browse. the store. Talking to these people lead me to a few surprising revelations and I was better able to understand their pain points.

I knew after my interviews that I was going to be designing for the actual customers of the store. The difficult thing I realized, though, was that most of the people I interviewed didn't use the website. Some didn't even know Have Ewe Any Wool had a website. It was an unexpected challenge that I had to solve through the rest of this project.

Number of Participants: 6
Gender Breakdown: 6 women
Age:  39 - 67
Craft: 3 knit exclusively, 1 crocheted exclusively, and 2 both knit and crochet.

Define

Goal: To define the user’s needs, goals, motivations and frustrations based on research findings
Process: Empathy Map | Persona

Empathy map

I took all of my notes from my interviews and transcribed them onto sticky notes, one color for each participant. I sorted them based on connections that emerged between my participants, which allowed me to visualize their goals, needs, and frustrations

Soon my wall became a colorful collage of patterns based on my research, which lead me to insights from which I could discern my user's needs.

insights

• Positive interactions with staff are memorable
• Most people look online for patterns before anything else relating to knitting
• Most people do not interact with Have Ewe Any Wool online
• Most people shop for yarn every few months

NEEDS

• Feel welcomed by the employees in store
• A well-organized place to gather patterns for projects
• In-person communication about events
• A project to purchase yarn for

PERSONA

Using my interview findings, I created a user persona. This exercise allowed me to build empathy and start designing for a person based on my users, not just assumptions. This persona will be my primary user that I'm designing for in this project. I created Melissa, an older mother who is trying to balance her hobby with work and family.

I used the needs I had come up with from the empathy map as a base, and information from other aspects in my user research to draw her goals, frustrations, and motivations

Ideate

Goal: Develop a logical information architecture and seamless user flows based on insights from research
Process: POV & HMW Questions | Brainstorming | Business & User Goals | Task Flow | User Flow | Sitemap

POV & HMW QUestions

To begin brainstorming, I needed to know the questions I was trying to answer and the problems I was trying to solve. I framed my insights and needs from the empathy map into POV statements. I then turned those statements around to create How Might We (HMW) questions, to begin brainstorming a solution to these problems.

How Might We questions are open ended and encourage creative brainstorming, without pigeonholing the designer into an established thinking pattern.

Brainstorming

I brainstormed using a series of 3 minute brainstorming sprints, trying to answer the HMW Questions. For each question I spent three minutes doing my best to come up with a variety of answers to the questions. After I answered all four questions, I went back for another round, taking another three minutes to come up wit additional solutions.

At the end of this process, I had a long list of potential solutions that I could implement.

business & user goals

To begin strategizing and prioritizing solutions from the brainstorming, I created a Venn Diagram comparing the goals for the business & user. Where they overlapped, is where I wanted to focus my solutions, bringing the highest value propositions to both business and consumer.

The user goals were pulled directly from the persona, while the business goals came from the business itself. This document will help me as I trim down the brainstormed solutions to come up with the final product.

Task flow

From my research, I knew the main reason most people viewed Have Ewe Any Wool’s website was to look for classes. Therefore, I focused my efforts on browsing for classes and then registering online. Knowing the user’s actions during a site visit will help make sure the project has all necessary pages and that the actions they are expected to take are logical

I figured it would be easier to focus on the classes for this web project, because it seemed the easiest way to get existing customers who weren't using the website to get to use the site. Most users were taking classes at Have Ewe Any Wool, or they went to the shop for advice and tips. It also is more manageable to keep the classes updated as opposed to the entire stock of yarn in store, like an eCommerce site would need to.

Because most of the users didn't like shopping for yarn online, an eCommerce store seemed like too much effort for the owner to manage, with very little return on that investment.

User flow

The user flow had a similar goal for the task flow. However, this time, I added decision points and branching trees based on those decisions. I branched through Melissa’s decision-making process as she entered the site, ready to look for new classes.

I needed to make sure I was considering all the decisions that Melissa could make using the website as I went through the rest of the design process. The user needs to have freedom to move through the design in a way that makes sense for them. A user flow helps

Click the image below to see the full user flow.

Sitemap

The sitemap lays out all the pages on the website & makes sure that the website is organized and the Information Architecture makes sense. I started narrowing down solutions that I had brainstormed, and continued to focus on manageable additions to the website.

I focused primarily on a blog with tutorials and projects to make the site feel personal, and bring the warmth that people loved from the staff to the website. I also wanted to focus on online registration for classes. Currently, users could email the teacher to register. I figured an online registration and payment would be both doable and useful for people who were taking classes.

Design

Goal: Implement solutions to user frustrations and pain points
Process: Product Road Map | Sketches | Mid-Fidelity Wireframes | Responsive Wireframes | Branding

Product Road Map

The Product Road Map helps finalize and prioritize the solutions for the product. This acts as a guide for the product’s lifespan and makes sure the highest priority solutions are designed first. Using my brainstorming, sitemap, and task flow, I built spreadsheet on Airtable to start this process. I focused on making the most essential segments first—store information, contact, events—and put bigger projects, like a searchable inventory and an eCommerce store under “Nice to Have.”

Sketches

Now that I knew the pages I needed to design, and the things that I wanted to include in them, I began sketching. These quick, low fidelity wireframes made the site more visual to me and allowed me to refine some of my ideas. I created the core pages of the website, making sure that all necessary information was in the pages.

I used Concepts to sketch out the wireframes on my iPad, which is my preferred sketching method. I quickly sketched the main pages for the website, based on the user flows and product road map.

One page I was most excited about was the calendar page. Here, I designed a calendar that showcased the events and classes going on at the store. Underneath the calendar were cards with more information about each event. I wanted to provide an easy-to-read way for users to see workshops and classes, which link to their class pages, and offer registration modals.

Because people were primarily using the website to view events and classes, I figured having an online calendar to showcase events would be a great way to get more traffic to the site from existing customers.

Click the image below to see all of the sketches.

Mid fidelity wireframes

After creating sketches, it was time to increase the fidelity. Using simple shapes and dummy copy, I used Sketch to create mid fidelity wireframes. I designed all key pages this way, as well as responsive wireframes for tablet and mobile of the most essential pages.

This process helped me visualize the website more clearly than simple sketches, while still allowing me to focus on the visual hierarchy and layouts. For the most part I translated the sketches into simple shapes, to quickly make the design.

These mid fidelity wireframes will be turned into a prototype for testing. Testing at this phase allowed me to test the website before the design elements were finalized, making it easier to make changes.

Click the image to view the mid fidelity wireframes for browser, tablet, and mobile.

Prototype & Test

Goal: Bring the design into an interactive state  to get feedback from users and improve the design.
Process: Mid Fidelity Prototype | User Testing | Affinity Map | Logo & Style Tile | UI Kit | High Fidelity Prototype

Mid FIDELITY prototype

To begin testing the prototype and my solutions, I needed to link together the wireframes. I used Invision to create a mid fidelity prototype to begin user testing. I added some filter functionality and form fills to this design, to simulate potential features of the real website.

The mid fidelity prototype can be viewed here.

USAbility testing

User testing allowed me to test some of my assumptions for how people would use the website. The feedback from users would influence my designs, and allow me to make changes based on their feedback. Testing at this phase, with a mid fidelity prototype, allowed for quicker ideation because of the simpler prototypes.

I conducted moderated Think-aloud tests with people in my area. I asked people to use my prototype while I told them the tasks, then to walk me through their process as they completed them. This gave me insights into what the users were thinking and a better idea of both

Number of Participants: 8
Gender Breakdown: 4 men, 4 women
Ages: 23-57

task 1

Browse for an Introduction to Knitting Class

• Completion Rate: 100%
• Error Rate: 75%

task 2

Register for the Introduction to Knitting Class

• Completion Rate: 100%
• Error Rate: 25%

task 3

Send a short message to the owner

• Completion Rate: 100%
• Error Rate: 12%

AFFINITY MAP

Now that I had my data from user testing, I needed to turn that data into design recommendations. To do that, I needed to synthesize the data and find patterns between the different user tests.

I started by transcribing my notes onto color-coded post-its, which I then rearranged into categories, based on the ideas and thoughts that they shared. This method allowed me to visually see the connections between different user tests and find out the most pressing problems with my design.

insights

• Most people scrolled through the homepage prior to using the header to navigate
• Users did not browse through the class cards when trying to find a specific class
• When people used the class cards, they were unable to correctly trigger the link using “Read More”
• Most users scrolled to the footer to reach the contact page, instead of using the header link

design recommendations

• To focus on classes, add a class section to the homepage, near the top
  
• Make browsing through the cards the primary option, by moving the calendar
• Make the title & photo on the card link to the class page
• Making the contact button in the header more visible using contrast, but keep buttons in both places

Mood board

The mood board is part brainstorming exercise, part style guide. I started wirh the brand adjectives I had decided on for Have Ewe Any Wool: Friendly, Welcoming, Rustic, and Warm. then trawled Pinterest & other sites like Ravelry to find inspiration for various parts of the visual design. I focused on the logo, typography, product imagery and color palette for this piece. Through these images, I was able to drill down on the visual style of the project, and share my choices with stakeholders.

I wanted a neutral color palette, that focused on warmer light browns. For typography, I wanted a rounded sans-serif font that would be friendly and welcoming. Have Ewe Any Wool is such a cute and evocative name, that I wanted to reflect in the logo. I was looking at clean, simple lines for logos, focusing on the sheep image.

logo design

Logo design starts with the brand adjectives. I wanted the logo to be playful, friendly, and welcoming. I also wanted to bring sheep or yarn into the imagery, because of the pun in the store name. After sketching various sheep and yarn balls, I ended up with a cute, loopy sheep. I then vectorized this logo using Affinity Designer and Adobe Illustrator to create the finalized version.

style tile

The style tile becomes a proof-of-concept for the visual design, and brings the major elements together. I chose a neutral color palette, because I knew there would be lots of product imagery of beautiful yarns and projects, so I wanted that to be the focus. I chose Quicksand as an H1 font, because of its rounded terminals that evoked a friendly vibe. I paired it with Museo Slab, a serif font with thick serifs, to give a weighty, rustic vibe.

Click below to view the full style tile.

ui kit

The UI Kit is meant to act as a guide for all styles in the project. This includes buttons, color palette, logos, symbols and more. Using my style tile and wireframes as a base I created default styles for all major elements that would be on the page. I collected the major icons I needed, primarily social media icons. I also made form fills and various button states. I made these into symbols in Sketch, which made it easy to insert them into my high fidelity wireframes.

Click below for the full UI kit.

high fidelity wireframes

The high fidelity wireframes combine the visual design with the wireframes, creating a sample that's very close to the finalized design. After making some adjustments to my design, based on the user testing, I started adding the design elements based on my UI kit. After working through the design on desktops, I created responsive wireframes of key pages to showcase how the design would scale.

At this point, the major components of the design were finalized, and any changes were small visual tweaks. I was happy with how the design came out, overall, and I think it's a step up from Have Ewe Any Wool's existing website.

I then linked these screens together to create a high fidelity prototype of the browser version, here.

CONCLUSION

REFLECTION

Looking back on this project I learned a lot about the reality of tight deadlines and the sheer amount of work it is to turn a product around in two weeks. It was hard to let go of my perfectionism and focus on completing the project in a timely manner. I was able to get out of my shell and felt my interview skills growing. This project really honed the need for research and defending design decisions based on existing patterns or solving user pain points. I was able to learn how to quickly move through a the design thinking process and streamlined my workflow.

NEXT STEPS

To continue this product, I would return to the user testing phase to see if there were any pain points with the high fidelity design. I want to know how effective the changes were, and if the colors or images added any difficulties for the users. After making any final adjustments to the design, I would design the rest of the responsive screens that were needed before handing off to a developer.