After giving users a lot more options for customizing EC's flagship product, the LifePlanner™, the team & I needed to revamp the shopping experience entirely and create an environment for the user to build their own book. In order to do this, we needed to move away from the traditional product page but still needed a place for users to find information.
We settled on having a landing page containing all the information. From there, users could learn more about the product or jump straight into the BYO (Build Your Own) environment.
Full landing page with product information may be viewed here: https://www.erincondren.com/lifeplanner
Step 1: "Customize"
Users choose from library of designs at the right. Upon clicking on the design they like, the image on the left updates with their chosen design. User can choose a coil color. Each design has a "designer suggested" coil color, noted by the asterisk.
Each step comes with accompanying help text unique to that step.
For users who are visiting for the first time or are entirely new to this type of ordering process, the information is broken down in an easy to digest manner.
Step 2: Personalize
User can choose to personalize their product by adding their name, a quote and a photo to their book. After inputting the personalization text, they click "preview my design" and the book image updates with their information. They have the ability to view the front & back of the book.
Helper text guiding the user.
Step 3: Layout & Theme
After choosing a design, coil color & personalization, the user moves on to step 3 where they choose the type of LifePlanner™ weekly calendar they want. EC offers three weekly layouts in two different color themes - by using a CSS slider, users were encouraged to explore and play with their options to come to a decision.
The slider features a sample weekly spread page (same date for each layout) and some prominent features of the LifePlanner that our focus group explained were important to them.
I created the vector icons to add a little more visual differentiation for users. My goal was to make it easier for them to distinguish between "colorful" and "neutral" since some sections look similar. If the user moves the slider all the way to "neutral", their selection on the right is updated to neutral and vice versa.
Step 3 Helper Text
Step 4: Accessorize & Stylize
After designing their book, users are taken to a gamified upsell page. We implemented an upsell strategy where adding 4 accessories would trigger a 15% discount.
Accessories are divided by type (essentials, stickers, etc) but at the very top we offered "starter packs" which were targeted at specific personas. Clicking on "learn more" would bring up a modal with a more interesting image.
I designed these with an icon representing what the bundle was about and made it into a box shape to resemble a gift. The trick with starter packs is that since they each include 4 accessories, adding the bundle automatically triggers the 15% discount.
When the user clicks on "learn more" under a starter pack, a modal pops up with more details about the product.
After adding 4 accessories, users see the original prices crossed out and the discounted price reflected below. Users can add as many accessories as they like.
Step 5: Congratulations
After accessorizing their book, users are taken to a confirmation / secondary upsell page. EC carries a lot of matching products for the LifePlanner™, including personalized notepads, neoprene carry clutches and even more accessories. By adding this confirmation page, the user knew their items were added to cart and were given the option to shop some more in other categories.
