The Process for Interaction Design UCSD Capstone
Intro
The Interaction Design from University of California San Diego is a 9 month course with the last class as your capstone project taking all that you learned leading up to your capstone. The 7 classes leading up to Capstone are Human Centered Design, Design Principles, Social Computing, Input & Info, UX Research & Prototyping, Information Design, Designing..Running & Analyzing, then finally your Capstone. Within Capstone you will be exercising your new found skills of Needfinding in-person observations, Ideation, Storyboarding, Development Planning, Heuristic Evaluations, Wireframes, in-person testing, A/B Testing, final polishing and sharing your process.
Early Phase
We received a Design Brief at the beginning of the Capstone. The brief was based around Time. Without going into too much detail showing the class information, to sum it up…it was how can an app help people with their time? From that point I interviewed & observed a few people to see how I can develop an app to help them save time. After many ideas flushed out & research complete I settled on one, from there I started the design process.
Discovering the “Problem and Solution”
From my interviews and observations keeping in mind…”How will my app help people?” I decided to build an app that helps caregivers care for their elderly parents. Main caregivers carry a heavy weight of responsibility and stress. Studies show that more than 65 million people in the U.S. provide care for a chronically ill, disabled, or aged family member. 23% of family caregivers that care for someone for more than 5 years report that their health is fair or poor. This app’s purpose is to help families share in responsibilities & to keep them communicating in an organized, stress free way.
Storyboard & Paper Prototypes
Interaction Design Storyboards are meant to tell a story, it’s not focused on what the app would look like, that comes later. Storyboard quick sketches can be done while brainstorming in a group or on your own. Storyboards articulate the users “Point of View”. They are not always going to be pretty and nor should they be for this assignment even if you want it to be perfect, let that urge go. To keep our focus on the story, we were not allowed to do digital drawings, use fine markers or pencils. We had to use a fairly wide marker because drawing details were not the focus of our storyboards. I sketched out a few scenarios of how my app would be beneficial to users.
Now that the storyboards brought my app into real life scenarios it was time to move to the next phase. Paper protos are a great way to quickly get your ideas out of your head. You can work really fast and come up with so many ideas for screens. These paper protos will be your first iteration a tester will see. What’s nice to work on paper protos rather than jumping into wireframes, this allows your tester to give you their honest opinion. Testers tend to be more open about their feedback because it’s an early phase, clearly by the not so perfectly drawn “screens”. If you had these in wireframe or even further along with graphic design introduced, they tend to hold back their opinion seeing you have something that is almost finished.
Heuristic Evaluations & Wireframes
Once the paper protos were evaluated in-person and by a peer it was time to start wireframing. Review your feedback list to help you decide what to implement into the wireframes. Looking back I see how Heuristic Evaluations were critical and valuable feedback prior to wireframes. If you were to have evaluations after you started wireframing, you would do a lot of unnecessary reworks.
Tested and Final Polish
There were a few iterations and A/B testing conducted. I used InVision software to give testers a real world user experience rather than viewing static images.
Graphic design elements defined by our assignment were color, fonts, logo design, icons, images. Since the average age of a caregiver is 69 years old, I wanted to emphasize areas with color and clean typography. With the app being task driven , I went with green as the color of the logo, which became the primary color of the overall brand, secondary colors are yellow, orange, red and 2 shades of grey. The use of color is meant to draw the users eye into the area of information for a ease of use and quick glance efforts while the shades of grey puts less attention on areas for each screen.
Final Thoughts
Although being in the graphic design, motion graphics industry for a long time I found that the Interaction Design course opened my eyes a bit on how us humans interact to design that is around us in our everyday life that we don’t even realize. Working in the Human Centered Design perspective has changed the way I see and design things now.
Working with user-centered design philosophies of Don Norman and others, this course covered many aspects to give you a strong overall foundation of the ux/ui world. This course was not about how to be a graphic designer, you should already have that foundation coming into it. The Interaction Design course by UCSD is rather how to create intuitive user friendly interaction designs providing a pleasant experience to the user whether it’s a medical device, a thermostat or a mobile app.
Check out the app
Check out the elevator pitch
