Group Assignment 3a: Iterative Design

Arts and Crafts Group

Website, Persona, and Test Overview

Our group chose to user test and redesign the website Sarah Maker, which is focused on teaching people how to create many different arts and crafts. The persona we chose for our user test was a young woman who wanted to learn to crochet, so for our first iteration of our website redesign, we focused on making the home page easier to use for both beginner crocheters and for any user of the website.

Original Homepage

Homepage Redesign

The first of the main changes to the homepage came in the form of adding drop down menus to each of the menu bar options at the top of the page. On the existing site, these are single-click options (except for the “Crafts” menu). This change will allow users to find more specific topics within the broader topic that they are exploring, as well as make overall site navigation much more simple and easy to use, and cause the users less frustration when they are looking for something specific.

Redesigned Homepage

Additionally, in the menu bar, a “Home” button has been added and the “Crafts” button has been replaced with a “More” button. While more savvy users may know that a majority of websites allow you to navigate back to the home menu of a page by clicking on the site’s logo or title at the top of the page, those who are not aware may have difficulties navigating easily back to the homepage. The addition of the “Home” button will easily remedy this issue. The adding of the “More” button serves to clear up a bit of confusion that may be caused by the “Crafts” button. The “Crafts” button comes off as relatively redundant, given that each of the other tabs actually contain crafts as well. By changing this button to “More,” some of this confusion may be eliminated. Finally, short descriptions have been added to each of the different craft options further down the home page. This will provide users with some more information about each of their given options without them having to go back and forth between the different links.

Right under the redesigned menu options, there is a new tagline and brief introduction to the site – on the original design, you have to scroll all the way down to the bottom of the page to find the “About” section or click on another menu (such as “Crochet” and then click on her information from the side). The new design immediately tells users what the purpose of the site is, rather than just having a bunch of miscellaneous menus.

At the bottom of the page, in addition to the existing “Navigation” section, we have changed the Social Media links to their respective icons and added “Crafts” and “Resources” section, mirroring what users can find at the top of the page so they don’t have to scroll all the way back up after exploring the home page. In the “Resources” section, we have also added an FAQ as a catch-all for users looking to find basic information about the site as well as about specific crafts. This will increase the ways that users can find the information they need depending on their preferred way of moving around the website.

We will be submitting an additional post to this one soon with a new wireframe depicting modifications made to the crochet page.

November 1, 2022

Individual Assignment 3

Logan Davis

Introduction

The website that I will be using for this assignment is Sarah Maker, a crafts website with a large selection of instructional articles that my group and I decided on for our overall group project. This site consists primarily of instructions relating to knitting, crocheting, and related techniques. Despite its large array of options, there are still many issues with this website, which I hope to gain some insight on through this assignment.

User

My user is a younger male with a college level education. He is very tech savvy and uses various forms of technology on a regular basis. He has a very basic knowledge of arts and crafts and has not recently used a website like the one being evaluated.

Method

The user testing method I employed is the think aloud protocol, in which the user interacting with the website describes their actions, thoughts, and what they’re seeing. I chose this method in order to get a better understanding of how the user perceived the website being evaluated. Through the think aloud method it is easy for the user to just say what they are thinking while in the process, and for me, the evaluator, to understand their process while they are doing it. This also allowed me to take easy notes on what the user was doing and why, which then allowed me to go back and analyze those notes afterwards.

Tasks

The first task that I had the user accomplish was finding instructions for someone who was completely new to crocheting to the point where they wouldn’t even know where to start. The second task that I had the user accomplish was learning what different kinds of yarn and thread are best for different kinds of crafts. The third and final task that I had the user accomplish was finding a beginner level crochet project that would make a good holiday gift for a friend or family member.

Analysis

For all three of the presented tasks, my user had little to no challenge completing the specified end goals. Each task was completed in a manner befit for someone who is regularly on the internet and technologically savvy. The first task was completed by clicking on the “Crochet” tab, and then selecting the “how to crochet” hyperlink. Because the first task required the user to find something crochet related, my user almost instantly turned to the “Crochet” tab, as he believed it most likely held what he was looking for. From there it was pretty straight forward, with the most obvious route being the aforementioned hyperlink, which was highlighted in blue, positioned toward the top of the page, and stated almost exactly what the user was looking for. For the second and third tasks, the user easily found what they needed to find with the use of the search bar. The second task found the user clicking through a few different articles before eventually finding the one they were looking for, though this did not take all that long nor did it deter or frustrate the user at all. The third task was much quicker, with the user simply looking through the different article thumbnails until they found a craft that was holiday related. Overall, I believe it to be relatively easy for the user to find specific things across the website, especially when using the search bar, when the user can quite literally search for exactly what they are looking for.

Recommendations

While there are plenty of flaws in the Sarah Maker website, none of them seemed to be an issue for my user, or even came up in the process of completing the provided tasks. With that being said, there is very little in the way of improvements that I can offer based off of this evaluation. What I can say though, is that those who are not as technologically savvy may have a bit of a harder time finding more specific things. To those less inclined individuals, it may not be so obvious to use the search bar. One suggestion I can offer is to implement a system that would allow you to apply a filter to the list of postings you are viewing. This could be implemented on the home page, on each separate page of postings, and even on the list generated by using the search bar. Such an implementation would allow for users to narrow down the list of posts to almost exactly what they want, while cutting out any unnecessary clutter in the process.

September 27, 2022

Individual Assignment 2

Logan Davis – Arts and Crafts

Introduction

The website I have chosen for my heuristic evaluation is a Pinterest article. The specific article can be found under a collection entitled “Art and Crafts for Kids,” which contains a vast number of similar articles that offer arts and crafts activities that are supposedly meant for kids. The specific article I have chosen is titled “Tulip in a Heart Card Mothers Day Craft,” and includes a short video giving instructions on how to make the card specified in the title. Along with this video is a very brief description and a comments section.

Scenario

The scenario that I am imagining for the evaluation of this website is that of a younger child looking for something to make for their mom for Mother’s Day. With that being said, I am viewing the provided instructions in the video as they would be from the point of view of a child. I am assuming this child does not have any help from any adults and are attempting to complete this craft entirely on their own.

Analysis

The first flaw that shows itself is the use of materials that are not obviously available. In the instructional video, the demonstrator has multiple templates that are used to trace out various aspects of the craft. Despite these being such an important part of the process, there is no mention of how to attain these templates, or even how to make them yourself. There are no links provided outside of the video that would lead someone to finding these templates either. On top of this there are multiple comments asking about these templates as well, all with no answers. Secondly, there is no provided list of the necessary materials for completing this craft. Throughout the instructional video, the demonstrator uses scissors, glue, multiple sheets of construction paper, and the aforementioned templates. At no point in the video is it stated that the user will need to use all of these materials, and the only way they would find this information is by watching the full video and making a note of each material being used. While this normally would not be an issue for someone even slightly older, a younger child might find themselves beginning the craft without having the necessary materials gathered. This could prove to be a problem, especially if said child is attempting to complete this without the help of a parent. The final issue that I have found relates to the landing page of the website, rather than the specific article itself. The main page consists of what is essentially a wall of thumbnails that could easily become overwhelming for anyone, let alone a child. Along with this mess of thumbnails, the images are much larger than the titles of the articles, which are in a small font underneath the images, which could prove to be confusing or even easy to miss, leading to navigational issues.

The first flaw I mentioned, the use of templates without any explanation as to how to attain them, falls under heuristic rule number 2 “match between system and the real world.” The second flaw I mentioned, the lack of an explanation of materials, falls under heuristic rule number 6 “recognition rather than recall.” The final flaw I mentioned, the overwhelming main page, falls under heuristic rule number 8 “aesthetic and minimalist design.”

The first flaw I mentioned violates the second rule because information does not “appear in a natural and logical order.” The demonstrator uses the aforementioned templates which are not entirely obvious to the user. It may have been clear to the creator where or how to obtain these templates, but to the user it is not obvious at all. The second flaw I mentioned violates the sixth rule because it falls upon the user to be able to recall what materials they need while in the middle of the instructional process, rather than recognizing the necessary materials from a prior materials list. It would be much easier for the user to recognize the materials they need if that information had been explained prior to the instructions. The final flaw I mentioned violates the eighth rule because the main page is not aesthetically pleasing at all and could serve to be much more minimalistic. The images are way too big, the text is way too small, and each article’s link takes up far too much space.

Design Recommendations

In order to improve this site, I would add a link to the templates that are used in the video as well as a list of necessary materials. Adding a method to obtain the shown templates would cut out a lot of confusion for users, and provide them with a much simpler way to complete the craft instructions. A materials list at the beginning of the video or even as a text entry outside of the video would allow for users an easy to way to gather what they need before completing the instructions, rather than during the process. Along with these, I would fix the main page by making the thumbnails for each article smaller and their respective titles slightly larger. The main page would also benefit from being reorganized in a much more appealing fashion. These changes to the main page would provide users with a much simpler way to navigate through the available articles and decrease frustration.

September 4, 2022

Individual Assignment 1

Logan Davis

The website I have chosen is the Dungeons and dragons 5th Edition Wikidot page. This page is not run by Wizards of the Coast (the creators of D&D), but is instead a publicly created and editable wiki-based website. My user tester for this assignment is fairly used to using technology on a regular basis, and engages in technological activities in both professional and recreational manners. I would consider my test user to be moderately experienced in using technology with a less than firm grasp on using more modern or advanced technologies. In regard to websites similar to the one I have chosen, my chosen test user has very little experience. The closest comparison would be minor usage of Wikipedia, which shares similar aspects to my chosen website, though it has a slightly different layout.
The test user navigated the website with relative ease and found very few snags. They made great use of embedded hyperlinks that connected the user to new pages. While these hyperlinks do provide useful in connecting to the user to relevant pages, I found that my test user quickly fell down a rabbit hole. Each page could direct the user to an entirely new set of pages almost infinitely through the use of hyperlinks, to the point where my test user simply returned to the home page using the “home” button, rather than traversing back through the pages they had previously viewed. Another issue that was uncovered involved the use of the menu buttons toward the top of the page. Each section that the button would redirect the user too is on the main page, and clicking the corresponding button simply brought the user to that section on the home page. However, when clicked the button displays the are directly above the corresponding section, which proved to be initially confusing for my test user who had no experience with the site or even the content within the site.
The setup of my chosen site can definitely prove to be a bit of a hinderance for novice users. As I had mentioned previously, the two issues my test user had uncovered could be easily avoided with better user-centered design. In regard to the hyperlink issue, the website should have a button that is always available that would simply redirect the user back to the page they had previously viewed. This would greatly assist with any navigational issues and would make it much easier for novice users to backtrack if necessary. The other issue involving home page navigation, I feel could be solved in one of two ways. Obviously, the simple fix would be to have the buttons direct the user to their exact correlative spot on the home page, rather than slightly above where the user would intend to be redirected. A slightly more complicated fix could be to give each section that has a correlating button on the home page its own individual page. That way instead of just sending the user further down the page it would direct them to a page solely dedicated to what they were looking for, which may shed any excess confusion.