BALI SUN TOURS
Your sunlit adventure begins here.
FIGMA
EXCEL
PROCREATE
20 WEEKS
My role
Solo - UX/UI Design, Prototyping, Heuristic Evaluation
Deliverables
High Fidelity Desktop, Mobile, and Tablet Prototype
At a glance
This project is a redesign of the Bali Sun Tours website to help plan your next island adventure. It features 9 pages with entirely new UI that improves navigation, information architecture, and visual appeal across 3 screens: mobile, tablet, and desktop.
SKIP TO THE FINAL DESIGN?
EMPATHIZE
The current site
Bali Sun Tours offers many activities for every user’s Bali getaway, but it can be difficult to sift through all their options due to its inconsistent and distracting user interface.
DEFINE
The user persona
I created a user persona of a typical Bali visitor to guide the redesign.
Project goals
After analyzing the current site, I outlined the three main goals of this redesign.
IDEATE
Wireframe iteration
With the project's long timeline, iteration was key. I developed several wireframes to test different interface designs, exploring various layouts across three different screen sizes to address user needs.
Rebranding
I experimented with multiple logos and color palettes before landing on a vibrant look. The final theme was inspired by sunshine and warmth, reflecting Bali’s tropical vibe. I also created custom illustrations on Procreate to further distinguish Bali Sun Tours from competitors.
PROTOTYPE
A call to action
When designing the hero, I wanted users to know exactly what to do. The original site’s hero was a slideshow and search form. My decision was to include a “Book Now” button to clearly outline the main user goal: purchasing a tour. The large welcome text also encourages users to complete this goal. The drew the background myself to help entice users to scroll further.
Streamlining the tour page
To ensure users remained focused on booking a tour, I designed a booking component that stays fixed as users scroll through the page. This persistent element keeps the booking option accessible at all times, allowing users to easily make their decision without needing to search for the call to action. Additionally, I reorganized the information layout, making key details clear and visible throughout the user journey.
The navigation menu
Redesigning the menu was a major focus. The original site categorized tours in a non-intuitive way, frustrating users. My solution was to create a traditional dropdown menu under the label “Our Tours.” This change greatly improved navigation in my evaluations.
The interactions
The final redesign includes a working navigation bar with drop-down, mobile hamburger menu, image slideshow, slider, and accordions across 3 screen sizes.
TEST
Conducting heuristic evaluations
I asked three subjects to evaluate the original site and then my prototype and score them based off of various criteria, and my prototype scored a significant 44% higher than the original.
REFLECTION
Embracing iteration
Iteration played a crucial role throughout this 20-week project. By the end, I had created a completely different website than what I had initially envisioned, and I’m glad I embraced the process. I learned the value of not sticking to the first idea, allowing myself to build on concepts, improvise, and revisit each step throughout the design process.
Improving evaluation methods
At first, I struggled with defining what to evaluate. I kept the scope too broad, asking my subjects to score too many categories, some of which only applied to the original site and not my prototype. Looking back, I would narrow the focus and provide more specific tasks for users to complete. I would also be more diligent in organizing the evaluation criteria, ensuring that the feedback collected directly aligned with the goals of my prototype. This would help streamline the evaluation process and yield more actionable insights.
