Current design and UI patterns of the webpage on desktop and small mobile device
Based on qualitative data collected in five usability testing sessions we discovered issues with the visual style of the webpage, its adherence to existing style guidelines, and the UI of links to tools and resources available to the Providence's employees through external and/or internal online access. Also, we pointed to major usability issues with the main navigation and layout on extra small devices.
Proposed design and UI patterns. Sketch prototype of a Bootstrap compatible responsive layout of large, medium and small screen devices.
The following modifications were applied to the design and layout of the webpage and developed as a high-fidelity prototype in Sketch.
1. Updated header design
2. New layout of the main navigation for tablets and mobile phones
3. Improved recognition of the links to the most frequently visited resources
4. Simplified and compact design of links to additional tools and resources
Updated UI elements interaction in Invision