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:
