Scenario
Inspired by her friend Yvonne’s creations, Zelda decides that she too wants to pick up sewing. Unfortunately, she does not know where to start, and Yvonne is too busy to teach her, so Zelda is mostly on her own. Luckily, Yvonne directs her to our site.
Because Zelda wants to learn not just how to do small repairs but also to create things of her own, she wants to start learning how to sew by jumping into a project immediately. She finds that she learns best through having a hands-on project, and she wants to have a finished result to show off.
She browses through suggested beginner sewing projects and rejects a pillowcase project because it is too boring and a skirt because it seems like it would take too long to hand sew. Eventually she decides to start making a simple bunny plushie because it is cute.
She reads over the instructions and thinks that they are doable. She gets a list of the required materials (X amount of cloth 1, Y amount of cloth 2, thread, fiberfill/stuffing, needles, etc) and goes out to purchase these materials. For some cloth 2, it turns out she can use an old T-shirt that she no longer wears that is in the pattern that she wants for this bunny.
She then begins to go through the detailed instructions one at a time. First, she prints out the pattern for the bunny and cuts out the individual pieces. Following the instructions on the website, she pins the patterns to the fabric and very carefully cuts out her fabric in the shapes of the pieces and sets them aside in an orderly manner before moving on to her next step.
She has some trouble threading her needle because she is not very experienced at this kind of thing, but she finds a tutorial on how to use a needle threader.
Carefully following instructions she begins to sew the pieces of her plushie together. She isn’t very sure how best to go about sewing, so she refers to some reference material about how to do a basic blanket stitch. She was also very close to sewing her pieces together inside out, but fortunately she was reminded beforehand to make sure the right sides of her fabric are facing inwards before she sews. She makes a few more small mistakes, such as accidentally sewing both sides of an ear together when she only needed to sew one, but she notices her mistake not long after she makes it and is able to fix it by only removing a few stitches. Eventually she finishes up her basic bunny shape.
She wants to customize her bunny by adding button eyes and embroidering her name on its stomach. Because these elements are not part of the main pattern, she finds tutorials on how to sew on decorative buttons and how to do simple embroidery text. For the embroidered text, she finds that she needs embroidery floss, not her normal thread, so she first goes to get some of that before she does this step.
When she is done with her bunny, she decides to show it off by posting a picture of it online and adding notes about its creation process. After she is done, she thinks about the things she liked and didn’t like about the process and wants to find projects that have more of what she liked and less of what she didn’t. She also notices some areas of the project that she had difficulty with.
Because she is thinking of picking up sewing as a long term hobby, she wants to improve on some of the areas that were difficult for her while strengthening her skills in the areas that she is particularly interested in. She inputs all of her preferences and the site recommends a range of potential future projects that align with her interests.
Individual Design Sketches
Alice
1. A tiny screen design, for smartphones/etc. Goes through the instructions step by step and has buttons that you can click to pull up alerts, additional help, etc
2. Same as above, but not for a tiny screen. Full description and warnings, additional help on the side, instead of hidden in buttons/swipe menus. Also more obvious navigation between steps along bottom of page
3. Similar to #2, with a focus on user feedback. Instead of warnings/additional help provided by us, have user generated comments that can be upvoted/downvoted reddit-style. In this way, the most helpful comments/annotations about this step, as generated by users who have done this before, can be easily seen by the user.
Group Designs and Storyboards
Website
You are logged on at the "Find Project Page" and want to find a new project to work on. You use the search filters on the left to narrow the search down to projects you might like to work on. You think the stuffed bear looks like a fun project, so you click its picture and start working on it as your next project.
You are taken to the "Work on Project Page", where you can see what needs to be done for each step. There are warnings for common mistakes, links to reference tutorials, and pictures to help guide you. You can also save your progress and take a break if necessary.
Lastly, you submit a review of the project on the "Review Project Page". Here you can rate how fun or hard your recently completed project was, can say what you learned, and can give additional feedback and suggestions to the developers.
Analysis of Website design:
Learnability:
Efficiency:
Safety: The instructions for each step are detailed enough that the user should not have much trouble completing them. There are links to reference tutorials if they want to review a skill that is needed for that step, and there are red-colored warning texts that will inform the user of common mistakes and any mistakes they could make that would be hard to recover from. As far as the user committing errors with the UI, any errors (such as clicking on a link to the wrong step or choosing the wrong project) should be easy to recover from with a simple click of the "Back" button.
Tiny Screen/Phone
Because sewing is a handcraft, it may not be convenient to have a computer with you to refer to at all times. Something smaller and more portable may be desired. Therefore, one of our designs is for a smaller screen or smartphone-like device.
When you decide to start a new project, you see this screen where you can swipe left and right through various projects to browse through them. Tapping on the project image takes you to a more detailed description of the project. To make browsing easier, so that you don't have to linearly go through all of the projects, you can swipe upwards to pull up a menu where you can filter or search through all of the projects to find one that more closely matches your needs.
The pull up menu for searching/filtering through projects.This lets you filter the projects to browse through by kind of project (plushie, clothing item, etc), skill level, etc. You can also search through the projects by name. There should be autocomplete that pops up as you type it.
Clicking on a project gives you more information about it. You see a picture of the finished project, a difficulty rating, a list of materials, and a short text description. With the list of materials comes a link to google maps or yelp that can help you find nearby fabric stores so you can buy the materials more easily. It may also give you some tips for materials, for example, as a money-saving tip, it may recommend using fabric from a old t-shirt for a small project instead of going out to buy completely new fabric.
When you decide to start a project, you see this screen. It is a list of the steps of the project, with a short version of the instructions ("Print out pattern pieces", "Cut out pattern pieces", "Sew piece X and Y together"). You can click on each step to go directly to that step for easier navigation. There is also a very large and obvious "BEGIN" button that will start you on step 1. As you complete steps, you can also check off individual steps here, and uncheck them as well. This does make any major changes to the system, but is there for the user's own benefit to help them visualize their progress.
When you are actually doing one of your steps, it looks something like this. It is primary a screen that has a big illustration of the step and the short instruction for that step in large text, to make it easier to see clearly on a small screen. Detailed text instructions can be pulled up if you swipe the bottom upwards, as well as a video link for this step, if it is available. Because it can be difficult to use your hands or keep watching the screen while you are busy sewing, you can press the button on the upper right to have the detailed instructions read aloud to you. There is also a very prominent (and red, not shown in this sketch) alert button on the top right of the screen. Tapping on it will pull up common mistakes and warnings for this step. It may also flash briefly the first time you navigate to this step as an additional reminder. The bottom right contains tips and additional help. If you tap on that, it can provide links to relevant tutorials. For example, in the sewing step illustrated in this sketch, it may lead you to a tutorial on how to sew a back stitch.
You can navigate to previous/later steps by swiping left and right on the screen.
You can put down your work at any time. Your progress will be saved. You can have several active projects at once, which you can go through to see your progress through them and resume. From this screen you can also access the "start a new project" browsing screen. You can also go look at just the basic tutorials, instead of a specific project as well.
If looking through just the tutorials, you may see a screen like this, where you can search through them and also browse as well. They will be worded in ways that are easier for beginners to understand, like "how do I shorten the ends of my pants" vs "hemming pants".
Analysis of Tiny Screen design:
Learnability:
The interface itself should be reasonably learnable, as long as the various text buttons are made visible and easy to find and clearly labeled. For the search/filter screen and the additional text description on the working through steps screen, it should be made very clear to the user through some kind of affordance that this can be pulled up by swiping the bottom of the screen upwards. In addition, the buttons along the corners of the working through steps screen may not be clear initially, but should be apparently upon clicking for the first time. The text-to-speech button in particular may be confusing, since people think of it as a volume button, which seems really strange for a sewing screen. This could be remedied perhaps by adding a text label, or switching to a different icon that is more obviously text-to-speech(?). Another idea is to create a brief how-to-use-this-app tutorial when the user first makes an account, that runs through something like this storyboard and goes through these functionalities very briefly.
Efficiency:
Having the buttons in the four corners in the working through the steps screen is efficient due to Fitt's Law. Having autocomplete when searching through patterns and tutorials would also increase efficiency. Because it would be inefficient to go through all of the steps of the project one by one to find where you left off, it is important to have the screen which shows are steps and you can click to any one of them to get to there, as well as the resume project option in the active projects screen.
Safety:
The flashing warning button in the working through steps screen is there to help the user sew more safely. The alert button should be bright red and flash briefly to remind the user to check, so that they have a reminder to help avoid disastrous and annoying mistakes. It does not pop up automatically, because that would reduce efficiency and cause the user to perhaps automatically ignore the alert. Outside of this, there is not much safety in this design. Part of this is because the user does not make any changes to this thing itself other than navigation, which can be easily undone by going back (or forwards, like on the working through steps screen). If you accidentally start a project that you don't want to do, or want to drop a project partway through, you should be able to delete the project from the active projects screen. In order to make this more safe, a single-level undo should be added. Progress can be easily changed on the list-of-steps screen, but this too can be easily undone.