Creator Now.

Building a people directory for an invite-only community of YouTube creators

Role

UX Designer (Contract)

Timeline

Apr - May, 2022 (5 Weeks)

Team

Zack Honarvar (Co-founder) / Kate Ward (Co-founder) / Ricardo Bedin (Founding Engineer)

Skills

Product Design
Web Platform
Desktop
A screen mockup of the creator now pro people directory
CONTEXT

What is Creator Now?

Creator Now is a six-week, live competitive bootcamp for aspiring YouTube creators. Over time, it also becomes a community for creators to connect with others, sharpen their skills, and get personalized feedback.

Problem

No access to resources & community after the bootcamp

Right now, after the creators complete the bootcamp, they don’t get access to the resources and community anymore. Thus, the founders wanted to build Creator Now Pro, an invite-only community for the next top YouTube creators. Creators within can access a wide range of resources such as a people directory, analytics dashboard, and more.

Before I joined, the founding engineer built a proof of concept (POC) of the platform. It was functional; however, there wasn’t any member focused on the UX/UI design. Thus, I was given the task to revamp the UX/UI of the current concept.

The proof of concept of creator now pro's onboarding

Signup page 🚦

The proof of concept of creator now pro's home dashboard

Home dashboard 🏡

The proof of concept of creator now pro's people directory

People directory 🫂

A left arrow
A right arrow
solution

A robust platform for creators to connect and grow

We designed the MVP of Creator Now Pro. Creators can sign up and customize their profile during onboarding. Then, they can view other creators in the people directory or check out detailed analytics in the home dashboard. 

Customize your profile ✨

Keep track of detailed analytics 📊

Find aspiring creators 😎

mY CONTRIBUTION

Full design ownership over the MVP platform

I worked with the founding engineer to revamp the UX/UI of the platform. In the end, I created the people directory, onboarding flow, and home dashboard. The designs set a solid foundation for the next full-time designer to continue designing the platform. 

In addition, I advocated for user research before ideation and participated in four user interviews and synthesis sessions.

Lastly, in the second week, I created a #design Slack channel to bring more awareness to design and share my design progress to the team. This ensured consistent communication within the team and transparency.

GOALS

Time to get things straight

In this case study, I’ll delve into the people directory page as this was my first project at Creator Now and the most extensive one.

A screen mockup of the creator now pro people directory

The people directory 🔍

For context, the people directory is a page that will allow users to find like-minded creators or collaborators through search and filtering systems.

The goals of the people directory page are as follows:

01 | Help users
Easily find creators to connect or collaborate with

02 | Help Creator Now
Maintain their branding (can deviate but not too much)

To get a sense of their branding, here are some screenshots of their six-week bootcamp dashboard.

The current creator now bootcamp content hub

Content hub 🎥

The current creator now bootcamp home page

Weekly challenges 🏆

The current creator now bootcamp events page

Events 📆

A left arrow
A right arrow
research

Understand the big picture & the users

Aware that I only have five weeks, I needed to be quick with my decisions. So, in the first week, I asked myself:

What critical information do I need to feel comfortable and get started with designing?

After brainstorming and discussing with the co-founders and engineers, I ended up doing the following methods:

A diagram highlighting what I wanted to understand and what method I used

What I wanted to know & how to get them 😤

Stakeholder interviews

I called both co-founders to get a sense of the big picture of Creator Now Pro. This includes understanding the current state, future plans, and the exact pages that will be on the platform. These conversations helped me create an information architecture that was extremely helpful for me.

Information architecture of creator now pro

Information architecture of Creator Now Pro ✨

Competitor analysis

For the project, I studied a variety of platforms such as On Deck, Upwork, YouTube, and more. Looking at these platforms gave me a visual foundation of what the people directory page could look like. 

Collage of competitors such as On Deck, YouTube, and more

All the different competitors ⚔️

User interviews & past surveys

Even though I trusted the co-founder’s expertise and understanding of the creators, I still wanted to directly talk to the users to know their pain points.

As a result, I participated in four user interviews sessions led by the co-founder and read over past surveys sent to the cohort members. Here were some of the insights from the user research: 

01 | Value of the bootcamp 🌟
Every user mentioned that community, exposure to top YouTuber creators, and brand partnerships are the most valuable parts of Creator Now. This helped the team understand what needs to be continued in Creator Now Pro.

02 | Priority of data  📊
Niche, skills, subscriber counts, location are amongst the top most valued data when searching for a creator.

03 | “Finding a collaborator” use case  👀
During the interview, I asked the user to imagine what it’ll be like if they’re looking for collaborators on the platform. This was extremely helpful to decide what data is important for them.

04 | Positive reactions  😍
Overall, every user had a positive reaction when hearing about Creator Now Pro at the end of the interview. And they were all willing to pay for the access.

IDEATION

Creating the MVP

At this point, I was confident in the information I gained during the research phase. So before I started designing, I brainstormed use cases and design principles to help guide my future designs.

Use cases

I wanted to get a sense of how people may use Creator Now Pro as a platform. Thus, based on user research, I came up with these use cases:

handshake

Finding a collaborator

construction

Attend live workshops

record_voice_over

Talk to top creators

volunteer_activism

Find brand partners

Design principles

In addition, based on the research and discussions with the team, I wrote down these design principles as a reminder for myself:

01 | Gen-Z 🔅
This was specified by the founders, and I mostly referenced their existing branding of the boot camp dashboard.

02 | Clear 😎
The page needs to only display the critical information creators want to see. Nothing more, nothing less.

03 | Fun 🎮
The team wanted to add in elements of gamification (competition, ranking, badges, or more) into the people directory.

Sketches & wireframes

I ideated over potential solutions and layout options. As I mentioned before, our engineer at this point had created a proof of concept. So, I did have a reference to look at, but we also discussed that the design shouldn’t be restrained by it. 

Mid-fi wireframes of the people directory page

Explorations here and there🎨

And it was only until I started sketching that I realized I need to actually break down the elements in the people directory.

The two elements that I’ll talk about are the navigation and profile card. It’s important to note that for each of these, it wasn’t a one-and-done task. There were multiple discussions and Slack messages involved in deciding the final designs.

In addition, these designs are leaned towards mid-fi to hi-fi because I found it easier to communicate with higher-fidelity design to the team. Also, these didn’t take me too long to create as well.

Navigation / Left vs top

Selected top navigation because one of the biggest drawbacks of left-side navigation is it takes up more space, resulting in lesser room for content (the priority).

People directory page using a left navigation

One of the earliest iterations! 🙈

People directory page using a top navigation

One of the earliest iterations! 🙈

Navigation / Visual style

At first, the engineer and I were leaning towards #2 because of the flexibility. After asking past cohort members, they all preferred the rounded corner option. So we went with #3.

A top navigation that's all white, which matches with the page color

"All White" ⚪

The people directory page where the body is contained inside a gray background which the top navigation is white

"Inverted Background" ⚫

The people directory page with a top navigation that's curved on the bottom corners

"Rounded Corner" 🧭

After we figured out the main navigation style, I began to design the profile card. This was one of the most challenging tasks in the project as I had to fit multiple elements into a card.

At first, I was quite overwhelmed because I wasn’t sure how to arrange it.

How should I fit all these elements into a single card 🤔

But, going back to the findings of user interviews and learning about OOUX helped me immensely. In the end, I identified all the elements needed and ranked their priorities. This helped me with refining the layout of the profile card. 

Prioritize & categorizing 🧹

Profile card / Layout

We went with #3 because the profile image isn’t overwhelmingly big, two columns is a lot cleaner in layout, and it requires the least amount of vertical height for stacking.

The profile card where the profile image takes up the entire card height on the left

"Big Headshot" 🤯

The profile card that has the subscriber counts on the very top

"Subscribers First" 👏

The profile card with the profile image as a circle on the left

"A Bit of Everything" 🧶

A breakdown of the final profile card

Breaking down the profile card 🔎

final designs

Introducing People Directory for Creator Now Pro!

After going through multiple iterations, I was super proud with the work I’ve created!

Series of screen mockups showcasing the people directory

I'm so happy 😭

RESULTS

It’s official for the MVP!

After I left, the team onboarded over 50 creators onto the platform in June 2022 to use and test the MVP that I designed.

And in the future, once the MVP is refined by the new in-house UX designer, it will be used by thousands of past YouTube creators from the bootcamp!

In the end, it was a bittersweet moment for me to say goodbye to such a wonderful team. Here were some really kind words from the team:

A collage of testimonials from the creator now team

Thankful for being part of this journey ❤️

learnings

Grateful for the journey

Honestly, working part-time on top of college exams, it was not easy. But, I felt like I grew a lot as a designer. Here are the main learnings:

01 | Fast-paced nature of a startup  🚀
Before joining, I was taught to follow a rigid, structured design process. But, I had to understand that sometimes there simply isn’t time and resources. For a startup, building out functionality and shipping as fast as possible is the priority.

02 | Importance of constant communication  🗣️
I learned this from the founding engineer, as he always advocated for “over-communication.” It was extremely helpful for me as a designer to understand what he’s doing each day. This was one of the reasons why I started the #design Slack channel.

03 | Advocating for design  🎨
Since I was the only designer on the team, I had to advocate for research and be intentional with my design decisions. Tradeoffs and compromises were made, but they were all made for the goal of creating a valuable platform for YouTube creators.