I design websites and digital products, then bring them to life.

Bili as a PS2-era game character, standing

Open case study

Drag, swipe, or use the arrows.

Thoughtful UX/UI, clear product structure, and practical implementation, from the first sketch to a working experience.

See selected work Start a project
  • Projects designed25+
  • Screens designed140+
  • Kinds of productWebsites, dashboards, mobile apps, design systems4

Selected work

A look at products and websites I've helped shape, from multi-user platforms to business websites.

Nesso Digitale website home page
Nesso client monitoring dashboard

Client workDesigned

Nesso Digitale: A clearer website and better project visibility

Nesso Digitale, Italy

A website revamp and a set of separate dashboards for an Italian digital agency, making its services clearer and ongoing projects easier to follow.

Read the case studyClose the case study

Project snapshot

Client
Nesso Digitale, Italy
Engagement
Client project
Role
UX/UI Designer
Scope
Main website revamp; UX/UI for separate dashboards for client project monitoring and internal employee management
Status
Completed and in use

Overview

Nesso Digitale is a digital agency based in Italy. The engagement covered two connected parts of its digital experience: the public-facing website and separate dashboards intended to support day-to-day project visibility and team management.

The website needed a clearer way to explain the agency and organize its information. The dashboards needed to make project progress easier for clients to follow and employee management easier for the Nesso team.

The challenge

The previous website felt disorganized and was difficult for visitors to understand. The information needed a clearer hierarchy so people could understand what Nesso Digitale offers and find the right details more easily.

The operational challenge was different. Clients needed a straightforward way to monitor the projects they were working on with Nesso. Internally, the team needed a more practical way to manage employees and keep work organized.

The design work therefore had to serve two contexts: communicating clearly with prospective clients, and supporting an ongoing working relationship with existing clients and the internal team.

My role

I was responsible for UX and UI design across the website revamp and the dashboards. I worked with the client to understand the requirements, organize the information, shape the user experience, design the interfaces, and refine the work through feedback and iteration.

Design approach & decisions

  1. Make the website easier to understand. The revamp focused on clarity before decoration. I organized the content into a more understandable hierarchy and shaped the page layouts around what visitors needed to learn about the agency, rather than giving the old template a new visual skin.
  2. Separate client and internal priorities. Clients and the Nesso team use separate dashboards for different reasons. Clients need to understand the status of their own projects; the internal team needs to manage employee-related information. I treated these as different interface priorities so each audience could focus on what is relevant to them.
  3. Make project status easier to scan. For the client-facing experience, project progress should be understandable without requiring clients to interpret dense operational information. The interface gives project status and progress a clear place in the hierarchy.
  4. Keep operational information organized. For the internal experience, the design needed to make employee management easier to follow. The interface structure was shaped around the team's operational needs rather than reusing the client-facing layout unchanged.

Process

I aligned with the Nesso team on the requirements and the purpose of each workstream. I then organized the information and key flows, developed the interface direction, and reviewed iterations with the client. The final UX/UI designs were completed and put into use.

Outcome

The redesigned website and dashboards were completed and put into use. Nesso Digitale gained a clearer public-facing website, while the dashboards support clients in following ongoing projects and helps the internal team manage employees.

The project connected two important sides of the agency: how it presents itself to the outside world and how it supports the work happening behind the scenes.

Selected screens

Website: home page
Website: home page
Website: team on demand
Website: team on demand
Dashboard: client project overview
Dashboard: client project overview
Dashboard: management overview
Dashboard: management overview
Dashboard: developer overview
Dashboard: developer overview
gopop.id end-user web home page
gopop.id admin dashboard

Self-initiatedDesigned & built

gopop.id: A PPOB platform for customers and resellers

Gopop Labs is my studio; gopop.id is the product.

A PPOB product for customers and resellers, designed around accessible everyday transactions and supported by an operational admin dashboard.

Read the case studyClose the case study

Project snapshot

Product
gopop.id / Gopop Partner, by Gopop Labs
Engagement
Self-initiated product
Role
Product Designer, UX/UI Designer, business planning; front-end implementation for the admin dashboard
Scope
Customer web and app, reseller app, and admin dashboard
Status
Completed and in use

Overview

gopop.id is a PPOB product built around everyday digital transactions such as mobile credit purchases and bill payments. It is intended to serve people in areas where access to these services can be more limited.

It also supports a second audience: resellers who want to offer mobile credit and payment services to their own customers. This use case is served through Gopop Partner, alongside the customer-facing experience and an admin dashboard for operations.

The challenge

For customers, routine transactions should be easy to find and quick to complete. The product direction set a target of completing a basic purchase in under one minute. The payment step also needed to feel accessible, so QRIS was included as a universal payment option.

For resellers, the need was different: they needed a dedicated way to access the services they sell and manage their selling activity. The product also required an administrative interface to support the operation behind the service.

The challenge was to bring these connected needs together without forcing customers, resellers, and administrators into the same experience.

My role

I worked across product design, UX/UI design, and business planning. I also handled the front-end implementation of the admin dashboard. My involvement covered the product direction and the design of its main user experiences, with implementation responsibility specifically for the admin dashboard front end.

Design approach & decisions

  1. Put common transactions within easy reach. Mobile credit and bill payments are recurring tasks. I prioritized the most common services in the customer experience so users can find the action they came for without navigating through unrelated information.
  2. Keep the purchase journey focused. The target was to make a basic purchase possible in under one minute. The interface therefore needed a direct sequence: choose a service, enter the required details, review the transaction, and proceed to payment. This is a design target, not a measured result.
  3. Include a familiar payment option. QRIS was included to provide a widely recognized payment method and reduce friction at the payment step for users who prefer QR-based transactions.
  4. Design for customers and resellers separately. Customers purchase services for their own needs. Resellers use the platform to sell services to others. gopop.id and Gopop Partner support these different jobs with distinct experiences rather than combining them into one overloaded interface.
  5. Make the admin dashboard operational. The admin dashboard supports the operational side of the product. I designed its interface and also handled its front-end implementation, connecting the design decisions to a working dashboard.

Process

I developed the product direction around the needs of customers and resellers, considered the business model, organized the key journeys, and designed the customer, reseller, and admin experiences. I then implemented the front end of the admin dashboard and refined the product through review and iteration before it was put into use.

Outcome

gopop.id was completed and put into use as a PPOB product for customers, with Gopop Partner serving the reseller use case. The product brings customer transactions, reseller activity, and administration into connected but distinct experiences. QRIS is available as a payment option, and the admin dashboard front end was implemented as part of my scope.

The project brought together product thinking, interface design, business planning, and hands-on implementation within one product initiative.

Selected screens

Customer web: home page
Customer web: home page
Customer mobile app
Customer mobile app
Reseller mobile app
Reseller mobile app
Admin dashboard
Admin dashboard
Lmesh Tracking mobile app: splash, sign-in, and live map screens

Client workDesigned

Lmesh Tracking: Making vehicle tracking data easier to monitor

Lmesh Tracking, Netherlands

A mobile tracking app for a heavy-cargo device, translating GPS location and surrounding temperature data into a focused user experience.

Read the case studyClose the case study

Project snapshot

Client
Lmesh Tracking, Netherlands
Engagement
Client project
Role
UX/UI Designer
Scope
Mobile app UX/UI based on the tracking hardware's specifications; splash, sign-in, and live tracking map
Status
Completed and in use

Overview

Lmesh Tracking develops tracking technology for heavy cargo vehicles. The device combines GPS tracking with the ability to read the temperature of the surrounding environment.

My role was to design the mobile app experience that allows users to interact with and monitor the tracking device. The interface needed to reflect the capabilities and limitations of the hardware rather than treating it as a generic location-tracking app.

The challenge

The core challenge was to make the tracking device easier for users to manage. The product works with two kinds of information: the vehicle's GPS location and the temperature around the device.

The app experience therefore needed to translate the hardware specifications into a clear mobile interface, with location tracking as a central part of the experience and the device's environmental reading represented in a way that users can understand.

My role

I was responsible for UX/UI design based on the tracking device's specifications and the client's requirements. My work focused on translating the product's hardware capabilities into a practical mobile app experience.

Design approach & decisions

  1. Design around the actual device capabilities. The app needed to reflect what the tracking hardware can provide. I used the device specifications as the basis for the interface, rather than designing features that the hardware could not support.
  2. Make location the main visual anchor. GPS tracking is a central part of the product. A live map provides a direct spatial reference, helping users understand where the tracked vehicle is.
  3. Account for environmental temperature data. The device also reads the surrounding temperature. This capability forms an important part of the product context and needed to be considered in the app's information structure.
  4. Keep the mobile experience focused. The interface was designed for mobile use, with attention to the essential screens required to access and monitor the tracking experience.

Process

I reviewed the client's requirements and hardware specifications, translated the device capabilities into the app's information and screen structure, and developed the UX/UI for the agreed mobile screens. The design was refined through client feedback before completion.

Outcome

The mobile app design was completed and put into use. It provides the interface through which users can access the tracking experience for the client's heavy-cargo device, designed around its GPS and environmental temperature capabilities.

Selected screens

Splash screen
Splash screen
Sign in
Sign in
Live tracking map
Live tracking map
Tasima Resident Hotel website home page

Client workDesigned

Tasima Resident Hotel: A clearer path from discovery to booking

Tasima Resident Hotel, Yogyakarta, Indonesia

A responsive website for a Yogyakarta hotel, designed to introduce the property, present room options, and support the journey toward online booking.

Read the case studyClose the case study

Project snapshot

Client
Tasima Resident Hotel, Yogyakarta, Indonesia
Engagement
Client project
Role
UX/UI Designer
Scope
Hotel website design for desktop and mobile; 13 screens across Homepage, Rooms, Booking, About Us, Contact, and Career
Status
Completed and in use

Overview

Tasima Resident Hotel is a hotel based in Yogyakarta. The hotel needed a website that could introduce the property to prospective guests, present room options, and support the online booking journey.

The website serves as an important point of discovery before a guest decides whether to make a reservation. The interface therefore needed to communicate the hotel clearly while making relevant information and booking access easy to find.

The challenge

The design needed to balance two purposes: promoting the hotel and helping visitors move toward a booking. Visitors should be able to understand what the hotel offers, explore room information, and find the next step without getting lost in the website.

The website also needed to work across desktop and mobile layouts, where visitors may browse and make decisions in different contexts.

My role

I was responsible for UX/UI design for the hotel website, covering the page structure, interface design, and responsive layouts for desktop and mobile.

Design approach & decisions

  1. Make the hotel easy to understand. The homepage needed to introduce the property and communicate the information prospective guests need first. The content hierarchy should help visitors understand the hotel before exploring deeper pages.
  2. Give room information a clear place. Room discovery is a key part of choosing a hotel. I organized the Rooms experience so visitors can explore the available room information before moving toward a booking decision.
  3. Keep the booking path visible. The Booking section is an important part of the website journey. I structured the experience to make the next step toward online booking easier to identify.
  4. Design for desktop and mobile. The website covers different visitor contexts. The responsive layouts were designed to keep the content hierarchy and essential actions understandable across screen sizes.

Process

I worked from the hotel's requirements to organize the website pages and the visitor journey. I then designed the desktop and mobile interfaces across the agreed scope, reviewing the screens and refining the layouts before completing the design handoff.

Outcome

The 13-screen website design was completed and put into use. It gives Tasima Resident Hotel a digital presence to present the property, share room information, and support visitors as they move toward online booking.

Selected screens

Home page
Home page
Rooms
Rooms
Booking
Booking
About
About
Home page, mobile version
Home page, mobile version

Why work with me

Clear thinking, thoughtful design, and one direct point of contact from the first conversation to delivery.

  • One point of contact

    Work directly with the person shaping your product and designing the experience. Fewer handoffs mean clearer communication and decisions that stay connected.

  • Design with the real task in mind

    I focus on what people need to understand and do, then shape the structure and interface around those priorities, not just how the screen looks.

  • From design to a working experience

    When the scope calls for it, I can take a website or interface beyond Figma and bring it into a working implementation.

Services

Bring me in for a focused design task or for a project that needs both design and implementation. We can define the right scope together.

  • Website design & build

    Landing pages, company websites, and website revamps designed around your business, content, and audience. Implementation can be included when the project needs a working website, not just a design file.

    Deliverables: website structure, UX/UI in Figma, responsive layouts, and implementation when included in the agreed scope.

    Discuss a website project

  • Product UX/UI

    Dashboards, SaaS products, internal tools, and mobile apps. I organize user flows, information, and interface patterns so people can understand the product and complete their tasks with less friction.

    Deliverables: user flows, wireframes, interface design, responsive states where relevant, prototypes, and development-ready design files.

    Discuss a product project

  • Design systems & UX foundations

    A clearer foundation for products that need consistency as they grow, from reusable components and interface rules to themes and multilingual layouts.

    Deliverables: component libraries, design tokens, typography and color rules, theme definitions, and UX structure based on the project scope.

    Discuss a design-system project

A clear process, from first conversation to delivery

Every project is different, but the work follows a clear sequence. We agree on the scope and checkpoints before moving forward.

  1. Discover

    We discuss your goals, audience, current product or website, and the main problem to solve.

  2. Define

    I organize the requirements into scope, priorities, key user flows, and a clear direction for the work.

  3. Design

    I develop the experience from structure and wireframes to polished interfaces. We review the important decisions together before moving forward.

  4. Build (when included)

    If implementation is part of the agreed scope, I bring the approved design into a working website or interface.

  5. Test & refine

    I review the key flows, responsive layouts, content, and interface states, then refine issues found during testing.

  6. Handoff & launch

    You receive the agreed design files, assets, and documentation. If implementation is included, we prepare the working experience for launch.

About

One person to shape the experience, and see it through.

I'm Bili, a product designer based in Indonesia. I work across UX, UI, and digital product design, with a focus on making complex information easier to understand and everyday tasks easier to complete.

I also take selected projects from design into implementation, so the thinking behind the interface carries through to the working result. I run Gopop Labs, where I develop my own product ideas alongside client work.

Name
Mochamad Ardabili (Bili)
Role
Product Designer & Digital Builder
Based in
Indonesia · WIB (UTC+7)

Start a project

Have something in mind?

Tell me what you're trying to design, improve, or bring to life. Share a little context and I'll get back to you to discuss the next step.