For our seventh assignment in HCDE 451: UX Prototyping Techniques, we explored the use of a digital interactive prototype to test the validity of a high-tech design solution. The assignment required us to explore a specific user interaction scenario by making a "fake" version of the product to test UI decisions. The product I chose was an adoption service for pets in a shelter. I borrowed from the popular app Tinder's card UI to develop an app that allowed users to easily browse through dogs that they could then donate towards or apply for adoption.
I began by listing the functionalities/screens I would need to include in this application, named PupRaiser (puppies + fundraising), and used this list to sketch some basic wireframes that I could use as guidelines for the digital wireframe prototype. After my sketches were complete, we quickly critiqued our peers' wireframes during class. From the initial critique, I received the following advice about my user flow: choose one specific interaction to evaluate (at the time, I had been planning to test out both the "adopt" and "donate" features). I decided to (at least initially) forget about the "adopt" feature and focus more on the donation of money.
I opened up Adobe XD, my new favorite Adobe CC product, and began creating my digital wireframes.
I used these prototyped wireframes to test out the UI on one of my friends. I created a small list of tasks for him to complete:
- browse dogs,
- favorite a dog,
- donate money to Baxter,
- find out options for adopting Baxter.
With each new screen that my participant encountered, I asked him "what actions are available on this screen?" and had him list the actions he thought he was able to perform given the screen's UI design.
At the end of the session, I quickly asked him for suggestions on how to improve. I find that directly asking participants what they would change about the design tends to reveal a surprising number of insights to aid in improving on future designs.
In this instance, I identified a few pain points that could be improved in the next iteration:
- further distinguish the donate and adopt buttons,
- support swipe gestures for navigating between dogs,
- change the share icon (user thought it meant "upload to cloud",
- provide more details about the actual dogs,
- provide a "similar dogs" section after donating.
Although it is important that I learned from the quick usability session, it is more important that, as a designer and student, I learned about the prototyping and testing experience as well. In the future, here's how I can improve on my interactive prototypes and testing:
- more clearly communicate what is required of the participant,
- more clearly communicate the scope of the assignment/prototype (user was confused because he thought he was interacting with an actual programmed application at first),
- have a stricter task list (even for casual quick evaluations).
Overall, I had a ton of fun making this interactive prototype, and I especially enjoyed my experience with Adobe XD. After creating the initial black-and-white medium fidelity wireframe prototype, I decided to spend some time getting even more used to Adobe XD and create a higher fidelity wireframe for fun. I'll link all of my prototypes below!
Black-and-white mobile:
https://xd.adobe.com/view/0e9dbf79-a3bb-4a3b-8d62-efac1fe3b2e3?fullscreen
Black-and-white web:
https://xd.adobe.com/view/0e9dbf79-a3bb-4a3b-8d62-efac1fe3b2e3?fullscreen
High-fidelity mobile:
https://xd.adobe.com/view/5e161613-69c9-4437-9cd0-655e595e3ab4