Beacon ITS

Beacon ITS

📖Background

BEACON is an annual event by the Biomedical Engineering Department of Institut Teknologi Sepuluh Nopember. It’s all about introducing culture and tech to the younger generation. With support from the government, it’s a great way to get young people involved in advancing technology, especially in healthcare. BEACON has cool sub-events like BEPRO and BENMAX.

🧩Problem

Information about BEACON and its sub-events was scattered across various platforms, which made it difficult for users to find all the relevant details in one place.

🎯Project Goal

  • Create Brand Awarness: Position the website as a central hub for information about Beacon and its sub-events, BEPRO and BENMAX.

  • Incorporate Technical Features: Add features like an online registration form for easier event sign-up.

  • Marketing Strategy: Create a visual design that was both engaging and informative, attracting more visitors and participants.

  • Mobile Responsiveness: Ensure the website was fully functional and accessible on mobile devices.

🧑‍🦰User & Audience

  • Competition Participants: Students and professionals in the biomedical field, eager to participate in BEPRO and BENMAX.

  • Website Visitors: The general public interested in Beacon, including potential participants from outside ITS.

👨‍💻My Role & Responsibility

As a UI/UX Designer, responsibilities included:

  • Analyzing and understanding the requirements for the event’s website.

  • Designing an efficient and intuitive user flow for easy navigation.

  • Collaborating with the frontend team and stakeholders to meet project goals within a 2-month timeframe.

🔍Scope

The design covered:

  • A responsive layout optimized for both desktop and mobile devices.

  • Key screens such as Home, Event Details, and Registration, each designed to ensure a smooth and engaging user experience.

  • Incorporating subtle animations to enhance interaction and guide users through the registration process.

✏️Design Process

App Inspirations
Mockup

After creating the wireframe, I proceeded to the mockup process.

🏆Final Result

The integration of animations made navigation smoother, and the streamlined registration system simplified the user journey, increasing both participation and website traffic.


✨What I've done

This is my project designing the TiketJuara app, an online travel ticket booking application. I enjoyed the process of creating an intuitive and user-friendly design for a diverse audience.

  • A responsive redesign was implemented, with animations integrated into key sections of the site to guide users and enhance their experience.

  • A reusable design system with over 50 elements was created, including animated components to maintain visual consistency.

  • Close collaboration with the frontend team ensured that animations were smooth and well-optimized for mobile devices.

🗝️Key Insight

  • Simplified Processes

    Reducing friction in the user experience by making event registration easier and mobile-friendly increased participation and user satisfaction.

  • Effective Animation Use

    Animations helped guide users through the registration process without being overwhelming, enhancing both aesthetics and functionality.

Your next great design starts here!

Your next great design starts here!

Your next great design starts here!