PROTOTYPE
PAPER PROTOTYPE
User Research
Journey Map
Storyboards
Paper Protoype
Overview
Wireframes
High-Fi Mockups
Site Map
Design Requirements
Personas
Evaluation
We then created a paper prototype of our product based off of the information architecture diagram. The paper prototype was made crudely using materials such as printer paper, sticky notes, and markers. The paper prototype supports key actions that the user should be able to perform in their scenario. Therefore, only the main screens of the app were prototyped. The prototype was made for the purpose of conducting evaluative tests. We simulated interactions such as clicking a button and swiping a bar using objects such as sticky notes.
QUICK EVALUATION
Then, we each conducted evaluative tests with people outside of the Human Centered Design and Engineering department to evaluate the usability of our paper prototype. We had each participant perform three tasks while they verbalized their thoughts about the process. After each member conducted a test, we compiled our findings and considered them when revising our product design in the creation of wireframes.
WIREFRAMES
We then constructed wireframes for the entire mobile app. Wireframes draft the visual layout of app screens without focusing too heavily on minor details. Feedback from the evaluative tests with our paper prototypes helped direct layout decisions. Each screen was annotated to clarify unobvious aspects of the design. These wireframes served as a draft for our high-fidelity mock-up screens.
HIGH-FIDELITY MOCK UP
We culminated the project by creating high-fidelity mock-ups of key screens in our app. These screens were our vision of what the final product will look like. Wireframe layouts were referenced in the creation of these mock-ups and we referenced existing products such as Google Maps to guide our aesthetic decisions.