Customisation of Salesforce for Call Center Agents

Problem to solve

The design request was to provide information for Aol call center agents about products of interest to a customer, but also allow call center agents to easily find related Aol services and products. There was also the additional need to migrate from the previous CRM tool Gandalf, to Salesforce.

User research

Shadowed call agents for one day to listen in on calls and observe their current work flow:

IMG_1737

We synthesized our findings:

Brainstorm

I created a mind map to categorise the findings which were separated out into topics related to customers, call agents, environment and team.

Discovery Phase – User Research (PDF)

Sketches

As call center agent did not have large screens and had to open multiple programs at a time, ensuring the interface could fit in a small screen was a priority. By utilising an existing template of having expandable side panels, it gave call center agents the flexibility of displaying the up-sell of other AOL products when it is needed.

Sketch - round 2

Sketch - round 2

Sketch - round 2

Sketch - round 1

Design Phase 1 – Sketches WIP (PDF)

Research and war room

Salesforce - comparative

Salesforce - Flows

Designing with the smallest screen resolution to show the viewport size when interacting with the expandable side panel:

Component – Custom console component1

User testing

Wireframes in prototype for user testing round 1

wireframe

Prototype for usability testing round 2

Screen Shot 2015-12-08 at 15.12.24

Screen Shot 2015-12-08 at 15.11.05

Design phase 1 – User Feedback (PDF)

Mentorship for high school interns

For six weeks, I teamed up with a co-worker to help introduce UX and UI to five talented high school students completing an internship with the #builtbygirls #girlswhocode front-end developer program.

Every week we planned fun, working sessions where we sketched, discussed and analyzed the design and content. More importantly, we emphasised the importance of collaboration and teamwork.

It was nothing short of an amazing experience as they never ceased to impress us on how swiftly they could adapt and “fill in the gaps” with low fidelity wireframes and missing design assets. On a weekly basis we would witness their progress in leaps and bounds with their ability to prioritize important questions, and also fearlessly communicate their opinions.

builtbygirls Cambio

unnamed6

unnamed-5

unnameda

Design workshop

BBG at Facebook

It was a very valuable and rewarding experience. We gained a lot of (and somewhat frightening) insight in the new wave of talent coming into our industry.

Combining two mobile apps for a unified experience

Commonwealth Bank had two mobile apps where the Commbank app was used by majority of CBA’S mobile customers despite being limited to features that Kaching provided. Due to the overall usability and functionality of Kaching, the decision was made to align Kaching’s designs to the Commbank app to unify the two apps.

Working within a team of 3-5 UX designers, a concept was created to introduce a dashboard which surfaced payment options as they were the most used features (which also included Kaching’s social payments) and an off-canvas navigation to separate the users’ tasks.

The work was laid out to plan and sort the screens which required changes as well as the measure of how much effort it would involve.
sort

Flows for existing screens which required header changes or new component designs were included.
Flow_Pay_someone_Mobile_and_email

Flow_Transfer_between_accounts

New flows were created which included an improved registration process and on-boarding to the new app.
uniapp_flow

A specification document was produced for all screens with annotations and interaction details.
uniapp_documentation

Previous design of CBA’s app:
479859_601456163201034_2002564817_n-640x426

A fresh look and feel for the CBA app with lifestyle imagery.
Visual designs are not my work.
screen568x568