Capstone Project
CoLab
iOS App

As a project at BrainStation, I designed CoLab: an all-in-one campaign management app for micro-influencers to stop wasting time with administrative tasks and start getting creative.

Role

UX Designer

Duration

10 Weeks

Tools

Figma
InVision

Team

Individual

At a Glance

The Problem

Marketers prefer to work with micro-influencers for social media marketing as their conversion rate is 20% higher (1) than macro-influencers. However, micro-influencers find collaborations with brands to be confusing and frustrating.

Currently, micro-influencers use a combination of email, powerpoint, PDFs, third-party apps, and personal organization apps (like Notion) to successfully collaborate with brands. Most micro-influencers are students or full-time workers and do not have a personal assistant. The current collaboration process does not serve the needs of busy micro-influencers.

The Solution

The mobile iOS app, CoLab. It's an all-in-one campaign management app for micro-influencers to accept pitches from brands, view campaign details, and upload drafts all in one platform.

Methodology

For this project, I followed the Double Diamond Design methodology. This methodology allowed me to practice convergent and divergent thinking which promoted exploration of the issue and solutions.

Discover

To build an effective and evidence-based solution, I had to conduct research to fully understand the problem at hand. This stage allowed me to use divergent thinking to explore the problem space dialectically and understand the current landscape of solutions.

Problem Space

Inefficiencies and Miscommunication

Micro-influencers, categorized as having less than 100K total followers, make up 91% of all influencers (2). Brands are now leveraging micro-influencers’ engagement rate and strong connection with their audience to produce effective marketing campaigns.

Although many micro-influencers exist, brands do not have an efficient way of finding them, leading them to manually search for influencers on social media. As a result, micro-influencers find inconsistencies in pay and complicated communication channels with brands.

Assumptions

I created a list of assumptions to validate in my secondary or primary research.

Micro-influencers feel they don’t have the time/capacity to deal all the pitch emails on their own.

Most inconveniences in brand collaborations can be solved with a digital solution.

Brands are open to using an app to help facilitate collaborations with micro-influencers.

Enough brands will adopt the digital solution to make it worthwhile for micro-influencers to use it.

Micro-influencers believe that existing apps are not sufficient for their needs.

Seconday Research

All Work, No Pay

Despite being a one-stop-shop for marketing services, influencers often experience problems with compensation (1-4).

The Value of Micro

Micro-influencers have better engagement and audience trust than macro-influencers (2, 6).

Time & Money

Sponsored posts have increased across all platforms but 54% of brands still search for influencers manually for collabs (8).

Primary Research

So I asked around...

I found an abundance of information around influencer marketing and brand collaborations through secondary research but I was still missing an importance piece: What did micro-influencers actually think?

I decided to interview 3 micro-influencers that have completed at least 6 collaborations in the last 6 months between the ages of 20-30. This recruitment criteria ensured that participants are familiar with the current brand collaboration process and would be willing to adopt a digital solution to the problem.

What are influencers saying?

“[I want] more structured information about like, either the deliverables, the content or like the pay. “

Interviewee
85 000 followers

“If I had a platform that like could track prepayment then I wouldn't have to like go and [chase down brands for money] myself”

Interviewee
25 000 followers

“If I do a collaboration with a brand, I usually do it for the brand I like or use personally. “

Interviewee
5 160 followers

Competitors

Existing Solutions & Limitations

To design an effective and innovative solution, I conducted research on a few platforms that my interviewees mentioned that they use. Overall, I found that these platforms help to organize the chaotic communication channels, instead of simplifying the channels altogether.

#Paid

Aspire, Upfluence, Grin

@Influencerpaygap (instagram)

Match creators with brands, brands launch campaigns, run creator whitelisting
Launch campaigns, invite creators to campaigns, take shipping and order information
Instagram account to share compensation and deliverables of campaigns that creators submit anonymously
Brand-centered design (doesn't take influencer-pain points into account)
Invite-only
Difficult to synthesize all the information
Feels impersonal because it leaves creators 'on read'
Still requires the use of email, PowerPoint & PDFs
Not a credible source

Key Insights

Issue Themes

I synthesized my findings from the pain points, motivations and behaviours identified in the interview to find 3 common themes.

Niche Alignment

They feel negatively towards brands that send cold emails for not taking the time to scroll through their feed which clearly represents the values and niche of the micro-influencer.

Information Irritation

The responsibility of organizing all the information often falls on the micro-influencer and causes delay in content creation due to scattered information and the brand’s requests for content revisions.
Focus

How Might We

How Might We

make it more convenient for micro-influencers (less than 100k followers) to collaborate with brands on social media campaigns by reducing miscommunication throughout the duration of the collaboration in order to minimize administrative costs for brands?

DEFINE

Using insights from the discover stage, I used convergent thinking to synthesize information. This stage allowed me to narrow the scope of the problem to create an effective, targeted solution.

Persona

Let's Meet Chloe

I created a persona using demographic and behavioural information I gathered in the research to represent all micro-influencers that face issues with brand deals. This tool helped me empathize with my user and stay focused on who I'm designing for.

User Stories

Translating Stories into Tasks
Review Collaboration Details

"As a micro-influencer, I want to have all my collaboration details in one place so that I have more time to create content instead of administrative work."

Check Content Calendar

"As a micro-influencer, I want to be reminded to create the brand content by the deadline so that I know what my content calendar will look like for the month."

Receive Brand Feedback

"As a micro-influencer, I want to have better feedback for content revisions so that I am certain I will get it right in one try."

Task Flow

Visualizing Tasks

Using my crafted user stories, I created a task flow for a minimum viable product that solves Chloe's issues.

Develop

Now that I've narrowed down the scope of the problem to solve, it's time to use divergent thinking to sketch and ideate solutions.

Sketches

Explore Away

To consider all possible solutions, I decided to sketch out different layouts and features with pen and paper. From my task flow, I knew what screens I needed so I created exploratory sketches to find the best possible way to allow Chloe to complete the tasks.

Home Screen
Collaboration Overview
Pitches
Calendar
Accepting A Pitch
Uploading Draft

Wireframes

Sketches to Figma

After turning exploratory sketches into solution sketches, I created mid-fidelity wireframes in Figma. I was able to create structure and interactions so that I could prepare for usability testing.

Usability Testing

Test Early, Test Often

I conducted two rounds of usability testing to gather feedback and check if my app worked as intended. Each round had 5 individuals who were given 5 tasks to accomplish and follow-up questions.

The 5 tasks:
1. Accept a brand's pitch (Glossier)
2. Find the due date
3. Read content guidelines
4. Upload a draft
5. Read Glossier's feedback

1

Too Much Information

All the screens felt overwhelming with the amount of information.

2

Form Doesn't Fit the Function

The to-do list feature feels self-created instead of system-created.

3

Using the Right Words

The copywriting for buttons and headers can be improved to better reflect the action and content

Major Changes

From Feedback to Revisions

The usability testing was valuable in identifying areas to improve and enhance my digital solution. I synthesized feedback in each round of user testing and placed them on a Design Prioritization Matrix before implementing the revisions after each round.

1. Home Screen

Version 1

Too many numbers in one screen.

Version 2

Too many alert-type information in one screen.

Version 3

Less cluttered design with more white space and hierarchy of information.

2. To-do Feature

Version 1

To-do list looks like user-made instead of system-made.

Version 2

The number beside the to-do list is overwhelming.

Version 3

Used progressive disclosure to display the to-do list

3. Copywriting

Version 1

'Contract' and 'Contact' sound too similar. Actions not clear.

Version 2

'Details' doesn't accurately describe the section.

Version 3

Clear copywriting to support the preferred actions on the screen.

Brand Development

Visual Identity & Personality

Before creating any moodboards or UI boards, I brainstormed the feeling that I wanted my app to evoke.

These feelings include...
CREATIVE
BREAKING-BOUNDARIES
MODERN
BOLD

I wanted the feelings to suggest creating something new from existing things through exploration, creativity and boundary-breaking - just like how marketing has evolved.

Moodboard
Design System

Using my moodboard as guidance, I established a design system for the app by using the modular methodology called Atomic Design. I followed the methodology to standardize my elements to create a consistent feel in the app and to ensure new features follow an established design system.

WCAG

I knew the importance in considering accessibility when designing solutions so I made sure to ensure my app achieved WCAG Compliance standards by using the Figma Plugin called Stark.

Name, Wordmark & Icon

I knew the importance in considering accessibility when designing solutions so I made sure to ensure my app achieved WCAG Compliance standards by using the Figma Plugin called Stark.

Similar to the exploration stage of my app layout, I knew that the fastest way to play around with my wordmark is by sketching. So, I took out my sketchbook and pen to explore a few wordmark ideas.

After some exploratory sketches, I started to put some ideas down on a Figma file. It was helpful to have a preview of my vision board and brand colors as I worked on the wordmark. I allowed myself to be unrestrained and messy in a Figma page:

Then, I organized my wordmark based on the themes, selected the most representative wordmarks and asked for feedback from fellow designers.

Final brand Assets

A few hours later...

After many iterations, I finally decided on the final wordmark and app icon. The wordmark is simple and geometric. This simplicity represents the organization aspect of the app. The app icon is an open folder to further play into the organization aspect of the app.

Deliver

Final Prototype

Launch Screen
Home
Pitches
Campaign
Product Selection
Product Selection Modal
Products Selected
Contract Review
Visual Guidelines
Visual Guideline Expanded
Content Calendar
Campaign Tasks List
Tasks List Expanded
Content Upload
Content Uploaded
Content Upload Preview

Marketing Website

Download Now on the App Store

To market CoLab to new micro-influencers, I designed a marketing page for desktop and mobile viewports. I wanted the website to be an extension of the brand's identity and personality while showcasing the app.

Desktop
Mobile

Key Learnings

Done, Not Perfect

This capstone project consisted of many smaller deadlines throughout my bootcamp. As a recovering "perfectionist," I had to remind myself that designs cannot be perfect and the design process is non-linear. Instead of hiding my work in its "ugly" stages, I embraced receiving feedback from other designers so that I can iterate on my work before the submission deadlines. Remember: Great designers are great editors!

Changes Welcome

The usability testing process uncovered many issues in the early versions of my app. Although it was frustrating to have similar or same problems after iterating, these iterations were necessary to create the best design for my users. When I took a step back, it was amazing to see the changes and improvements in design from my version 1 app to the high-fidelity prototype. Remember: Improvements require changes.

The North Star

Throughout the design process, I always referred back to my How Might We question and persona as my North Star. It's easy to get lost in the brainstorming stage with new shiny features. Having my North Star helped me stay focused on the problem space and creating a relevant and effective solution.

Next Steps

Alternative Platform

Alternative platforms offer different limitations and opportunities for CoLab. During my initial brainstorming process, I knew that a mobile app would be the best first platform while a desktop app was a strong contender. So, I would love to design a desktop version of CoLab. Desktop apps offer more screen real estate so I'd love to use that advantage to make collaboration information easier to view. I created an example screen of how the desktop app could look. Because of the bigger screen size and keyboard, uploading content, especially for YouTube, would be easier on desktop.

Testing 123

Now that the high-fidelity prototype is completed, I would like to conduct usability testing on the design to ensure that the hi-fi treatment did not affect the usability of the app. This usability test would be a good opportunity to also ask about features that micro-influencers would love to see in the future.

Developer Handoff

As I work with a software developer colleague, I want to ensure that my design systems are useful for the developer. I'd like to take some time to prepare for the developer handoff so that the translation process goes smoothly.

Next Project
Save My Spot!