Moovweb Control Center
Moovweb is an Enterprise software solution for delivering customized mobile experiences from a single codebase.
As lead product designer, I collaborated with product owners and engineering leads to redesign the primary Moovweb application management interface.
Moovweb is an Enterprise software solution for delivering customized mobile experiences from a single codebase. The Moovweb Control Center is an application for managing Moovweb projects in the cloud. The primary tools are domain management, routing logic, security, and user management.
I was hired by Moovweb to create a user-friendly, visually coherent interface for a complex system of tools. The initial v4 build was top-to-bottom redesign of all interfaces as well as a rethinking of all content strategy for developer onboarding (this lead to the creation of the Developer Center). The v5 build was a complete rebuild of the platform with an array of powerful new features which required a rethinking of many interfaces, and provided an opportunity to enhance visual design and user experience on many areas of the system.
As the sole designer in the Engineering/Product Management group, I collaborated closely with product managers, front-end developers, and engineers to iterate on requirements, design deliverables, and prototypes, and provided a framework for user experience and interface design best practices. For the v5 redesign, after the adoption of Agile processes and integration of more user-centric practices, I contributed considerable product strategy while PM and Engineering staff contributed valuable ideas for better user experience design. The development of a complex, multilayered system required us to devise a complex, multilayered collaborative process.
While the Control Center remains in continuous development, the foundation for consistent visual design, the well-structured information architecture, and the clear user flows and interfaces I built with the the Moovweb team helped the company provide better tools that sit at the core of their business.
One of the key accomplishments of the Moovweb 4 redesign was the creation of MoovUI, a modular pattern library and styleguide built with Sass. This allowed us to quickly iterate on the styling of UI components and critical interaction patterns, as well as greatly increased the speed by which developers could integrate new features. It was initially included as a Git submodule on Moovweb v4, and has now been packaged as a Ruby Gem for Moovweb v5.
Selected Artifacts of the Design Process
Below is an incomplete selection of deliverables that were presented during the product design process.
Please note that there are artifacts for both v4 and v5 of the Moovweb Control Center below, and they are not presented exactly in the sequence they were produced.
Mockups - Moovweb v4
For the earliest iterations of the v4 interfaces I worked first with low-fidelity mockups, enhancing detail progressively until we developed a prototype. We had not yet created the MoovUI style guide. (By the time we began work on v5 I had adjusted our process to include iterations of wireframes before producing refined mockups, or, ideally, MoovUI-based prototypes.
Prototype - Moovweb 4
Using the first production release of MoovUI.
Wireframes - Moovweb 5
Initial wireframes of the new Modes Routing interface.
Final Design - Moovweb 5
The initial release of the new Modes Routing tools.
To view the Moovweb Control Center go to console.moovweb.com and create a free account. You can view demo projects under the account 'Moovweb Demos' to see the interface live.