Case study · End-user documentation
Documenting mobohubb
A documentation hub for a deskless-workforce platform: four apps, 86 task-based guides, and onboarding paths for every kind of user, from the site administrator setting things up to the employee clocking in on a shared tablet.
- Author
- Christian Arango
- Role
- Documentation Engineer & Technical Writer
- Live site
- mobohubb.readme.io
- Captured
- Public site, October 13, 2026
(open full-size image)At a glance
Four apps, one hub.
mobohubb helps on-the-go teams (security, facilities, cleaning, construction, restaurants) run schedules, time clocks, tasks, forms, and QR/NFC checkpoints. Its users range from administrators configuring sites in a web portal to field employees who only ever see a phone or a shared kiosk.
- 86
- task-based guides across four apps
- 941
- screenshots placed step by step, on 83 of 86 pages
- 74
- guides written as numbered procedures
- ~40k
- words of published guidance
Information architecture
Each sidebar shaped like the app it documents.
One ReadMe project. Each app gets its own sidebar, reachable from the header and the landing page.
| App | Sections | Guides |
|---|---|---|
| Portal/docs | Quick start · Dashboard · Profile · Site administration · Configuration · Report configuration · Productivity · Schedule · Collaboration | 52 |
| Mobile app/v1.2/docs | Quick start · Profile · Features · Side menu · Schedule · Alerts | 27 |
| Web app/v1.3/docs | Overview · Log in · Quick start | 3 |
| Kiosk app/v1.4/docs | Overview · Log in · Site administrator quick start · User quick start | 4 |
Organize by app, then by task
Readers arrive knowing which app they’re in, not which feature they need. Each sidebar follows the app’s own menus.
ReadMe versions as an app switcher
Each app lives in its own ReadMe version, so the header links swap the whole sidebar without four separate projects to maintain.
Admin and field content kept apart
Configuration lives in the Portal; the mobile and kiosk guides only cover what an employee does, so field users never wade through settings.
Bilingual product, English docs
The portal runs in Spanish or English; the guides document language switching as a first-class task.
(open full-size image)Landing page
A front door with four doors.
A single HTML block on ReadMe’s landing page, with its own scoped stylesheet. The only question it asks is “which app are you using?” Four large cards answer it, each opening that app’s first guide.
Brand without a theme budget
A soft gradient and frosted-glass cards lift the stock ReadMe look without custom theme work.
Full-bleed inside ReadMe
Overrides on ReadMe’s content container remove its width and padding so the background runs edge to edge.
Branded footer
Logo, copyright, and social links in the product’s color, collapsing to a centered stack under 600px.
/* Frosted-glass app cards */
.card {
background: rgba(255, 255, 255, 0.6);
border: 2px solid rgba(234, 241, 251, 0.3);
border-radius: 20px;
backdrop-filter: blur(8px);
transition: transform 0.2s;
}
.card:hover { transform: translateY(-4px); }Writing
Guides for people who aren’t at a desk.
Field employees read on a phone, mid-shift, often for one task. Every guide is built so a reader can find their step, see the screen they should be looking at, and get back to work.
# Time Clock
Discover how to use the **Time Clock** feature in mobohubb to log work
hours and manage breaks.
**In this guide you'll learn**
* How to **clock in** and **clock out** with the Time Clock
* The differences between **automatic**, **manual**, and **no-break** modes
* How to record **breaks** and review a summary of hours worked
## Clock in
1. Tap the **Time Clock** icon in the footer.
2. (Optional) add a note.
3. Press and hold the clock button until the **green ring** completes (≈ 5 s).
<Image align="center" border={true} width="30%" src="…" />- 63 of 86
Outcomes first
Guides open with “In this guide you’ll learn,” so readers know in seconds if they’re on the right page.
- 941 captures
A screen for every step
Phone captures run narrow (30% width) so they read like the device; portal captures run wide.
- Style
Bold the thing you tap
Imperative steps with the exact UI label in bold: Tap Take a break.
- 42 guides
Notes where mistakes happen
A callout at the exact step where readers go wrong, such as which credentials to use, or why a form must exist before a report task.
(open full-size image)Portal › New User Interface: outcomes first, then tabs for each region of the screen. 
(open full-size image)Mobile › Time Clock: phone captures run narrow so they read like the device.
1 / 2
Onboarding
A quick start for every kind of user.
The same product means different first days for different people. Instead of one getting-started page, the hub has six quick starts, each written for one audience and one job.
| Audience | Guide | What it gets them through |
|---|---|---|
| New organizations | New Users: Quick Start Guide | The setup wizard, then five tracked steps (Branding, Scan Point, Task, Form/Checklist, Invite your team), each mapped to the portal’s own 1/5–5/5 progress indicator. |
| Existing customers | Existing Users: Quick Start Guide | Moving from the classic portal to the redesigned one: logging in with current credentials and finding familiar tools in the new layout. |
| Field employees | Mobile App: Quick Start Guide | Logging in, scanning QR codes, the time clock, completing tasks, and filling out forms. |
| Desk-based staff | Web App: Quick Start Guide | Logging in, choosing a site, navigating, and working with forms and drafts in the browser. |
| Site administrators | Kiosk: Site Administrator Quick Start | Turning a tablet or iPad into a shared check-in station and configuring it per site. |
| Kiosk users | Kiosk: User Quick Start | Clocking in and out and managing breaks on a shared device with a PIN and photo. |
Cross-links instead of repetition
Quick starts stay short by linking out to the full guides for Tasks, Forms, Scan Points, and Security Groups.
Tabs for dense interface tours
When a screen has many regions, ReadMe tabs walk through them one at a time instead of one long scroll.
Kept current
Most guides were last updated between March and June 2025, and edits continued through May 2026 as the product changed: a redesigned interface, customizable views and menus.
What this shows
Clear help for people with their hands full.
Audience analysis
Separate paths for administrators, desk staff, field employees, and kiosk users, so no one reads documentation written for someone else.
Information architecture
Four apps in one hub, each sidebar shaped like the app it documents.
Procedural writing
74 step-by-step guides with outcome summaries, exact UI labels, and a screenshot at each decision point.
Visual documentation
941 captures sized to the device they show, from narrow phone screens to full portal views.
Front end on a hosted platform
A custom HTML/CSS landing page inside ReadMe, plus versions repurposed as an app switcher.
Maintenance
Guides kept in step with a product redesign more than a year after launch.