“[I want] more structured information about like, either the deliverables, the content or like the pay. “
Interviewee
85 000 followers
85 000 followers
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?
“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
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
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.
Compensation Confusion
Micro-influencers find rate negotiations and compensation with brands to be difficult because there isn’t an industry standard rate based on the follower count and deliverables.
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.
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.
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.