Scrollable content goes here

Product Showcase - Interactive Prototype

Product Showcase - Interactive Prototype

Role

UI/UX Design & Framer Developer

Credit

Developer: Hendrik

Company

MJ Solution Indonesia

Website Live 1 adalah website yang sepenuhnya saya rancang dan kembangkan sendiri menggunakan Framer, mulai dari desain hingga implementasi.
Website Live 2 merupakan website yang dikembangkan oleh tim internal, dikerjakan oleh Hendrik Tarigan selaku Fullstack Developer, dengan saya berperan pada aspek desain dan koordinasi.

Website Live 1 adalah website yang sepenuhnya saya rancang dan kembangkan sendiri menggunakan Framer, mulai dari desain hingga implementasi.
Website Live 2 merupakan website yang dikembangkan oleh tim internal, dikerjakan oleh Hendrik Tarigan selaku Fullstack Developer, dengan saya berperan pada aspek desain dan koordinasi.

Prototype Produk KMI 7000 Series

Prototype Produk KMI 2000 Series

Dalam sebuah sesi meeting bersama stakeholder, saya diminta untuk merancang sebuah product showcase interaktif untuk menjelaskan berbagai produk yang dimiliki perusahaan. Showcase ini dirancang dalam bentuk interactive prototype menggunakan Figma, sehingga tim marketing dan sales dapat menggunakannya untuk presentasi

Tujuan

Tujuan

1

1

Memperkenalkan produk-produk perusahaan secara menarik dan mudah dipahami oleh calon klien atau pengunjung event.

2

2

Menjadi alat bantu presentasi yang bisa digunakan tim sales atau marketing saat event maupun client meeting.

3

3

Memberikan pengalaman eksplorasi produk yang lebih dinamis dibanding presentasi statis seperti PowerPoint.

Pendekatan Desain

Pendekatan Desain

Saya sengaja membuat desain yang sederhana, fokus, dan mudah dinavigasi agar siapapun dapat mengakses dan memahami informasi dengan cepat. Beberapa pendekatan desain yang saya gunakan:

1

1

Layout bersih dan fokus pada visual produk serta fitur utamanya.

2

2

Penempatan Button dan interaksi yang intuitif.

3

3

User Flow yang jelas, sehingga audiens bisa berpindah antar kategori produk dengan mudah.

Interaksi produk

Interaktivitas & Animasi

Interaktivitas & Animasi

Saya menambahkan animasi mikro (micro-interactions) pada setiap aksi pengguna di prototype, seperti:

1

1

Transisi antar halaman produk.

2

2

Slide-in product details dan expandable sections.

Tujuannya agar:

1

1

Memberikan pengalaman yang interaktif dan menarik bagi pengguna.

2

2

Meningkatkan kesan profesional dan polished terhadap brand.

3

3

Membuat interaksi terasa lebih hidup dan engaging.

Pembuatan Assets Visual

Pembuatan Assets Visual

Untuk mendukung tampilan prototype yang menarik dan berbeda dari presentasi produk pada umumnya, saya memilih pendekatan visual dengan gaya isometric dengan Adobe Illustrator. Gaya ini dipilih untuk memberikan kesan ruang tiga dimensi yang modern, ringan, dan mudah dipahami.

Tujuannya:

1

1

Ilustrasi ini digunakan untuk menjelaskan use-case produk digital.

2

2

Menampilkan konteks produk dalam bentuk ruangan nyata membuat audience lebih cepat memahami kegunaan dan nilai jualnya.

3

3

Menambahkan visual storytelling tanpa teks berlebihan pengunjung event bisa langsung “mengerti” hanya dari tampilan visual.

Pembuatan Isometric

Hasil & Implementasi

Hasil & Implementasi

Prototype ini telah diterapkan dalam berbagai event, pameran, dan presentasi klien, dan mendapatkan banyak feedback positif dari stakeholder maupun pengunjung. Tim sales merasa lebih terbantu karena:.

1

1

Penjelasan produk menjadi lebih visual dan interaktif.

2

2

Waktu presentasi menjadi lebih efisien.

3

3

Memberikan kesan modern dan profesional terhadap brand.

Event ArchID BSD Tangerang

Brainstorming

Event Arch ID BSD Tangerang

Event Arch ID BSD Tangerang

Saat ini, baru sekitar setengah dari total produk yang telah selesai dikerjakan dalam prototype ini, dan masih terdapat banyak produk lain yang akan dikembangkan ke depannya.
Proyek ini bersifat berkelanjutan, dan saya terus menambahkan produk serta menyempurnakan interaksi berdasarkan masukan dari tim internal dan pengguna akhir, dan saya terus menambahkan aset baru sesuai arahan stakeholder dan update fitur produk.

Let's start creating together

Let’s turn ideas into something beautiful and powerful.

Copy my email

Let's start creating together

Let’s turn ideas into something beautiful and powerful.

Copy my email

Portfolio By Muhammad Faris 2025

Portfolio By Muhammad Faris 2025