*Note: Legally, we cannot go into too much detail about what their software is, how it works, or show mockups with real data and content. All content in mockups has been replaced with filler text.
Designing an in-depth software interface is no easy task. There’s a lot to take into consideration — the abundance of screens, menus, and endless interactions that all need to integrate seamlessly and intuitively. Pivotal Innovation had a solid software and foundation to work with. They also had a strong understanding of their core target audience, the look they were going after, and even the general flow of the overall experience. However, they needed a polished user interface that’s a breeze to use so their clients can focus less on learning the software and more on what matters most — innovation and reaching goals.
Structuring & Designing High-Level Menu Elements
The first step in designing the interface was laying out a high-level overview of the software’s primary menu and navigation elements. This would help establish the available space to work with and lay the foundation for how screens deeper in the process function and look. Ultimately, navigation elements that could continuously be added to were decided as being the most efficient solution to provide room for long-term growth.
Designing Reusable & Modular Elements
To allow for quick design iterations for complex screens down the road, the next step in the process was designing different elements that would be reused throughout multiple screens — buttons, forms, modular boxes, graphs, tables and more. Designing these items at the beginning of the process allowed for more emphasis to be placed on functionality and user experience, rather than on aesthetics for the remainder of the design process — driving speedy and quick design sprints where structure reigned supreme.
Screen Designs & Front-End Coding
With the main navigation items and modular elements designed, the final steps were designing and coding screens used throughout the software. A modular card approach was taken to maximize real estate and help users understand exactly where they are within the innovation process.
Pivotal Innovation had the resources needed to integrate functional static prototypes into their software, so static HTML/CSS/JS was all that was needed at this point to hand off the final product.