Identify the Problem

I started work on Savanna when it was an Adobe Flex application with useful tools that weren’t quite fit together in a way that users understood. When we had the opportunity to rebuild it in HTML5, we looked at what was and wasn’t successful in the existing framework, and at the feedback we’d received from users.  We were going to need something easier to navigate and more project-centered, with plenty of room to visualize and compare data, too.

Research

Existing usability study results were the primary source of research for identifying problem areas in the application. Other content management systems and project management web-apps provided inspiration for how to move forward with a system that focused on projects and producing shareable content.

Develop Concepts

I worked with another designer doing lots and lots of sketching to rapidly generate ideas for the new structure.

Interaction and Interface Design

I used InVision to build clickable prototypes that started in paper but could be tested digitally to get a feel for how the navigation would work.

We quickly settled on a structure made up of a side utilities panel and a main workspace.  Users start by creating a project, then go into that project's workspace.  The sidepanel then only show them the files for that project, and all of the content they create and upload is automatically saved in that project.  The main content area has its own details panel and can be popped out into a full screen view.

With the navigation framework set, the detail for content management, search, and upload utilities, as well as the core analysis tools, were relatively easily plugged into it.

Implementation and Outcome

Development on the framework moved rapidly. We had a large wireframe specification deck to build from, but I also tracked our progress with a large capabiltity map.

The framework is still in use in Savanna and remains structurally sound. We received a marked decrease in complaints about users not knowing what to do upon entering the application or where to go to find files.