01The challenge
Care agents need to find the right account fast, verify the caller correctly, and see everything about the customer in one place, while the conversation is happening.
Agents also must not disclose personal information to an unverified caller.
02Approach
From wireframes to UI
Designed user interfaces for the web application from wireframes provided by the business team (Sketch, InVision).
Build what you design
Developed the UIs in HTML5, CSS3, Bootstrap 3 and Angular, and shared code across the team with Git.
Test everywhere
Ran cross-browser and cross-device testing.
03What I did
- Account lookup screen with first/last name, address, account number and email search
- Post-login verification flow with reasons for continuing with an unverified user
- Account overview with notes, outages, devices, billing and troubleshooting
- Front-end development in HTML5, CSS3, Bootstrap 3 and Angular
04Key design decisions
Verification before disclosure
The verification step lists exactly what may and may not be shared with an unverified caller, right where the agent decides.
Overview as a timeline
Recent and upcoming activity for outages, devices, billing and tickets sit side by side so the agent sees the whole story at once.
05Gallery
Screens shown at review quality; click any image to zoom. Higher-resolution versions are available on request.
06Outcome
The account lookup wireframes and HTML UIs were finalised and approved for further development by the business team.