“[I want] more structured information about like, either the deliverables, the content or like the pay. “
85 000 followers
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
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 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.
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
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
Despite being a one-stop-shop for marketing services, influencers often experience problems with compensation (1-4).
Micro-influencers have better engagement and audience trust than macro-influencers (2, 6).
Sponsored posts have increased across all platforms but 54% of brands still search for influencers manually for collabs (8).
Primary Research
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.
“[I want] more structured information about like, either the deliverables, the content or like the pay. “
“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”
“If I do a collaboration with a brand, I usually do it for the brand I like or use personally. “
Competitors
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.
Key Insights
I synthesized my findings from the pain points, motivations and behaviours identified in the interview to find 3 common themes.
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?
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
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
"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."
"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."
"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
Using my crafted user stories, I created a task flow for a minimum viable product that solves Chloe's issues.
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
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
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
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
All the screens felt overwhelming with the amount of information.
The to-do list feature feels self-created instead of system-created.
The copywriting for buttons and headers can be improved to better reflect the action and content
Major Changes
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.
Too many numbers in one screen.
Too many alert-type information in one screen.
Less cluttered design with more white space and hierarchy of information.
To-do list looks like user-made instead of system-made.
The number beside the to-do list is overwhelming.
Used progressive disclosure to display the to-do list
'Contract' and 'Contact' sound too similar. Actions not clear.
'Details' doesn't accurately describe the section.
Clear copywriting to support the preferred actions on the screen.
Brand Development
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.
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.
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.
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
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.
Final Prototype
Marketing Website
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.
Key Learnings
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!
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.
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 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.
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.
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.