When it came to conceiving the new design for ProdPad, we wanted this to follow exactly the same philosophy as the rest of our Regenerated project. Much like the complete re-write of our back-end, and back-to-basics wireframes from a fresh pair of eyes, we wanted to create a new ProdPad design from scratch.

For many of the same reasons behind our decision to hire Mojca, our UX expert, we brought in the support of talented front-end developer and designer Beno to take us through this regeneration. Of course, Simon and myself are even less equipped to create a beautiful finished design than we are wireframes and mockups, but in much the same way as Mojca was given a free card on our new user interface, Beno launched straight into the deep end with an interactive redesign process.

In onboarding Beno, we made a conscious decision not to follow the most classic approaches to software redesign, which tend to take one of two routes.

1. Photoshop perfectionism

It’s of course an option to complete all designs in Photoshop for sign off before development begins. A design process heavily lead by Photoshop in this way often goes hand in hand with prioritization of aesthetics. The benefits are that as project or product manager you can be sure that you’re happy with a design before committing development resources. But this approach is usually followed in line with a designer’s skill, rather than by design. Look, feel and readability are extremely important, but the risks of Photoshop perfectionism are that your design can often come out detached from how it will work on-screen.

2. Template compromises

Another option is to use a design template or framework. This is what we did for ProdPad’s first design, on top of the popular design framework Bootstrap. This approach gives a great head-start into a readily interactive design, but is cumbersome and code-heavy, especially as more and more customizations are added on. With these frameworks it’s no easy task to build a unique design that meets your needs, as customization involves mastery of conflicting styles and code.

The third route: Interactive real-time design

Instead, we’re taking a third, alternative approach to the final design of the regenerated ProdPad that works as a natural continuation of our UX designs. This is why finding the right team to work on this project was so important. Beno – much like the rest of the D.Labs team – has experience in building several other beautiful, highly interactive web-apps and has the skillset to jump straight into an interactive design. Above pixel-perfection, we knew that our design needed to reflect great flow and usability, and that would require the flexibility to craft elements for our specific use-case.

A look at the early steps of putting in the scaffolding through to a more final design of the product

Beno is building the app directly from Mojca’s wireframes with AngularJS, without a final design in place, though with an understanding of the flow, and personality we wanted to achieve in the final product. He’s making visual decisions at the same time as he defines precise page layout and interactions, and sharing real interactive designs with us as new elements are built in.

If you’d like to hear more about our ProdPad Regenerated project, you can get in touch with us – and even find out about getting onto the beta program – here

The post Regenerating ProdPad: starting from scratch for beautiful design appeared first on ProdPad :: Product Management Software.