Moving to Interactive Prototypes

Over the last several weeks, we have been finalizing our prototypes using a tool called Balsamiq. This tool is helpful in quickly creating web prototypes that show functionality without worrying about the tiny design details. Since HydroShare has an existing design language in their website, after talking with the development team, we learned creating more ‘pixel perfect’ prototypes would be unnecessary.

However, understanding the interaction between different pages is very important to the user experience. Thus we are turning to a new tool, called Invision. This tool allows us to link screens together to simulate a real webpage. Using this tool, we can show how a new experience on HydroShare will feel and simulate some user workflows.

The Invision interface with several of our screens for the Explore prototype.

Dashboard Clickable Prototype

For the Dashboard Invision prototype, we simulated how our Dashboard feature would exist in the current HydroShare experience. We took screenshots of the existing HydroShare website and linked it to our Balsamiq prototypes. The Dashboard feature comes

You can click through the screens here: https://invis.io/DJH3PSSMGNK#/292161257_Login_Screen

Explore Clickable Prototype

For the Explore Invision prototype, we simulated a new experience when searching for and looking at search results. Again, we can’t account for all of the different workflows a user would actually use. Our interaction contains clicking the search bar, seeing autocomplete options, and then displaying the results in three different views, the split view, the list view, and the map view. We used Balsamiq prototypes for all of the screens since.

You can click through the screens here: https://invis.io/4JH3LUXHUE2#/292150572_Discover_Final_-_Split_-_No_Search