Summary

After reading Luke Wroblewski's Web Form Design, I rapidly prototyped an interactive sign-up flow based on the existing multi-step form and shared it with Netsanity's CEO, Carl. Three months later the best-performing prototype was now a fully-functional React web application ready for production.

Case study of Netsanity

View the final product

Process and progress

My first prototype was a multi-page Axure file intended to demonstrate the concept of a highly interactive conversation instead of a long or chunked up form.

Luckily, Carl, the CEO of Netsanity, embraced the idea...so I got to work testing the prototype with users so I could confidently iterate and increase the fidelity of future prototypes.

This prototype was the result of a small handful of user tests that helped me identify key areas where my desired interaction patterns and clever copywriting didn't match users' mental models...rather, it created clear roadblocks.

At this stage, I also chose to design the desktop experience first, as the mobile experience would be identical with the exception of background artwork and quotes.

Highlighted here is a small but complex asset in my Axure file. This is one of the many dynamic panels used throughout the prototype - complete with many conditions that help progress users correctly through the demo

This is the first screen of the desktop version of the final prototype - and a representation of what was eventually built by the talented React developer, Nick Breaton.

Noticeble additions in relation to an earlier prototype include social media links, a picture of Carl, a playable audio file, and additional copy. These additions were the result of further user testing that helped identify elements that proved successful in increasing users' trust in the service enough to start the demo.

The first screen of the new onboarding experience needed every bit of help to encourage visitors to click on the call to action.

Unfortunately, the existing user interface of Netsanity's web application was its own worst enemy in terms of selling itself.

Using screenshots of the application as reference - and another incredible design tool, Framer - I designed new screens for each of the three key areas presented in the demo.

Still in Framer, I wrote the necessary code to add just enough behavior to specific elements on each screen.

The result was a short video quickly demonstrating an easy-to-use interface that, while visually different from the current application, presented the same functionality.

Back to top

Desired outcome

Carl wanted a better sign-up experience for his prospective customers

Services provided

Software toolbox

Robert Mion is a designer, instructor, organizer and developer.

Photo of Robert speaking at a meetup in Charlotte, NC
He has created and improved user interfaces, websites and applications, and brand identities for companies in financial services, retail, security and technology industries.
Download CV