BALI.LOVE WEDDING WEB APP DESIGN

Web App Design | Responsive | Multi-user
Project overview
Bali.Love specializes in destination weddings in Bali. The project focuses on developing a user-friendly web app for seamless wedding planning, efficient communication, and easy bookings.

Initially, the target audience comprises existing clients, with the aim of attracting potential customers by integrating the web app into the company's comprehensive service.
My role and duration
As the sole designer, my role involves collaborating with the project manager, analyzing requirements, and delivering effective design solutions.

This project has been ongoing for around 8 months and is continuously evolving with the addition of new features and enhancements.
Problem
The manual approach used by the Bali.Love team for assisting clients with their weddings has proven to be inefficient and time-consuming

Planning a wedding, especially in a different country, involves managing various aspects such as venue booking, accommodation, catering services, and hairdressing. This process can span over a year and requires coordination among multiple stakeholders. However, relying on tools like WhatsApp, Google Slides, and email for communication and booking management presents challenges in terms of resource consumption, communication efficiency, and scalability as the client base expands.
Goals
Clients: we want to bridge the gap between couples and vendors, simplify the wedding planning process.

Business: we want to increase revenue, reduce team workload, and improve our services. Additionally, promote the web app to attract new clients.
Solutions
An all-in-one wedding planning platform enables users to plan, book, create wishlists and communicate

Booking flow
Wishlist
Currency display
Inbox
Planning
Task management
Design system
Results
Our product launch brought relief to clients and improved workflow for our Bali admin team. The business has thrived, and designing a solution with a positive impact is fulfilling. Feedback from our project manager, who also owns the business, has been consistently positive:
"Emma is fantastic to work with and a talented designer." - Tom

"Mo (Emma) is amazing to work with. We can brainstorm creatively, have unclear briefs and objectives and she'll think deeply and pull it all together into beautiful and well thought through UIs. Very highly recommended." - Tom
My process
Adapting design process for efficiency and communication

While a comprehensive design process typically involves research, analysis, wireframing, UI iterations, and testing, I adjusted my approach based on project needs. With our project manager occupied with other responsibilities, we minimized meetings and relied on screencasts for conveying problem statements and requirements. Analyzing requirements, identifying underlying problems, exploring design solutions, screencasting design explanations, and gathering feedback became the core of our process. Research was conducted as needed, with a focus on similar products like Easy Weddings and drawing inspiration from platforms such as Airbnb.
Key challenges
Design file disorganization, tight schedule, and remote collaboration

Upon joining the team, I found the existing design work to be highly disorganized. The designs were stored in multiple files, including a large UI kit file that caused slow file access. Additionally, components were scattered randomly on the canvas, making progress tracking and collaboration difficult. The lack of a clear handoff process also posed challenges for the development team. Furthermore, the project had a tight schedule, and working as a part-time freelancer in a remote setup added to the complexity.
Now we have a newly built Design system, which I’ll talk about later.
Booking flow
Streamlined booking flow with wishlists

The booking flow is one of the major flows of the product, and Wishlist is an important part of the flow. Making bookings through the Wishlist page enables our clients to have an overview of the entire wedding package price and compare it with their budget before the payment.
Wishlist design
Instead of traditional wedding packages, we opted for wishlists, allowing clients to easily customize their selections.
Exploration
While designing the Wishlist card, I tried different ways to show the content.
User-centric iteration
Effective feedback and user-Centric iteration

Although we lacked a formal user testing process, we received immediate user feedback. Our project manager collaborated closely with clients, gathering feedback immediately after the design launch. This enabled us to swiftly identify and address issues, iterate rapidly, and refine the product.
Currency problem
Addressing price confusion and currency conversion

Client feedback revealed confusion regarding price changes during wedding planning. Deposits are paid upfront, and the remaining amount is paid over time. The fixed price in Indonesian Rupiah (IDR) at the time of booking can fluctuate due to currency rate changes. To address this, we proposed displaying the fixed price in IDR instead of the converted price. However, clients still need to know the equivalent amount in their currency.
Inbox feature
Efficient communication with inbox feature

To enhance communication efficiency, we introduced an inbox feature to overcome the limitations of email and Google Slides. Clients frequently have multiple questions, making it challenging to track progress and linked discussions. With the inbox feature, clients can initiate chats on specific pages, automatically linking the related issues.

Our admin team gains a comprehensive view of message details, communicates with vendors, and tags team members, all within one centralized platform.
Task management system
Task management system refinement

We had existing designs for the task management system that required refinement and improvement. Here is a comparison of the before and after versions:
Planning
Planning stage one design refinement

A designer joined our team briefly and created the initial design for the Planning Stage One. I then took on the responsibility of refining her design to align it with the project requirements. Here is a comparison between the two designs:
Design system
After completing the initial development stage, I had time to focus on building a robust design system and refreshing the existing designs.
File organization & handoff
To ensure efficient file organization and streamline the hand-off process, I implemented the following strategies:
Reflection
What I’d do differently next time

As a UI/UX designer, I constantly reflect and seek ways to improve. Here are some key lessons learned:

1. Build a design system from the start: Investing time in developing a design system upfront can save a lot of effort and time later on.
2. Separate design files for large projects: Creating separate design files for different features and versions helps ensure easier access for the team.
3. Prioritize a proper design process: Rather than rushing to find solutions, it's important to emphasize the value of a structured design process.
4. Improve communication with developers: Enhancing collaboration with developers can lead to better design comprehension and improved outcomes.

Next Project

Back to Top