Moovweb Control Center

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.

    Challenge

    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.

    Approach

    What I Did
    • Content Development
    • Information Architecture
    • UX + Interface Design
      • Wireframes
      • Mockups
        • Page Layouts
        • Typography
        • Color Scheme
    • Front-end Development
      • Ruby on Rails Views
      • Sass Library
    Built with MoovUI

    View Process & Artifacts

    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.

    Outcome

    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.

    Control Center v4 Project Page Mockup - Early Stages

    Control Center v4 Project Page Mockup - Early Round 2 Design | View Larger

    Moovweb Control Center v4 Project Page Mockup

    Control Center v4 Project Page Mockup - Early Round 5 Design | View Larger

    Prototype - Moovweb 4

    Using the first production release of MoovUI.

    Moovweb Control Center v4 Project Page

    Final Prototype Control Center v4 Project Page Interface / View Larger

    Wireframes - Moovweb 5

    Initial wireframes of the new Modes Routing interface.

    Moovweb Control Center v5 Wireframes Modes Routing 1

    Wireframe of 'Add Rule' screen for Modes Routing rule configuration / View Larger

    Moovweb Control Center v5 Wireframes Modes Routing 2

    Wireframe of 'Rules Overview' screen in Modes Routing rule management / View Larger

    Final Design - Moovweb 5

    The initial release of the new Modes Routing tools.

    Moovweb Control Center v5 Modes Routing Screen

    Final Design of the new Modes Routing interface for Control Center v5 / View Larger

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.

Moovweb Control Center v4 Project Page

Control Center v4 Project Page Mockup - Early Round 2 Design ×

Moovweb Control Center v4 Project Page

Control Center v4 Project Page Mockup - Early Round 5 Design ×

Moovweb Control Center v4 Project Page

Moovweb Control Center v4 Project Page ×

Final Design of the new Modes Routing interface for Control Center v5

Final Design of the new Modes Routing interface for Control Center v5 ×

Wireframe of 'Add Rule' screen in Modes Routing (Control Center v5)

Moovweb Control Center v5 Wireframes Modes Routing 1 ×

Wireframe of 'Rules Overview' screen in Modes Routing (Control Center v5)

Moovweb Control Center v5 Wireframes Modes Routing 2 ×

Contact