A clickable digital prototype to explain the interaction design principle of trustworthiness.
Context 
Visual Communication Fundamentals Studio, Carnegie Mellon University, Fall 2019
The first part of a two part project; the second was an animated video
Challenge
Create a prototype built for mobile dimensions to demonstrate an interaction design principle. It should consider the meta-level of explanation throughout. 
Built With
Adobe XD 
Approach
Selecting a principle
As I researched interaction design principles, the notion of control, trust, and explorability stood out: trust in interaction design had to be more nuanced than just being able to explore without making mistakes.
Further reading confirmed that cues like visual appropriateness and consistency, comprehensive content, and delivering on promised value all contributed to perceptions of trustworthiness. 
Considering the experience
I wanted to practice prototyping a mobile application, so I downloaded several existing fitness apps (a category I use frequently) to explore their trustworthiness cues. I made notes about the flow of each until I came across an untrustworthy example. It had rapid-fire pop-up ads, unintuitive icons, and testy UX copy when exiting the pricing page without opting in ("was there a problem?").
This experience encouraged me to compare effective and ineffective app examples in my prototype. I also shifted focus: food delivery applications piqued my interest for their reliance on multiple external factors and management of the subjective experience of waiting. 
Developing a scenario
I chose to prototype two versions of a scenario in which something goes wrong: a delayed order. This occurrence presents an opportunity for the delivery service to reinforce trust through successfully communicating and resolving the issue.
I then considered the meta-level of explanation. This would require introducing the concept of trustworthiness before introducing the examples. I also wanted to strike a balance between letting the user navigate each example and pointing out significant details. I provided minimal intervention during a first walk-through of each scenario, then used callout boxes to guide the user through a second recap.
Creating the prototype
I began in Sketch to increase my familiarity with an industry-standard platform. However, after discovering there was no way to automatically transition from one slide to the next, I decided the features of Adobe XD were better suited for progressing through the screens of my prototype. 
The prototype can be clicked through below. 

More Projects

Back to Top