Case study 01Energy
Inspection app for technical field service
Complex inspection and work processes, translated into an app technicians understand on the go – on phone and tablet.
- Client
- Energy utility
- Timeline
- 2024–2025
- Role
- UI/UX designer
- Platform
- Mobile enterprise app · phone & tablet
- Tools
- Figma
01 Challenge
Field technicians work through inspections that follow fixed and often complex procedures. The app had to make these processes easy to follow – on phones and tablets, for people who don't work at a desk.
02 Insights
- Insight 01
Inspections rarely happen in one go
Technicians get interrupted, switch between sites and come back later. The app has to show at any time where they left off.
- Insight 02
Phone and tablet are both everyday tools
On the move the phone is enough, at the site people work on a tablet. Switching devices must not mean finding your way all over again.
- Insight 03
The technicians' language matters
Conversations made it clear: domain terms from daily work are second nature, abstract system terms are not.
03 Decisions
- 1← From insight 01
Checklist with visible progress
Every inspection is a guided checklist with progress (“7 of 12”). Open items stay marked, so people can pick up right where they left off.
- 2← From insight 02
One layout system for both devices
On tablet, list and detail sit side by side; on phone they stack. Same components, same order, same wording.
- 3← From insight 03
Clear statuses instead of system jargon
Three unambiguous states – OK, defect, open – shown with colour and text, named in the field team's own words.
04 User flow
Completing an inspection
- 01Open job
- 02Select site
- 03Work through checklist◇ Defect found?Add photo & note ↩
- 04Review summary
- 05Complete & submit
05 Wireframes
↔ Drag to scroll
Simplified, generalised representation – no original screens, data or client content.
06 Design system
Simplified, generalised representation – no original screens, data or client content.
Colours
- amber-500#FFB21EPrimary action, progress
- ink-900#1B1400Text, icons
- surface-50#FFF8E8Surfaces, cards
- status-ok#1F9D55OK
- status-defect#D93A2BDefect
- status-open#8A8578Open
Typography
- Display · 28/34 · 700Today's jobs
- Title · 20/28 · 600Site 14
- Body · 16/24 · 400Visual check for damage
- Label · 13/16 · 6007 OF 12 CHECKED
Spacing
- 4
- 8
- 12
- 16
- 24
- 32
Radius
Components
Large touch targets (48 px min.) and status always shown with colour and text.
07 Approach
- 1
Understanding the users
User research and close alignment with field technicians as the basis for designing the flows.
- 2
Structuring processes
Clear interfaces for inspection and work processes – complex underneath, simple to operate.
- 3
Building the design system
A consistent system of reusable Figma components, responsive across phones and tablets.
- 4
Prototypes & handoff
Interactive prototypes to validate flows before build, plus close collaboration with the development team.
08 Deliverables
- Complete UI/UX of the app
- Design system for phone & tablet
- Component library in Figma
- Interactive prototypes
- Responsive layouts for different devices
Happy to show more in person.
I don't share this client's name or original screens publicly. In a call I'll gladly walk you through designs, prototypes and decisions.