The existing web app was confusing to use (literally even to rocket scientists who used an alpha version). It had too many features that were difficult to find. Executives and potential customers said lacked visual appeal. It had to satisfy the needs of internal and external commercial and government customers.
I led research and design as the only user experience person on the team. I collaborated with the product manager, engineering team, and key 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.
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.
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.