Short-form video upload & playback
To enhance the buying experience, I designed user journeys enabling sellers to upload, edit, crop, and publish 30-second videos, providing buyers with a clear demonstration of the item directly on the listing page.
Choose Your Viewing Style
Explore this case study at your own pace! Swipe through the slides below for a quick overview, or scroll down for the full case study in detail.
Introduction
Revolutionizing Seller-Buyer Interactions: Introducing Seller Message Outreach
Demonstration of the item is a very common initial conversation in second-hand marketplaces to verify the credibility, quality and performance of the item or service being sold. Hence the name, Demo Videos which gives sellers the power to upload 30-second videos of their items. This short-form video feature, similar to what you'd find on popular social media apps will let buyers see exactly what they're getting. c
My role was to tweak the video editing package with the internal design language and UI components while keeping in mind the user needs, business goals & technical capabilities to make sure the MVP & first release was just right.
Goals & Challenges
Business Goals
With FB Marketplace rapidly advancing, Kijiji needed to innovate with new & engaging features to maintain its position as Canada's top marketplace.
In response to the increasing popularity of short-form videos, Kijiji recognized the opportunity to integrate video content to enhance user engagement get the competitive edge.
Introducing video as new content type on app will unlock video advertising opportunities and create a new source of revenue.
User Goals
Sellers frequently faced delays in transactions due to buyers requesting additional images or videos for verification. This often led to extended communication and slower sales.
Buyers needed a more transparent and detailed view of items before making a decision. The lack of immediate, clear visual information was a hurdle in building trust and confidence in online transactions.
Introducing video as new content type on app will unlock video advertising opportunities and create a new source of revenue.
Technical Challenges
Beyond the basics of video uploading and editing, the challenge extended to integrating a video player within the item's image gallery. This required significant customization of an external Flutter package, ensuring that the video playback not only functioned seamlessly but also aligned with the platform's UX/UI standards.
The key technical hurdle was not just building the feature’s functional UI but also ensuring that the video player functioned seamlessly across both Android and iOS devices. This demanded extensive customization of our backend capabilities.
Introducing video listings to Kijiji's 3M+ daily users significantly increased the complexity of content moderation. The primary concern was ensuring effective moderation to prevent scams, unethical practices and maintain adherence to Kijiji's policies on prohibited items, especially in the new, more dynamic format of video content.
Design Strategy
Develop a forward-thinking MVP, anticipating user behaviours and potential feature expansions. The objective is to create a versatile solution that is effective in its initial form and scalable for future enhancements.
Dive into various user scenarios, with a special focus on video interaction pain points and the onboarding experience. The goal is to create design solutions that not only streamline functionality but also make the introduction and adoption of this new feature as smooth and intuitive as possible for users.
Conduct extensive user testing to validate the feature and assess user satisfaction. Utilize the feedback gathered to refine the feature, ensuring it aligns with user expectations and needs.
Design an effective content moderation system to address the unique challenges of video content. This system should efficiently safeguard against unethical usage, maintaining a safe and trustworthy user environment.
Broader Business Impact:
Through innovation and user-centric features, reinforce Kijiji's position as a leading marketplace that adapts to user needs and market trends.
By introducing new monetization avenues and increasing platform engagement, contribute to Kijiji's overall revenue growth.
Improve the selling and buying experience on Kijiji, leading to higher user satisfaction, retention, and advocacy.
Discovery Phase
Data Analysis
Approach: Utilized Google Analytics to study user interactions with the image gallery, focusing on open rates, slider behavior, replies, and CTR.
Key Outcomes: Identified patterns in image upload and gallery usage, providing a data-driven foundation for integrating video functionality. This analysis informed decisions on how to effectively implement video features to enhance user engagement.
Competitive Audit and Benchmarking
Approach: Conducted a competitive audit and benchmarking study, focusing on video editing and playing functionalities in short-form video apps.
Key Outcomes: This research helped establish user expectations and industry standards, guiding the design of a user-friendly and competitive video feature.
User Testing Insights
Approach: Reviewed previous user testing results on the View Item Page (VIP) to understand how users interact with listings.
Key Outcomes: Gained insights into user preferences and pain points on the VIP, leading to informed decisions about the placement and integration of video features to improve the listing experience.
Technical Consultation
Approach: Collaborated with tech leads using user flowchart diagrams to validate the primary user journey for uploading and viewing videos.
Key Outcomes: Ensured that the planned video upload and viewing functionalities were technically feasible and user-friendly. The consultations resulted in a validated, efficient workflow for the video feature.
Technical Considerations
Technical consultation to verify feasibility with tech lead to the below considerations in the design process and strategy. Write it again !!!!
Creating new components for the video timeline, dragging and cropping handles and other UI components to align with your design language.
Ensuring UI elements are intuitive and enhance the user experience.
Ensuring the video upload and editing process is optimized for performance, especially for larger files.
Developing robust error handling for scenarios like exceeding upload limits or unsupported video formats.
Implementing clear user feedback mechanisms for various actions and errors.
Ensuring secure handling of video data, especially in draft and storage scenarios.
Addressing privacy concerns and data protection standards.
Testing and ensuring consistent functionality across various devices and operating systems.
Integrating the video feature with existing content moderation systems to maintain platform standards.
Preparing the system for scalability to handle increasing loads as more users engage with the video feature.
Addressing potential network issues and bandwidth constraints that users might encounter while uploading videos.
UX Scenarios
Advanced Video Editing Scenarios
Enabling trimming and cropping functionalities, with real-time previews to help users crop the desired video segment.
Integrating audio control features, such as muting, volume adjustment, or adding a voiceover or background music.
Managing Video Orientation and Aspect Ratios
Automatically adjusting the interface for different video orientations to maintain a consistent viewing and editing experience.
Offering aspect ratio presets while allowing manual adjustments for users seeking more control.
Handling Long Video Uploads and Size Limits
Implementing a clear and informative prompt when users attempt to upload videos that exceed the duration or size limit.
Providing options to trim or compress videos within the app to meet the requirements.
Edge Cases in User Interaction
Anticipating and designing for less common but possible scenarios, such as users attempting to edit videos while low on device storage or battery.
Providing guidance or warnings in these situations to prevent user frustration and data loss.
Comprehensive Video Editing Feedback
Implementing a snack bar for immediate user feedback upon actions like rotating the video or muting audio. This feedback is critical for confirming that changes have been saved and understood by the user.
Designing the snack bar to be intuitive and non-intrusive, ensuring it enhances the editing experience without overwhelming the user.
Error Handling in Video Processing
Developing clear error messages for scenarios like unsupported video formats, upload failures due to network issues, or server-side processing errors.
Offering suggestions or actions users can take when encountering these errors, such as trying a different format or checking their network connection.
Draft and Session Continuity
Ensuring that users can save video edits as drafts and return to them in a subsequent session without losing progress.
Addressing potential data loss scenarios, such as app crashes or accidental exits, by auto-saving drafts.
Onboarding and Instructional Guidance
Designing an engaging onboarding experience for first-time users of the video feature, with step-by-step guides or tutorials.
Including helpful tips and best practices for creating effective video listings.
Design Process
1. Crafting User Flows
In the initial sprint week, I focused on creating detailed user flowcharts, essential for visualizing each user interaction and aligning with the technical team’s capabilities.
Flowchart Development: Developed comprehensive flowcharts to visualize the user journey, ensuring technical feasibility with backend and frontend teams.
Technical Collaboration: Worked closely with PMs, tech leads, and developers to dissect the external Flutter package’s capabilities, aligning them with our UX goals.
2. Seamless High-Fidelity Design:
I dedicated a full sprint to creating high-fidelity designs, utilizing Kijiji’s UI kit and design system for visual and functional coherence.
Design System Utilization: Leveraged existing UI components and styles to maintain consistency and accelerate the design process.
Visual and Functional Alignment: Ensured designs were not only aesthetically pleasing but also met user needs and technical constraints.
3. Validation and Iteration:
Post-design, I engaged in iterative feedback sessions with tech leads, the product team, and the UX team to refine and validate the UI designs.
Feedback Integration: Incorporated insights from tech leads to ensure technical accuracy and feasibility of the designs.
Iterative Refinements: Regularly updated designs based on feedback from weekly meetups, focusing on enhancing user experience and usability.
4. Empathetic Usability Testing:
In collaboration with Sr. Researchers I conducted comprehensive usability testing with a focus on usability and accessibility.
User-Centric Testing: Utilized platforms like UserTesting.com and Fable for thorough usability testing, especially for accessibility.
Feedback-Driven Iterations: Iterated designs based on user feedback, ensuring the final product resonated with user needs and expectations.
5. Final Handoff – A Collaborative Effort:
Prepared the final design handoff, a detailed package comprising high-fidelity designs, specifications, developer notes, and translated accessibility labels.
Comprehensive Documentation: Ensured all design aspects were thoroughly documented, providing a clear guide for developers.
Cross-Functional Collaboration: Worked closely with the marketing team for translations, emphasizing global usability and comprehension.
Dev & QA Support
Collaborative Development Process
As the feature development progressed, I maintained an active line of communication with the development team, primarily through our Slack channel.
Responsive Feedback: Promptly reviewed builds shared by developers, providing feedback or approval as needed.
Resource Provision: Ensured developers had access to necessary assets and resolved any queries related to styles or icons not covered in the foundational style guide.
Quality Assurance and Testing
Engaged in rigorous testing phases, including User Acceptance Testing (UAT) and multiple rounds of bug bashes, to ensure the feature met our high standards.
UAT Participation: Actively participated in User Acceptance Testing to validate the feature’s functionality and alignment with user needs.
Bug Bash Involvement: Contributed to identifying and resolving errors during bug bashes, playing a key role in refining the feature for a seamless user experience.
Launch & Impact
The rollout of the Demo Videos feature on Kijiji was executed with precision, leveraging a phased approach that allowed for incremental learning and optimization. Initially focused on the Real Estate category, this strategic decision enabled the team to gather valuable insights, refine the user experience, and ensure technical stability before expanding to additional categories.
Key Highlights:
MVP Launch: Started with a Minimum Viable Product in the Real Estate category to test, learn, and iterate based on real user feedback.
Feedback Loop: Continuous user feedback collection helped refine and improve the feature, ensuring it met the needs and expectations of Kijiji’s diverse user base.
Adoption and Engagement: Early adoption rates exceeded expectations, with sellers quickly recognizing the value of video in enhancing their listings. This led to a noticeable increase in user engagement, as listings with videos received significantly more views and interactions compared to those without.
Impactful Results:
Enhanced User Engagement: Listings with Demo Videos saw a marked increase in visibility and interaction, proving the hypothesis that dynamic content significantly enhances user engagement.
Improved Transaction Efficiency: The feature facilitated a more informed decision-making process for buyers, leading to quicker transaction times and increased satisfaction on both sides of the marketplace.
Foundation for Future Growth: The success of the Demo Videos launch has laid a robust foundation for future enhancements, including potential monetization strategies and broader feature rollouts across additional categories.
Impact & Lessons
The foundation of this feature was built on user insights, shaping it from concept to implementation. Continuous feedback validated our product decisions and ensured relevance.
Navigating unexpected challenges required rapid pivots. This adaptability allowed us to seize opportunities and refine our approach in real-time.
The feature's success was rooted in the collaborative effort of all teams. Cross-functional alignment made every stage smoother and more effective.
Clear, accessible information about the feature’s benefits significantly impacted adoption rates and user satisfaction.
From day one, we planned for future growth, creating a robust framework capable of scaling across categories and meeting evolving needs.
Key Lessons:
The importance of flexible, phased rollouts became evident, allowing real-time adjustments based on immediate feedback. Every iteration brought us closer to a refined, user-centered experience.
Data-driven insights and well-defined KPIs played a crucial role, guiding our strategy and improvements. Prioritizing scalability ensured smooth transitions as the feature expanded, reinforcing its long-term value.