Create a stand-alone interactive site to showcase best practices for utility companies in web site usability. The site needed to show examples of 27 key usability features, with multiple screenshots per feature. Each screenshot included callouts and printable pdfs requiring resize capabilities. The challenge was displaying multiple levels of navigation hierarchy within a fixed-size interface for customers on browsers as low as IE6.
Using Flash and Actionscript 2, we created a UI that allowed the user to navigate clearly between each feature, along with comparing screens within that feature. The callouts (numbered on the screenshot) and their details (in the right pane) visually responded to mouse events simultaneously, to give the user a visual clue to their relationship.
With a UI built in Flash, we gained some control over cross-browser differences while allowing for restricted security access.
1. Hold brief interviews with marketing and research department to document the goals of the interface.
2. Research technology solutions to solve anticipated technical difficulties with performance and displaty, and identify a UI pattern to handle the depth of navigation required.
3. Create first round of wireframes for proof-of-concept within the development department. Develop the information architecture to outline the data’s interdependencies.
4. Generate high-fidelity mockups based on feedback to outline proof-of-concept to stakeholders, including marketing and development teams.
5. Coordinate with the other developer to determine timeline, distribution of work, and testing methods.
6. Outline timeline for stakeholders for demonstrable pieces of software to ensure we were meeting business goals throughout development.
7. Collect user feedback through product demos, and monitor analytics post-release