Breaking Down TaskWatches in 9 Steps
TaskWatches is the app I designed for my Human Computer Interaction Course. Here is how I made it…
Step 9 — Showcase the project!
“Woah, hold on! Is there any project yet?”
Well… I’ll work on that. But first watch the video.
Step 8 — Test a Functional Prototype
I made a prototype with the most basic functionality (Bootstrap proved to be an excellent productivity tool for this). Added some Google Analytics to the mix, publish it on a web page and made an A/B experiment. I sent the link to my prototype through social media and SMS to everyone I knew and made them spread the voice.
Here is the basic prototype: TaskWatches Prototype
Here is the mock it is based on: TaskWatches Mock
Step 7 — Add Graphic Design
I bought some graphics from CreativeMarket.com (only spent $19). Looked for a template that could fulfill most of the app needs. With some Photoshop updates it was ready for display.
Step 6 — Online Tests with Strangers
I Tested users on the web with UserTesting.com. This records the user’s voice and facial expressions. I got a lot of insight on user’s instant reactions. Definitely, what strangers see in your app can be oceans apart from what you as a designer can see.
Step 5 — In Person Tests with Friends
I did some in-person user tests with my co-workers. A basic gray-scale prototype allowed me to easily pivot the design as much as was needed. I explored different interaction approaches to find what could be more intuitive for the user.
Step 4 — Paper Prototypes :)
This was the most fun part! I created a Paper Prototype and tested it with my friends. It was all about paper, markers, scissors… felt like going back to kinder garden and having the freedom to be creative in any ways I wanted.
Step 3 — Story Boards
I wrote a couple of comic strips to illustrate how a user should interact with the application. They had very little details about how the application should look like. Why? Because app design should focus on the user. Sticky notes were very handy at the time to add, re-order and delete scenes easily.
Step 2 — Need Finding, Need Finding, Need Finding!
Need is the seed for any good design. If this app is not founded in real needs it will be useless and forgotten in the back trunk of some old mobile phone.
I watched my co-workers while they logged their time in the company timekeeping system. As tedious as it was, each had developed methods that proved poorly efficient. This need is the seed for TaskWatches.
Step 1 — Do all Steps… Backwards
I’ll summarize, so you don’t have to read all over again:
- Need Finding
- Story Boards
- Paper Prototype
- In Person Tests with Friends
- Online Tests with Strangers
- Add Graphic Design
- Test a Functional Prototype
- Showcase my Project!
This has been an awesome experience. I’ve grown so much as a designer and as a person as a result of all the great and memorable interactions with UC San Diego staff and my classmates from all around the world!
Thank You All
