Final Prototype

I have to say this class was really great and I learned a lot – from the lectures, from doing the actual design work, and from the community. I truly enjoyed the experience!

Design Brief: Change

My Point of View:
 People would like to make healthy choices when cooking and eating, but only if the process is quick, easy, and tailored to their specific preferences.

Mockup of the prototype with different screens

My Prototype App helps people to cook a healthy dinner every day by delivering a daily recipe with ingredient (shopping) list and directions. They can set their preferences for calories and preparation times, add specific dietary requirements, and optionally save the nutrition info to MyFitnessPal should they want to track their calorie intake. (Design Brief: Change) Continue reading Final Prototype

User Testing

Based on the Heuristic Feedback on the Wireframes and Navigational Skeleton, I came up with a list of changes and updated the prototype.

paper app prototype, recipe screen paper app prototype, ingredients screen paper app prototype, directions screen paper app prototype, nutrition screen

I redesigned part of the interaction as a paper prototype to get an alternative view (My redesign turned out to be significantly better than the original design, so I incorporated it into the final prototype).

I produced an evaluation plan for structured subsequent user testing, as well as consent forms, instructions to be read to participants, and questionnaires to be filled out after each test. Continue reading User Testing

Start Building

After Needfinding, Storyboarding, and Wireframing, the next step was to create a development plan, make the switch to a high-fidelity prototyping tool, and start building.

HCI Development Plan, showing tasks to complete, required time per task, and a progress report
Here’s a link to the development plan

The development plan was evaluated based on completeness and feasibility of deadlines.

At the same time, a first navigational skeleton had to be submitted that would have a home screen and working links to placeholder screens.

Wireframing

In the first two assignments I chose a design brief and found out user needs and then created storyboards to illustrate the interaction.

For the next step in the design process, I used Balsamiq, a low-fidelity prototyping tool, to create two different prototypes that vary in interface but offer the same basic functionality or goals that can be accomplished by the users.

The goal was to get some Heuristic Evaluation to help refine the interface.

Download the PDF file Wireframe 1.


Download the PDF file Wireframe 2.

Storyboarding

As a recap, I am working on the design brief “Change”, and for the first assignment, Needfinding, I observed how people choose what’s for dinner, how they find out what ingredients they will need, and how to cook it. For some the process was too time consuming, some are too busy during the day to research options, or they might be unfamiliar with some ingredients and how to prepare them, plus junk food temptations lurk around avery corner.

For the second assignment, I am reviewing the user needs I brainstormed during Needfinding. I will begin solidifying these needs by seeking inspiration, developing a point of view, and creating two storyboards.

My point of view: People would like to make healthy choices when cooking and eating, but only if the process is quick, easy, and tailored to their specific preferences – like having a personal shopper.

Words related to my design idea: healthy, yummy, quick, easy, good food, clean, white, clear

Here are two storyboards illustrating two different design ideas that both address my Point of view:

Storyboard 1
This storyboard illustrates how the app had already downloaded the daily recipe to the user’s smartphone, so he could look it up and check the shopping list while on the underground, before shopping for ingredients and making a healthy meal.
Storyboard
This storyboard illustrates how the app can show the user that a home cooked meal can be quicker than ordering food delivery, using left over ingredients in the fridge.

Continue reading Storyboarding

Needfinding

As Yogi Berra said, you can observe a lot just by watching. Watching how people do things is a great way to learn their goals and values, and come up with design insight. We call this needfinding. This assignment helps you train your eyes and ears to come up with design ideas. Your goal is to uncover user needs, breakdowns, clever hacks, and opportunities for improvement.

The design brief I have chosen is ‘Change’.

The mission: Design an interface that facilitates personal or social behavior change.

We’ve all been there: We know we should be eating more healthily, and generally we enjoy home cooked food – but after a busy day at work we just didn’t have time to plan dinner and come up with ideas, so we go for convenience food, the same old staples that we’ve always made, or even a take out dinner that’s neither good for our health nor for our wallet. If only we had thought about it in time, found a recipe suggestion and made a shopping list before we left the office – based on our personal preferences and dietary requirements of course – it could have been easy to pick up some ingredients and cook a healthy dinner at home.

So this will be my focus for the course: Helping people find healthy food choices and prepare home cooked dinners.

For my first assignment, Needfinding, I observed how people choose what’s for dinner, how they find out what ingredients they will need, and how to cook it.

The goal is to observe the successes, breakdowns, and latent opportunities that occur when computers are used, not used, or could be used to support your chosen activity.  Continue reading Needfinding

Human-Computer Interaction

As part of my Summer University Courses for this year, I have enrolled in Human-Computer Interaction at Coursera. I think it’s quite fascinating to learn about the principles of visual design and techniques for prototyping and evaluating multiple interface alternatives — and why that’s essential to excellent interaction design.

As part of the course I will be conducting fieldwork with people to get design ideas, create interactive mock-ups – and use these designs to get feedback. The main goal is to build human-centered design skills, and the principles and methods to create excellent interfaces with any technology.

Through a series of six assignments that build on each other, I hope to complete a design project. The scope of this project is to design a web-based service or application, accessible through a mobile or desktop web browser, that meets a user need.

The design brief I have chosen is ‘Change’

The mission: Design an interface that facilitates personal or social behavior change.

We’ve all been there: We know we should be eating more healthily, and generally we enjoy home cooked food – but after a busy day at work we just didn’t have time to plan dinner and come up with ideas, so we go for convenience food, the same old staples that we’ve always made, or even a take out dinner that’s neither good for our health nor for our wallet. If only we had thought about it in time, found a recipe suggestion and made a shopping list before we left the office – based on our personal preferences and dietary requirements of course – it could have been easy to pick up some ingredients and cook a healthy dinner at home.

So this will be my focus for the course: Helping people find healthy food choices and prepare home cooked dinners.

I will post my assignments for the course on this page.

Update September 19th, 2014: I received my Certificate of Accomplishment with Distinction – achieved 100% for this course. Ultimately, though, this was about so much more than the certificate, first and foremost a fantastic learning experience.

Continue reading Human-Computer Interaction

My Instagram

Ansichtssache – Rundgang

Ein virtueller Rundgang durch die Ausstellung, aber live und selbst ansehen ist natürlich viel besser :-) Noch bis 29. Mai in der Galerie EigenART in der VHS am Harras.