Designing a high-fidelity experience

The next step was to move onto high-fidelity mockups. Early concept validation research showed opportunities to provide more clarity for users in terms of what they could do within Cloud Apps. The goal was now to balance the need for an intuitive experience along with the immersive, new frontier of this product. We would have to do this without overwhelming our existing and targeted user bases.

To achieve this feel, some basic approaches were taken to designing components:

Slightly rounded corners
Splashes of bright color
Saturated gradients applied with constraint
Animated transitions in response to user interaction
Custom illustrations with a lighthearted look and feel

Accessibility

All color combinations were tested and applied in compliance with the accessibility criteria set forth in WCAG 2.0 (AA). The UI does not rely upon color as the only form of conveying meaning or state changes. The text on calls to action were carefully written to have context and functionally specific meaning.

I paid special attention to forms so that they provided clear focus and input states, meaningful and helpful error messaging, and tooltips.

Responsive Design

I worked closely with the frontend developer to determine breakpoints for mobile and tablet screens, and layout adjustments that had to be made. In the interest of quick implementation, I opted not to create responsive mockups. Instead, we worked collaboratively to design and develop and iterate on designs directly into the dev environment.

Private Page