Create a seamless and engaging common wallet experience Contact me

Video Editing Service Website

Project Overview

A modern, conversion-focused website designed for a professional video editing service. The goal was to create a strong digital presence that clearly communicates the service offering, builds trust with potential clients, showcases creative capabilities, and guides visitors toward starting a project.

The project covers the complete UI/UX design process, from user experience research and information architecture to visual design, design system, responsive layouts, and interactive prototyping.

The Challenge

Video editing is a highly visual service, but potential clients also need to quickly understand what is offered, whether the service fits their needs, what they can expect, and how to get started.

The challenge was to create an experience that communicates creative quality while keeping the service information simple, structured, and conversion-focused.

The website needed to:

  • Communicate the value of the editing service quickly
  • Clearly present different service offerings
  • Build credibility and trust
  • Showcase creative work effectively
  • Make pricing and service information easy to understand
  • Create clear paths toward inquiry or project initiation
  • Maintain a strong visual identity throughout the experience

UX Research

I began the project by understanding the target audience, business goals, user expectations, and decision-making process of potential video editing clients.

The research focused on questions such as:

  • What information does a client need before choosing an editor?
  • What builds trust in a creative service?
  • How do users compare different editing services?
  • What information should be visible before a user takes action?
  • Where can friction occur during the conversion journey?

These insights helped shape the content hierarchy, navigation, page structure, and conversion points.

Information Architecture

A structured information architecture was developed to organize the website around the user’s journey.

The content was prioritized around key areas such as:

Discover → Explore Services → View Work → Understand Process → Evaluate → Take Action

This structure makes it easier for visitors to find relevant information without navigating through unnecessary complexity.

User Flow

User flows were mapped to understand how different visitors could move through the website based on their goals.

The primary journey focuses on:

Landing Page → Service Discovery → Portfolio / Work → Service Details → Pricing / Process → CTA → Project Inquiry

The flow was designed to reduce decision-making friction and consistently guide users toward the next relevant action.

Wireframing

Low-fidelity wireframes were created to establish the overall page structure before moving into visual design.

The wireframing stage focused on:

  • Content hierarchy
  • Section prioritization
  • Navigation structure
  • CTA placement
  • Service presentation
  • Portfolio positioning
  • Conversion flow
  • Responsive layout planning

This helped validate the UX structure before introducing visual styling.

Visual Design

The visual direction was designed around the creative nature of video editing while maintaining a professional and trustworthy digital presence.

The interface uses strong typography, bold visual hierarchy, carefully structured content sections, engaging media presentation, and purposeful CTAs to create an experience that feels both creative and business-focused.

The design balances visual impact with usability so that creative elements enhance the experience rather than distract from the core message.

Design System

A scalable design system was developed to maintain consistency across the website and make future design expansion easier.

The system includes:

  • Color palette
  • Typography hierarchy
  • Buttons & CTA components
  • Navigation components
  • Service cards
  • Portfolio / project cards
  • Form elements
  • Icons & UI elements
  • Spacing system
  • Grid & layout rules
  • Responsive components
  • Reusable UI patterns

The component-based approach creates a consistent visual language while allowing the website to scale efficiently.

Responsive Design

The interface was designed with responsive behavior in mind to ensure a consistent experience across desktop, tablet, and mobile devices.

Content hierarchy, navigation, typography, media, cards, spacing, and CTA elements were structured to adapt naturally across different screen sizes.

Interaction Design

Interactive elements were designed to provide clear feedback and create a more engaging browsing experience.

Key interactions include:

  • Navigation interactions
  • CTA states
  • Service exploration
  • Portfolio interactions
  • Interactive sections
  • Form interactions
  • Scroll-based content discovery

Each interaction was designed to support the user’s journey rather than add unnecessary complexity.

High-Fidelity Prototyping

A high-fidelity interactive prototype was created in Figma to demonstrate the complete website experience.

The prototype helped validate:

  • Navigation behavior
  • User flows
  • CTA interactions
  • Page transitions
  • Content hierarchy
  • Interactive components
  • Overall usability

This provided a realistic representation of the final product before development.

Conversion-Focused Design

Since the website represents a service-based business, conversion was an important part of the UX strategy.

Strategic CTAs and supporting content were placed throughout the experience to encourage visitors to move naturally from discovering the service to understanding its value and initiating a project.

The design focuses on answering the client’s key questions at the right stage of the journey while keeping the path to action clear.

My Role

UI/UX Designer

I handled the complete design process, including:

UX Research · Information Architecture · User Flow · Wireframing · UI Design · Visual Design · Design System · Responsive Design · Interaction Design · Prototyping

Tools

Figma · FigJam · Adobe Photoshop · Adobe Illustrator

Outcome

The final result is a modern, visually engaging, and conversion-focused website experience designed specifically for a video editing service. The combination of user-centered UX, strong visual storytelling, structured service information, and a scalable design system creates a professional digital experience that helps potential clients understand the service, build confidence, and take action.

Project Highlights

UX Research · Information Architecture · User Flow · Wireframing · UI Design · Visual Design · Design System · Responsive Design · Interaction Design · Prototyping · Conversion-Focused UX

A complete UI/UX design for a video editing service website, created to combine creative visual storytelling with a clear, conversion-focused user experience. From UX research and information architecture to visual design, responsive layouts, design system, and interactive prototyping, every part of the experience was designed to communicate the service clearly, build client confidence, and guide visitors toward starting a project.

Project Information

Client

Graphics IT BD

Project Name

Frame x Media

Technology

Figma

Date

28/08/2026

Copyright ©Apon Mohanto

Apon web logo big-02
Need Help?