Bus Information System (BIS) Website Revamp

Overview

The Jeju Bus Information System (BIS) is one of the flagship projects of Sum Engineering, a company that has been exclusively collaborating on key initiatives for Jeju Special Self-Governing Province, including the Disaster Alert System and Jeju Aquarium.

As part of the BIS revamp project, I had the opportunity to contribute as a UX/UI Designer, making this my first professional UX/UI project. This experience was especially meaningful, as it marked the beginning of my journey in creating user-centered digital solutions.

The redesigned BIS website aimed to make bus information more accessible, enhance usability, and establish a modern, user-friendly interface that better serves commuters and visitors navigating Jeju’s public transportation system.

‍

The key objectives of this revamp were:

• Enhancing Readability & Accessibility: Ensuring users could quickly access and understand relevant bus information.
• Simplicity & Clean Design: Creating an intuitive and visually streamlined interface.
• Improved Usability: Optimizing navigation and search functionalities for a better user experience.

‍

‍

Problem & Goals

‍

Key Enhancements Based on Benchmarking

• Unified Search Bar: A single search bar on the main page will allow users to search by route number, bus stop name, or stop ID, simplifying access to bus information.
• Real-Time Bus Location Feature: A new section in the search results will display real-time bus locations, operating hours (first/last bus), and operator details. (The integration of congestion data will depend on API collaboration with Kakao.)

‍

Proposed Enhancements

• Navigation & Key Menu Suggestions: Streamlining key menus for better accessibility.
• UI (User Interface) Style Recommendations: Establishing a clean and intuitive design system that aligns with the new user experience goals.
  ‍

Menu Structure Proposal & Selection Process

During the website redesign, three different menu structures were proposed. After evaluating accessibility and usability, we decided on the third option as it provides better information accessibility.

Comparison of Proposed Menu Structures

Key Decision Point

✔ Option 3 was chosen for better accessibility and a more streamlined user experience.

✔ Instead of separate menu categories like Route Information, Real-Time Operation Info, Transfer Info, and Tourist Info, we structured the menu into five clear categories for easier navigation.

✔ UI Draft review and feedback will be conducted before finalizing the menu order.

‍

Design Exploration & Decision Process

UI Draft Options (A, B, C)

To enhance accessibility and usability, we explored three UI draft options for the Bus Information System (BIS) website. Each draft presents a different approach to layout, information structure, and visual hierarchy.

‍

Information Architecture Proposal

Decisions Required

• The IA proposal is structured as above for the redesigned website.

1. Review and provide feedback on the IA.
2. Specify any required modifications or content changes from the existing website.

‍

Decision & Rationale

After reviewing all options and gathering feedback, we determined that Option A offers the best balance of accessibility, usability, and information clarity.

Why Option A?

✅ Clean and simple layout – The design minimizes unnecessary elements and highlights essential information, making it intuitive for users.

✅ Emphasis on key information – Important details like weather and bus schedules are prominently displayed, allowing users to access critical data quickly.

✅ Large search bar – The prominent search functionality makes it easy for users to find the information they need efficiently.

‍

Next Step: Search Page UI Draft Decision Process

UI Draft Options (A, B)

Why Option B Was Chosen?

✅ Better Information Visibility → The sidebar navigation ensures search results are always visible.

✅ Larger Map Display → The UI allows more screen space for the map, improving user experience.

✅ More Intuitive Navigation → Users can quickly switch between search types without extra clicks.

✅ Improved User Efficiency → Reduces steps required to access search results, enhancing usability.

‍

Development Collaboration

I ensured a seamless handoff from design to development by creating pixel-perfect documentation and maintaining close communication with the development team. This involved delivering precise UI specifications, exporting optimized assets, and clarifying design decisions through structured documentation and regular discussions.

‍

Design-to-Development Process

Tools Used: Adobe Illustrator, Photoshop

Deliverables for Development:
✔ Pixel-perfect UI design specs (dimensions, margins, paddings, colors)
✔ Assets export (SVGs, PNGs, icons, and UI components)
✔ Typography & spacing guidelines
✔ Interaction & hover state documentation

‍

Developer Handoff & Communication

• Created a structured design document with pixel-precise UI details.
• Regular syncs with developers to clarify design decisions and resolve UI inconsistencies.
• Used Slack & shared annotated design files to ensure alignment between design and development.
• Provided feedback during development to ensure UI fidelity with the original design
‍

Challenges & Solutions

Final Outcome

✅ A well-documented, pixel-accurate UI successfully implemented by the development team.

✅ Smooth collaboration between design & development, reducing iteration cycles.

‍

Final Design

‍

User Response & Impact

• The revamp received positive feedback from both residents and tourists, especially for real-time bus tracking and accessibility improvements.
• However, some areas still required further enhancements in bus coverage and service accessibility, highlighting the need for ongoing improvements.

This large-scale transportation upgrade set the foundation for a more efficient and inclusive bus network in Jeju.

‍

Key Takeaways & Reflection

✏️ Lessons Learned

1. Bridging the Gap Between Design & Development

• Ensuring pixel-perfect UI implementation required clear documentation, frequent communication, and iteration cycles with developers.
• The importance of early collaboration with engineers to address potential technical limitations before finalizing designs.
  ‍

2. Balancing Simplicity & Information Density

• The search function redesign proved that reducing complexity improves user engagement.
• Consolidating multiple search methods (route, stop, real-time tracking) into a single intuitive interface significantly enhanced usability.
  ‍

3. User-Centered Decision Making

• Conducting benchmarking and usability tests guided design choices that prioritized accessibility and efficiency.
• Iterative testing led to key refinements, such as the sidebar navigation (Option B) improving search visibility and reducing cognitive load.

‍

✏️ Challenges & Areas for Improvement

1. Design Handoff Process

• While the documentation was thorough, maintaining consistent UI fidelity throughout development required close collaboration.
• To improve developer handoff, we plan to implement Adobe XD or Figma’s auto-layout feature and Zeplin’s asset exporting for better scalability and accuracy in future projects.

2. Scalability & Future Adaptability

• The BIS revamp addressed current user needs, but future expansion (e.g., AI-based recommendations, multimodal transport integration) should be considered in the initial design phase.

3. Mobile-First Optimization

• The desktop version was prioritized, but in future projects, a mobile-first approach would ensure a seamless cross-device experience from the start.

‍