AdDirector App Design
Project Overview
Time
2020-2021
Project Brief
Video ads were widely used in business promotion and social branding in 2020. However, people need a long time to learn and create videos for promotion. AdDirector was born to help these people to create stunning and professional social media posts and ads videos without effort.
Role
UX/UI Design, including:
User Research,
Information Collection,
Sketches & UI Flow,
User Interface,
Visual Design,
Prototype,
Usability Testing
Simple
Easily browse and
search the templates
Fast
Produce top-quality
video within minutes
Intuitive
No need to learn
how to use
Problems & Goals
-
Help users create video ads effectively
Our goal for this app is to reduce the time users creating video ads andsocial media posts, even if users never made a video before. We keepthis goal in mind to create the product by following these principles:
-
Attract new users to engage
The stakeholder regarded this project as an important annual goal, so, attracting and engaging users is the lifeblood of the product. It's how we validate our idea and build momentum. By attracting users, you can also get real-world data on whether our product solves a genuine problem and offers a valuable experience.
-
Increase adoption rate
More users lead to a more valuable app, which attracts more users. This virtuous cycle is crucial for the long-term success.
Challenges
-
Tight deadline and limited resource.
-
0 to 1 define features priority and strategy.
-
Uncertainty of technology feasibility.
-
To figure out which kinds of video template are more useful for users.
Final Outcome
-46%
Creating video time
+22%
+13%
Active users
Product usage
Through this project, we set up three KPIs to measure the effectiveness of our project, and we got good grades:
Time on task: Through testing, most user spent less 46% of time in creating a video.
Active users: Monthly active users has increased 22% after the new launch.
Product Usage: See great uplift of product usage (+13%).
Design Process
The five-step design process (understand, define, ideate, test, finalize) encountered challenges like conflicting ideas and communication issues. Despite these hurdles, I conducted user research and close collaboration with the product manager and engineers ensured clear goals and a user-tested concept aligned with competitors.
User Research
In the early phase of this project, I made the questionnaires and conducted a survey with 158 existing users, moreover, I interviewed nine users to identify the core problems and understand how the video editors perceive our product. , to understand the context and the user pain points for editing the video. And sort out the key findings:
Insight: It’s difficult to make a professional video.
-
Many people said they need to search and collect a lot of video references before making their own.
-
Many people had a hard time when creating a well-designed video (especially in video layout and transition design).
Competitive Audit
Based on competitor product analysis (information architecture, UI, features, technical details), the team discussed trade-offs and brainstormed AdDirector's design. And then summarized our understanding and imagination of AdDirector.
Data Analyze
According to the analysis, we should make Cutout template as the main template category and provide much more cutout template quantity & variety for user instead of other non-cutout template.
-
Cutout Templates contributed most of the produce number.
-
Cutout Templates produce rate is 10x~4x of non-cutout template.
Persona
Personas are created with information gathered from user and stakeholder interviews. I illustrated two user group as our target users- Small business owners and youtubers or KOLs who need to make a lot of short video ads for their product or brand promotion, and their goals and characteristics represent the needs of a larger group of users. As the result, I could identify the most important functionality an audience needs. It also made other team members better understand our product.
Task Analysis
To create product and service that work how users expect and that help users make their video ad easily and efficiently, I carried out the task analysis.
Ideation
Problem statement
How may we help users reduce the time of user onboarding and video sharing process, and also increase usage of product service?
Hypothesis
According to the problem, here are three hypotheses to solve the problem and achieve the goal :
Information Architecture
According to the user research and journey map results, I clarified and built up the product's information architecture and UI flow for the team to align.
Flow Daigram
Wireframes
I designed a lot of wireframes to let the team understand the possibility of layout, it also enhanced me to present the content and function in a more structured way. Then, I designed the prototypes to do the usability testing. After many discussions and iterations with the team, I made the designs more concise and reached the user’s expectations.
Design Finalize
Onboarding and search a template
(The goal is to help users find the template and execute the search quickly.)
Before
-
The waterfall design style lets users browse and preview each template. And the design provides a customized category for users to get their target template more easily. However, users still spend time browsing and searching a lot of templates when choosing.)
-
The search page design only provides the recent search and suggested keywords for users to search efficiently.
After
-
In the new design provides users with different ways to find and search templates.
-
Provide intuitive entries that let users know which multimedia platform is suitable for sharing from the different ratios.
-
In search function, the new design provides the visualize template suggestions as a shortcut when keying in. Also, Autocomplete key-in function provides users with intimate searching experiences.
-
Multiple filters allow the users to find the template more precise.
-
Provide other suggestions or template entries when there are no search results.
We didn't support the filter function at first, later on, we added more and more options as the team developed a more robust data structure, that helps users easily select the template that fits their preferences and conditions, and pick the right template quickly.
Add the brand kit
(The goal is to help users find the template and execute the search quickly.)
Before
-
In the original design, I only designed the brand kit setting entry in the Settings page, so users can not easily find the function.
-
The users can apply the brand kit only after selecting a template.
-
The UI flow was not simple enough and there should be more flexible choices.
After
-
In this design, I enhanced the customized elements, including adding the brand logos, adding the brand color sets, and adding the font detail setting.
-
I also simplified the flow, removed the "Select aspect ratio" page, and added the brand kit setting entry in the main edit page, so users can apply and set the brand kit easier.
Export and share
(The goal is to simplify the video exporting flow and let users have the choice of whether to change the export format or share to the social media platform.)
Before
-
The sharing options are limited.
-
Users can not change the formate when exporting and sharing.
After
-
In the new design, users have more options to save or share the video, and users can also share the video with a recent contact person.
-
Users can change the format by export setting.
Styleguide
Consistent & reusable design components
I believe a good product not only provides good functionality but also a good experience. To ensure our users have a consistent experience throughout the app, I defined a basic design system to reinforce consistency.
Building the design system helped me think through every detail I created: Is it necessary? How should we use it? Is the logic makes sense in the flow? Is the information hierarchy clear enough? This design system also bridged the gap between the engineers and me during the project.
Final Outcome
-46%
Creating video time
+22%
+13%
Active users
Product usage
Through this project, we set up three KPIs to measure the effectiveness of our project, and we got good grades:
Time on task: Through testing, most user spent less 46% of time in creating a video.
Active users: Monthly active users has increased 22% after the new launch.
Product Usage: See great uplift of product usage (+13%).
Learning & Takeaway
Through this project, I understood that finding a balance among time, resources, and constraints is crucial for the team to speed up and focus on the right thing to do. This project not only broadened my thinking but also let me make stronger connections with the team. By building this product from the idea to execution, I learned three most important things during the process:
1. It’s critical to convince others with effective solutions and support them with data when necessary:
The successful communication of ideas necessitates the presentation of well-conceived solutions and the judicious use of data to support claims. To gain buy-in, it's crucial to present well-developed solutions backed by data when needed.
Effective persuasion relies on a combination of compelling solutions and data to bolster your arguments.
2. User experience should never be compromised:
While we aim to expedite product delivery, rushing should not come at the expense of user satisfaction. Users can patiently await new features in the next release, but a poor experience is intolerable.
3. Promote effective collaboration:
Seek feedback and input from cross-functional teams, including engineers, marketers, and product managers. Embrace diverse perspectives and actively listen to feedback. Collaboration not only improves the quality of your designs but also helps you learn from others’ experiences and expertise.
Room for Improvement
After releasing the new version build, there is still room for design improvement based on the data and user feedback:
1. Keep providing more diverse and trendy templates, especially in cutout templates and multiple-scene templates.
According to our tracking data, the cutout templates' production rate was 4x~10x of non-cutout templates, and the templates with multiple scenes are more popular than one-scene templates, so we decided to provide more cutout templates and multiple-scene templates in the next build.
2. Provide more customizable functions.
There is still room to support other customize functions to lift restrictions of using templates.
Follow-up
Because of the business strategy, AdDirector is renamed as Promeo. You can download it via Google Play or App Store.