HomeShowcaseServicesAboutContact
E2E HYBRID PROCESS // UX / UI / CX / PRODUCT DESIGNER = UI DEV / FRONTEND DEVELOPER

6-STAGE PRODUCT DESIGN & FRONTEND DEV WORKFLOW

Reviewing the complete lifecycle: every project unites human-centered discovery and Customer Experience (CX) mapping with clean, performant frontend engineering.

01 // DISCOVERY & CONTEXT
Problem & Business Alignment
Defining KPI targets, user friction points, and stakeholder constraints.
02 // RESEARCH & CX OPS
Journey Mapping & SA Realities
Empathy maps, intent triage, low-data usage & low-end Android device constraints.
03 // STRATEGY & IA
Information Architecture
Task flows, multi-language navigation, error recovery & WCAG accessibility.
04 // UI & DESIGN SYSTEMS
Figma UI & Token Architecture
High-contrast components, interactive prototypes & fintech/banking visual specs.
05 // FRONTEND DEV
Angular / React Engineering
Component libraries, API integration, offline-first PWA caching & clean Git handoff.
06 // TESTING & RESULTS
QA Validation & Impact
Usability testing, reduced data payloads, ticket deflection & shippable MVP delivery.
Showcase · Case studies · ENGAGE — EMPLOYEE ENGAGEMENT APP REDESIGN
Native Apps · Enterprise UX

ENGAGE — EMPLOYEE ENGAGEMENT APP REDESIGN

As part of the Vodacom HRIT employee-engagement redesign, I addressed the navigation and feature-discovery problems that made everyday tools difficult to find. The redesign introduced meaningful information architecture, search, favourites, a chatbot hub and a clearer profile experience.

ClientVodacom HRIT
Project year2021
Date14 October 2021
AddressMidrand, South Africa
RoleUX/UI | Product Designer
CategoryProduct Design · User Testing · UX Research · Value Proposition · Wireframes
ENGAGE — EMPLOYEE ENGAGEMENT APP REDESIGN cover
// Quick case-study scan

Make the employee app easier to understand and use

Problem

The landing page combined a logo loader, communication banner and feature tiles, but employees struggled to locate important tools.

My role

Product design across UX research, value proposition, wireframes, high-fidelity UI, testing and developer handoff.

Approach

Feedback + competitive analysis → information architecture → wireframes → Figma testing → implementation support.

Outcome

Search, meaningful groups, chatbot access, profile controls and favourites made feature discovery more direct.

Product DesignUX ResearchUser TestingCX / Employee ExperienceUI Development Handoff
ResearchFrameWireframeTestShip
Overview

Fix feature discovery before adding more features

As part of my role redesigning the Vodacom HRIT employee-engagement app, I focused on the navigation and discovery problems employees were already experiencing. The original landing page used a company-logo loader, a scrolling communication banner and tiles leading to features, articles and external apps — but users still struggled to find important tools.

The redesign rethought the information architecture and the value proposition of the home screen: help employees find what they need, understand where it belongs and return to the tools they use most.

01 · Research & analysis

Start with what employees could not find

I gathered feedback from existing users who found it difficult to locate key functions and often needed multiple steps to find what they needed. I also reviewed comparable employee-engagement products to understand common navigation and feature-discovery patterns.

User feedback

Confusion centred on navigation, feature discovery and knowing which tile contained the right tool.

Competitive analysis

Comparable products used search, meaningful categories and personal shortcuts to reduce cognitive load.

Design opportunity

Turn the landing page into a clear starting point rather than a directory of equal-weight tiles.

02 · Wireframing & prototyping

Group features around employee intent

I created low-fidelity wireframes to simplify the user flow and grouped tiles by the nature of the content or action.

Safety, Health & Wellbeing

Employee wellness, safety and support tools.

Policies & Information

Company policies, procedures and guidance.

Smart Buildings

Campus and building-related information.

Rewards & Benefits

Benefits and employee reward features.

Company Strategy

Strategy-focused content and communication.

Apps

Linked applications in one predictable section.

I also designed global search with filters for features, content and tools; a chatbot hub for available employee bots; a profile icon with a floating menu; and a favourites section below the scrolling banner.

03 · High-fidelity mockups & user testing

Test the behaviours that matter

After refining the wireframes with stakeholder and early-tester feedback, I created high-fidelity Figma mockups. Usability testing focused on search, grouped tiles and favourites. I observed how quickly users found a target feature, whether the grouping made sense and how confidently they understood the next action.

Original Engage home screen
Before — static feature grid
Original Engage home screen
Before — static feature grid
Redesigned Engage home screen
After — grouped and prioritised home
Engage high fidelity screen system
High-fidelity screen system
04 · Iterative refinement

Use feedback to sharpen hierarchy and personalisation

Based on user feedback, I refined visual hierarchy and consistency. The chatbot section gained clearer icons and discoverability; the profile menu expanded to show app and personal details; and favourites gave employees control over the tools they used most.

05 · Implementation & launch

Make the design buildable and measurable

I worked closely with developers, supplying design assets and documentation for layout, responsiveness and interactive states. After launch, I monitored user feedback and app analytics, looking for changes in feature discoverability and overall satisfaction.

Search

Locate features, content and tools directly.

Chatbot hub

Quick access to available chat-based tools.

Profile + favourites

Personal context and faster repeat access.

Results · What changed

More discoverable, more usable, more personal

Searcheasier feature discovery
Groupsmore intuitive navigation
Favouritesquicker access to frequent tools
14hi-fi screens shipped
Increased engagement

Search and categorised tiles reduced the effort needed to find useful tools.

Improved navigation

Meaningful grouping helped employees understand where features belonged.

Enhanced usability

Chatbots, profile controls and favourites made the experience more useful and personal.

The redesign made it easier for employees to access the tools they needed efficiently while giving the product a clearer foundation for future features.

06 · Constraints & learnings

What shaped the work

Constraints

Legacy feature sprawl, mixed native + web tiles, enterprise brand rules, and limited time with busy employees for testing.

Process gap closed

Started from real findability pain (not a visual refresh). Validated IA with sessions before hi-fi polish.

Learning

Favourites + search beat more home tiles. Personalisation reduces support load when the default home stays calm.

Handoff

Specs covered states, empty search, and chatbot entry so engineering didn’t invent edge cases.

Need this kind of product thinking?

Send me the problem, users and constraints. I’ll reply with a clear next step.

Start an enquiry →Back to all work