Vodacom
Engage
Redesigning a static icon-grid into a personalised, card-based employee experience — improving navigation, feature discovery, and daily engagement at scale.
The Engage app had been Vodacom's internal employee platform since 2019 — HR services, leave, IT helpdesk, food menus, boardroom bookings, Gift & Hospitality, and more. By 2021 it had grown feature-by-feature into a 9-tile icon grid with no hierarchy, no personalisation, and no way to surface what was relevant to you. The redesign brief was simple: employees should find what they need faster, and the app should feel like it knows who they are.
"The old app wasn't broken — it was invisible. Every feature was one tap from the home screen but two minutes of searching. The redesign wasn't about adding more; it was about making the right things appear at the right time for the right person. That required rethinking the information architecture, the visual hierarchy, and what 'personalisation' actually means inside an enterprise app."
Lulamile Mkhungela
Vodacom Group · 2021–2022
(01)
THE OLD
DESIGN
The original Engage app was built between 2019–2020 and followed a familiar enterprise mobile pattern: a branded header, a hero image section at the top of each module, and a grid of icon tiles below it. Every section — Home, Connect, Human Resources, Food Menu, Facilities Requests, Gift & Hospitality, Boardroom Check-In, AskIT — followed the same template.
Each section had its own red-header page with a large hero image and a 2×4 icon grid of sub-actions. Navigation was purely hierarchical — you had to know which top-level section held what you needed. There was no search, no shortcuts, no personalisation, and no way to surface what was relevant to your role or location. The app was honest about its own architecture, but employees weren't using it that way.
What it was
A branded welcome section with a hero image and 9 icon tiles below — Connect, Employee Directory, Human Resources, Boardroom Bookings, Boardroom Check-In, Facilities Requests, askIT, Food Menu, Gift & Hospitality. All tiles were equal weight. There was no hierarchy, no indication of what was most used or most relevant, and no quick access to anything outside these 9 categories.
The pattern repeated everywhere
Every module used the same structure: red header, hero image, 2×2 or 2×3 icon grid. HR showed — HR Policies, Rewards and Benefits, Vodacom University, Success Factors. The visual pattern made every section feel identical regardless of content type. Sub-features that were frequently used had no priority over rarely-accessed ones.
No context, no guidance
Gift & Hospitality offered 5 sub-actions — Giving Internal Gift, Giving External Gift, Receiving External Gift, Giving Hospitality, Receiving Hospitality. Each was an icon tile with a label. Nothing communicated policy, thresholds, or whether an action was required at all. First-time users had no way to know which option applied to their situation.
Bare-bones form UX
Forms across the app — Facilities Requests, Gift submissions, COVID screening — used plain text inputs with no visual grouping, no inline validation, no progress indication, and no confirmation state. Required fields weren't marked. Upload actions offered no guidance on file type or size. The form experience felt like a web portal transposed onto a phone.
(02)
PROBLEMS
IDENTIFIED
Through employee interviews, support ticket analysis, and direct observation, I catalogued the recurring pain points that motivated the redesign:
-
01
No feature hierarchyAll 9 home tiles were rendered at equal visual weight. Employees who checked their leave balance daily had the same experience as someone accessing Boardroom Bookings once a month. The app treated all features as equally important to all people at all times.
-
02
No personalisation layerThe app showed the same home screen to a call centre agent in Johannesburg and a network engineer in Cape Town. There was no role-based filtering, no location-aware content, and no way to save frequently-used actions. Employees resorted to remembering navigation paths rather than using the app intuitively.
-
03
No searchIf you didn't know which of the 9 categories your question lived in, you had to explore each one. This was the primary driver of IT helpdesk tickets — employees raising tickets for things the app could resolve, if only they could find them.
-
04
Repetitive visual templateEvery module used the same red-header + hero image + icon grid pattern, regardless of content type. HR Policies, Food Menus, and Boardroom Bookings all looked identical. The pattern prevented the app from communicating which sections were content-heavy vs action-driven vs time-sensitive.
-
05
Form UX gapsForms had no progress indicators, no inline validation, no field-level guidance, and no confirmation states. The Facilities Request and Gift & Hospitality flows were particularly error-prone, generating a disproportionate share of support contacts from users who were unsure if their submission had been received.
-
06
No contextual contentAnnouncements, news, Wellbeing initiatives, and Rewards campaigns had no dedicated home on the home screen. They were buried inside individual modules. An employee would have to navigate into Human Resources to find a policy update, or into Connect to see a company announcement — even when those items were time-sensitive.
(01)
DESIGN
DECISIONS
The redesign wasn't a visual refresh — it was an architectural rethink. Every change was grounded in a specific problem identified during discovery. Below is the decision log: what changed, why, and what principle guided the decision.
| Area | Old | New | Type |
|---|---|---|---|
| Home screen structure | 9 equal-weight icon tiles, static for all usersNo hierarchy, no context, no user signal | Card-based sections: Rewards4U banner, My Favourites, Company Strategy, Wellbeing Hub, Recent Interactions. Each card type has its own visual language and load priority. | Navigation |
| Personalisation | Identical experience for all employeesNo role, location, or behaviour awareness | Personalised greeting ("Hi Claire"), avatar with customisation, My Favourites (user-defined shortcuts), Recent Interactions (behaviour-driven surface), role-tagged profile with department and employee number. | Feature |
| Navigation model | Top-level tab + icon grid per moduleUser must know where to look | Bottom navigation bar (Home, Directory, Search, Rewards4U, Help) + contextual deep-links from cards. Search surfaces features by keyword — no need to know which section they live in. | Navigation |
| Search | No search | Global search across all features, policies, and employee directory. Dedicated Search tab in bottom nav. Eliminates the primary source of IT support tickets — employees unable to find features. | Feature |
| Visual design system | White background, solid red header bar, white icon tiles with red fills, Vodafone Red as dominant UI colourBrand-heavy but not content-friendly | Dark charcoal surface (#1C1C1E) with tonal red accents, card-based layout with subtle shadows, content photography integrated into cards rather than isolated hero images. Brand is present but no longer dominant over content. | Visual |
| Typography hierarchy | Section title + icon label only. No body copy, no description, no context. | 3-level hierarchy: section header, card title, supporting body. Cards carry enough information to act on without tapping in — e.g. "Wellbeing Hub: All the support you need to be your best self" is readable on the home screen. | Visual |
| Content surfacing | Announcements, wellbeing content, and rewards buried inside modules | Home screen surfaces timely content via Rewards4U banner (Rewards4U new offers), Wellbeing Hub card (contextual health content), and a What's New section. Time-sensitive content no longer requires navigation. | Navigation |
| Profile & settings | No user profile, no settings panel, language buried in app settings | Profile panel shows name, title, department, employee number, language preference, Privacy Statement link, Total Reward Statements access. Avatar customisation with predefined illustrated options. Single-tap language change. | Feature |
| Favourites | No favourites or shortcut mechanism | My Favourites — a user-curated section on the home screen. Users add their most-used features once; they appear as quick-access tiles above the main content area. Persistent across sessions. | Feature |
| Form patterns | Plain text fields, no validation, no progress, no confirmation states | Grouped form fields, inline validation, step progress bar, document checklist shown upfront (not at upload step), animated confirmation toast. COVID pre-screening redesigned as a multi-step guided form with conditional branching. | UX Pattern |
| COVID screening (new feature) | Not present in original app | Mandatory Pre-Screening flow added: multi-step form with health conditions checklist, work location dropdown, transport mode, consent checkboxes. Designed with conditional branching for health flags. Full mobile-first responsive layout. | Feature |
(02)
RATIONALE
The decisions above were governed by four design principles that emerged from the research phase:
-
01
Surface before searchEmployees shouldn't have to know the app's architecture to find what they need. The home screen redesign was guided by a single question: "What does this person most likely need right now?" — answered by role, behaviour, time of day, and recent activity. Cards that don't require navigation at all are better than navigation that's one tap faster.
-
02
Personalisation earns trustAn app that knows your name and shows your recent payslip date feels like a tool. An app that shows the same home screen to everyone feels like a noticeboard. The personalisation layer wasn't cosmetic — it was the difference between employees checking the app first vs calling IT first.
-
03
Brand serves content, not the other way aroundThe old design made Vodafone Red the hero on every screen. The redesign inverted this — brand colour is used as an accent to guide attention, not as a background that competes with content. Dark surface cards let photography and type do the communicating, with brand expressed through the Vodafone swoosh and key CTAs.
-
04
Forms are conversations, not data entryEvery form in the old app felt like a database schema transposed onto a phone. The redesign treated forms as guided conversations: one decision at a time, context shown upfront, progress made visible, and completion celebrated. The COVID screening flow was the clearest expression of this — a complex conditional form made to feel like a 3-minute check-in.
(01)
THE NEW
DESIGN
The redesigned Engage app moved from a static icon-grid to a contextual, card-based experience with a personalised home screen, global search, bottom navigation, and an expanded feature set built around real employee workflows.
The new home screen leads with a personalised greeting and the user's profile context, followed by a Rewards4U promotional banner, My Favourites (user-curated shortcuts), a Company Strategy section with Our Purpose and Our Strategy, and a Wellbeing Hub card. The overall visual language shifted from red-dominant to dark charcoal with red accents — a change that reduced visual fatigue on daily-use screens while keeping the Vodacom brand present and recognisable.
(02)
KEY
SCREENS
The new design introduced 6 core screen types, each designed for a specific employee need:
-
01
Personalised HomeGreeting with user's name and role, Rewards4U notification badge, search shortcut, and a contextual card stack. The home screen is the only screen an employee needs to visit to understand what's new, what's relevant, and what they've been doing recently.
-
02
My FavouritesA user-managed section at the top of the home content area. Employees add their own frequently-used features — Our Purpose, New Workflow, Vodacom Note — without any admin intervention. On first use, an empty state offers guided suggestions. Configured once, persisted across sessions.
-
03
Profile PanelA slide-in profile sheet showing full employee context: name, title, department, employee number, email. Quick-access links to Privacy Statement and Total Reward Statements. Language switcher at a single tap. Logout at the bottom. Avatar customisation with a dedicated update flow.
-
04
Avatar CustomisationA new onboarding moment: employees can personalise their app identity with an illustrated avatar selector. The flow uses a two-step pattern — cancel/update confirmation — so changes feel deliberate. Avatar appears in the profile panel and as the home screen greeting avatar.
-
05
Navigate Engage OverlayA full-screen navigation overlay accessible from the home screen that organises all features into top-level categories: Company Strategy (My Tasks, Our Strategy), Connect (sub-features). This replaces the old 9-tile home grid for deep-navigation use cases while keeping the home screen clean for frequent tasks.
-
06
Rewards4U Banner & TabA dedicated tab in the bottom navigation for Rewards4U — Vodacom's employee rewards and recognition platform. A home screen banner shows current promotions with a "Learn more" CTA. Rewards are now a first-class feature rather than a tile buried inside Human Resources.
(03)
PROCESS
The redesign followed a research-first, test-early approach across three phases over approximately 4 months:
-
01
Discovery — support tickets + employee interviewsStarted with 3 months of IT helpdesk tickets. Identified the top query categories and mapped them against the current navigation to find where the app was failing. Spoke to 6 employees across engineering, HR, finance, and campus operations. Built an emotional journey map from "opens app" to "gives up and calls IT."
-
02
IA redesign — card sorting + tree testingRan a card sort with 12 employees to understand their mental model of feature groupings. The results challenged several assumptions about what "belonged together." Used findings to redesign the information architecture: 6 top-level categories replacing the flat 9-tile grid, with a new search layer as a navigation fallback.
-
03
Visual direction — dark theme explorationTested two directions in parallel: a refreshed version of the existing white/red design, and a dark charcoal direction. The dark theme tested significantly better for daily use — employees felt it was easier on the eyes during extended use and felt more modern and intentional. The dark direction was selected and developed through hi-fi.
-
04
Wireframing — mid-fi through hi-fi in FigmaBuilt wireframes for 14 screens, progressing from lo-fi structure through mid-fi component validation to hi-fi with the Vodacom brand applied. Used auto-layout components throughout to make the hand-off a single Figma file rather than a collection of static artboards.
-
05
Prototype testing — 2 rounds, 10 sessionsRound 1 with 5 employees: tested navigation to 4 features and the profile customisation flow. Round 2 with 5 employees: tested the COVID screening flow and the Favourites management flow. Net findings: search was the most-valued addition, and avatar customisation drove the highest positive sentiment response.
-
06
Design system contributionAll new component patterns contributed back to the shared Vodacom design library: dark card variants, bottom navigation component, profile panel shell, avatar picker component, Rewards4U banner, and the COVID form pattern (multi-step with conditional branching).
(01)
DELIVERABLES
- IA redesign — card sort with 12 employees, tree-test validation, new 6-category structure replacing 9-tile flat grid
- 14 hi-fi screens — Home, Profile Panel, Avatar Customisation (2 states), My Favourites, Navigate Overlay, HR module, Connect module, Food Menu, Facilities Request, Gift & Hospitality, COVID Pre-Screening (4-step flow), Search, Rewards4U
- Clickable Figma prototype — 5 core flows tested across 2 rounds, 10 sessions
- COVID Pre-Screening flow — full conditional form with health conditions, work location, transport, and consent — designed as a guided multi-step conversation
- Design system contributions — dark card variants, bottom nav component, profile panel shell, avatar picker, Rewards4U banner, COVID form pattern
- Usability test report (2 rounds) — 10 sessions, key findings and scope changes documented before handoff
- Annotated dev handoff — all screens with spacing, colour tokens, interaction specs, and component references
(02)
OUTCOMES
The redesigned Engage launched in 2022. The IT support team reported a meaningful reduction in navigation-related tickets — the primary pain point the redesign was built to address. Employee feedback gathered post-launch highlighted search and personalisation as the most-valued additions.
(03)
LESSONS
Three things I'd carry into any enterprise mobile redesign:
-
01
Support tickets are better research than surveysThe IT helpdesk data told me exactly where the app was failing — not what employees said they wanted, but what they actually couldn't do. Starting with 3 months of tickets gave the redesign a concrete, defensible priority list that stakeholders couldn't argue with.
-
02
Personalisation needs a behaviour signal, not a settings screenThe My Favourites feature worked because employees curated it themselves — it didn't require an admin to configure roles and permissions. When personalisation requires user action to activate, it tends to be used by the people who need it most and ignored by everyone else. That's fine. The goal was relevance, not uniformity.
-
03
Dark themes need a strong rationale, not just an aesthetic preferenceThe dark direction was chosen because it tested better for daily use — less visual fatigue, higher perceived modernity. But it also created new constraints: photography needed to work against dark surfaces, the Vodacom red needed careful handling to avoid vibrating against dark backgrounds, and text contrast had to be re-validated at every tier. The decision was worth it, but it required deliberate follow-through.
