Guided Preview

Project Overview

This was a part of a larger project of Gating Features, where we wanted to show valuable features to free users.

The business objective was to increase potential leads by capturing their sign up data, showing them the potential value of robust digital curriculum without overwhelming the viewer.

I was part of three designers, each working on their own part of a greater project, Gating Features.

I collaborated with Sales, Marketing, Product and Engineering on how to create a preview experience that displays the value, shows a way to contact sales, and directs them for more information. This project took about two weeks: one week for planning, the second iterating on feedback and writing copy.

My Role

growth, collaboration, guided tour, ux writing, time constraints, responsive designs

Illustration by Sarah Jacczak


As we launched into this project, there were technical aspects that I wanted to understand. Some questions that I had for Sales, Marketing, and Product were:

- How will the users be coming into the site/preview?
- Will we require sign up before preview?
- What will the desired flow be? Where do we want them to go and how will we reach out/close the loop?
- Which curriculum/curricula can we display? What are some limitations from OUR?

When I first met with the Growth PM, where he introduced the project as Gating Features. Previewing curriculum would be one of several points of gated material. I brainstormed the entry points, then focused our energy on the curriculum tab as the most important entry to curriculum due to it's navigational hierarchy.

Several months before this, Kiddom partnered with Open Up Resources (OUR), a curriculum publisher. It became an opportunity to show the value of OUR's digital curriculum in Kiddom to users and generate leads.


As a new user, I want to be able to see curriculum before buying it.

Brainstorming entry points for gated curriculum


After talking with Product, Sales, and Marketing, I developed some goals and needled for metrics:

- How might we show the value of the curriculum?
- How might the experience prevent drop off?
- How might we increase qualified leads for Sales?

I had a bit of difficulty finding a similar tours, mostly I previewed product tours and reviewed best ux practices for tours and Intercom's tour tool ( 1, 2, 3) as well.


Ideation for gating bundle, viewing curriculum flow


I shared user flows and mock ups in a cross-collaborative meeting with Sales, Marketing, Engineering and Product:

- "Will they share it when they don't know the product well?"
- "Where will "learn more" go? To a landing page? I like that."
- "Are we going to show everything in the curriculum? Is there certain content that Open Up does not want displayed? Or must it all be shown?"
- We will need a zero state soon for users who have not signed up and users who may have already purchased curriculum.

We had to get cracking pretty quick. The lowest lift for Engineering would be to include components that they have already built or will need to build soon. I kept this in mind when I designed the initial preview.

As I was grappling with the curriculum, I realized that we would need to be strategic on what to show in order for users to see value rather than get lost in the depth. I decided that I needed to formulate a structure for preview limited access and truncate certain areas.


How the curriculum would look with just an upsell bar at top, no guidance.


I met with the Product Marketing and Design who gave me feedback on the designs and some :

- The blue links are distracting and the inactive elements may need more contrast.
- Focus on fewer key interactions for uncovering value
- Marketing will get me copy for the Intercom tour and the initial page, but begin to write placeholders

Some problems:

- Will need zero state page for not signed up/signed in
- Implement the new design for curriculum cards
- Guide flow for viewing the curriculum
- Create a system for seeing that something is unlocked and would up-sell the user
- Use Intercom's tour to help with messaging, interaction.

I created some solutions below:



- MARKETING: Let's show the range of curricula, because most likely we will open it to the other ones.
- MARKETING: The tour copy was good, but some changes to be consistent with messaging
- DESIGN: Let's go back to a card without the overlay since we don't have it for all subjects; there isn't value tied to the pages
- CEO, SALES: Make sure to include a way for them to contact Sales

At last I was able to apply some feedback into the next round:

- Adding my own copy for explaining Open Up
- Expressing the Intercom tour experience
- Representing the whole experience for responsive design.


How the curriculum would look with just an upsell bar at top.

"Final Design"

I created a deliverable for engineering that would show the truncated curriculum, fine tuned the deliverables for mobile and tablet, and represented last minute changes for messaging.

Pushed some pixels and organized those design files. Pushed to Zeplin and shared it on the Sales and Marketing channels so that SDRs would know where people may be contacting them.

Some solutions I focused on:

- Reveal the various curricula: Show them as smaller cards rather than carousel
- Represent the Intercom tour experience with copy checked by Marketing
- Add a way to contact Sales
- Simplify the cards
- Make the tour steps support the perceived value


Designs shared to Dev on Zeplin


This was my last project at Kiddom and sadly I was not able to QA the implementation. It seems that quite a few things were cut from implementation as sometimes it is the case. I do see many things lost by not creating a guided experience to the curriculum.

Check out the prototype and you can compare it to the live preview experience here.
Thanks for viewing!