AdDirector App Design
Project Overview
Time
2020-2021
Project Brief
Video ads were widely used in business promotion and social branding nowadays. AdDirector was born to help users create stunning social media posts and ads videos without effort. However, due to the neglect of user needs, the result of our first launch was not as good as expected, we found the app usage and subscription rate were low. We made the effort to figure out the main problems, and solve the real problems.
Role
UX/UI Design,
Design lead
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:
-
Improve the download and subscription rate
The stakeholder regarded this project as a very important annual goal,
however, the user usage and subscription rate are not as good as expected after our first launch, we made the effort to figure out the main problems based on the research and the user’s feedback, and then had the iteration for the new version.
-
Support the multiple templates
Different forms of templates will affect the willingness of users to produce, so we needed to know what kind of templates were the most popular for the user.
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
I referenced the design thinking principles of empathize, define, ideate, prototype, and test. I did the user interview to get feedbacks from current users, to figure out use cases, user pain points, and user's needs. I worked closely with the product maneger and the engineers to ensure our goal was clear and accessible. To test the overall concept of the app, understand the user pain point and be aligned to current competitors.
The strategy consisted of the following five steps: understand (empathize), define, ideate, user test (prototype and test), and finalize.
User Research
In the early phase of this project, we made the questionnaires and conducted a survey with 158 existing users, moreover, we collected user feedback from our Customer Service team, to understand the context and the user pain points for editing the video. And we sort out the key findings:
-
Users want more customization options when editing the video template
The video editing experience is not customized enough. Users could not get to personalize much through the template edit functions, including customized colors and customized fonts, and some users also asked for adding branding elements when editing the video template.
-
Template searching flow is not efficient
Users could not get their ideal template after browsing and searching the templates.
-
The video exporting and sharing flow is dissatisfied
After creating a video, most users like to share the video on social media, but the current sharing flow is sloppy.
Map user journey
Journey mapping
After the user research, I interviewed six users, including four existing users and two new users, to identify the core problems and understand how the video editors perceive our product. Then I made up the user journey map based on the user research, to define the problem and understand the opportunities in more detail.
Challenges and breakthrough
According to the user research and journey map results, we sort out the three main pain points in the redesign build :
Wireframes and prototypes
Wireframes
After the user research and the ideations, I designed a lot of wireframes to let the team understand the possibility of layout, it also gave me a chance to think about information hierarchy, which 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, we made the designs more concise and reached the user’s expectations.
(The goal is to help users find the template and execute the search quickly.)
Before
After
-
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.
-
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.
Finalize
Onboarding and search a template
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.
(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.
Export and share
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.
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. Failure always provides valuable insights into customer needs and preferences:
When a design falls short at first, take the opportunity to delve deeper into user research and talk with PM about how the business measures success. Ask the product team for funding to seek feedback from customers (and users too!) and conduct surveys or interviews so you understand user pain points and expectations. Then we can count on these insights to drive the design decisions and create solutions that truly resonate with your target audience.
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.
​
​
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%).
Follow-up
Because of the business strategy, AdDirector is renamed as Promeo. You can download it via Google Play or App Store.
​
​
​