Collaborative design for a branded mobile experience

The Challenge

Thinkific's educators were longing for a mobile solution that resonated with their students' on-the-go lifestyles. The absence of a mobile app was a roadblock, and competitors were offering only generic solutions, not a custom app specific to the brandeding of their own school.

The Opportunity

We envisioned a unique edge - Branded (white-labeled) mobile apps. We wanted to do more than merely differentiate; we aimed to be customer-centric and collaborate with our customers.

B2B to B2C Transition:
Our intitial B2B focus had to pivot to exclusively offer in-app purchases. Apple's guidelines were that our B2C clientele had to provide in-app purchases as a requirement.

My role: I led the full design life cycle of research, synthesizing data, creating lo-fidelity mockups with devs, hi-fidelity mockups for hand-off, and further iterations.

Assumptions Challenged

When understanding the customers, we got mixed sentiment about the in-app purchase transaction fees.  

Affinity map of notes from 8 customer interviews
We interviewed 8 customers. This is a screenshot of our affinity map of the research notes.
Each color represents a different customer.
Some creators were willing to pay the fee to get the sales.
Others hated the transaction fees (see notes on the right).

The Creators opposed said that they would rather sell their courses traditionally (with their website), and market to their audience with another channel like social media and email newsletters.

Our key takeaway from this research was that we needed to make the in-app purchases less important in the hierarchy than the already purchased courses and community discussion posts.

positive notes about in-app purchasesnegative notes about in-app purchases
Close up of customer data
Notes on the placement of in-app purchases on the home screen design

Close up of customer sentiment in Miro

Interactive: scroll through the Home Screen Layout

How did our Learners feel about the in-app purchases?

When we interviewed our Learners, the key takeaway from the study was that in-app purchases were very convenient, but they didn't mind making their purchases on the web. They really wanted an app for 2 things:

1. To access their lesson material more easily
2. To read and respond to Community posts more easily

It was easy enough for them to find new courses to purchase on the student dashboard on the web.

We went back to the drawing board...

low-fidelity wireframes exploring a new placement for in-app purchases

The devs and I had a virtual white-boarding session in Miro to revisit the design placement.

Based on the pros and cons, we put the courses in the Learn Tab, under a "Discover" widget.
It was the cleanest and simplest solution, with less edge cases and was faster to implement.

Below are wireframes for two types of Learners
1. A new Learner with no course enrollments yet
2. A current Learner who has purchased courses previously and downloaded the app after.

A scenario if the user has no enrollments
A scenario for an existing user

Taking the design to hi-fidelity

Brainstorming with the developers made it much easier for them to understand the flows, and we saved a lot of time, because they got started on implementation while I designed the high-fidelity mocks.

Hi-fidelity designs

Scenario if the we have an existing user who already has course enrollments, with annotations for devs.

Adapting the design for tablet

tablet design 1, where the cards are full-width

MVP version

Tablet scenario 2, where the cards in a grid style

Future version

We launched the first version (on the left) because it was the quickest to implement. While the grid view (on the right) is more appealing and fits more courses inside the frame, it required a technical refactor that would put us behind schedule another couple of weeks. We have 92% phone users and 8% tablet users, so we saved those designs for later.

The Results

Apple approved our submission and our first B2C customer went live shortly after.
We then made the Branded app available to all of our customers on paid plans.
We offered the app as an add-on for a $199 monthly subscription.

After customers got on a sales call, we had a 22% conversion rate for customers who wanted to add the Branded app to their monthly plan.

This project marked a shift in how we designed at Thinkific - rather than getting approval from a stakeholder or manager, we used the voices of the customers as a compass to help guide us in our product development.

Thinkific Mobile App