RESPONSIVE WEB UI/UX | INFORMATION ARCHITECTURE | USER FLOWS | PROTOTYPE | USER RESEARCH

The Challenge

The rapid adoption of cloud computing infrastructure demanded innovative user interfaces to meet the cost, scaling, and security demands of the enterprise. The existing web app was confusing to use (literally even to rocket scientists who used an earlier version). It had too many features that were difficult to find. Executives and potential customers said it lacked visual appeal. It had to meet the needs of internal and external customers who were increasingly used to consumer e-commerce platforms.

“If the user can’t find it,
it doesn’t exist.”

— Human Factors International

My Role

I led research and design as the only user experience person on the team. I collaborated with the product manager, engineering team, and key business stakeholders.

These user research activities informed my design process as detailed below:

Stakeholder and user interviews
Analyzed requirements
Heuristic review and usability testing of existing UI
Competitive analysis
Usability test of clickable prototype

Note: elements of this case study have been recreated or obscured due to confidentiality.

Site Map

I created this site map to inventory features, identify terminology, and organize the content. Establishing the right information architecture early was important to having a usability navigation structure and terminology that matched the mental model of the target users.

Iterative Design - From Paper Sketch to Clickable Prototype

Early paper sketches I created helped formulate ideas on improving the navigation and incorporating new features.

I then designed the structure, page types, and key page flows as wireframes in Axure RP. This facilitated formative usability testing and stakeholder interviews to test common scenarios and tasks.

Feedback from the wireframes and branding led to the final design. I performed usability testing on the high-fidelity prototype to confirm goals were met. The PM used it for demos and to convey the design to the development team.

Screen/Task Flow

I designed screens for a common user task flow. The cloud wizard was a key capability of the system. It helped users select the best cloud option given a set of questions. This was a big improvement over requiring a set of technical parameters that many users didn't understand.

Mobile High-fidelity Prototype & iOS App

I created a responsive design in Axure RP, which simplifies the process for making designs that work for multiple screen sizes. The functional prototype scaled smartly in a mobile phone browser. Key mobile tasks included the ability to order a cloud system and monitor existing systems.

Though the project didn’t require it at the time, I also created a proof of concept iOS app design in Sketch. Here I made modifications to follow the Apple Human Interface Guidelines.

Dashboard Design Conveyed Key Metrics

I designed dashboards to provide information at a glance, with drilldown for details. These metrics were selected based on user research and usage analytics from the prototype application.

Style Guide Promoted Consistency

I created guidelines for developers to follow to ensure consistency across the application, including CSS stylesheets, which ensured exact colors and sizes.

The Consumerization of Enterprise Cloud Management