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.
Kaleb
1. This is meant for visually impaired or elderly people. There are no user accounts and the majority of the instruction is contained in images, though there is text available if desired. People can put in some terms and the website will magically find a best match for them. Alternately if they want a bit more detail they can go to the search page and see all projects within each of the fields listed in the dropdown.
2. This design has a minimalistic first page with pictures of projects, a search page with filters and a step by step walkthough page with comments, protips and other information. Basic layout.
3. This design is more message board-like. You see a list of projects at all times and you get a front page/recommended project when you come to the page. When you're working on projects you see a step by step walkthrough. At all points you can chat/leave comments. Perhaps reddit style.
Tristan
1. Typical web interface. Can use search filters to narrow search. Instructions and warnings are listed for each step. Can give feedback and rate project after completion.
2. Voice-command system called Sewphia that can be used while driving. The screen lists example commands that can be uttered at each step of the process. Can prompt Sewphia for more details and warnings about project steps.
3. Forum for users to post projects to work on with each other. Users can browse through projects based on forum category and thread title. The OP lists the instructions and helpful warnings. Users can share pictures of their finished projects.
Group Design Sketches and Storyboards
Typical 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 Typical Website design:
Learnability:
The layout is consistent with other websites that offer similar services. For example, the links for site navigation are located at the top of the page. Checkboxes are used for the filters to suggest that multiple selections can be either included or excluded from the search. Proper affordances are given for the site's functionalities, such as hypertext for links and the "Write text here" with a blinking cursor for textboxes. This external consistency with other websites gives our design a lot of learnability. The learnability could be improved by better indicating to the user how to use certain features like looking at other users' reviews of a project.
Efficiency:
Selecting the filters for a search is efficient, but with the current layout of the search results, the user cannot see many projects at once. They would have to scroll through pages and possibly look at multiple pages to find a project that they would want to work on. The efficiency here could probably be improved with a photo array and hovering similar to Google Images, but there would be less details about each project displayed to the user before they hover over an image. Other tasks such as navigating between different steps on the "Work on Project Page" and filling out the survey on the "Review Page" can be done quickly and efficiently.
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 on the "Find Project Page" and "Work on Project Page", 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. As for the "Review Project Page," a user can't change a review once it has been submitted, but they can send another one if there is something that they want to change. The latest review will be the only one that is considered for the project's ratings.
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 not 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 primarily 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 apparent 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 the 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.
Group-Based Website Design
This design of ours focuses on facilitating actual communication between groups of sewers interested in the same project.
Front Page:
The front page gets you interested in the projects but doesn't have much value towards the task of sewing because we want only logged in users to be able to see what projects are currently available. This may mitigate some privacy concerns users may have.
Project Search:
Because this may be one of the most important first steps the user can take to get sewing his is the first thing logged in users see. From here they can find a project and add it to their schedule and filter projects by various criteria. All pages allow you to return to the main page.
My Page:
This page is your homepage. You can navigate to any other functions on this website. You can review past and future projects, you can view the notes you've accumulated so far, you can add friends and go back to the find projects page.
Review Projects:
You can view the projects you've done in the past, including the pictures and notes, or you can look at upcoming schedules and add notes for them.
Hangout:
Google Hangout-esque screen where you can hold a sewing circle and sew en masse. The current speaker gains central focus.
Hangout Information:
In this hangout you can click on the information tavb to get more information about a particular step including general information and common errors on that step.
Friend Search:
You can add friends from this screen. Later when you return to the project search screen, you can filter by inclduing/excluding friends.
Diary:
A place where your notes on various projects will be collected. You can review things you had learnt in the past here.
Analysis of Group-Based Website design:
Learnability:
This website should be learnable because everything you need to remember is on your main page. All you have to do is remember to go there and read the options there. Long term memory is not required. Also, there are no hidden details. When you navigate to any page (for example the hangout page) you see everything you can access as a popout waiting to be clicked.
Efficiency:
There are two steps to finding a project. Logging in and searching. Similarly, to do any of the features you only need to go through the main page so there are no long chains. That being said it may be inefficient to always have to go through the main page and it may have been better if all pages were linked to each other, but that may cause a learnability issue. Perhaps it could be a useful feature for advanced users.
Safety:
To mitigate safety concerns we should back up all the user's data and give them intrusive confirmation boxes for when they want to do something permanently destructive (concerns are deleting a project, deleting notes, deleting images, etc.).
1 Comment
Unknown User (meelap@mit.edu)
Scenario: Great job setting up the high level goals. However, it's hard to extract the concrete tasks from this scenario. Also, it isn't clear which activities are relevant to your interface (e.g., is "posting a picture of it online and adding notes about its creation process" something the user does through your interface?). Tasks should reflect the user's goals rather than features of the interface. For example, the user wants to discover new projects based on her preferences.
Preliminary designs: Good job overall - just a few comments. Alice sketches 2 and 3 are too similar. The source of warnings is a lower level detail than the basic layout and interaction that these design sketches should cover. Also, the storyboards don't seem to address all the activities mentioned in the scenario. Finally, virtual collaboration is a really interesting approach to help your users reach the goals you identified in GR1! It might even be useful to have virtual instruction.