Overview
In the prototype phase, we followed our design principle and developed them into low-fidelity prototype to express our ideas. Then, we use our lofi prototype to do user testing to confirm and elaborate our ideas. After the user testing, we evaluate our testing result and form evaluation findings. Based on our findings, we do annotated wireframes to highlight our features. Then, based on our findings, we finished our high-fidelity mock-up.Prototyping allowed us to test the usability of our application.
low-fidelity prototype
Drafting our Design
We use Figma to develop the paper prototype. Each page in our information architecture became a screen in our prototype. Our prototype focused on three completion user flows: searching for restaurants with filters, writing and view reviews, and setting up a meeting location. We create these low-fidelity prototypes to test whether our design has problems. To identify our application meets the users' needs, we conduct four user tests to testing our ideas.
Quick Evaluations
The low-fidelity prototype was used to conduct user testing with four participants. This study was conducted in order to test three points: usability of our application, users' expectations and behaviors, and whether our application meets users' needs. We changed some features of our application based on users' feedback and our observations. Then, we make a wireframe and changed our features.
Changes based on User testing
Annotated Wireframes
After our user testing, we created annotated wireframes. The annotated wireframes outlined the application's layout, grid, and font choice. They helped the team to stay consistent when we separate our work and design together.
High-Fidelity Mock-Ups
Finalizing Our Design
Based on our user testing and annotated frame, we delete features that have weak relations with finding a workplace. Finally, we choose several screens to represent the core functions of Wherework: the home page, restaurant page, contact page, meeting page, profile page, and collection page. We create a happy flow based on our high-fidelity mock-ups to show a complete user flow.
