GIP: B2B2C Video and Image Batch Processor
The website was crafted to provide a seamless experience for professional users, with an emphasis on clarity, efficiency, and accessibility. My role involved collaborating closely with stakeholders to understand the needs of the target audience, translating these insights into intuitive interfaces that drive engagement and conversions.
Discovery & Requirements Gathering
-
Stakeholder Interviews: Worked with product owners, business leads, and customer success teams to understand goals from both B2B and B2C sides.
-
User Personas:
-
B2B: Vendors managing catalogs, orders, analytics
-
B2C: Shoppers browsing products, managing orders, using search/filters
-
-
Platform Goals:
-
Seamless handoff between vendor and consumer touchpoints
-
Centralized admin control with user-friendly frontend UX
-
Empathize and Define Project Requirements from User Surveys
Quote:
“I need a reliable and straightforward solution that lets my team focus on being creative, not on troubleshooting or wasting time on manual tasks.”
Goals
-
To optimize the process of batch processing video and image files, reducing the time spent on repetitive editing tasks.
-
To manage large volumes of media assets efficiently with sufficient storage and organizational capabilities.
-
To maintain high-quality standards in content production with minimal errors or delays.
-
To integrate media processing workflows seamlessly with existing tools and platforms via APIs.
-
To ensure whole team has access to reliable customer support and troubleshooting when needed.
Frustrations
-
Current tools are either too basic or too complex, with steep learning curves and unnecessary features.
-
Free tools often come with limited storage and lack advanced functionality, which disrupts workflow efficiency.
-
Difficulty in managing user roles and permissions across her team, leading to inconsistencies in project handling.
Needs
-
A reliable, easy-to-use platform that allows batch processing of videos and images with consistent quality.
-
More storage space to handle the increasing volume of projects, especially during peak seasons.
-
Advanced user management features to easily assign roles and permissions within the team.
-
A platform with robust APIs to connect with other tools and streamline their overall digital workflow.
-
Access to prompt and helpful customer support for immediate resolution of issues.
Technology Preferences
-
Comfortable with cloud-based platforms that offer real-time collaboration and access from any device.
-
Prefers tools that integrate well with Vimeo, Adobe Creative Suite, Google Drive, and other commonly used marketing and content tools.
-
Values straightforward, intuitive interfaces with minimal training required for team.
Information Architecture
-
Sitemap: Defined core modules and page flows for both user types:
-
B2B: Dashboard, Product Management, Tasks, Settings
-
B2C: Home, Category Pages, Product Detail, Account
-
-
Content Modeling: Identified shared data structures (e.g., product schema) for consistent UI across interfaces
Wireframing & UX Flows
-
User Flows:
-
B2B Login → Plans → Account pages → Settings
-
B2C Landing → Search/Filter → Task Details → Dashboard → Accounts
-
-
Wireframes:
-
Low-fidelity sketches for key screens in both B2B and B2C areas
-
Focused on hierarchy, navigation, and data visibility
-
UI Design System
-
Component Library:
-
Created consistent UI components (buttons, inputs, cards, modals) using Figma
-
Included reusable table structures for B2B and card/grid displays for B2C
-
-
Design Tokens: Set up typography scales, spacing systems, and brand-aligned color themes
-
State Variants: Designed components for different user states (empty, loading, success, error)
Create Storyboards and Prototypes for Tests
Developer Handoff & Documentation
-
Figma to Dev: Annotated all screens with interaction notes, spacing, and component links
-
Design Tokens Exported: Provided token-ready files (e.g. JSON or CSS variables) for direct implementation
-
Component Specs: Delivered specs for reusable design components mapped to frontend framework (e.g. React, Vue)
Testing & Iteration
-
Internal QA: Worked with QA team to test layout responsiveness, input UX, and edge-case handling
-
User Testing:
-
B2B: Tested upload flows and dashboard clarity
-
B2C: Tested filtering, search, and mobile checkout ease
-
-
Key Iterations:
-
Refined table layouts for better mobile B2B usability
-
Improved image loading and lazy load behavior for B2C browsing
-
UI and UX design on Figma
Established a design system for GIPS, creating a comprehensive UI library with reusable components, scalable patterns, and visual guidelines, streamlining the development process and ensuring consistent user experience across products.
Designed responsive, mobile-first UIs for both web and mobile platforms, enhancing user experience across devices, and conducted usability tests, iterating designs based on feedback.
Collaborated with stakeholders and the development team to align design solutions with business objectives, creating GIPS interfaces and delivering 13 demo testing kits under tight deadlines, receiving positive feedback from primary users.
Results
-
Platform launched with clear separation of concerns between B2B and B2C sides, yet shared a unified design language.
-
Received positive feedback from both vendors and consumers on usability and visual clarity.
-
Design system enabled rapid onboarding of new vendors and scalable frontend development.
