Background
Erin Condren is a lifestyle ecommerce company that specializes in producing high quality paper planning and organizational products. Erin Condren (EC) is specifically known for their LifePlanner™, a comprehensive planner featuring a host of productive layouts, unique designs and high quality materials. Since growing from a humble garage operation into a multi-million dollar business, Erin Condren has developed a corner in the market for a relatively niche audience: avid planners that are passionate about paper planning and memory keeping. Of course, where there is a market for something, there must also be competition. Over the nearly 20 years since EC started, competitors have cropped up in the space with similar offerings, thus making it especially important for Erin Condren to continue asserting their key value propositions. This goes double for new customers.
The Project
In line with Erin Condren’s goals for continuing to assert their value propositions and gain new customers, I was tasked with creating a space on our website built around converting new customers. Specifically, I needed to reassess our New Customer Homepage, which is the landing page we would redirect customers to when they visited erincondren.com for the first time, and find ways to make it speak to them and ultimately lead to conversions.
My role in the project was to lead and execute the layout, design and launch of this new experience.
Research, Data Analysis & Customer Empathy
Reviewing Past A/B/C tests
In order to avoid prior mistakes and take advantage of past wins, I reviewed past A/B test results over the past several years as they related to updates to our storefront. I specifically took note of a few tests:
In one test, we compared the effectiveness of two different homepage heroes: A: one that focused on each of our core LifePlanner purposes, and B: one that focused on the product names themselves. Variant A proved to be the most effective leading to a 10% increase in hero interaction. Therefore, I knew that our customers wanted the inherent benefit of our product before they would consider further exploration.
In another test this past year, I created a LifePlanner graphic hero that illustrated, in a somewhat mystical way, how much peace and organization a LifePlanner could bring to your life. My team decided to launch it and compare it against the performance of our current hero which was a bit more literal and informational. After a short time, we saw some exciting results - 10% increase in conversion, a 90% decrease in bounce rate on our homepage, along with an increase in revenue. The results seemed to indicate that our customers respond well to myth-based storytelling to see the benefit, not just read some marketing copy with literal specifications.
Competitive Research
To ensure that our eventual solution was competitive with other businesses in the same space as Erin Condren, I sampled the homepages of several direct and indirect competitors. I compared and contrasted everything from how they used whitespace, introduced their most popular products, to how they talked about themselves. I pulled each homepage into Figma and noted Pros and Cons of each approach.
One of the positive themes I observed were companies positioning their core products center stage, allowing those products to take up a ton of space towards the top of the fold with a coherent and simple message. Copy was also streamlined, not filled with brand jargon, and focused on the benefit to the user. In addition, visual elements weren’t clustered and packed together too tightly, allowing an unfamiliar customer to easily scan and not feel lost. Imagery also tended to include some kind of human interaction, even if it was just a hand holding an object. These insights ultimately inspired ideas for how I would improve Erin Condren’s homepage experience and remain competitive.
Section of my competitive research during the research phase.
Data Analysis
To get a deeper understanding of Erin Condren’s customers, I reviewed the results of the recent customer satisfaction survey and an older usability test of our homepage. The results were able to paint a better picture of who I was speaking to: professional women, typically in the healthcare or teaching profession, who also happened to be parents. The target customer seemed to be most interested in managing all of their overlapping priorities and finding something of quality to do that in. I was also able to understand what customers liked about our products and what kept them coming back. Armed with this customer empathy, I was able to better position myself for the next stages of the design thinking process.
Some Fun with AI
I used a variety of figma AI plugins to help generate artifacts. In one instance, I used it to create a fully fleshed out user persona, complete with Goals, Needs, Motivations, and Frustrations that my target customer might have. Though it wasn’t absolutely perfect, it provided an incredible baseline template in almost no time, giving me some extra time for the Design phase. The persona it generated matched the demographics of our target customer perfectly: A nurse in her mid-30’s, with children, who uses planners in both her personal and professional life.
In addition, in later stages of the process, I used an AI heatmap plugin to compare the effectiveness of my initial homepage concepts against our current homepage. This tool helped to make my case for more drastic changes without additional investment in heatmap software.
Hi-fi homepage concept
Our Live Homepage at the time of the project
Defining The Problem
Making Sense of Everything
There was so much great information I was digesting: personas, journey maps, survey and test results, but I needed to distill the overarching messages that these artifacts were communicating if I was going to do anything real. That’s where some affinity diagramming came in.
Pooling all of the data I had from customer surveys, usability results and my own research, I was able to group qualitative data into one of the following categories: Motivations, Product Education, UX Issues, Monetary Issues and Business Needs. Business Needs was not an element in customer feedback, but rather internal stakeholder requirements. Organizing the data in this way allowed me to focus on the core overall problems that needed to be solved.
Problem Statements & How Might We
To further anchor myself into the mind and experience of our target customer, I took advantage of some helpful exercises that are popular for getting everyone in the mood for user empathy. Though I felt pretty comfortable that I was on the right track, I wanted to be sure given the level of impact this project could have.
Here’s a few that helped guide me forward:
- Sarah, avid planner, nurse and mother of two, needs to easily assess the quality and usefulness of planners so she can find a planner that fits all areas of her life.
- Sarah, a nurse and mother of two, needs to be able to quickly identify product offerings and the differences between them, so she can make an informed purchasing decision.
- Sarah, a nurse and mother of two, needs to find a planner that manages both her busy work schedule and family’s schedule, so she can remain organized and stress free.
- Sarah, a nurse and mother of two & avid planner, needs to easily find out the ways she can customize her planner, so she can make it feel her own.
Then, with those statements, I completed an exercise that helped me brainstorm HOW I could address that user need. Some examples:
- How might we display quality and usefulness so that Sarah can find a planner that matches her desires?
- How might we show different products in a concise way so that Sarah can make an easy and informed decision of what planner will work for her?
- How might we introduce Sarah to a planner that manages her differing priorities so that she can find the perfect product to fit her needs?
- How might we show accessories and customization options to Sarah that allow her to create a planner that fits her style and aesthetic?
Now that I built questions that myself and my team could answer, it was time to brainstorm some answers! The goal was to approach these answers uninhibited, allowing myself to put down any possible fix I could put on paper. In the end, I was able to identify some actionable solutions with my team.
Though some of the solutions were ultimately deemed a little too different from our current experience for this first release, they were noted for further iterations.
Problem Statements
How Might We Statements
Answers to how might we? statements
Design
Armed with in-depth knowledge of my user and their core concerns, I took to creating wireframes so I could begin forming concepts to present to my team.
A few of my early homepage wireframes based on my initial research.
Keeping in mind that one of the core needs for our users was the ability to customize their product to their specifications and aesthetic - I knew an element or a group of elements towards the top of the fold would be needed to address this need. Since I had created a series of new icons for a separate project, I opted for adding space for icons to communicate this value proposition.
Based on my observations in my competitive research in contrast with our current homepage, I knew we had an issue with information overload. When customers loaded our site, they were hit in the head with seemingly identical looking images of planners, making it very difficult for a new customer to find something that would meet their needs. It was also proven in prior usability studies that users had a hard time figuring out where to begin searching for a product that might suit them. Therefore, I began to explore how I could make the core categories of our products clearer and stand out more by making them larger and playing around with copy.
I also paid special attention to our hero section - a hugely important piece of beachfront real estate where I knew we could pack a punch for our core product, the LifePlanner. Noticing our current lack of human touch to our photography, I explored the idea of how we could incorporate models into our shots for the hero, even if it was just a hand, so that customers felt our products were real and imagined themselves using it. With this in mind, I explored a bunch of different ways to create the hero section- from illustrative options to photography heavy.
Once I had a few wireframed/higher fidelity concepts to play around with, I began sharing this with my web team to get their immediate thoughts. It was decided that we would launch the eventual final design of this project and review its performance over a 30 day period.
Initial Ideas
I iterated on the homepage hero and customization sections at the top of the fold. Knowing these would ultimately be some of the crown jewels of this project, I wanted to explore all opportunities for creativity.
Ideas for the New Customer Hero section.
Experimenting with ways to introduce one of our core value props: customization options.
Some of my initial Homepage ideas exploring a mixture of product carousels, category blocks, and educational content.
Stating My Case & Advocating for Change
Initially, some on my team felt the design was too bold of a change, and should remain relatively conservative. Specifically, they felt the large category blocks would be too large of a departure from our current site. However, upon presenting my competitive research findings and even utilizing an AI plugin to scan the design for scannability, I was able to convince stakeholders to proceed with this more innovative update.
Getting Stakeholders Aligned & Getting Resources
Once we had alignment on my web team, we brought in cross-functional team members from marketing, copy, merchandising, and photography to help execute on our idea and provide their recommendations.
One area I found particularly engaging was discussing imagery options with our Photo team. Since I was proposing a set of images that we didn’t necessarily have, I quickly mocked up some ideas for photos we would like to see for the new homepage. From there, I attached those drawings and desired image ratios to Asana tasks that the Photo team was able to reference for their work.
Similarly, I brought in our copywriter to advise on targeted new customer copy, specifically for those large category blocks. Initial copy recommendations given were a bit long and cumbersome, so I worked with our copywriter to develop copy that would meet our target customer’s needs.
Storyboarding photo ideas for new homepage that was shared to direct marketing/photo team efforts.
Final Design
Development of Homepage States
Since Erin Condren is an ecomm brand that regularly highlights promotions, new products and initiatives, I knew this new homepage experience would need to properly balance the needs of the business with the user. There would be times where promotions would be so high value, that the new customer content would need to give way to this promotional content. But, if some elements were replaced with promotional content, would the other content still make sense? These were questions my manager and I worked with our Merchandising Lead to figure out and define.
The initial sentiment from our cross functional team was that site promotional content would be pushed to the new storefront more often than not. However, upon educating the team on the ultimate goal, to get brand new customers acquainted with our core product and learn about our value propositions, we were able to come together on some guidelines of when/where temporary promotions would be shown.
Ultimately, we agreed that during high value promotions, throughout the holiday season for example, we would pretty much align both New and Returning customer homepages. But, during most other parts of the year, each homepage would operate independently.
Finally, the good part: Launch & Results
Once everything was defined and agreed upon, I packaged the assets and worked with our development team to ensure that everything functioned as it should.
The handoff included prototyping the interactions of the page so that our development team could properly code the experience. It also included providing linking strategy of specific elements on the page, alt text, iconography, and the styling of any unusual typography elements across a variety of screen sizes. This was of course followed by a few rounds of QA in which I called out spacing and font size inconsistencies and elements breaking on specific device screen sizes. After a few rounds of feedback, it was ready to launch!
25% Increase in conversion over a 30-day trial period, with consistent performance 90 days after.
Over a 30 day period, we saw a significant increase in conversion for the page, beating our old homepage experience. We therefore have since decided to make the page a permanent fixture in our site strategy for the foreseeable future with intent to make adjustments as the data dictates.
In addition, we ran a usability test on the new homepage with an outside participant, which yielded some positive results, specifically:
-The user was able to understand the core products + value propositions.
-The user was able to easily locate a product that met their needs.
-The user understood the core elements of the page.
It felt amazing to have a positive impact on such a high traffic part of the site and ultimately lead to a business win.
Future Directions
Excited by our successes so far, our team plans to make thoughtful adjustments to the homepage experience and test how we can push it further. Specifically, we plan to explore the possibility of:
- Adding a virtual product walk through to help customers familiarize themselves with our products.
- Adding product testimonials.
- Playing around with photographic style: incorporating more dynamic lifestyle shots with models that represent our core customer.
- Incorporating video/motion graphics in the hero to better communicate our brand, show our products in action, and tell a story.
