Overview
Website Order Booking & Schedule for Consultation
3D interior is user - friendly rendering platform that provides flexible and accurate solutions to bring your design to life.
Problem & Biref
3D interior is a platform for 3d rendering & animation to elevate the design of a website as an architecht or enhance property marketing as a developer. The company has plans to create a website booking system by online that allows users to order 3D interior designs.
The booking process begins with selecting a schedule, design type, and category, followed by the design creation process until the final result matches the client's needs. UI design is expected to be elegant with a dark theme, user-friendly, easy to use, and great with interesting animations.
Research & Analysis
Research and review the client's design brief for analysis with the team. There are 3 step image (Overview and Design by Client) section steps: select a schedule, choose a category type, and input custom rendering. I will break down the purpose and objective of each step to ensure clarity and structure. After that, I will refine the user flow and sitemap.
User Flow & Site Map
The sitemap compiled by the project manager and me was created to thoroughly review the details of each page, making the website development process easier. This is early flow from user login to order booking and successful payment.
After the user flow above is finish, the next step is the rendering process between admin and user. The steps are as follows:
- The admin shares a Google Drive link.
- The user uploads the files to be 3D rendering and animated.
- The admin reviews and processes files.
- Once completed, the admin shares files to user for review. If approved, the files can be downloaded. If not, revisions can be requested through chat comment feature.
(Please zoom in to review the flow)
UI Design System
The first step is to develop a style guideline. This involves determining colors, fonts, button types, Header and Footer.
First, determine the primary and secondary colors from logo and requested by client. I used dark themes to look for an elegant combination. After client sharing material content, I immediately determined the layout and order of sections so that the marketing user flow could run well and user could understand.
UI Design
Mockup Homepage
Designing landing page mockups is important because the main focus is to communicate products and services to user effectively through a well structured of sections, making it easy for users to understand and want to action to place an order. The section sequence is as follows:
I used a dark theme design to make it look elegant, modern, and minimal, with a focus on a smooth user experience. I added gradient colors with blue and purple to give a modern vibe, paired with sans-serif typography for a clean look. The setting layout separates is each section clearly, making everything look neat.
Booking 3D Rendering
The booking process first is selecting a schedule on the calendar, which shows statuses: Available, Booked, and Off. The next, user continue proceess to the "Choose & Customize Rendering Type" page, which provides detailed information, a customization timer, and options to add rendering items.
Users can add items as needed, they are can also using default option (3D Interior recommendation) or selecting their own. Each chosen item displays there are price, and once satisfied, the user clicks "Update" to preview the total price on the main "Choose & Customize Rendering Type" page.
Users can add up to 2 additional items again or edit and modify their choices if needed. When everything is ready, click "Order Now" to proceed to the checkout step.
Process Step & Status (3D Rendering)
The next step allows users to track progress through dashboard from the project begin until step finishing.
The dashboard includes several navigation menus: Summary Menu to view status updates the start from process checking stage to completion. It also has a chat feature to make communication between users and admins easier, helping them revise design based on agreements to achieve the desired 3D design.
Profile Menu lets users update their identity and email, the Change Password Menu allows password changes, the History Menu shows a record of past services, and Invoice UI displays the prices of purchased services.
