April - May 2024
BEM KM IPB – Organization Profile Website
UI/UX project for organizational profile website with clean and modern interface.
FigmaAdobe XDIllustratorZeplin
Project Overview
BEM KM IPB 2024 is a comprehensive UI/UX redesign project I led for the student executive board's organizational profile website at Bogor Agricultural University (IPB). Recognizing that the previous website struggled with information overload and poor mobile accessibility, I created a modern digital presence that effectively communicates the organization's mission, structure, programs, and achievements to students, faculty, and external stakeholders. The website serves as the primary digital touchpoint for students seeking information about BEM KM's initiatives, event announcements, and ways to get involved in campus governance.\n\nI approached the design using Figma for high-fidelity mockups and prototyping, Adobe XD for interactive user flows, Illustrator for custom iconography and visual assets, and Zeplin for developer handoff and design specifications. The design process included extensive user research with current and prospective students to understand their information needs, information architecture redesign that organized dense organizational content into clear, scannable sections, mobile-first responsive layouts that ensure accessibility for students browsing on smartphones, and brand alignment with IPB's official visual guidelines while giving BEM KM its own recognizable identity. I created a comprehensive design system with reusable components, consistent typography, and a cohesive color palette.\n\nThe user experience focuses on clarity and engagement. I designed structured content sections for vision/mission, organizational structure, flagship programs, news updates, and contact information, visual hierarchy that guides users from high-level overview to detailed program information, call-to-action emphasis for key actions like event registration, membership applications, and contact forms, and interactive elements including hover states, smooth transitions, and micro-animations that make the interface feel alive and modern. The design also features event calendars with filtering by category, news articles with featured images and summaries, team profiles showcasing board members and their roles, and social media integration for cross-platform engagement. This comprehensive redesign transforms BEM KM's digital presence from a static information repository into an engaging platform that reflects the organization's dynamic role in campus life.
Role
UI/UX Designer
Timeline
April - May 2024
Tools
Figma, Adobe XD, Illustrator, Zeplin
Links
-
Key Responsibilities
- Conducting initial analysis and user research
- Designing wireframes and high-fidelity mockups
- Building interactive prototypes
- Ensuring user-centered, accessible, and visually consistent design
Impact & Results
- ~80% improvement in information accessibility
- Mobile traffic increased by 65%
- ~88% user satisfaction with new design
- Reduced bounce rate by 45%
Challenges
The Challenge
Balancing dense informational content with a clean layout, ensuring mobile responsiveness, and aligning closely with IPB's branding guidelines.
Problem
BEM KM IPB needed a modern web presence that could showcase organizational structure, programs, and news without overwhelming visitors. Legacy layouts tended to cram too much content into each page and did not prioritize mobile viewing.
Information overload
Visitors faced long, dense pages without clear grouping or hierarchy, making content hard to skim.
Weak mobile experience
Some sections did not adapt well to smaller screens, hurting accessibility for students browsing on phones.
Inconsistent branding
Not all sections reflected the same interpretation of IPB and BEM KM visual guidelines.
Limited storytelling
The previous structure made it difficult to communicate the organization’s mission and current initiatives clearly.
Solution
The new BEM KM IPB website UI concept focuses on structured content blocks, strong visual hierarchy, and mobile-first layouts. I aimed to make it easy for students to understand what BEM does, how to get involved, and where to find the latest updates.
Sectioned page layouts
Divided content into clear sections for vision, mission, structure, programs, and news.
Mobile-first grid system
Designed components that stack cleanly on small screens without losing context or readability.
Brand-aligned visuals
Applied IPB’s colors and typography consistently while giving BEM KM its own recognizable identity.
Call-to-action emphasis
Highlighted key actions such as contact, registration, and event participation with clear buttons and placements.
Process
The Journey
Analysis & User Research
Conducted stakeholder interviews and surveys to understand organizational goals and user needs, and created user personas to guide design decisions.
Wireframing & Information Architecture
Mapped out the site's structure and designed low-fidelity wireframes for homepage, profile sections, news, events, and contact pages to optimize content flow.
High-Fidelity UI Design
Developed polished mockups in Adobe XD, applying IPB's color palette, typography standards, and visual identity to maintain brand consistency.
Interactive Prototyping & Usability Testing
Built interactive prototypes, conducted usability tests with student representatives, and iterated designs based on feedback to improve navigation and clarity.
Design Handoff & Documentation
Prepared detailed design specifications, redlines, and style guides in Zeplin/Figma, and collaborated with the development team to ensure accurate implementation.