Project Overview

Xobito is a WhatsApp Business API platform where teams share one WhatsApp number through a shared inbox, broadcasts, contact segmentation, templates, automated replies and role controls. The web dashboard already existed. My work was focused entirely on the mobile app - taking that desktop product and rebuilding it for a phone. I did not design the website or the main dashboard. The app is live on the Play Store today with a basic module, with a further build planned to bring more of the dashboard's functionality into the mobile experience.

My Role & Contributions

• Designed and built the mobile app UI on top of the existing dashboard functionality

• Mapped every dashboard module against mobile and decided what to create and manage on mobile versus what to keep view-only

• Designed the navigation model with a bottom tab bar for daily work - Home, Chats, Contacts and Broadcast - plus a More hub for everything else

• Designed the authentication flow, including login, registration, OTP and forgot password

• Designed the inbox with a conversation list, search, filter sheet and chat thread with composer, quick replies and assignment

• Designed the broadcast creation flow as a step-by-step wizard covering audience, template and personalisation, actions and review

• Designed contacts, templates, segments, channels, canned responses and settings screens

• Built a shared mobile UI kit including glass surfaces, headers, bottom sheets, pickers, chips, stat tiles, list rows, filter bars, empty states, toggles and confirmation dialogs

• Implemented light, dark and system theming

• Implemented multi-language support, including a right-to-left locale

• Did not design the Xobito website or web dashboard

Design Highlights

• Created a consistent desktop-to-mobile translation system across every module: data tables become card lists, pagination becomes infinite scroll, dialogs become bottom sheets, dropdowns become searchable picker sheets, sidebar navigation becomes a bottom tab bar, bulk-selection toolbars become long-press selection and refresh buttons become pull-to-refresh

• Defined scope per module rather than applying the same approach everywhere. Tasks people genuinely perform on a phone, such as replying in the inbox, looking up a contact and sending a broadcast, are full create and manage flows

• Kept desktop-oriented tasks view-only on mobile, including WhatsApp template authoring, multi-condition segment queries, Meta channel connections and schema or pipeline configuration, with actions directed back to the web dashboard

• Rebuilt complex web forms as step-by-step wizards with a bottom-pinned action bar so important actions remain within easy thumb reach

• Followed a one-handed layout approach throughout with bottom-reachable primary actions, bottom sheets for filters and pickers and large tap targets

• Established a locked design system with consistent spacing, radius, typography and elevation scales so future screens remain visually consistent

• Used platform-adaptive UI primitives so date pickers, menus and blur behave naturally across iOS and Android

• Added full dark mode and four-language support, including RTL layout support

Tools Used

Claude Code (AI-assisted design and development), React Native, Expo, TypeScript and direct in-code UI iteration. No Figma file was used for this app.

Challenges & Solutions

The real challenge was not visual - it was scope. A dashboard built for a wide screen has tables, multi-pane views and query builders that do not translate well to a 6-inch screen. Simply copying them into the app would have created a worse version of the web product. I worked module by module and made a clear create/manage versus view-only decision for each feature, based on whether the task is realistically useful on a phone. This kept the mobile app focused on the actions users are most likely to perform from their phones while leaving complex authoring tasks where they belong.

Outcome

The mobile app is live on the Play Store with a basic module. The wider set of modules - inbox, broadcasts, templates, segments, channels and settings screens - is designed and built for an upcoming release that will bring more of the dashboard's functionality into the app.