Next Gen VPN Client Prototype
Next Generation VPN Client
Context and Role: Individual contributor and Team Lead at Cisco. Team lead across five states on an internal consulting project at Cisco. I worked mostly with the internal customers - Security Services BU and other members of my team, a visual designer and a software engineer.
Background: This was a project that merged two existing products, a VPN product and a WIFI network product into one. The idea was to hide the complexity of network and VPN management and present a simpler more task-oriented abstraction to the user. A paper describing the design was presented at CHIMIT 2010.
![ngc1](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2016/05/ngc1.png)
![ngc1](https://stubbornflower.com/wp-content/uploads/2016/05/ngc1.png)
Scenarios
![scenarios](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2017/01/scenarios.png)
![scenarios](https://stubbornflower.com/wp-content/uploads/2017/01/scenarios.png)
![cell](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2017/01/cell.png)
![cell](https://stubbornflower.com/wp-content/uploads/2017/01/cell.png)
![ModernUE-d4](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2017/01/ModernUE-d4.png)
![ModernUE-d4](https://stubbornflower.com/wp-content/uploads/2017/01/ModernUE-d4.png)
Design Principles
Some design principles which were developed in conjunction with the product stakeholders and used to drive the design...
Primary
- Invisible
- Simple
- Helpful
Secondary
- 95% of day-to-day tasks from the flyout
- Act more like a cell phone than a computer
- Minimize cognitive burden
- No in-between states
- Guide the user
- User in control - not the system
- Follow Platform Guidelines
- Doesn't Crash
Interaction Model Inspiration
![Screen Shot 2018-01-25 at 11.07.58 AM](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2017/01/Screen-Shot-2018-01-25-at-11.07.58-AM.png)
![Screen Shot 2018-01-25 at 11.07.58 AM](https://stubbornflower.com/wp-content/uploads/2017/01/Screen-Shot-2018-01-25-at-11.07.58-AM.png)
Early Design
![Screen Shot 2018-01-25 at 11.08.30 AM](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2017/01/Screen-Shot-2018-01-25-at-11.08.30-AM.png)
![Screen Shot 2018-01-25 at 11.08.30 AM](https://stubbornflower.com/wp-content/uploads/2017/01/Screen-Shot-2018-01-25-at-11.08.30-AM.png)
Design for prototype
![Screen Shot 2018-01-25 at 11.08.55 AM](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2017/01/Screen-Shot-2018-01-25-at-11.08.55-AM.png)
![Screen Shot 2018-01-25 at 11.08.55 AM](https://stubbornflower.com/wp-content/uploads/2017/01/Screen-Shot-2018-01-25-at-11.08.55-AM.png)
Navigation and Scenarios
![ngc3-1170x674](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2017/01/ngc3-1170x674.png)
![ngc3-1170x674](https://stubbornflower.com/wp-content/uploads/2017/01/ngc3-1170x674.png)
Prototype
Adobe Flex prototype with "Control Panel" to configure the various networking states. For example, first or second use and different environments (home, work, or "Starbucks").
![prototype1](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2017/01/prototype1.png)
![prototype1](https://stubbornflower.com/wp-content/uploads/2017/01/prototype1.png)
Usability Test Results
The prototype was tested in a usability test. Users were technical and non-technical.
![NGC_Usability_Test_Report_Appendix A_Jan_2010-1](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2017/01/NGC_Usability_Test_Report_Appendix-A_Jan_2010-1.png)
![NGC_Usability_Test_Report_Appendix A_Jan_2010-1](https://stubbornflower.com/wp-content/uploads/2017/01/NGC_Usability_Test_Report_Appendix-A_Jan_2010-1.png)
![NGC_Usability_Test_Report_Appendix A_Jan_2010-2](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2019/03/NGC_Usability_Test_Report_Appendix-A_Jan_2010-2.png)
![NGC_Usability_Test_Report_Appendix A_Jan_2010-2](https://stubbornflower.com/wp-content/uploads/2019/03/NGC_Usability_Test_Report_Appendix-A_Jan_2010-2.png)
![NGC_Usability_Test_Report_Appendix A_Jan_2010-3](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2017/01/NGC_Usability_Test_Report_Appendix-A_Jan_2010-3.png)
![NGC_Usability_Test_Report_Appendix A_Jan_2010-3](https://stubbornflower.com/wp-content/uploads/2017/01/NGC_Usability_Test_Report_Appendix-A_Jan_2010-3.png)
![NGC_Usability_Test_Report_Appendix A_Jan_2010-4](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2017/01/NGC_Usability_Test_Report_Appendix-A_Jan_2010-4.png)
![NGC_Usability_Test_Report_Appendix A_Jan_2010-4](https://stubbornflower.com/wp-content/uploads/2017/01/NGC_Usability_Test_Report_Appendix-A_Jan_2010-4.png)
![NGC_Usability_Report_Presentation_feb_2010](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2017/01/NGC_Usability_Report_Presentation_feb_2010.png)
![NGC_Usability_Report_Presentation_feb_2010](https://stubbornflower.com/wp-content/uploads/2017/01/NGC_Usability_Report_Presentation_feb_2010.png)
![ngc9](http://nilspeder.pairserver.com/new-wordpress/wp-content/uploads/2016/05/ngc9.png)
![ngc9](https://stubbornflower.com/wp-content/uploads/2016/05/ngc9.png)