# Fully Booked - ওয়েব এবং মোবাইলের জন্য ইন্টারেক্টিভ ফিগমা প্রোটোটাইপ

Company: Fully Booked
Service: অতিরিক্ত সেবা
Period: 2023-04 - 2025-06
Tech: Figma
Web: https://fully-booked.uk/
Canonical: https://webanion.com/bn/portfolio/fully-booked-interactive-figma-prototype-for-web-and-mobile

Fully Booked-এর প্রতিটি ধাপ একটি ক্লিকযোগ্য Figma প্রোটোটাইপ হিসেবে সংযুক্ত করা হয়েছিল, যাতে প্রতিষ্ঠাতা সেটি তৈরির জন্য টাকা দেওয়ার আগেই চালিয়ে দেখতে, প্রশ্ন করতে ও অনুমোদন দিতে পারেন। অ্যাপ, গ্রাহক ওয়েবসাইট ও অ্যাডমিনের জন্য তিনটি ফাইল একই স্টাইল ও কম্পোনেন্ট ভাগ করে নেয়, আর অপারেটরদের পাঠানো ডকুমেন্টগুলো প্রোটোটাইপ করা হয়েছে সেই ট্যাপসহ যা সেগুলো পাঠায়। ডেভেলপাররা অনুমানের বদলে তৈরি ফ্রেম থেকে কাজ করেছেন, আর প্রতিটি ধাপ তার পরিধির মধ্যেই থেকেছে। MVP ডিজাইন করেছিলেন Webanion-এর আরেকজন ডিজাইনার; ২, ৩ ও ৪ নম্বর ধাপের রিডিজাইন আমার নিজের।

## পুরো গল্পটা

ক্লিকযোগ্য প্রোটোটাইপ প্রতিটি ধাপকে এমন কিছুতে পরিণত করেছিল যা প্রতিষ্ঠাতা টাকা দেওয়ার আগেই চালিয়ে দেখতে, প্রশ্ন করতে ও অনুমোদন দিতে পারতেন।

### তৈরির আগেই একটি ধাপ ক্লিক করে দেখা

<p>Fully Booked-এর প্রতিটি ধাপের ছিল একটি নির্দিষ্ট বাজেট, আর ছিলেন একজন প্রতিষ্ঠাতা, যাঁর নিশ্চিত হওয়া দরকার ছিল যে এটি অপারেটরদের কাজে লাগবে। কোনো ফিচারের বর্ণনা দেওয়া ডকুমেন্ট ভুল বোঝা সহজ; যে প্রোটোটাইপে ট্যাপ করে এগোনো যায়, তা নয়। তাই প্রতিটি ধাপ প্রথমে Figma-তে ডিজাইন ও সংযুক্ত করা হতো, আর ডেভেলপমেন্ট শুরুর আগে প্রতিষ্ঠাতা পুরোটা ক্লিক করে দেখতেন।</p><p>প্রোটোটাইপে ধরা পড়া একটি ভুলের দাম কয়েক মিনিট, আর একই ভুল কোডে ধরা পড়লে দাম কয়েক দিন। এভাবে কাজ করায় প্রতিটি ধাপ নির্ধারিত পরিসরের মধ্যে থেকেছে, আর ডেভেলপাররা প্রতিটি স্ক্রিনের জন্য একটি সম্পূর্ণ রেফারেন্স পেয়েছেন।</p>

### তিনটি ফাইল, একটি পণ্য

<p>কাজটি রয়েছে তিনটি Figma ফাইলে, মোবাইল অ্যাপ্লিকেশন, কাস্টমার ওয়েবসাইট ও অ্যাডমিন ড্যাশবোর্ডের জন্য একটি করে, আর তিনটিই একই কালার স্টাইল ও কম্পোনেন্ট ভাগ করে নেয়। একজন অপারেটর অ্যাপ থেকে PDF হয়ে বিজনেস পেজে গেলেও একটিই ব্র্যান্ড দেখেন, আর যেকোনো অংশ তৈরি করা ডেভেলপার একই টোকেন পড়েন।</p>

### আসল জিনিসের মতোই সংযুক্ত

<p>স্ক্রিনগুলো ফ্লো আকারে জোড়া, তাই একটি বুকিংয়ে ট্যাপ করলে খোলে তার বিস্তারিত, মানচিত্রে তার রুট এবং তার পরের প্রতিটি অবস্থা। বুকিং বিবরণের প্রোটোটাইপে প্রতিটি ভিন্ন রূপ পাশাপাশি সাজানো, সঙ্গে তাদের মধ্যকার পথগুলো, আর এভাবেই প্রতিষ্ঠাতা মানচিত্রের স্ক্রিনগুলো তৈরির আগেই অনুমোদন দিয়েছিলেন।</p>

### প্রতিটি ডকুমেন্ট, যে ট্যাপে তা পাঠানো হয় সেটিসহ প্রোটোটাইপ করা

<p>ডকুমেন্টের পুরো সেট, কোটেশন, বাতিলকরণ, আমন্ত্রণ, ইনভয়েস, নিশ্চিতকরণ ও ড্রাইভার শিট, Figma-তে সাজানো হয়েছিল, আর যে অ্যাপ স্ক্রিন থেকে প্রতিটি পাঠানো হয় সেখান থেকে টানা হয়েছিল তীরচিহ্ন। প্রতিষ্ঠাতা একজন অপারেটরের ট্যাপ থেকে শুরু করে গ্রাহকের হাতে পৌঁছানো পাতা পর্যন্ত পুরোটা অনুসরণ করতে পারতেন, আর একই সঙ্গে ভাষাও অনুমোদন করতে পারতেন।</p>

### হোম স্ক্রিন, একাধিক রূপে পরখ করা

<p>প্রোটোটাইপে অপারেটরের হোম স্ক্রিন কয়েকটি সংস্করণের মধ্য দিয়ে গেছে, আর প্রতিটিকে একই পরীক্ষায় ফেলা হয়েছে: একজন অপারেটর কি দেখতে পাচ্ছেন তিনি কত আয় করেছেন, আর এক ট্যাপেই কি পৌঁছাতে পারছেন আরও আয়ের প্রতিটি পথে। যে রূপটি বেছে নেওয়া হয়েছিল, সেটিই আজ অ্যাপে আছে।</p>

### এক লাইন কোডের আগেই বিজনেস পেজ

<p>যে বিজনেস পেজ অপারেটরদের সরাসরি বুকিং এনে দিয়েছে, তা পুরোপুরি ডিজাইন করা হয়েছিল, গাড়িবহরের গ্যালারি, পরিচিতি অংশ, রিভিউ, মানচিত্র, খোলার সময় ও বুকিং ফর্মসহ, আর এর কিছুই তৈরির আগে প্রোটোটাইপ হিসেবে পর্যালোচনা করা হয়েছিল। সরাসরি বুকিং চালু করা ধাপটি শুরু হয়েছিল এমন একটি পাতা থেকে, যাতে সবাই আগেই সম্মত ছিলেন।</p>

### অ্যাডমিন ও কাস্টমার ওয়েবসাইটের ফাইল

<p>অ্যাডমিন ও কাস্টমার ওয়েবসাইটের ফাইলে লগইন থেকে পেমেন্ট পর্যন্ত প্রতিটি পাতা ও অবস্থা রয়েছে, তাই ওয়েব ডেভেলপাররা অনুমান থেকে নয়, সম্পূর্ণ ফ্রেম দেখে তৈরি করেছেন। প্রতিটি ধাপ তার পাতাগুলো একই ফাইলে যোগ করেছে, যা বছরের পর বছর পরেও পণ্যটিকে সামঞ্জস্যপূর্ণ রাখে।</p>

### প্রোটোটাইপ যা এনে দিয়েছে

<p>প্রতিষ্ঠাতার কাছে প্রোটোটাইপ মানে ছিল আত্মবিশ্বাসের সঙ্গে ফিচার অনুমোদন করা এবং কেবল সম্মত হওয়া কাজের জন্যই টাকা দেওয়া। ডেভেলপারদের কাছে এর মানে ছিল কোনো অস্পষ্টতা না থাকা, আর অপারেটর ও গ্রাহকদের কাছে এর মানে ছিল এমন স্ক্রিন, যা কারও ফোনে পৌঁছানোর আগেই আলোচনা আর তর্কের মধ্য দিয়ে পাকা হয়েছে।</p><p>স্ক্রিনগুলোর পেছনের ভাবনার কথা আছে <a href="/portfolio/fully-booked-ui-ux-design-for-mobile-app-and-admin-panel">UI ও UX-এর গল্পে</a>, আর সম্পূর্ণ পণ্যের কথা <a href="/portfolio/fully-booked-all-in-one-smart-booking-solution">Fully Booked-এর গল্পে</a>।</p>
