Research-Driven Redesign

April 2014 was a time of transition for our rapidly growing team here at Lucid Software. Having just received a round of funding, the office was abuzz with excitement at the prospective growth and change. As part of this transitory phase, we recognized that our homepage was dated and in need of an upgrade. (The design was more than two years old!) We couldn’t help but think, also, that such an upgrade could be an opportunity to positively influence our top line. Rob Christiansen, our Director of Product Management, gave me a stack of papers outlining some research he had been working on and asked me, “How can we use this data to redesign our homepage with a persona-driven approach?” I thumbed through the spreadsheets, charts, and graphs and found that he had been working on identifying personas of our product’s users, or characters that typified the most common paying users of our product. Rob had performed some analyses on the data collected from our various analytics platforms, as well as some qualitative data garnered from surveys. He suggested that I use his research to design a new homepage for www.lucidchart.com that would cater to these personas. The hope was to better answer potential customers’ questions and thus boost conversion rates. In this case, the term “conversion” meant a new product registration that resulted in a paying customer. He had done the hard work; now it was my turn to do the fun part!

Lucidchart's homepage pre-redesign

The plan

As a front-end software engineer and armchair designer, this project was right up my alley. I had a few ideas that I knew should be present in the final design:

• Relevant content. This is where the research came in. Too often startups are trying to pitch products rather than pitch to people. I knew Lucid Software’s content team would play a big role in this part of the design, converting Rob’s persona research into quality copy.
• Simplicity. Our potential users needed the most relevant information and nothing more, padded by generous amounts of white space for effortless consumption (or as Ryan Butters, our VP of Marketing and Sales, puts it, “reading without having to read”).
• Modernity. I wanted the design to follow current web design trends so that the homepage would match the caliber of our product, which uses cutting-edge technology.
• Wow factor. I wanted the new design to have some subtle “wow” moments, to delight users and inspire confidence in our ability to deliver quality work. Many of our potential customers are technologically fluent and I believed that they would appreciate the polish.
• Calls to action. Given that the new design was going to be a long form page (a tall page that engages users by requiring them to scroll), there needed to be frequent opportunities for the user to engage in the desired behavior (i.e., to sign up for a paid subscription).
• Responsiveness. More and more of our customers were visiting from mobile browsers. Our new design needed to accommodate these visitors with a design that worked well on any screen size.

The design

I came up with a rough mockup that was ready for feedback from various members of the organization. The key here is not falling in love with your design before you show it to others; as an engineer, I am relatively removed from our customers and found great value in the direction I received from my co-workers throughout the design process. My original Photoshop file went through at least a half dozen iterations. I also enlisted the help of other teams: our SEO gurus helped me structure the content to be search-friendly and our designers contributed some nice iconography to enhance the design. Once we had a design that we were happy with, I took my Photoshop mockups and built the webpage in HTML and CSS.

The implementation

When the first drafts of the coded design were ready, we decided to roll them out in the form of an A/B/C/D test. “A” was the incumbent homepage design. “B” and “C” were variations of the new design. I believed that adding persona-specific stock photos of people would boost conversions, so this was the “B” version. Rob pointed out that our potential customers may actually prefer seeing the types of diagrams that they would be able to create, so for version “C” we put some screenshots of diagrams in place of the stock photos. Finally, “D” was a variation of the incumbent to ensure that we were isolating the variables of the test as much as possible. We used Google Analytics to set up the test. At first, the vast majority of our visitors were seeing the usual homepage (the “A” version). A small percentage of new visitors were distributed evenly among the other versions. We monitored the performance of the four versions for a few weeks. The results seemed promising.

One of the sections from the "B" version of the design

The same section, but from the "C" version of the design

Once we were sure that the new versions were not doing any worse than the incumbent one, we ramped up the administration of the new design to a larger percentage of visitors to really put it to the test. Again, we watched patiently for a few weeks. At the end of the test, we were very happy to see a 12% increase in conversions (i.e., paying customers) with the “C” version of the new design (with the diagram screenshots)! All that we had to do at that point was turn on the new design to all visitors and celebrate the additional conversions that rolled in.

Conclusion

We believe that the new design was successful primarily because it was founded in solid research. Validating the new design—and therefore the research—with an A/B test was another essential step of the process. (The nice thing about A/B tests is that if they fail, it’s easy to revert all of your customers back to the original, “A” version of the test.) Another interesting thing we learned was that adding the “human element” to the design was not as effective as providing our visitors with previews of diagrams. We recognize that we are never “done” when it comes to iterating for larger growth. Our next steps: refine the new design and see if we can improve our conversion rate even further. Here is a screenshot of the redesigned homepage: