Product Designer | Jan 2022 – May 2023
Stages, a global company, selected Brazil as its first market to launch a pioneering service for the Creator Economy, offering creators the self-service no-code tool to build their own OTT platforms (Netflix-like) for direct content monetization.
Since September 2022, over 50,000 video creators have been testing Stages' service, enabling them to monetize content on their websites or apps.
Context
01
After launching our product, feedback from users and analysis of metrics revealed that many were struggling to understand and navigate our video showcase. This highlighted the need to improve the user experience, particularly for new users.
Onboarding needed to be implemented rapidly and with minimal development resources, aiming for a swift evaluation of whether the onboarding process effectively resolved the issue or if further investigation was required to identify other potential problems.
CR = Conversion Rate
My role
02
My primary goal was to design the onboarding process for the first scenario of using the showcase, ensuring the solution was compatible across Web Desktop/Mobile and Mobile Apps.
The expected outcomes were to enhance user understanding of the processes on the showcase, increase the number of users successfully completing the first scenario, and ultimately, the publication of the showcase.
Process
03
Research and Definition of reqs
At the start of the task, we needed to decide on the onboarding format: whether to use videos, pop-up tooltips, or other methods. It was crucial to quickly develop an effective solution to improve metrics. After conducting research and discussions with the development team, we decided to implement pop-up tooltips on the showcase control elements. This option was technically easy and quick to execute, meeting the task's reqs.
Prototyping and reviews
I prototyped the first scenario, and each approach went through a series of checks with the design team and with the developers. This ensured that everything was agreed upon at the prototype creation stage. First scenario included:
User completes registration and Selects a layout
•
After registration, users choose their showcase's initial layout, opting for either vertical or portrait orientation.
Add the first video
•
The user can add either a single video or few videos to the showcase at once.
Add meta-information for video
•
After uploading a video, users can add a title, description, cover image, and an action-button.
Publication of Showcase
•
After adding a video to the showcase, users can publish and share it, using their own domain for promotion.
Go Live
•
During this process, the Live-Room feature was highlighted to emphasize its functionality and availability to users.
Monetization
•
Post-publishing the showcase, highlighting the video monetization settings is crucial for users to maximize their content revenue.
Design
Onboarding cards were designed to appear at specific time intervals throughout the entire first usage scenario. You can see tge video example, it shows the process of adding a video.
The onboarding card component was meticulously developed and became an integral part of our Design System. A unique illustration style was conceived for it.
Next..
After handing over the design to the development team, I collaborated with them to ensure the accuracy of the implementation.
After the release, I monitored the results of user interaction with the new functionality.
Results
04
After launching the onboarding feature, we observed a significant improvement in key metrics. In a short period, user activation increased by 30%, and the percentage of users successfully completing the first usage scenario rose by 25%.
This onboarding function demonstrated excellent results and was soon integrated into other product streams, where it also showed considerable improvements in user engagement and retention metrics.
Skils: Product design · User research · Prototyping · Visual design · Web interface · Mobile app · Design system · UIkit
Context
01
After launching our product, we began receiving user feedback highlighting the lack of flexibility in our showcase. Users expressed a desire for more diverse layouts, including space for text-info, images, and the ability to add social links.
An inspiring example was a user who, finding no suitable solution, placed their Instagram handle in the title of their video layout. This spurred us to accelerate the development of more versatile and adaptable solutions to meet such needs.
My role
02
My primary task was to devise a flexible and rapidly deployable solution within the existing layout concept to meet current user needs. This solution needed to be suitable for Web Desktop/Mobile and Mobile Apps.
Expected outcome: users would gain enhanced functionality for creating their unique showcases. This, in turn, was expected to increase customer engagement, extend the time they spend on the showcase, expedite their earnings on the product, and ultimately convert them into regular paying clients.
Process
03
Research and analysis
Understanding user needs
•
I analyzed the results of user interviews conducted by the Discovery Team to understand exactly what users need and what they're missing on the showcase.
Searching for references and trends
•
I began looking for references, focusing on the design of headers and footers of various platforms and websites, exploring different styles and elements they include: various covers, headlines, descriptions, links, buttons, user avatars, and other additional features.
Competitor analysis
•
Concurrently, I conducted an analysis of competitive platforms to determine how they address similar tasks and what trends exist in the market in interface design.
Definition of reqs
The key functional requirements were defined as follows:
•
Creators should have the ability to personalize their showcase by adding a header and/or footer.
•
They should also be able to include a donation button on their showcase.
•
It is expected that creators who add a header to their showcase will attract 20–30% more watchers.
Prototyping and reviews
I prototyped each scenario, and each approach underwent a series of reviews with the design team and within the product team alongside developers. This ensured that everything was agreed upon at the prototyping step.
Usability testing
During the design process, the task arose to select the most intuitive social media buttons. To achieve this, a "one-click" usability test was conducted using the UsabilityHub (now Lyssna). Three button designs were prepared, and a hypothesis with a task was formulated.
As a result of the test, a decision was made: text buttons will be used for desktop versions, while icon buttons will be adopted for mobile devices, considering the limited space.
Defining social-media Icons
Based on the most popular social networks in Brazil, a set of icons was prepared for our design system. For social network links that cannot be automatically identified, a standard link icon will be used.
Design
After finalizing all details, I completed the final design based on our design system. A new component was integrated into this system, which I thoroughly described and passed on to the development team for further implementation.
To enhance the user experience for creators, we prepared templates in Canva and Figma to facilitate their content creation process.
Additionally, we identified themes for default covers to suit the main users of our service. For this purpose, we selected images with a free license from Unsplash that matched these themes.
Next..
After handing over the design to the development team, I collaborated with them to ensure the accuracy of the implementation.
After the release, I monitored the results of user interaction with the new functionality.
Results
04
Product results
The implementation of the new functionality proved to be successful. Users are actively utilizing the new placeholders for both headers and footers, leading to increased engagement and time spent on the showcase, faster earnings, and attracting more paying clients.
My personal achievements
During this project, I improved my usability testing skills, enhanced my product design abilities, and showed a strong attention to detail, which is essential for high-quality user interface design.
Skils: Product design · Design thinking · Prototyping · Visual design · Web interface · Mobile app · Design system · UIkit
Context
01
Following an analysis of user engagement with the Mobile Apps, a task arose to develop a colorful and informative intro for Mobile App users. This intro will serve not only as an attractive visual introduction but also as a practical tool to showcase the product's benefits.
It may include educational elements, presenting the key features of the app and explaining its unique aspects, thus enhancing user understanding and engagement right from the start of their interaction with the product.
My role
02
My main task was to design the intro for the Mobile Apps, including determining its format – whether it be animation, illustrations, or other visual elements. Additionally, I ensured that all materials were prepared in accordance with the technical requirements of the developers.
Expected outcome: that a bright and attractive intro will enhance user interest and engagement in the app. Incorporating educational elements into the intro will help users better understand the functionality and benefits of the product.
Process
03
Research and analysis
I researched various examples of intros in mobile apps, allowing me to better understand their diversity and functionality, as well as assess their impact on user experience and engagement.I also identified themes and the number of steps for the intro:
Create a video showcase
•
The service offers the ability to create a personal video showcase.
Add the videos
•
The user can add either a single video or few videos to the showcase at once.
Monetization
•
Users have the opportunity to monetize their video content, turning it into a steady source of income.
Share the video showcase link
•
Creators can share their showcases directly with their audience, building a community around their video content, free from the complexities of major platforms' algorithms.
Prototyping and reviews
I developed a prototype for one step of the intro, creating a detailed storyboard. For this, I used corporate animation guidelines developed for marketing purposes and utilized the basic animation functions in Figma.
The prototype was coordinated with the design team and product managers. I also discussed the technical limits on the size of each animation with the development team.
Design
Then, I moved on to meticulously developing each animation, animating every step in Principle. Prior to this, I created a detailed storyboard for each animation.
Next..
I prepared all the necessary materials: the animations in mp4 format, a detailed description of the intro's behavior on various mobile phone sizes, and then handed them over to the development team.After handing over the design to the development team, I collaborated with them to ensure the accuracy of the implementation.
Results
04
Product results
Currently, it's difficult to assess the results of the new feature due to the limited number of users in the app. However, the visual materials obtained can become a valuable resource for designers in developing future marketing strategies.
My personal achievements
During this creative task, I significantly improved my animation skills. Exploring various animation tools available in the market enriched my knowledge, which will be useful for future product projects.
Skils: Product design · Design thinking · Prototyping · Visual design · Animation · Mobile app
Recommendations
05
Contact me
At Stages, I developed several product streams: showcase, domain addition, release of creators' mobile apps, a notification center, and payment functionalities. Regrettably, I am unable to publicly disclose the full extent of my work due to an NDA.
However, I am open to private conversations and discussions where I can share the general experience and skills acquired during this work.
Contact me