Sew Together website: http://sewtogether.herokuapp.com/

Design

Our final Sew Together design is a website that helps people who are new at sewing find easy projects with step-by-step tutorials that are all in one place. The two main parts of Sew Together are the project search, which helps users find a project suited to their needs, and the step-by-step project tutorials. Other features of the site include keeping track of ongoing projects if you are logged in, allowing users to leave comments/notes on the tutorials themselves, and a glossary/sewing help section that contains help for basic techniques and skills involved in sewing.

The project search page allows the user to search through the project tutorials that are available on the site and filter them by relevant criteria, such as the estimated cost of the project and the difficulty. The appearance of the filters on the side went through some changes after the heuristic evaluation-- we added the checkboxes to increase visibility and make it easier for users to understand how they work (OR, not AND).

For this implementation, we have one representative project tutorial, "Strawberry Cream Roll". Were the site to be fully implemented, we would provide several more projects. While initially considering our design, we had thought about allowing users to also upload their own projects to the site, which would solve a problem of not having enough variety. After all, a beginning sewer will want a project that is not only easy but also personally fulfilling. After some debilitation, however, we decided not to allow for user-generated projects for two reasons. First of all, our intended user group does not cover the more experienced users who would be the ones uploading their own projects. Secondly, it would be too difficult to ensure that user-uploaded tutorials meet the level of beginner-friendliness that we want to maintain.

Each project tutorial has its own subsection, which consists of an overview page and a series of instructions, broken down step by step.  The overview page contains a picture of the finished project, a text description of the project, and a list of materials needed for the project. In order to help users gather what they need for the project, we help users find where to buy materials by providing a link to a Yelp page that lists nearby fabric and craft stores based on the user's location.

Each step in the instructions has its own page, which breaks down the task required for the overall sewing projects into smaller steps that are more manageable for a beginning sewer. Before seeing any of the individual tasks, an summary instructions page is show, so users can look over all of the steps involved in the project before beginning.  Clicking on any of the steps here lets the user jump directly to that step, rather than requiring them to click through the steps one by one. Navigation between steps is also possible by using the keyboard only, which may be easier for users who are in the middle of sewing something and have less freedom of movement with their hands  

In response to heuristic evaluations, we also added a smaller, condensed version of the steps list to the side of the page, which also appears on each individual step's page as well. With this, users can jump to any step without returning to this instructions overview page. This mini-navigation section is usually collapsed but can be opened if the user needs it, so that even for a project that has a large number of steps, it will not clutter up the page with excess noise.

Another comment from the heuristic evaluations was that there should be a way for the user to return to the step that they left off on. We added this feature to our final design. If the user is logged in, they can keep track of currently active and completed projects. This is visible on the user's dashboard. By clicking on the project in the dashboard, they can jump to where they left off. When a user completes a step, they can quickly check it off before moving to the next step. This features are meant to increase efficiency for users, but because they are not fundamental to our purpose of helping beginners to sewing, we decided that a user could choose not to create an account and log in. In that case, they can still freely access the project tutorials, but their progress will not be tracked.

If a new user is unfamiliar with a particular technique or is likely to need help in some area while on a particular step, they can click on the glossary/sewing basic terms that are linked on each page. A dialog box will pop up that contains explanations, definitions, or suggestions and a relevant video link. We decided to use a dialog box because it is much more efficient for users to find the information they need without having to navigate to a new page (or tab) and back again. 

The Sewing Basics section of the site functions as an index of all of the glossary/help entries. If a user wishes, for example, to look up how to do the running stitch, they can do so directly from the Sewing Basics section of the site without having to navigate to a project tutorial step that contains a reference to the running stitch. The dialog box that appears is the same for both methods of looking the term up, however.

The final major component of our design is the ability to allow users to add notes to the tutorial pages. This is to address the user task of "catching and correcting mistakes made while sewing". There is no optimal way to do this, of course, so we went through a series of ideas before we finally settled on this one.

Our paper prototype contained the ambitious and overly optimistic idea of organizing videochats for users based around a specific project, allowing them to help each other catch and correct mistakes as they sew. We found that these "video sew-alongs" were not intuitive for users and veered too far from our initial goal of helping users learn to sew through a project.

For our computer prototype, we toyed with the idea of letting users create chatrooms called "Lounges" (as an analogy for real-world sewing lounges). However, for our final implementation, we decided against this for two reasons: 1. implementation would be too difficult given our time constraints and the lesser importance of this feature, and 2. chatting (as opposed to video/voice chatting) requires too much typing than is really practical for someone who is sewing.

Hence, we decided to allow users to leave comments on tutorial pages, as a way for them to annotate our tutorials with any additional notes, tips, or warnings that they feel could be helpful for future users. In this way, users would be able to see mistakes that other users may have made on any given step and avoid it themselves, or find any helpful fixes that other users provide. Currently, the functionality is quite basic. An improvement that could be made is to allow for the upvoting of comments, reddit-style. This would ensure that more helpful notes are more visible to users.

High-Level Implementation

When we translated our code from pure front-end to a backend supported system we did not move all of our code (especially because we focused on the front end).

The search for projects and sewing help topics uses front end javascript. The project search terms for those pages and the various variables are stored in javascript. We do not allow users to upload projects, so this solution works for us for now. User accounts are backed by a backend.

When a person clicks to save a project the step after the current is saved. When a user later checks the project page if the current step is less than the saved step they see a checked off symbol.

If a user is logged in they can add notes. Notes record what section of what project they're in and who made them among others.

Pages that users are not allowed to access have been blocked off from the back end (for example a list of all users).

Evaluation

Users:

The three users we found, A, B, and C, are three roommates. User A has experience in doing small projects from DIY kits similar to the Strawberry Cream Roll that we used as our representative project. She is therefore probably more experienced in sewing than our target demographic. User B is the same as Person B from our GR1 analysis. She is very representative of our user population. User C has not done any sewing at all before, but has expressed some interesting in doing a sewing project with the other two in the future. She is somewhat representative of our target user population, in that she is a complete beginner, but not completely representative in that she has no plans to learn how to sew by herself.

Briefing:

You are a complete beginner to sewing, and you want to learn by going straight into a sewing project.

Tasks:
  1. Find a cheap, easy sewing project to start on.
  2. Figure out what supplies you need to get and where you can get them
  3. Read through the instructions for the project, while pretending to work through them
  4. While working through the project, look up how to do a running stitch
Usability Problems:

Problem

Severity

Possible Solutions

1) No information on how to add notes for not logged in users

Major

Add message where add note would have been saying that you need to log in to add a note

2) Tried to click on the thumbnail in a search result to get to project page

Major

Make the thumbnail clickable

3) Nobody made an account-- all went straight to project search without bothering to create an account or log in* *

Major

Make it more obvious on the create account/log in page exactly what an account does. Move the note high up on the page and make it more prominent.

5) Home page should not be a login page - it is visually unappealling and makes the user feel like they are FORCED to sign up

Major

Create a more appealing and informative home page that describes the purpose of the site, including a less obtrusive log in section. (Keep the current log in/create new account, but access it from the Log In/Log Out link on the navigation bar

6) In project search, it is awkward that dollar options are subsets of each other

Minor

Use ranges (from $0-$9, $10-$19, etc.) or radio buttons instead of the checkbox options

7) Clicked on pictures in the overview/project steps, expecting to see a larger image

Minor

Make it possible to view a larger version of the images included with the projects-- either through a dialog box with a larger version of the image, or open the full image in a new window

8) Did not realize/use left and right arrow keys to navigate

Minor

Do more user testing (this time with actual sewing, instead of pretending to go through a project) to see if this feature is actually helpful to users. If it isn't remove it entirely, since it could lead to errors

9) Keeping track of progress in a project was also never noticed

Major

Another problem with the visibility/learnability of user accounts -- make it MORE CLEAR on the (to be implemented?) home page exactly what a user account lets you do

10) To jump between steps, either used the Back and Next buttons or went back to the instructions page, instead of using the Jump to step menu that is mean for this purpose

Minor

Try one of the following: Increase visibility of the Jump to step menu? Rename both to "Table of Contents"? Attach the accordion to the main "Instructions" tab, so clicking on that pulls down the menu instead of linking you back to the summary instructions page?

Reflection

1) We were, perhaps, overzealous in latching on to the video chat/sewalong idea during the paper prototyping idea. It is easy to focus on non essential but interesting features and to believe that they are essential (because they are interesting)! Our paper prototyping/testing sessions were perhaps not as helpful as they could have been in the long run, since we ended up changing so much that the information that we gathered was not as relevant to our later designs. This was one thing that we would definitely have done differently-- paper prototyped a more modest design and therefore get more useful feedback earlier on.

2) We should not try to make our low fidelity computer prototypes overly complete or get too attached to it! In our first computer prototype we implemented project search and sewing help search using js, and we never got around to updating them to use a database, potentially because we wanted to still use the code we wrote and not waste it (or to save work). Also, the project pages were all done with static web pages. This made moving them into a database a bit tricky.

3) It was difficult to design something meant to instruct for a user group in something that we have no expertise in. This made making a representative project difficult. Also, features such as Project Search and Sewing Basics may not be as useful or efficient to users. For example, the criteria by which we chose to filter projects may not have been correct or useful ones. Perhaps, were we to do the entire project all over again, we may not choose a user group that required so much expertise on our part. 

4) We are making a website very likely to have a specific kind of interaction (i.e. people are probably going to be sewing while on our site). As such we should have given our user testers a thread and needle and learned how that played into their interactions with the site.

  • No labels