PROTOTYPE
In the prototyping phase, we accumulated our design ideas and transformed them into interfaces. Initially, we created a paper prototype based on our findings from the ideation phase. After identifying three main key user tasks we ran a series of usability tests with our user group that gave us valuable insights and feedback. Then, we incorporated those into our annotated wireframes which finally resulted in a high fidelity mockup of LinkNow. Prototyping helped us negate all the assumptions we unknowingly made and gave us an opportunity to test the usability of the application.
Paper Prototype
Wireframe
Final Mockup
01 Paper Prototype
Utilizing our Information Architecture and combining our vision from our storyboards we were able to identify three key user flows. Combining this knowledge with our Interface Sketches, we transformed these user pathways into paper prototypes. We spent a lot of time whiteboarding our ideas and sketching out how the interactions between these screens would flow. Listed below are the three user tasks.
Task 1
Setting Up the App & Creating a Profile
Task 2
Signing up for a Volunteering Position
02 Usability Testing
Task 3
Joining a Volunteering Group
After gaining feedback on our paper prototypes we polished them to be used in our usability tests. This study was conducted in order to evaluate the preliminary designs of our LinkNow application. We conducted our tests with 7 different users, each carrying out the three tasks listed above. The usability test was the most crucial feature in identifying our internal biases and assumption in terms of user interface and experience. This would allow us to gain valuable feedback and insights directly from our user group in order to improve clarity and eliminate unnecessary functions. It also helped inform modifications and our design choices as we transformed our paper prototypes into wireframes.
​
For each test, the user had to complete one user path flow that had a completion criterion. We also asked a set of pre and post-test questions that acted as a second round of user research. This was essential as throughout our process we tweaked the direction of our application and wanted to ensure that we were still on track. The post interview questions also gave us an opportunity to understand user problems and extract design recommendations from them.
Takeaways
-
Didn’t understand “Connect to Facebook” in setting up profile
-
Hard to navigate “Time Slot Availability”
-
Inconsistent interface
-
Confusing iconography for “Groups” and “My Events”
-
Unclear terminology caused confusion between “Organizations” and “Opportunities”
03 Annotated Wireframes
Using our paper Protytopes as a key reference point and sorting through all our learnings from our usability tests we developed annotated wireframes for LinkNow. This was an integral part for the UI of our system as essential choices relating to, layouts, design patterns, typography, and iconography were made. We created annotated wireframes for our entire system which helped us gain a better overview of what our final product was going to look like. The wireframes acted as building blocks for our final high fidelity mockups.
Home Page Wireframe
04 High Fidelity Mockups
Finally, we took our wireframes along with the feedback we received on it and created our high fidelity mockups. These screens represented the most essential functionality of each user task flow: The Time Slot Availability, Home Screen and Groups Page. After a round of in-class critique, we had the final version of our mockups that displayed fully developed stills from our application demonstrating what it would look and feel like in a working environment. The main barrier we overcame in the process was deciding the color scheme, typography style, and weight to create an effective visual hierarchy.
Too much Text, no spacing
Icons are not intuitive
Confusing layout
