Sona set out to build a roster‑management web application targeting UK restaurants and hospitals. The goal was to replace clunky legacy systems with a modern, easy‑to‑use interface for both managers and front‑line workers—ultimately converting pilot users into paying customers.
Research & Analysis
Stakeholder Workshops
Weekly alignment calls with Richard U. to define brand pillars and technical constraints.
Competitive Audit
Benchmarked RotaMaster, ShiftEase, and legacy spreadsheet workflows.
User Interviews
Spoke with 3 pilot sites (2 restaurants, 1 hospital) to uncover:
Pain: manual spreadsheet edits, no in‑app messaging, no absence tracking
Desire: instant notifications, drag‑and‑drop shift assignment
Insights
A unified dashboard would drive adoption.
Managers valued clear, at‑a‑glance analytics per team.
Role & Responsibilities
UI & Interaction Design: Wireframes → high‑fidelity prototypes in Figma
Component Library: Tailwind CSS–based buttons, tables, modals for rapid dev
Graphics: Site mockups, custom icons, data‑viz components
Validation: Weekly design reviews with engineers; bi‑weekly prototype demos with prospects
Design Process
1. Ideation & Wireframing
Mapped core flows:
Create & publish weekly rotas
Approve holiday/absence requests
In‑app messaging & notifications
Low‑fi sketches validated with stakeholders in <1 week
2. Visual Design & Prototyping
Built clickable high‑fi prototypes showcasing both MVP features and “future” modules (analytics dashboard, multi‑team support)
Branded UI using Sona’s existing colors, typography, and logo
3. Developer Handoff
Organized Figma library with clear naming conventions
Annotated components with Tailwind token references for faster CSS implementation
4. Iteration & Testing
Deployed prototypes for 3 pilot clients
Collected feedback on usability, error states, and responsive behavior
Refined layouts, labeling, and mobile breakpoints over 4 sprint cycles
Solution Highlights
Drag‑and‑drop rota — Reduces scheduling errors by 40%
Holiday & absence management — Centralizes requests; no more email chains
In‑app messaging — Instant shift‑change alerts for staff
Analytics dashboard — At‑a‑glance KPIs on labour costs and coverage
Outcomes & Metrics
Customer Acquisition: 30 + paying clients within 6 months
Efficiency Gains: 50% reduction in scheduling time vs. legacy tools
Dev Velocity: 30% faster front‑end builds using Tailwind components
Stakeholder Praise: “Felt like seeing a live product, not just slides.” — Sales Lead
Lessons Learned
Scalable Design: Early investment in a component library paid off as features (analytics, messaging) were added.
Lean Feedback Loops: Weekly demos kept scope in check and built stakeholder trust.
Balancing Speed & Quality: In a startup, atomic design principles help maintain consistency under tight timelines.
