Building a platform that generates social media content in a few simple clicks.
Building a platform that generates social media content in a few simple clicks.
Building a platform that generates social media content in a few simple clicks.
Introduction
Introduction
Introduction
Role
Role
Role
Staff Product Designer
Staff Product Designer
Staff Product Designer
2024
2024
2024
Team
Team
Team
Me
Me
Me
4 Engineers
4 Engineers
4 Engineers
1 Product Manager
1 Product Manager
1 Product Manager
1 Prompt Engineer
1 Prompt Engineer
1 Prompt Engineer
1 Customer Support
1 Customer Support
1 Customer Support
1 Marketing Manager
1 Marketing Manager
1 Marketing Manager
Design tasks
Design tasks
Design tasks
Competitive evaluation
Competitive evaluation
Competitive evaluation
User interviews
User interviews
User interviews
Research analysis
Research analysis
Research analysis
Brainstorming
Brainstorming
Brainstorming
Mid-fidelity prototyping
Mid-fidelity prototyping
Mid-fidelity prototyping
Usability testing
Usability testing
Usability testing
High-fidelity designs
High-fidelity designs
High-fidelity designs
Design system
Design system
Design system
About
About
About
Flick recently pivoted their business model to capture the huge opportunities in AI content creation for social media, one of the most common pieces of content small business owners and social media marketers rely on are graphics.
Graphics are imagery with text overlayed, usually telling you about something.
Flick recently pivoted their business model to capture the huge opportunities in AI content creation for social media, one of the most common pieces of content small business owners and social media marketers rely on are graphics.
Graphics are imagery with text overlayed, usually telling you about something.
Flick recently pivoted their business model to capture the huge opportunities in AI content creation for social media, one of the most common pieces of content small business owners and social media marketers rely on are graphics.
Graphics are imagery with text overlayed, usually telling you about something.
Challenge
Challenge
Challenge
Following user interviews I led we prioritised a number of initiatives that utilised AI to help small business owners create high-quality social media content quickly.
I lead the design of the platform, which required a steady, experienced hand due to the novel landscape we were competing in.
Flick recently pivoted their business model to capture the huge opportunities in AI content creation for social media, one of the most common pieces of content small business owners and social media marketers rely on are graphics. Graphics are imagery with text overlayed, usually telling you about something.
Following user interviews I led we prioritised a number of initiatives that utilised AI to help small business owners create high-quality social media content quickly.
I lead the design of the platform, which required a steady, experienced hand due to the novel landscape we were competing in.
Outcomes
Outcomes
Outcomes
Research process: I introduced a new research process during the project which increased collaboration and alignment, a process we continue to find successful for larger projects.
Pivoting mid-project: Initially we planned to implement the tool in collaboration with Canva, but mid-fidelity prototyping and testing uncovered unforeseen challenges and opportunities which led to us building our own MVP.
Retention: Customers who scheduled graphics from the platform had above 79% monthly rate of retention, switching from more established providers and leading Flick to pursue generative visual content creation as it could be a key differentiator and defensible offering.
Rapid development: I lead the design of the product, handing off a platform with 16 key features which I managed the prioritisation of by close analysation of the research material and aligning with the founders and product team.
Research process: I introduced a new research process during the project which increased collaboration and alignment, a process we continue to find successful for larger projects.
Pivoting mid-project: Initially we planned to implement the tool in collaboration with Canva, but mid-fidelity prototyping and testing uncovered unforeseen challenges and opportunities which led to us building our own MVP.
Retention: Customers who scheduled graphics from the platform had above 80% monthly rate of retention, switching from more established providers and leading Flick to pursue generative visual content creation as it could be a key differentiator and defensible offering.
Research process: I introduced a new research process during the project which increased collaboration and alignment, a process we continue to find successful for larger projects.
Pivoting mid-project: Initially we planned to implement the tool in collaboration with Canva, but mid-fidelity prototyping and testing uncovered unforeseen challenges and opportunities which led to us building our own MVP.
Retention: Customers who scheduled graphics from the platform had above 79% monthly rate of retention, switching from more established providers and leading Flick to pursue generative visual content creation as it could be a key differentiator and defensible offering.
Process
Process
Process
Research
Interviewing customers to reveal inefficiencies in work processes
Interviewing customers to reveal inefficiencies in work processes
Interviewing customers to reveal inefficiencies in work processes
Initial research both led to and informed the design of the graphic creation platform.
This research was exploratory, I asked questions about participants working processes, and observed their existing content creation workflows.
Without this initial research we might have missed that small business owners were creating very similar graphics from existing templates, but still struggling to find the time to create these graphics consistently, which reduced their posting frequency and the quality of the posts themselves. We knew these were key differentiators between SBO’s that were successful and unsuccessful in using social media to increase product and service sales.
Initial research both led to and informed the design of the graphic creation platform.
This research was exploratory, I asked questions about participants working processes, and observed their existing content creation workflows.
Without this initial research we might have missed that small business owners were creating very similar graphics from existing templates, but still struggling to find the time to create these graphics consistently, which reduced their posting frequency and the quality of the posts themselves. We knew these were key differentiators between SBO’s that were successful and unsuccessful in using social media to increase product and service sales.
Initial research both led to and informed the design of the graphic creation platform.
This research was exploratory, I asked questions about participants working processes, and observed their existing content creation workflows.
Without this initial research we might have missed that small business owners were creating very similar graphics from existing templates, but still struggling to find the time to create these graphics consistently, which reduced their posting frequency and the quality of the posts themselves. We knew these were key differentiators between SBO’s that were successful and unsuccessful in using social media to increase product and service sales.
Ideation
Planning the Canva integration
Planning the Canva integration
Planning the Canva integration
We had identified Canva as a potential partner for the graphic creation tool, understanding that our customers were already familiar with it, and knowing Canva offers third-party integration.
This appeared to be an efficient way of testing generated graphic content creations effect on trial conversion and customer retention, as we’d made an assumption it would be easier to design and implement and serve users via familiarity.
We had identified Canva as a potential partner for the graphic creation tool, understanding that our customers were already familiar with it, and knowing Canva offers third-party integration.
This appeared to be an efficient way of testing generated graphic content creations effect on trial conversion and customer retention, as we’d made an assumption it would be easier to design and implement and serve users via familiarity.
We had identified Canva as a potential partner for the graphic creation tool, understanding that our customers were already familiar with it, and knowing Canva offers third-party integration.
This appeared to be an efficient way of testing generated graphic content creations effect on trial conversion and customer retention, as we’d made an assumption it would be easier to design and implement and serve users via familiarity.
Lesson
Whilst we conducted a technical assessment, we weren’t thorough enough when reviewing prompt and design details which would pose problems for our engineering team and customers in the near future. We did conduct mid-fidelity usability testing which allowed us to catch some of the problems and make the appropriate choices in the future, though.
Research
Encountering critical challenges via prototype testing
Encountering critical challenges via prototype testing
Encountering critical challenges via prototype testing
Six existing customers were tasked with using a mid-fidelity prototype to generate a graphic to use on their social channels.
Customers struggled to navigate the change from Flick’s interface to Canva, they often wanted to navigate away from Flick into Canva itself, and didn’t understand what was influencing copy generation.
Beyond test results, through prototyping we had encountered a number of challenges which affected the final stage of the process in which the customer would bring a graphic back into Flick to edit their caption, alt text, and schedule to socials.
Six existing customers were tasked with using a mid-fidelity prototype to generate a graphic to use on their social channels.
Customers struggled to navigate the change from Flick’s interface to Canva, they often wanted to navigate away from Flick into Canva itself, and didn’t understand what was influencing copy generation.
Beyond test results, through prototyping we had encountered a number of challenges which affected the final stage of the process in which the customer would bring a graphic back into Flick to edit their caption, alt text, and schedule to socials.
Six existing customers were tasked with using a mid-fidelity prototype to generate a graphic to use on their social channels.
Customers struggled to navigate the change from Flick’s interface to Canva, they often wanted to navigate away from Flick into Canva itself, and didn’t understand what was influencing copy generation.
Beyond test results, through prototyping we had encountered a number of challenges which affected the final stage of the process in which the customer would bring a graphic back into Flick to edit their caption, alt text, and schedule to socials.
Ideation
Creating an in-house graphic creation platform MVP
Creating an in-house graphic creation platform MVP
Creating an in-house graphic creation platform MVP
As the Canva integration presented technical and design challenges we didn’t have the time to overcome we opted to create an in-house tool with reduced functionality to test whether it would be a feature that could positively impact trial conversion and retention.
Due to pivoting we had to reduce scope to core functionalities that we identified as being the most important via our user interviews and usability testing.
The primary features were:
Generating graphic copy instantly
The ability to adjust fonts
Moving items on the canvas
Editing colours, and uploading a brand palette
As the Canva integration presented technical and design challenges we didn’t have the time to overcome we opted to create an in-house tool with reduced functionality to test whether it would be a feature that could positively impact trial conversion and retention.
Due to pivoting we had to reduce scope to core functionalities that we identified as being the most important via our user interviews and usability testing.
The primary features were:
Generating graphic copy instantly
The ability to adjust fonts
Moving items on the canvas
Editing colours, and uploading a brand palette
As the Canva integration presented technical and design challenges we didn’t have the time to overcome we opted to create an in-house tool with reduced functionality to test whether it would be a feature that could positively impact trial conversion and retention.
Due to pivoting we had to reduce scope to core functionalities that we identified as being the most important via our user interviews and usability testing.
The primary features were:
Generating graphic copy instantly
The ability to adjust fonts
Moving items on the canvas
Editing colours, and uploading a brand palette
Implementation
High-fidelity designs organised by feature
High-fidelity designs organised by feature
High-fidelity designs organised by feature
At Flick engineers and discovery work separately, therefore we prioritise detailed high-fidelity customer flows with appropriate notation, we also have one or two calls early in the process to account for technical feasibility.
Throughout the process design and product are available to answer Engineering questions and make any necessary amendments to designs.
We also build a component system for each platform and feature, which engineers migrate into our design system.
After some planning time with the discovery team I conducted 14 customer interviews in which I asked exploratory questions, and watched them work through their content creation process, to learn what difficulties they faced in producing high-quality and consistent visual content.
At Flick engineers and discovery work separately, therefore we prioritise detailed high-fidelity customer flows with appropriate notation, we also have one or two calls early in the process to account for technical feasibility.
Throughout the process design and product are available to answer Engineering questions and make any necessary amendments to designs.
We also build a component system for each platform and feature, which engineers migrate into our design system.
Lesson
At previous workplaces I worked in cross-functional product teams, and frequently advocated for the same approach at Flick. However, due to our small team size, a separate approach in which engineers were not as closely involved in discovery and design processes was preferred to reduce context switching and keep implementation fast; something that was key to our success as a small business.
Iteration
Increasing activation and expanding the suite of tools
Increasing activation and expanding the suite of tools
Increasing activation and expanding the suite of tools
Post release we observed positive signals in retention but activation onto the tool was low. As a solution we worked up a more visible access point to the tool.
We also received feedback that suggested allowing users to create their own ‘font palettes’ would be a quick-win, we released this with ‘brand palettes’ which was delayed due to technical challenges.
Post release we observed positive signals in retention but activation onto the tool was low. As a solution we worked up a more visible access point to the tool.
We also received feedback that suggested allowing users to create their own ‘font palettes’ would be a quick-win, we released this with ‘brand palettes’ which was delayed due to technical challenges.
Post release we observed positive signals in retention but activation onto the tool was low. As a solution we worked up a more visible access point to the tool.
We also received feedback that suggested allowing users to create their own ‘font palettes’ would be a quick-win, we released this with ‘brand palettes’ which was delayed due to technical challenges.
Solutions
Solutions
Solutions
The primary editing screen, in which users first see their generated graphics, and have access to a range of tools in the sidebar and toolbar that help them personalise what was created by AI.
The primary editing screen, in which users first see their generated graphics, and have access to a range of tools in the sidebar and toolbar that help them personalise what was created by AI.
The primary editing screen, in which users first see their generated graphics, and have access to a range of tools in the sidebar and toolbar that help them personalise what was created by AI.
We added an activation section to the right-hand sidebar of the create post modal. Graphics are generated from a prompt that takes into account brand information we store on-site and the caption a user has written or generated.
We added an activation section to the right-hand sidebar of the create post modal. Graphics are generated from a prompt that takes into account brand information we store on-site and the caption a user has written or generated.
We added an activation section to the right-hand sidebar of the create post modal. Graphics are generated from a prompt that takes into account brand information we store on-site and the caption a user has written or generated.
The template selector allows you to choose from a number of different templates which we designed to cover use cases we identified during the early research initiative.
The template selector allows you to choose from a number of different templates which we designed to cover use cases we identified during the early research initiative.
The template selector allows you to choose from a number of different templates which we designed to cover use cases we identified during the early research initiative.
Templates had to be designed in a way that worked with the prompts we’d engineered, to ensure GPT populated each text area correctly.
Templates had to be designed in a way that worked with the prompts we’d engineered, to ensure GPT populated each text area correctly.
Templates had to be designed in a way that worked with the prompts we’d engineered, to ensure GPT populated each text area correctly.
Component libraries are organised by molecules, sections and pages.
Component libraries are organised by molecules, sections and pages.
Component libraries are organised by molecules, sections and pages.
Each section of the graphic has its own number that delineates which colour it will receive when a user clicks on a palette, allowing users to quickly customise or try different things out.
Each section of the graphic has its own number that delineates which colour it will receive when a user clicks on a palette, allowing users to quickly customise or try different things out.
Each section of the graphic has its own number that delineates which colour it will receive when a user clicks on a palette, allowing users to quickly customise or try different things out.
You can create your own colour palettes and font libraries which are saved for you permanently, making editing faster in the future.
You can create your own colour palettes and font libraries which are saved for you permanently, making editing faster in the future.
You can create your own colour palettes and font libraries which are saved for you permanently, making editing faster in the future.
You can also edit specific parts of your text, such as colour, size and various markdown styles.
You can also edit specific parts of your text, such as colour, size and various markdown styles.
You can also edit specific parts of your text, such as colour, size and various markdown styles.
Regenerate the copy in your graphic with the click of a button.
Regenerate the copy in your graphic with the click of a button.
Regenerate the copy in your graphic with the click of a button.
Image editing was added more recently as a highly requested feature, only certain templates currently support it.
Image editing was added more recently as a highly requested feature, only certain templates currently support it.
Image editing was added more recently as a highly requested feature, only certain templates currently support it.
