1. Computer Science and Engineering Craig Panthen Industrial Design
Professor Landay
CSE 440
Human-Computer Interaction
Philip Kuo
Computer Science and Engineering
Craig Panthen
Industrial Design
Heidi Tanumulia
Chris White
Philip: Hi, I’m Philip Kuo.
Heidi: And I’m Heidi Tanumulia.
Philip: Our group mates are Craig Panthen and Chris White, and we’re the Buddy Map team.

2. The Problem Easy to lose track of friends Easy to get separated
Easy to take the wrong turn
Philip: Imagine for a moment, you’re out skiing. You’re halfway through the run when you stop to take a breather. You can’t see your friends anywhere. Are they behind you? Or are they down below, waiting for you to catch up?
It you take a wrong turn, it can mean a lot of pain finding your friends again.
That’s the problem. The solution? BuddyMap!

3. The Problem The Solution: Buddy Map! Easy to lose track of friends
Easy to get separated
Easy to take the wrong turn
The Solution:
Buddy Map!
Philip: Imagine for a moment, you’re out skiing. You’re halfway through the run when you stop to take a breather. You look up and down the run, but you can’t see your friends. Are they behind you? Or are they down below, waiting for you to catch up?
When you hit a fork, you wonder which way your friend went. And once you go down one way, there’s no changing your mind.
The solution? BuddyMap!

4. What is BuddyMap? Skiers and snowboarders Personal map
Friend locator device
Organize a group
Heidi: So what is BuddyMap?
BuddyMap is a device designed specifically for skiers and snowboarders.
It can be a personal map, and help you find your friends out on the mountain.
The BuddyMap also has features that support group organization, for people who go skiing or boarding with friends.

5. Video Prototype Clip
Heidi: This next clip is from our video prototyping stage, which we’ll talk about later. It’ll show you the Buddy Map in action and the context in which it’s used.

6. Outline Tasks Prototyping Stages Evolution of Design Demo
Zooming
Dots
Menu
Demo
Heuristic Evaluation
Summary and Questions

7. Tasks Purpose: concrete process flows for design decisions Three tasks
Alert – Crash!
Follow Me
Meet Up
Philip: We focused on three specific tasks we wanted the user to be able to perform with out device. These tasks gave us concrete examples of our device in use for us to base design decisions off of.
The first task is the Alert scenario, which we just saw in the video clip. When your friend disappears into the trees, you don’t know whether they’re just taking their time or in trouble. Safety is a big issue in the backcountry, an issue we wanted the BuddyMap to address.
The second is the Follow Me scenario. It’s easy to get separated from your friends, even if it’s by 10 or 20 seconds. But if you don’t know where they went, those seconds can turn into hours. In this task, BuddyMap is used to track a friend that has taken off and just out of sight.
- From our contextual interviews, we learned that our users wanted to be able to coordinate large groups of people. Thus, we created the Meet Up scenario. In this task, a group of friends has separated over the course of the day, but want to meet up for lunch. One of them uses the BuddyMap to arrange a meeting.

8. Prototyping Video Prototyping Paper Prototype High Fidelity Prototype
Determining the context
Paper Prototype
In-depth UI design
Get user feedback
High Fidelity Prototype
Interactive and online
Heidi: Our prototyping had three phases. The first was a video prototype, which you saw a portion of. It was mostly for setting the context that our device would be used in and testing basic UI concepts.
After that, we moved on to paper prototypes, where we more fully fleshed out the UI and ran user tests.
Finally, we took the feedback and created the last iteration of our device using Adobe Flash, which you can find on our website.

9. Zooming with Gloves Two finger drag – but users with mittens?
Added zooming buttons instead
Heidi: The most basic component of our device was the map. At first, we wanted to keep the screen as uncluttered as possible because of its small size. Zooming was done by placing two fingers on the screen, and pulling them farther apart or closer together to zoom in or out.
However, nearly all of our users would be wearing gloves while using this device, making this operation very awkward, so we added zoom in and zoom out buttons.

10. Dot Identification Unlabelled initially – but too confusing
Added labels
Added 3D affordance to indicate it was pressable
Heidi: On our map, we identified people using dots. We started with these dots unlabelled, but decided that would be far too confusing, and added names to them later.
User testing during our paper prototype showed that people didn’t know they could actually click on the dots, so for our final prototype, we added a three dimensional effect as an affordance to the dots.

11. Menu and Mittens Started with radial menu and stylus
Stylus kept stabbing face
Radial menu on screen edge would appear inconsistent
Philip: For our video prototype, we used a radial menu and a stylus taped to Craig’s glove. During the filming, though, Craig kept stabbing himself whenever he scratched his face.
Not only that, if a user selected something on the edge of the screen, the radial menu would appear differently and violate consistency heuristics.

12. Menu Moved to large buttons Easy target for large digits
Flush against screen edge
Philip: We moved from that to creating the largest buttons possible, making it easy to click on with gloves. The buttons extended to the edges of the screen, expanding the target without using more screen space.

13. Demo
Philip: So now, we’d like to show a demo of our Buddy Map. This was done in about a week in Flash, all the images were made in Illustrator by Craig, our Industrial Designer.

14. Heuristic Evaluation “Next” button not in a consistent location
solution: redesigning short of the larger parts of the UI
Indication of current step out of total steps of process
solution: add boxes or circles at the title bars, shade in
subsequent shape as the users are progress through
the steps
Heidi: After we completed the high fidelity prototype, other members of our class did a heuristic evaluation on it.
A problem they brought up was that the “Next” button was not consistent from step to step. We did discuss this during our meetings, but couldn’t come up with a decision short of redesigning large parts of the UI.
Another concern they had was not knowing how close they were to completing a task. We can easily add boxes or dots to the title bars, then shade in the subsequent shape as they progress through the steps.

15. Summary – Buddy Map Social device connecting friends
Iterating designs through prototyping
Still improvements to be made
Buddy Map can save your life!
Heidi: So now you know a bit more about Buddy Map, what we’ve been working on in the past 10 weeks.
It’s a social device that keeps friends in communication while on the mountain.
You’ve seen our prototypes, how we made each iteration of the device a little better than the one before it.
And of course, as our heuristic evaluation shows, there’s still progress to be made.
And remember, Buddy Map could save your life!
Philip: Thank you for listening, we’ll be available afterwards if you’d like to see more screenshots or hear more about our project.

16. Questions ?
Philip: Meanwhile, we’ve got a few minutes for questions.