Click to Call

Our goal was to make speaking to a customer service advisor easier. We wanted to introduce a one-click button solution, which dials out to the call centre. Working closely with the product owner and UX researchers as a UX and UI designer. 

The project had a strict set of acceptance criteria for three different scenarios we wanted to implement. After one minute of inactivity in key pain point journies which we identified through analytics, three minutes across the wider app and a static button in the help section.

Leaning on existing design patterns, I created user flows for each variant, these were iterated upon in review with the product team, and our UX researcher friends. 

Our main challenge was the call handoff procedure and then looping a customer back into the app, as we needed to use the native phone app. We conducted some research, looking at other examples of apps with C2C features, and working closely with the app development team to define what's possible. We concluded, as the above flows show, that we can use a hook feature to pull customers back into the app automatically once the call has finished.

We produced some low-fidelity wireframes which we used to create a prototype in Principle, a quick and easy prototyping/animation software. Which the UX Reseach team took to the streets of London to perform guerilla testing. We iterated and tested twice. 

Following guerilla testing, we learned a lot about the interaction, we had to be quite pronounced with the animation so the user could actually see it. We were at a stage where we were confident with how the feature worked. 

After an initial pass of the UI design, which follows the pre-defined MyEE UI app pattern, the UX research team and I scheduled some lab testing with a third party user research agency. To further validate the results before releasing the feature. 
 

Group 3Group 3

I worked on a further round of UI design following lab testing, which was reviewed, approved, and handed over to the app development team. 

App development support came in the form of UI spec documentation, such as typography sizing, spacing, and animation timeline guidelines.