Optimised ordering flow for creator marketplace

Work Main Image
Company
Peppercontent
Year
2022

Project Overview

Pepper Content operates as a creator marketplace and an AI-driven content marketing platform for enterprise businesses, facilitating the creation and lifecycle tracking of high-quality content.

Problems

Low Form Completion Rate: 

When customers placed content orders, they were required to complete a lengthy form outlining details such as content brief, goals, instructions, etc., providing creators with a comprehensive understanding of the requirements before initiating content creation. However, customers faced challenges completing the lengthy content requirement form, resulting in a mere 32% completion rate.

Consequently, the ops team had to step in to fill out the forms, contributing to increased operational overhead.

UX Issues and Inconsistency:

Basic form features and inconsistencies in the form structure led to confusion among users. Different types of requirements (text, creative, language) lacked proper segregation, and redundant questions further complicated the form.

Users were constantly distracted with elements on the sidenav (Older design)

Platform had one form structure for all kinds of content requirements (Older design)

Goal

The primary goal was to increase the form completion rate from 32% to over 60%. Specific objectives included listing form fields for various content categories, reducing inconsistency, aligning form fields with the new product theme, and enhancing UX with rich text fields and previews.

Team Involved

Product Manager (PM) — Marketplace Lead, One Product Designer, One Senior FE Developer & One Senior BE Developer. I also involved Operations team for research and design review.

Challenges

Customizing the default Ant template to match the brand:

The default Ant template served as the foundation for Pepper Content’s platform but required customization to align seamlessly with the brand identity. This involved modifying the template’s visual elements, layouts, and styling to create a cohesive and branded user interface.

Dealing with Various Form Components:

Addressing the diverse set of form components posed a challenge. This encompassed incorporating rich text fields, implementing a user-friendly interface for social media creative selection, and designing new card layouts. Harmonizing these components was crucial to ensuring a consistent and intuitive user experience across different sections of the form.Research was needed to Update an outdated icon pack to align with the new brand identity.

Research

  1. Form Flow Analysis: Researched existing form flows for different content categories (text, creative, language translation). Identified stages: New project details, Define Goal, Content Brief, Brand details, Add-ons, and Review order.
  2. User Feedback: Consulted the ops team to discover the challenges users faced. Most of the submissions we done by the operations team. They gave feedback on the issues our customers faced wrt form submission. Also with the interviews I identified the need for bulk upload functionality to streamline the process.
  3. Referenced leading platforms such as Canva, Fiverr, Trello, LinkedIn, and drew insights from a previous Razorpay onboarding project to understand best practices in form creation. Analyzing these platforms aimed to optimize our forms for improved conversion rates by incorporating successful strategies observed in the industry.

The exhaustive research related to finalising the form can be seen here: Project creation Jam

Referenced other platforms to understand best practices

Form flow analysis to understand different form fields that needs to be designed

Wireframes

Designed different views with a primary focus on keeping users engaged with the form. The form was presented in a step-by-step flow, improving user understanding and reducing psychological barriers to completion.

Initial Wireframes

Final Design

Implemented screens with a user-centric approach, providing differentiated steps. The redesigned interface aimed at maintaining user focus and guiding them through distinct steps. The new layout eliminated distractions by removing the side navigation, allowing users to concentrate solely on completing the form. Unrelated elements were removed to streamline the form completion process. Additionally, quick options were incorporated based on the customers previous orders, allowing users to make selections efficiently and quickly.

First Step of creating an order

Customer can place multiple content orders in one flow

Step 3 to define goal for all the ordered content

Step 4 to specify type of content expertise and deadline

Final step to review order and proceed to payment

Additionally, I implemented a preview feature for the selection of social media layout sizes, aiding users in making informed and accurate choices.

Popular section showed dimensions that was commonly ordered by our customer

Dedicated section for each social media platform

Custom option to specifically provide unique size

Popular ad banner dimensions

Layout view after selection

Our team integrated Loom for video briefs as some of our customers wanted to provide briefs using a video recording instead of typing the brief.

Option to provide content brief using video recording (Powered by Loom)

Subsequently, I curated a form kit comprising the newly designed form components. These components were seamlessly integrated into the existing ANT design template. To ensure uniform branding, I established design tokens, marking the initiation of our design system creation.

Created this form kit which were used by dev team to update our existing ANT template components

Impact

The project creation completion rate witnessed a remarkable 40% increase, underscoring the success of the revamped form. Notably, customers also found the form more convenient to fill out.

The efficiency of the ops team saw a significant improvement with the incorporation of bulk project upload functionality. The ops team streamlined their workflow by utilizing the bulk ordering form, particularly to manage substantial orders from enterprise customers.

Continuous Improvement:

Initiated the development of design components, laying the foundation for a design system. Evaluated and refined the video brief creation process based on user feedback, addressing the evolving needs of the platform.

This comprehensive redesign not only significantly improved the user experience but also streamlined the content creation process for Pepper Content, fostering increased efficiency and user engagement.