iOS app prototype
Lead UI/UX/IxD Designer
Two Senior UI/UX designers, two developer interns, business stakeholders
JTBD analysis, market analysis, rapid prototyping
Manulife employees often hear comments from customers in everyday conversations about their experience with its products and services. Instead of being passive listeners, employees should be empowered to actively capture and submit customers' comments and be their champions.
Within 6 weeks, we designed and helped launch a beta version of a functional mobile app and within 3 months saw an organization-wide release of a fully-integrated app that employees are now using in the wild.
You’re out at a barbeque party, catching up with friends over a smokey meal, when the conversation shifts over to work. Getting reminded about where you work, one of your friends decides to share a quick story with you about how she’s had a tough time using your company’s mobile app.
“I tried submitting my insurance claim for my last massage but I had no idea whether it went through or not,” she says.
“Oh yeah,” jumps in another friend. “I’ve had the same issue. Whenever I could even remember my login password!”
You chuckle nervously and tell them you understand and have heard about those issues before.
If only I could turn that conversation around and do something useful with these complaints, you think to yourself.
Enter Zoom, a strategic initiative and digital solution for the above problem. Given that 1 in 3 Canadians are said to be a customer of Manulife, the Customer Experience team decided it was about time for all employees to be empowered to be an advocate for the customer and company.
The team approached us at the RED Lab to help them crystalize the need and turn it into a compelling prototype that could be used to capture and escalate customer issues while out in public. The team was looking for something they could circulate around to other parts of the organization to demonstrate the value of a digital solution to this problem.
Their next big meeting with senior execs was scheduled for 6 weeks away; which became our deadline. We dived in.
In recent months I had been evangelizing the Jobs-to-be-Done framework as a way to capture and understand problems from a customer’s perspective. I saw an opportunity here to use it to good effect and so together we finessed some Jobs Stories to capture the high-level needs for the end-user, in this case, Manulife employees:
In this process we were able to identify that it wasn't enough to capture and respond to complaints; any compliments we were getting should also be recorded and shared with internal folks. And so the idea was elevated from being merely a tool of support to being a tool for advocacy that championed the "voice of the customer".
In order to provide a little more focus on the approach to the solution, based on the kickoff talks with the project stakeholders, we captured the following design principles for a mobile app solution:
1) Must be FUN to use (Can’t wait to try it out - “neato” factor)
2) Must be QUICK and EASY (doesn’t become awkward or tedious)
3) Prioritize making a PERSONAL CONNECTION over a detailed report (this is just a conversation-starter)
4) Allows for FOLLOW-UP (need to close the loop)
For further inspiration, we took a broader look at customer service oriented experiences and apps. The one that really stood out to me since its launch was Cassette, a user interview and research tool. I was inspired by its interaction model and how it made recording and tagging audio files easy and engaging.
I wanted to replicate this interaction model in our use case of recording customer comments to make the experience effortless and enjoyable and not detract from the human act of engaging with the customer.
When working on problems that have some specific actors who are playing specific parts and the entire end-to-end experience is necessary to understand, I like drawing out a process map. This could even double as a rough customer journey map to some extent.
And so, in this case, I drew out a map of how I envisioned the process of using the Zoom app would go, both on the field with the customer, and how it would be routed through the proper internal channels. I circulated it among the team and used it to generate some conversations on anticipated technical hurdles that we would have to get in front of, including finding out which internal teams needed to get involved. It was collaboratively tweaked until it made sense to everyone, even if from a high-level.
After a series of team Crazy 8 exercises, we landed upon a solution I had proposed. We aimed to provide an experience where completing the process of recording, tagging, and submitting of comments should take no longer than a minute long.
I also wanted it to be engaging to the employee-turned-customer-advocate so as to encourage repeat usage. In particular, I felt the beginning comment recording function should have a playful interaction that’s always a nice visual treat for a customer advocate to experience and it should be book-ended with another fun animation when a comment has been finally submitted.
I envisioned the initial animation to mimic a type of expanding wheel, inspired by the Material Design floating action buttons. And once an issue has been submitted, I envisioned a paper airplane to swing by the screen, signalling a job well done and neatly sent in.
I put together an interactive prototype in Principle so as to demonstrate the motion design ideas and how they all come together to provide an engaging and quick data capture and customer engagement tool.
It isn't enough to just capture customer comments - if neither the customer nor the employee sees any follow-ups to the reported issues, the credibility of the solution would be tarnished. And so I envisioned there would have to be a History section where an employee would be able to see the status of issues that were submitted and whether the customer was reached out to or not.
The remaining work of turning these concepts into high-fidelity screens were split up between myself and the other designer on the team. When we had enough of the screens mocked up, we worked closely with the developers on the team to then help them code out a simple iOS app that used a test Firebase backend. It was functional enough to test! Using Zeplin to communicate screen specs greatly helped speed up this process.
The senior stakeholders were keen to get the coded prototype put into the hands of other managers and directors. We set up a TestFlight account and loaded up the prototype on around 50 senior executives’ phones.
Over a week’s worth of testing, we were able to further iron out some kinks, most of which were in how feedback was being classified. We adjusted the taxonomy of some categories accordingly and made the history feature easier to use.
After a few iterations, we brought the prototype to a point where the Customer Experience team was able to confidently demonstrate its value and circulate it around to other execs and drum up excitement. It was time to spread the word more broadly to the organization.
While conversations were started with internal development teams to productionize the prototype we had designed and built, I was also enlisted to help evangelize the solution internally. I joined the team to set up a booth inside the organization and communicate the value of what we were building. Zoom was received well by a number of people, many of whom were excited to see the company taking a firm footing in empowering them to advocate for the customer.
I’m happy to say that within 3 months of starting to work on the project, the app has now been launched widely in the organization with a lot of fanfare, including backing from the CEO.
It’s exciting to see the solution being taken out onto the streets and being used to turn awkward conversations with customers and turn them into delightful moments. It's one thing to tell our customers that we listen to what they have to say, but it's a whole other ball game to show it!
As an added bonus, check out this marketing video that was created by our team to help spread the word about Zoom internally across the organization.
The design portion of the project, from ideation to coded prototype, took around 3 weeks of work. During this time, I learned a number of lessons, some of which are the following:
1) Even though tight deadlines might feel overwhelming, it helps to break down a problem into its constituent pieces and tackle them bit by bit.
2) Engage developers early and often in order to ensure what you’re designing isn’t completely impossible. There still exists a considerable gap between designing motion versus implementing it, and there are no short cuts (yet) for having clear conversations with developers. We knew from the get-go that our solution had to eventually integrate with the company’s tech stack so we tempered a lot of our design and technical decisions.
3) Building excitement for a solution while designing it is as important as the actual design work itself. But it’ll likely take a lot of work too, so ideally you want people who are dedicated to those activities so that you can concentrate more on the designs themselves.