Group Assignment 3a: Iterative Design, Part Two

As a continuation from the homepage – our group also thought it would be useful to make redesign suggestions for the Crochet landing page. This page can be accessed from clicking “Crochet” in the top navigation or from the “Crochet” category button on the homepage beneath the header.

Our proposed redesign:

This redesign would make it much easier for users to quickly find the section/information they need in one glance, instead of having to read through lengthy paragraphs to find hard-to-see hyperlinks within. (see current crochet page below).

Our redesign would maintain the same branded top navigation as the redesigned homepage, as well as the same redesigned footer. This would provide consistency for users as well as maintain an easy site map for links that are accessed often.

We kept the newsletter section large but near the bottom to remove the need for a distracting shaded effect the current site has, while still maintaining the accessibility/importance for the newsletter sign up.

Additional things to note about our crochet page redesign:

  • Separate hyperlinks and put them in more contrasting colors by creating obvious/clearly labeled buttons
  • Tag beginner-friendly posts and/or tag all posts with appropriate levels – within the sub pages (for example patterns), all patterns/tutorials will be organized by skill level.

Individual Assignment 3: Representative User Test

  1. Website Being Evaluated

The website being evaluated is Sarah Maker. It is a crafting tutorial site for multiple mediums including crochet, knitting, punch needle, cricut, quilting, tie dye, and more. The website is organized by medium, and the tutorials are given in blog post format with photo examples vs. video. 

  • The Users

The users of the site will be people interested in crafting and be of various skill level. I can see anyone from beginners to advanced crafters using this site for their crafting needs. The users will be creative with artistic tastes/interests and will most likely respond well to visuals. 

Our group persona is a social-media savvy young woman who is just starting her journey in crochet. 

I did not have someone available who would fit this persona, so my user is a highly advanced tech male in his mid 30’s. He has a computer science degree and works in cyber security. While he is interested in creating – he dabbles in 3D printing and painting vs. the more fiber/yarn-based crafts on this website. I think this effected his choice of Christmas gift tutorial – he is way more practical minded and less “cutesy” when it comes to tastes, which may not be accurate for above persona. 

  • The User Test Method

The user test method utilized was the Think Aloud method. He sat at a computer while I sat at a chair next to him. I asked him to narrate his process as much as possible and took notes while he completed them. I chose this method because it was a great option as far as tools available went as well as created a relaxed environment for the user to narrate and complete the tasks. I was able to sit and closely observe their process.

  • The Tasks

I stuck to the original tasks which were as follows:

Task 1: Find instructions for a complete crochet beginner who has no idea where to even start with the craft.

Task 2: Learn what different types of yarn and thread are good for different types of crafting.

Task 3: Find a beginning crochet project that would make a good holiday gift for friends or family.

  • Analysis

Task 1

For Task 1 he started at the home page. First instinct was to click Crochet from navigation. This landing page is very wordy and he did not spend time reading it carefully and instead scanned the text, completely missing the paragraph about beginning to learn crochet. He noted that the links are way too close in color to the body text and were hard to see. He also noted that the visuals on this page were hard to differentiate from the advertisements. This caused him to glaze over the first few visuals/links at first:

When he got to the bottom of the page he exclaimed quite exasperatedly “THERE ARE 15 PAGES?!”

Once he realized that the images above are links and not ads he scrolled up and clicked “27 Free Tunisian Crochet Patterns”. I asked why he went with this one and he said it was because it mentioned “Beginner friendly” in the title whereas the others said “Beginner to Advanced” so he thought that would be the better option for him. 

Here he scrolled down a bit and made note on how much text there was, while not reading any of it. 

Clicked Tunisian hooks link under supplies and led him to Amazon. Said would buy this if starting. 

Went back to site and saw the first pattern – liked the look of it so he read the details. Noted he liked how clear this part is. Large image, brief description, suggested yarn, and clear link.

It leads to a tutorial on another site.

At this point I slightly led, because I think he was a little confused on task and getting away from himself. So, I said “if you didn’t even have a clue on how to read a pattern and were just looking for the extreme basics, like stitches and casting on. Where would you go?”

Went back to the crochet landing page from navigation and read the top content more closely. Finally found the small link to the Crochet for Beginners Guide mentioned in very first sentence. 

On this page he mentions he likes the photos but would probably go to YouTube later for video tutorials. 

Task 2

Starting again on the homepage, went to Crafts from navigation. Read list and decided that was not where he needed to be. Then clicked Knitting from navigation. Sat for a bit lost on where to go, then noticed the Search bar. 

Using the search bar, he searched “Types of Yarn”. Made note that he had no idea what any of the terms meant, for example “Worsted”, “Yarn Weight”, etc. Because of this he decided not to click on any of the links and instead adjusted his search to “Best Types of Yarn” – this produced the same results. He clicked out of search and exclaimed that at this point he would give up and use google to find a different website.

Task 3

Again, started from the homepage and then went to the Crochet landing page from the top navigation. Scrolled down the long page and passed over the Christmas themed patterns and went to page 2 instead. When asked why he didn’t click those he said he thought they were a lame gift idea and wanted to go with something more practical, that people could use year-round. 

Instead chose “25 Gift Ideas” link because the visual spoke to him. 

On this page he started to scroll down and stopped at the holiday list. He noted that he didn’t like that only Christmas and Valentine’s Day were links:

Kept scrolling and started reading a bit. Got annoyed when his reading was interrupted by the shadow effect that happens when you scroll over the email forms. 

He also made note that it is annoying to have to scroll through each pattern one at a time instead of seeing them all at once to determine more quickly which one you would like to learn.

Had to scroll for a bit until he came to a project he liked: “Easy Crochet Can Cozy”

Clicked “Continue Reading” to learn this pattern. Started reading the pattern a bit and missed the links up top that would teach the 6 Basic Crochet Stitches for Beginners. Saw lower that he needed the Moss Stitch for this pattern, but that there wasn’t a clearly labeled link or tutorial for this stitch. Scrolled back up and clicked the stitch link. Used “Command F” to search “Moss Stitch” on this page. Then had to click another link to finally get to the moss stitch tutorial. Needed to navigate 3 pages just to find the stitch tutorial needed for this pattern.

  • Design Suggestions

My design recommendations for this website would have the goal of reducing search time for the users. Each task in the analysis took quite a long time to complete. To do this I would do the following:

  • Reducing scrolling needed by revaluating the architecture of the pages – this can be done by creating clear categories that can be seen before the fold of the homepage. Instead of placing important links in content blocks, move them out into clear CTA buttons and lastly placing the tutorials in a gallery format vs. one on top of the other.
  • Navigation: the navigation can be organized more successfully by matching the categories linked on homepage: Crochet, Knitting, Punch Needle, Cricut, Quilting, Tie-Dye

Vs. having quite a few of the crafts hidden under the “Crafts” category

I would also place dropdowns underneath each of the top navigation links and would have a clear link for beginners guides underneath the navigation. 

  • Other suggestions: remove shading effect over email forms and create videos for users (to keep them on this site instead of competitors on youtube) 

Group Assignment 2: User Scenarios and Representative Tasks

Group Name and Members

Arts and Crafts

Julia Bomalaski, Logan Davis, Amy Feinstein, Deborah Turner, Evan Wilson

The Chosen Website 

Our group has decided to analyze the website: Sarah Maker. We chose this website because it is a great example of a crafting/instructional site that has a lot of potential for improvement. We are interested in testing the usability of the catalog of posts as it pertains to navigation and searchability. 

The Chosen Persona

We’ve decided to focus on a social media savvy young woman who was inspired by Pinterest to pick up crocheting. She’s been saying she would eventually teach herself to crochet for years, but other priorities have hindered her from starting. She now has the free time to dedicate learning to crochet. With the low financial commitment and abundance of accessibility to resources on how to crochet, the barrier of entry was very low.

The Scenario

Inspired by social media, our persona would like to learn how to crochet, so she can start her own crocheting Instagram account. She’s looking to find clear instructions on how to start crocheting and easy but interesting-looking projects that she could post to her own social media profiles.

The Tasks

Task 1: Find instructions for a complete crochet beginner who has no idea how to even start the craft. 

Task 2: Learn what different types of yarn and thread are good for different kinds of crafting.

Task 3: Find a beginning crochet project that would make a good holiday gift for friends/family

With these tasks we hope to find out how easy it is to navigate when looking for a specific craft or tutorial as opposed to general browsing, how easy it is to switch between tasks (for example, if you can have the pattern instructions up but easily switch to the basic crochet instructions because you are still learning the stitches), and how easy the instructions are to follow (video vs picture tutorials, etc.)

Individual Assignment #2: Heuristic Evaluation

Website Being Evaluated

The website I will be evaluating is 30minutecrafts.com, a collection of quick craft tutorials and ideas for craft enthusiasts whom may be short on time or energy. It was founded by Carolina Moore as a resource for fast crafting. She is still actively posting to the site, as the last tutorial was made in 2022.

Scenario

The scenario I chose to guide my evaluation is a young hip female crafter with moderate technology experience (avid social media user and grew up using the internet, but does not have formal schooling or training with computers) has decided to save money and make her friends and family’s Christmas gifts this year. She has limited time between working and taking courses at her local community college (where she studies art history) and through a quick google search stumbled upon 30 Minute Crafts. She wants to find 1 or 2 crafts she can make that will be gender neutral, doesn’t involve sewing, and will take no more than 15 minutes each. 

Analysis

Immediately from the homepage there are issues in regards to Heuristic #1: Visibility of system status. It is extremely hard to tell where the user is (homepage) and where to go next. Poorly designed homepage, that does not follow the standards expected by users – violating Heuristic #4: Consistency and standards. By default it is throwing the user in a mobile layout with no working way to switch to desktop view. This causes the branding and message of the website to be lost. There is a tiny logo on top, cluttered hard to read banner, messy unorganized lists of posts with no clear categories or labeling, and navigation is hidden under a tiny hamburger menu on the side. 

The user scrolls down the homepage, clicks Desktop, and realizes it will not work. Getting overwhelmed by the list of crafts and lack of clear insight on materials, categories, or time, the user clicks the Hamburger menu. From there she sees a “Home” button. It leads to the URL https://30minutecrafts.com/whats-new. This page kicks the user out of a mobile view and into a slightly prettier desktop template. The copy and writing style of this tutorial matches the vibe of the user. This aligns well with Heuristic #2: Match between system and the real world. 

At this page the user sees a much better navigation (as opposed to the page linked from google – the one that the user thought was the homepage https://30minutecrafts.com/). She selects “15 minute crafts” and is immediately thrown back into a mobile template, with no thumbnails and no clear insight into what the craft tutorials are. She gives up and decides she wants to try a different category, but now the clear navigation is gone and she can not easily return to where she was (breaking Heuristic rule #3: User control and freedom). After clicking the back button, she clicks “10 minute crafts” where she quickly glances over the thumbnails and decides to go with the “Felt Tic Tac Toe Board” tutorial for her gifts, even though she is not sure all of her friends will like it, without realizing there is a small “Next Page” button on the bottom where many more tutorials are.

Other Heuristic violations noticed through user task: Heuristic #7: Flexibility and efficiency of use. While there is a search bar, it is very small and hard to see. I originally did not see it until I specifically went searching for it. It would have been easier and more intuitive for the novice user if this was more visible. A first time user may be more likely to notice it and use it to go straight to the tutorials they are looking for. For example my user could have searched “No Sew” and seen all relevant tutorials. One thing to note in addition to it not being noticeable is that it is not very advanced either. If user were to search “15 minute No Sew” many tutorials will pop up that are 30 minutes and require sewing. 

As far as Heuristic #8 goes, this website could adopt a more aesthetic and minimalist design in places. The column on the right that follows user through most pages can be distracting and that information could be better served elsewhere. 

One thing I think this website does well is Heuristic #10: Help and documentation. The steps are clearly presented with great visuals making the tutorials easy to follow.

Recommendations

  • Redesign the homepage to fit commonly used standards expected by users. Clear branding, header banners, navigation, clear CTAs, contact information, and footer.
  • Better organize navigations – reevaluate the navigation given on the “mobile” homepage compared to the navigation on the desktop page (pages are missing and hard to find unless on the confusing “mobile” homepage and vice versa). 
  • Redesign how the tutorials are presented on the category paged. Make sure every tutorial is given a thumbnail and description that will let the user know what the tutorial is about without having to click through individually to choose a craft. Remove need for the “Next page” button that is extremely hard to see.
  • Create a design and flow that is more conducive to the main user task of finding a craft tutorial to try by fixing the heuristic violations mentioned in the analysis. The tutorials are great once the user actually gets to one, but finding the full catalog of tutorials is nearly impossible with how the website currently is.

Individual Assignment #1

User Profile

My chosen user is a 34 year old male with a bachelors in computer science and works as a Cyber Security Support Engineer for Amazon Web Services. He is extremely comfortable with computers and would be considered high expertise with technology. While he uses websites often, he rarely, if ever looks at artist websites/portfolios online. He mainly uses the web for video games, D&D, and tech news/research. I decided to give him a specific task to follow when looking at this website: https://ednahibelstudio.com

Task: Using frequently asked questions find more information on whether other artists do enhancements on Edna Hibel’s lithographs. 

Novice Actions

First inclination was to begin scrolling down the homepage. User started getting frustrated once they realized that the page was very long with difficult content to search through by glance. Used “Command+F” to search the terms “enhancements” to see if he could quickly jump to the information on the homepage. That produced no results. They reread the first task and noted it mentioned “Frequently Asked Questions”. They began to get excited because they thought they cracked it, by finding the Frequently Asked Questions page on the navigation, but quickly got frustrated again when they realized how horribly organized the information on that page is. After scrolling through the entire page, they finally found #14 “Does Edna Hibel touch up each image personally or is this done by other artists?”. They tried clicking that to find the answer, but it led to a broken page. They thought maybe that was the end of it and there was nowhere to find the answer. I told them there was ANOTHER FAQ page that they could find the information on.

Dismayed they went back to the navigation (instead of seeing that there was a small link that said, “More FAQ”, which doesn’t work anyways, but wanted to note that they didn’t use it despite it being there). After some slight scanning the long navigation list they found FAQ Page Two which leads to the page with the answer. There are only two questions on this page, so they were able to find the answer quickly.

Something I found very interesting was they did not see or utilize the Search bar to the right of every page. This would have allowed them to quickly search “enhancements” and immediately find the pages they needed. 

Recommendations

The results show that it is difficult to quickly navigate and find information on this website. An informative website’s FAQ page is meant to be a reliable source to utilize when there is a common question to be answered. It is obvious that the FAQ page is essentially useless on this website. It is hard to find (being two pages), poorly organized (users cannot quickly scan to find their question or topic), and most of the links do not work or are poorly linked (making it easy to get lost on the website).  

I find it interesting that the search bar was not noticed. Especially when there are two areas to search. The Search bar on the right navigation and the small icon near the navigation. 

My recommendations for a redesign would be to rework the navigation, making it more effective, less overwhelming, and rework the sort order to better fit a user’s expectations. 

I would also overhaul the layout of the homepage. The person I tested immediately got frustrated with how far down the homepage scrolls. They almost gave up searching before it even started, because of how overwhelming it was to take in the homepage.