Overview

In 2023, we launched a mobile app calendar for our creators and their customers. The primary feedback we received was that customers also want a calendar feature for their web users.

To address this, we plan to extend the calendar functionality to the web, aiming to boost engagement, retention, and user satisfaction. Additionally, we will introduce streaks and badges to promote daily usage and enhance retention through gamification.

Goals

Speak with 10-12 customers to understand how they would use a web calendar feature with gamification elements
Design and implement a monthly and agenda view web calendar
Implements streak and badges functionality to promote daily usage and enhance retention through gamification

Success Metrics

We will know if we are successful if:

We increase overall calendar feature adoption to 20% within 3 months
We gain 5 new customers (attributing web calendar) within 3 months

Research & Analyze

Engaging directly with our customers is my preferred approach for gaining a deeper understanding of their pain points and needs. Hearing their feedback firsthand not only helps eliminate guesswork but also ensures we avoid making assumptions. For this project, I also conducted in-depth conversations with our onboarding team to gain insights into their current calendar challenges on mobile apps.

Customer interviewS

From speaking with our customers we were able to outline the following request and improvements we wanted to solve with our web calendar:

Functionality requests:

Ability to see the whole month at a glance, more like a google calendar
Ability to track progress and or streaks
Ability to have custom ‘badges’ for end users to be awarded after a certain streaks amount

Improvements:

See a thumbnail of the video on the calendar - not just the title
See meta details of a video eg timing, author, description
Easily see who added content the the calendar (the creator or the end user)

Ideate & Design

Competitive Analysis

For this project I started with a competitive analysis to see how other applications built and designed their web calendar with streaks and badges. This allowed me to understand what works and what doesn’t from a user's perspective. It is also beneficial to find any common usability patterns that might already exist that our user’s could be familiar with.

Lo-fi WIREFRAMES

From our learnings I was able to sketch out different design paths to help us quickly narrow down some options that would work within our limitations. The main problem we wanted to solve was with these sketches were:

Where would the calendar live on the end user website navigation?
Where would streaks & badges settings be and how would Creators customize their badges?
What information is displayed about each video on the month and week view of the calendar?

Hi-FI Mocks

When I felt we were in alignment with the wireframes I transferred over to Figma and started creating hi-fi mocks of our web calendar.

I needed to design states for the admin area for Creators to manage their calendar content and badge details, as well as the end-user calendar designs for desktop and mobile web. These included all the smaller details like empty states, hovers, and onboarding modals.

I used our weekly product meeting to present these designs to our stakeholders so everyone could be up to date on the latest progress and provide feedback.

Ideate & Design

Once we were aligned with the designs we started getting feedback from our customers. We wanted to get feedback before releasing this to our customers to make sure the design was intuitive and solved the pain points we found from our initial research.

USER TESTING

We tested the prototype on 13 customers and found some outstanding issues we still needed to solve for:

“How do you know if the user adds content to the calendar vs a Creator?”
“I want to see a thumbnail of the video on the calendar - not just the name”
“I would love some default badges so I don’t have to create these - that would help since I don’t know where to start!”
“Where do I add my own customized badges? I would like to use some of my Brand voice in the naming”
“I wasnt expecting badge settings to be part of calendar”
“I want to customize the dots on the calendar to use our brand colors
“Agenda list overwhelming (especially if 2-3 videos a day) and friction point”
“Was expecting it to look more like app (with month view)....”
Wants to customize the header text - that’s her number 1 request.

Design iterations

As clear as I thought my initial designs were, it turns out that people were still struggling with understanding what different parts of the UI meant and where some settings where located. Once I completed and reviewed the design updates with those users we learned we had solved for the initial problems we ran into during testing.

DEVELOPEMENT

Once we felt comfortable with the UX details we were ready to work with engineering to build the feature. Before our kick-off meeting with engineering I worked with my Product Manager to breakdown the requirements and add any edge case designs (error states, empty states, hovers, animations).

ENGINEERING HANDOFF

We always start every project with a kickoff meeting with Engineering, myself, and the Product Manager to make sure everyone is on the same page and there are no blockers. Since we are a remote team we will usually set up a slack channel between all teams to make sure everyone is readily available if there are any questions.

QA REVIEW

Once engineering pushed their first draft to stage I was able to start the QA process. I like to mock up any design updates needed verses typing it out as this can be much easier to understand. I added requirements to the feature outlining where the execution didn’t align with the initial design.

BETA RELEASE

Since this feature was born from customer feedback and working with our internal CS team we decided to release our Calendar with streaks and badges to all customers but position it as a Beta. This would give us the most opportunity for feedback while letting our Creators know that this is a feature we plan on iterating on and there might be some bugs.

Once we got more customers enabling Calendar for their web we noticed a majority of the feedback was around notifications of the videos on the calendar. We quickly realized we needed to integrate calendar notification (web and app) as part of the follow up process

RETROSPECTIVE

WHAT WENT WELL

Great communication across teams allowed us to be able to make updates quickly when new requirements came in later in the project (e.g. allowing users to have default badges).

LESSONS LEARNED

Simple changes (like adding confetti when a user wins a badge) were able to make large improvements to the overall UX.
Internally our product team had the most feedback around where these calendar streaks and badges settings would be housed which was surprising to me but lead to great conversations and discussions.

DID WE ACHIEVE OUR GOALS?

We will know if we are successful if:

We increase overall calendar feature adoption 20% within 3 months

Almost! We increased adoption to 18% in the first 3 months

We gain 5 new customers (attributing web calendar) within 3 months

Yes we did! Pinky promise!