RJ Villaflor
  • Portfolio
  • Resume
  • About me
  • Contact me
Picture

Process Overview

End-to-End UX Design Process

This is my Carnegie Mellon Master of Human-Computer Interaction capstone project. This project spans 8 months in 2017 and encompasses various phases of an end-to-end user experience design process. I worked with three other students, making us a total team of 4. My responsibilities include project management and product design.
Click to jump to process section:
  1. The Client
  2. Research & Synthesis
  3. Ideation Iterations
  4. Finalizing the Concept​
  5. User Stories ​
  6. Information Architecture
  7. Wireframing Iterations
 

The Client

A Contact Center Product Provider in Lisbon, Portugal

Collab approached us asking to provide the best user experience for Nubitalk, their cloud-based contact center management and administration tool. It was up to us to figure out what exactly that meant and how to do it.
 

Research & Synthesis

Gathering, Organizing, and Understanding Our Findings

Where?
Picture
Who?
Picture
How?
Picture
How did these contact center work and who used Nubitalk?
Picture
Key Insights
  1. ​Everything in the contact center and customer interactions depend on the agents' performance.​
  2. Administrators and managers want their agents to work as effectively and efficiently as possible.
​Ideation Objectives
  1. ​​Focus on agents' performance.
  2. Allow agents to work as effectively and efficiently as possible (and prove it to administrators).
 

​Ideation Iterations

Moving from Fixing 'Now' to Creating 'Tomorrow'

We generated some initial concepts. We communicated to our client that each idea from this first iteration only solved singular pain-points in the current system. We didn't want to do this. As one contact center manager we interviewed said:
"[Contact center system providers] need to stop building new ​features and fixes on top of old platforms."
Picture
We took the themes in our affinity diagram from our research and generated "how-might-we's." Below is one example.
Picture
Picture
Finally, we took 10 minutes to ideate on each how-might-we using improv and mash-ups emphasizing "yes-and." As a result, we generated the following concepts.
Two-Way Rating System
Customers rate agents, agents rate customers
Picture
Speech Analytics
​This concept would listen/read the customer and provide feedback
Picture
Work-from-Home
A system for contact center agents to work from anywhere
Picture
Matching System and Incentives
Assigning and incentivizing campaigns for agents
Picture
Intelligent Voice Assistant
Performing tedious tasks through voice
Picture
Immersive Empathy
A VR solution that shows agents what customers see
Picture
 

Finalizing the Concept

What will we design?

We tested our concepts with one agent, one reseller, and one administrator through three different webcam speed-dating sessions.
Picture
By taking concepts 1, 2, and part of 3 forward, we decided to design a product that will:
Allow customers to rate agents and agents to rate customers to incentivize agent-customer interactions and...

​Transcribe and save both agents' and customers' words to facilitate agent-customer interaction
We iterate more on this concept (especially the second part of it) in the next section.
 

​User Stories

Exploring Possible Situations

In these stories cases, one stood out more than the others. In that story:

The system allows an administrator to easily start a profitable campaign based on speech analytics.

This brought us to the second iteration of our final-ish concept and the second iteration of user stories.
Picture
In this storyboard (that encompasses multiple stories):
​
  1. Agents can see customer rating average
  2. Agents can see transcriptions
  3. The agent can use live-generated scripts
  4. This can happen in chat or email
  5. Both the agent and the customer can rate
  6. The ratings and transcriptions are sent to the cloud, synthesized, and communicated to administrators
Picture
 

Information Architecture

What belongs where?

Picture
Picture

​Wireframing Iterations

Visualizing the 'Props' to Our Stories

Paper-Prototyping
Picture
Picture
Picture
Mid-Fidelity Wireframing & Prototyping
Picture
Picture
Picture
High-Fidelity Wireframing & Prototyping
Picture
Picture
Picture
Return to Portfolio
Copyright © 2025
  • Portfolio
  • Resume
  • About me
  • Contact me