Warranty Tracker • Designer: Jenny J Taylor • User Prototyping Fall 2012

The

PROCESS Book

PITCH

Next PagePrev. Page

The 2

Hey there, can I ask you a question? How many items do you think you have in your home right now that have a war-ranty?

What if one of those items started to have problem and you needed to file a warranty claim? Do you even know if the warranty has expired? Would you know how and where to file a claim?

If you’re like most of us, you wouldn’t know where to start until now....

Warranty Tracker is a totally FREE website that is designed to keep a running list of all your warranty information for your Personal Electronic Devices (what I like to call PEDs) for your entire home. In addition, Warranty Tracker keeps an updated list as to when your warranties are expiring so you can take full advantage of what you’re entitled to under those warranties.

The second function is to provide a simple and clear place to troubleshoot your Personal Electronic Devices and assist you in gathering claim information. This cuts down on the time, frustration and over all “hair pulling” experience of filing a claim for a faulty or broken device. The result...saving you time and money and ensuring you get the full value of your investment in your Personal Electronic Devices.

Here’s my card, check out the website and http://bit.ly/WarrantyTracker and I look forward to hearing from you.

Next PagePrev. Page

The 3

TASKFLOWGuide

Sequential Access Storage

Process

Document

Manual Input

Internal Storage

Decision

Next PagePrev. Page

The 4

CARD SORTINGSubject One Subject Two Subject Three

Subject Four Subject Five

Next PagePrev. Page

The 5

PERSONASMother of Four

Our “Mother of Four” uses Warranty Tracker to keep a record of all PEDs her family owns which is a quite a lot since she’s part of a 6 person household. The following are reasons why it’s an important tool in her eyes...

• Her family is on a tight budget so it’s important to get as much value as possible out of their electron-ics.

• Her children are rough on their PEDs to say the least, so when something brakes she wants to find out pretty fast whether the PED is still under war-ranty and what that warranty will and will not cover.

• She doesn’t have a lot of time to research each PED and all the details that are attached to the device so she appreciates the convince of all the information on one site.

• When her older kids are bugging her to replace one of their PEDs with the “latest and greatest”, Warran-ty Tracker gives her a simple place to find out where she can buy and how much they will cost.

Next PagePrev. Page

The 6

PERSONASTechie City Dude

“Techie City Dude” lives downtown and always has the “latest and greatest” technology on his person an in his flat. He also runs a consulting business from home that requires a said amount of technology. He uses Warranty Track be-cause...

• He wants to have an updated list of his PEDs with the specific model number ect. so that he can make sure it’s the newest technology available.

• If one of his PEDs malfunctions or brakes, he wants to get a replacement or have it fixed as quickly as possible.

• He has to keep track of the warranties associated with the PEDs he uses for business so he can get the full value out of each device and since the business PEDs are paid by him.

• He like that Warranty Tracker has an easy way to troubleshoot his PEDs without spending a lot of time searching the web.

Next PagePrev. Page

The 7

This was the first step I took and basically I was writing any and all ideas down to matter if they seemed relevant or not at the time. This allowed me to work through some ideas as well as come up with concepts and tasks that materialized from the pro-cess. Just let to flow was the mantra a was using in this stage.

PROCESS NOTES

Next PagePrev. Page

The 8

SKETCHESWhite Board Brainstorming

Got the love the a good ol’ white board session. At this point I was brainstorming and reflecting on how my website would be laid out as well as the functionalities it would have. I feel this was an important process because the white board allows you to quickly conceptualize and have the flexibility to changes and edit idea on the fly.

The

WIREFRAMESwith ANNOTATIONS

Next PagePrev. Page

9

The

WIREFRAMESwith ANNOTATIONS

Next PagePrev. Page

10

The

WIREFRAMESwith ANNOTATIONS

Next PagePrev. Page

11

The

WIREFRAMESwith ANNOTATIONS

Next PagePrev. Page

12

The

WIREFRAMESwith ANNOTATIONS

Next PagePrev. Page

13

The

WIREFRAMESwith ANNOTATIONS

Next PagePrev. Page

14

The

WIREFRAMESwith ANNOTATIONS

Next PagePrev. Page

15

Next PagePrev. Page

The 16

(Insert THE PITCH here from page 2 click here)

Lets get started! Remember that this may be a “test” but it’s not graded and there are no wrong answers. Also keep in mind this is a very rough paper prototype with filler copy, so we’re just looking at functions and layout, not aesthetics.

Make sure to talk through your process if you would please and stop me if you have any questions along the way and is it OK with you that I record this?

Do you have any questions before we begin?

TESTING SCRIPT

The Warranty Tracker Website Usability Testing Plan

Welcome Page• Lets go ahead and set up a new user account but

before we do...• Is the security info and icons important to you on the

bottom? If so, why? If not, why?• Alright, go ahead with the new user account• Create a New Account Page • Enter in your information• Line by line• Is it helpful to know how strong your password is? If

so, why? If not, why?• Where can you read and agree to the terms of the

website?

Terms & Agreements page• How would you close this screen?• Agree• Sign up

New Users Page• Talk about where you can find things and what you’re

noticing.• Is there any confusion?• Where can you enter a new item? Anywhere else? Go

ahead and do that. New Item Page

• Enter in item’s information and add the device. • Line by line

Next PagePrev. Page

The 17

• Simple as that... on the back end Warranty Track col-lects the following info...

• Manufacture• Warranty Expiration Date• Manufacturer Warranty Contact • Warranty Terms• Troubleshooting info • Possible Store Warranty info• Inventory Page• (show close up screenshot)• Where can you check your personal inventory?• Where can you read about other user’s warranty

experiences?• Where can you troubleshoot your a problem with

your item?• Where can you buy an item?

• Where would you find how many computers you have in the inventory?

• Where can you find your warranty info for a specific item?

• If you’re having problems with the software, where do you go for help?

• Where can to write or read about a device?• How do you log out?• Is there anything that is confusing?• Log out

Log Out Page• Where would you log back in?

Thank you for your time and I’ve really enjoyed testing War-ranty Tracker with you. Do you have any additional feedback?

VotesWarrantied= 3Warranteed= 5Warrantyd = 1Warranted= 3

Name Test

TESTING SCRIPTcont.

Next PagePrev. Page

The 18

USER FEEDBACKClick the following link to watch Remi’sfeedback: http://youtu.be/j29xQIcOnWw

Click the following link to watch Mel’s feedback: http://youtu.be/AfDURMSlOd4

After completing my usability testing, I now have a greater understanding of how a user might interpret my website and the functionality. I also received a lot of great feedback and possible suggestions/changes on how I can modify and update my in-terface. The following is a reflection on my preparation for the testing as well as list of my testers and the insight I gathered from them.

Emily: Emily was my first victim and she gave me great advice for my testing process. She pointed out that I needed to go step by step in certain pages so that my interactions wouldn’t get muddled up. Very helpful. As for the website feedback, loved the idea and the construction. Aurelien: Gave me some good feedback on aesthetics and simplifying the layout and was very agreeable to my idea.

Mel: Mel gave me some great insight and pointed out some valid points that I’m going to have to consider when I refine my interface.

Remi: Is very thoughtful person and with her first language not being English, she gave me some feedback for a global perspec-tive. She also went through page by page and analyzed each functionality. She also gave me some feedback on the layout and how I could clarify and delete some structural aspects.

Overall, the process got me out of my head and more in the users. Very beneficial!

Next PagePrev. Page

The 19

Benefits of Digital Prototyping Tools

Google DrawGoogle Draw was a very handy tool when I was creating my task flows. Google has designed Draw with shapes as well as lines what are specific to a flowchart (see right, bottom 3 rows). This helped me lay out an easy to understand flow chart without having to be constantly erasing and reworking a paper flowchart. Very easy to use!

FireworksI’m not much of a sketcher, so to have Fireworks available to conceptualize my website design in wireframes as well as organize my pages was very helpful. Adding the functionalities and states was a little difficult because they were layered and I never figured out how to solve that problem. Although, it was very satisfying to have the website start to feel “real” when some of the hotspots were working properly. I also found it helpful that I could edit bitmap and vec-tor graphics with ease on one program. I feel that if you’re not already comfortable with Adobe products and interfac-es then there might be a learning curve with Fireworks.

AcrobatI never knew you could click through an Acrobat document! It’s the coolest! I see this being used maybe even before Fireworks if you have a simple functionally that you’d like to test and you don’t want to spend a lot of time creating it. The only downside is that you might have to create the pages in another program first but after that, I feel it’s the easiest to use especially for non-creative types.

DIGITAL TOOLS

Next PagePrev. Page

The 20

HTMLLargest learning curve but very essential! I also did a great deal of simplify of my functions at this stage. I struggled a lot with learn-ing the language because I would do some coping and pasting from Foundations and lay everything out and if something was wrong I didn’t know why it was wrong and where I could fix it. I almost feel it would have be more ben-eficial to code some small scope projects then dive into our website coding. I do understand that we didn’t have the time in class to take that additional step. I had to enlist some help outside of class which was helpful and we got my site to be responsive which was fun.

DIGITAL TOOLScont.

Next PagePrev. Page

The 21

TESTING SCRIPTround 2

Intro was the same then...Welcome page

• How do you add a new user account?• What would you do if you were and existing user

already?• Where would you close this pop-up form?• Sign up

Home Page• Talk about where you can find things and what you’re

noticing.• Is there any confusion?• Where would you see when a warranty for one of

your items was going to expire?• Where can you enter a new item? Anywhere else? Go

ahead and do that. Where would you find an item that you have already added?

New Item Page• Enter in item’s information and add the device.• Simple as that... on the back end Warranty Track col-

lects the following info...• Manufacture• Warranty Expiration Date• Manufacturer Warranty Contact• Warranty Terms

• Troubleshooting info• Possible Store Warranty info• Where would you close this pop-up form?

Inventory Page• Where can you check your personal inventory?• Where can you read about other user’s warranty

experiences?• Where can you troubleshoot your a problem with

your item?• Where would you find how many computers you

have in the inventory?• Where can you find your warranty info for a specific

item?• If you’re having problems with the software, where do

you go for help?• How do you log out?• Is there anything that is confusing?• Log out

Log Out Page• Where would you log back in?

Thank you for your time and I’ve really enjoyed testing War-ranty Tracker with you. Do you have any additional feedback?

Next PagePrev. Page

The 22

Testing the second round was a lot easier since I simplified my website after the feedback I received with the first round of testing. It was nice to see how much more user friendly my site was pretty much self explanatory. Because of that reason, it was I really didn’t need to go through my line by line items in my testing plan. It was a little more organic how the testing went.

Emily: The best feedback that Emily gave me this round was that the warranty expiration bars at the bottom should have the re-maining days of the warranty instead of the percentage. I think this made a lot of scene because when I put 50% on the progress bar you might ask yourself 50% of what? Additionally the whole point of that area of the website is to help the user take advan-tage of their warranties so it would be helpful to know if you only had a few days left.

Jin: Jin gave me some great feedback on the size of the text and the amount of information on the inventory tabs which was something that I was still struggling with. I do have a great deal of information that needs to go into a small space and I haven’t found the right solution for that yet. She thought I can stack them a little more and make the information a little more visible. She also moved around the homepage a lot and did a lot of clicking and navigating which was helping in seeing a path a user would take on the site.

Angela: Angela seemed to think that my site was pretty easy to navigate and straightforward which was nice to hear. She found it very easy to use as well as well laid out and designed.

DIGITAL TESTING

Click the following link to watch Emily’s feedback:http://youtu.be/kmLi9MmwApE

Click the following link to watch Jin’s feedback: http://youtu.be/Qwh99oeJt9w

Click the following link to watch Angela’s feedback: http://youtu.be/Yq6dGTRrKVI

Next PagePrev. Page

The 23

Starting off with this project I was a little unsure what to expect. I’ve designed wireframes and brainstormed ideas but I have not gone through the whole user prototyping process.

THE IDEA: The first step, the idea. Sometimes the hardest task in the process. I found a quote recently from the fabulous designer couple Lella and Massimo Vignelli...”If you can’t find it, design it”, so I tried to think about what I would use or what problems, hassles etc. I’ve had to deal with recently. I remembered that I had to make warranty claims on three items this sum-mer and it was such a huge ordeal.

From finding the correct contact info to talking to half a dozen different people about the same problem then having to send my devices back again because they didn’t get fixed the first time, it was a pain to say the least. I’m a spreadsheet nerd so I thought that it would be very helpful to have a glorified spreadsheet that would help me organize all my personal electronics and all their warranty information. Warranty Tracker was born.

TASKFLOW: The next step was the taskflow. I found this step very helpful in solidifying my website ideas and how the website would be organized. It also helped me plan out the path that I indented the user to take while on my website. Additionally it was beneficial in getting my conceptual idea down on paper and start to form into something “real”.

PERSONAS: What came next was my persona creation. I had a lot of fun with these and it put me more into the mind of a po-tential user and helped me tweak the direction I was taking the site. I have also found it useful when I’m explaining my website to others. I have seen the “oh yeah I get it” look from people when I justify who would benefit from the Warranty Tracker site.

CARD SORTING: Then came my card sorting which was the first time a potential user was able to hear my idea. I was a little unclear as to what I should but on the cards but I think it worked out since I received some great feedback. The activity also allowed me to simplify my original workflow.

REFLECTION

Next PagePrev. Page

The 24

WIREFRAMES: After my card sorting I jumped right into my wireframes. I didn’t do a lot of sketching with this project be-cause I had an idea of the wireframe in my head so I went for it. In this step I made a lot of changes as a went once I started lay-out out the website. I found it helpful that it was in a digital format so that changes could be made relatively fast. The annotation that I added to the wireframes clarified my process even further and I’ve looked back at those notes often.

I tried to map out every task/question I wanted the user accomplish in my testing plamas well as areas of the site that I want-ed them to notice or give feedback on. I think this was an important part of the process but I felt when I got one on one with my tester, I wanted the experience to be a bit more natural than me reading off a list of tasks. Therefore I asked more organic questions as they came up. I feel for my next testing experience I will combine the two process so that there is a good flow and interaction with the tester as well as a thought out plan.

Although the user prototyping process might seem time consuming, I see the importance in working through the ideas, de-signs, layouts and concepts in the earlier stages so that when you start developing there are fewer confusions and that could slow down the process and cost the project time and money.

REFLECTION

The

END(or is it)