top of page

Product Design: Scorpion - Customer Experience Center 

Work

CXC is a desktop-only internal product that provides chat services to clients who opted for partially or full-service customer support from Scorpion agents. The service demanded that agents could quickly find client information so they could pass it onto customers on the chat. A clean and intuitive UX flow and UI design was necessary. Product decided we would start with the login and chat dashboard screens.

The Challenge

​

Though the content and basic elements were already established, the existing design was outdated, the layout was convoluted and poorly arranged. Elements were scattered all over the screen and they begged to be organized with a hierarchy in mind. 

Portfolio-others-old-new.png

Wireframes

 

CXC needed a complete redesign: A new, friendlier UX and better UI elements: components, icons, CSS styles needed to be created from the ground up.

Portfolio-others-wires.png

Inspiration Board

​

While working on the new layout, I started collecting some ideas to apply to the new UI

Styles

 

I created new patterns and styles, but to save some time, I reused existing iconography from Scorpion’s master library. 

Hi-Def Comps

 

Finally, I completed the dashboard applying the styles.  

Components

​

Once the hi-def screen was approved, the next step was to breakdown the designs into individual components, create and annotate their expected behaviors for the front-end developer team.

User Testing
​

Though the audience was small, we still wanted to make sure the new design met the agents’ day-to-day needs. It was very important that they understood the new UX/UI patterns and that they could access the client’s information very quickly.

 

Preparation

 

  • Audience: 45-50 agents

  • Intro questionnaire: for participants selection – 8 questions

  • I built a prototype for each of the required tasks - Tool: Adobe XD I

  • Information Goals:

    • Is the user able to login?

    • Is the user able to open a new communication/chat?

    • Is the user able to find the knowledge base tab?

    • Is the user able to locate a specific type of information in ‘knowledge base’?

    • Is the user able to see ‘important communication’ immediately?

    • Is user able to re-access ‘important communication’ once it has been closed?

 

Interviews
 

  • Sessions: 8 half-hour sessions over 3 days

  • Participants: 8 agents (3 in Manila & 5 in Dallas, TX)

  • Tasks:

    • “Enable chat” UI

    • Find “services provided, referrals” (In Knowledge Base)

    • Find “business hours” Find “important information”

    • Find “billing email/phone”

    • Find “location costs & fees” ​

The Final Product

 

With the data collected from the interviews, we were able to address the users pain points in design and make the necessary adjustments in time for development. Now, Scorpion agents have a brand-new, user-centered designed tool that caters to their needs. 

bottom of page