Audio File: Foundations of IxD Project

audiofileicon

DESIGN 383 was my first experience with Interaction Design. My final assignment was to create a music application that takes into consideration the context of use and the user’s perspective. This was also my first experience with interactive prototyping tools and gave me the opportunity to explore the capabilities of Adobe Illustrator and Photoshop. The final prototype was implemented with InVision.

Advertisements

HCDE Communications Videographer Internship

Under the supervision of the department Communications Manager, I filmed and produced a series of short video interviews to communicate the mission and details of directed research and coursework in the Human Centered Design & Engineering department to prospective students. Duties included: Scripting | Scheduling | Filming, lighting, and sound | Video editing and production | Graphic Design.

https://www.hcde.washington.edu/videos/playlist

 

 

Cater: A Restaurant Recommendation App That Understands Users

CaterImage.png

This is a full scale user research and design project that I conducted for my graduation Capstone. The Capstone Process Book lists the steps I carried out for research and design including a contextual inquiry study, competitive landscape analysis, design iteration, and evaluation. It also discusses the finding of this research and evaluation, as well as lessons I learned working with subject matter experts.

 

 

2D Paper Prototyping

Last week was the first week of our HCDE 451 Prototyping Techniques course at the University of Washington. To begin, we were tasked with creating a 2D paper prototype to demonstrate a newly conceived wearable technology that pairs with a smartphone. With little more constraint than that, we were encouraged to think outside of the box but not to spend too much time designing. After all, the purpose of this assignment was to practice paper prototyping techniques and to show how paper prototypes can communicate the purpose and function of almost any design. UX and interaction designer Todd Zaki Warfel writes, “Paper is one of the few tools that is equally well suited for prototyping software and physical devices, especially mobile and gestural interactions” (2009).

I haven’t really caught the wearables craze yet, so I wanted to start out by doing some research on the cutting edge of wearable technology like the Microsoft Band and Apple Watch to see what wearable tech can and can’t do. I also wanted to understand how wearables were being perceived by the public, so I looked up memes to get an unfiltered view of what I might hear if I asked enough people.

Next, I started sketching some design ideas based on what I found, or didn’t find, in my research. I imagined a feature for the Apple Watch that would alert the person wearing it if they had left their paired iPhone behind or had it stolen. I also imagined an application that would allow someone to use a smartphone as a baby monitor and broadcast video and audio information to a paired wristband with a digital screen.

The design that I decided to prototype was based on an article from the Texas A & M Engineering website titled, New technology at Texas A&M could enable smart devices to recognize, interpret sign language (2015). The app teaches users American Sign Language using two wristbands that pair with a smartphone and deliver haptic feedback like vibrations in response to recognized muscle activity. Using the smartphone’s camera, the app projects outlines where the hands must be placed in order to complete the sign successfully. As the user gets closer to the correct gesture and position, the vibrations from the wristbands grow stronger and stronger until a pulse indicating a successful sign is felt. The screen of the smartphone also provides text-based feedback when the sign has been completed correctly.

To prototype this design, I used white cardstock, pencils and pens, a couple of stencils, stamps and ink, foam-core, Velcro, sharpie markers, invisible tape, some white-out, and a bunch of coffee. Following some of the suggestions in Warfel’s book, I made smartphone screens resembling my own iPhone and cut out the screen to use them as picture/movie frames. Next I designed screen states roughly the same size as the screen I cut out so that I could slide through a set of pre-ordered screens to guide users through a phase of formative usability testing.

IMG_0794

To demonstrate the conceived gesture-based interaction I built a large-scale replica of the smartphone with the picture/movie frames onto which I projected shadows of users’ hands. To simulate the apps feature, users move their hands until their shadow matches the position and shape of the sign displayed on the oversized screen. Screen states corresponding to these interactions are also shown on the normal sized prototype model. Finally, I filmed my daughter using the prototype to demonstrate how other users would participate in testing and shared it with the other students in my class.

Creating a semi-functioning prototype in a short amount of time with a limited set of resources really helped me to learn how powerful paper prototyping is for demonstrating and communicating ideas. Since I was able to conduct some informal usability studies with potential users, I also received valuable feedback about how my design was perceived and what features users recommended adding or removing. If I had more time to spend on this project, I would incorporate visual feedback about the Sign Language lesson into the wristband display and give users the ability to advance the lesson slide, go back to a previous slide, or return to the menu to select a different lesson altogether.

References 

Warfel, T. (2009). Prototyping: A Practitioner’s Guide. Rosenfeld Media: New York, NY.

Garcia, R. (2015). New technology at Texas A&M could enable smart devices to recognize, interpret sign language. Dwight Look College of Engineering Texas A & M University. Retrieved from: http://engineering.tamu.edu/news/2015/08/20/slr-technology

User Experience Design: Redesign of an Existing Campus Technology

For this project I was prompted to redesign an existing system, tool, or application at the University of Washington using accelerated user research.

Phase 1: Identifying the problem.

The first step in my design process was brainstorming. After receiving the prompt, I spent the rest of my afternoon on campus thinking about the technologies that I use most and ways that I could redesign them. I wanted to focus on an area that people typically don’t think of when they think interactive technologies, so that I might positively influence an area of campus that may be somewhat neglected. I also wanted to make sure that my choice would allow me to easily access potential users for accelerated research. I finally narrowed in on restrooms, recalling a wide range of interactions and technologies that I have noticed during my own experiences on campus.

Phase 2: Ideation and Sketching.

Next, I continued my brainstorming activity in the sketchbook to help me visualize, explore, and test different ideas. I also referenced some recommended reading on sketching including Sketching User Experiences by Bill Buxton, which helped me to determine the degree of refinement and ambiguity I would render my sketches with. I wanted to welcome criticism and suggestions from my peers in the design course, as well as potential users that don’t have a background in design. After sharing my sketches with a few peers and a couple people outside of class I wrote down the comments and suggestions each person made and weighed the drawbacks and benefits of each design with respect to this feedback.

 

Phase 3: Refinement.

While each of my designs were aimed at encouraging people to wash their hands, I discarded an idea for a gamified paper towel dispenser because most people saw it as little more than a novelty. The idea that received the most positive reaction was an interactive display to be placed on the wall of the restroom near the sink or sinks. Counting the number of times the toilets and hand soap dispensers are used with sensors, the interactive display would display a “forecast” of the restroom’s environmental health. In addition, the display would present statistics about the efficacy of hand-washing in the reducing the spread of disease. Several people asked whether the interactive display would be on the inside or outside of the restroom, which prompted me to consider a wider range of services that this design could facilitate.

Phase 4: Paper Prototyping and User Testing.

In order to test this design with users, I quickly developed a paper prototype of the interactive board while I continued to explore new opportunities for the design. By the time I was ready to begin testing, I had added an interaction where users could view a map of other restrooms in the same building, and search for gender neutral or accessible restrooms on campus.

I tested the prototype with 5 different users, including two of my peers in the course and 3 other potential users that verbally agreed to user testing. Two of the users I tested the prototype with had difficulty interpreting the “forecast”. Several users expressed a desire to see the “forecast” for the nearby restrooms, as well as other restrooms on campus. And while one user said that she would be more likely to read the health information if the display were in the restroom stall, others continued to ask whether the board would be posted on the inside or outside of the restroom. The last user asked whether she could rate the restroom or report its condition to a custodian.

Phase 5: Reiteration and Wireframing. 

The last phase of the process involved a careful consideration of the feedback from users in the prototype testing and further refinement of the design as I moved to develop a digital wireframe version. At this point, I had decided that displaying the interactive display outside of the restroom would allow the most access to the widest range of potential users. I also modified the “forecast” to be more explicit in meaning by simply displaying the calculated average of users who had washed their hands and added a bar chart of the raw data. I expanded the “forecasting” feature to the mapping of other restrooms in the building, and added building and campus level mapping for all categories of restrooms. I also added a reporting feature for the case where the users wanted to rate or report the condition of the restroom. I created the wireframe using Adobe Illustrator and maps from the university website and Google.

This slideshow requires JavaScript.

HCDE418-P1WireframeFootnotes

Phase 6: Reflection.

Receiving criticism and feedback was critical to this design. Only after sharing my sketches and prototype with potential users was I able to empathize with the user and really see the range and diversity of its potential use. I would like to continue to explore the diversity of user cases, especially the opportunity to facilitate interaction between restroom users and custodians. I would definitely seek out potential users who use accessible restrooms or gender neutral restrooms, and custodians or janitors to test my design with and get feedback from.

HCDE 310 – Interactive Systems Design and Technology: Get to the Point

As a college student, I am constantly reading and writing research papers and articles.  In order to gain a better understanding of the concepts and issues that I read and write about I often search online video sites like You Tube for related material such as video lectures, documentaries, and demonstrations.  Using python programming language and the Google App  Engine, I designed and developed a web app that mines input text for the most frequently occurring words and phrases and retrieves a list of YouTube video links related to these words and phrases using the YouTube Data API.  This allows users to copy and paste text from their documents and quickly access online videos to enhance their understanding of the topics in the text.  Here is a link to the app: http://smarksapp.appspot.com/.  Try it out!  The project is still under development and I am excited to improve its interface design and overall functionality.