Call Center for Telesale of
LC Pharmacy

Call Center for Telesale of
LC Pharmacy

Call Center for Telesale of
LC Pharmacy

About me

About me

About me

During my probation period at G.STUDIO, a unit of F-Soft, I was relocated to Ho Chi Minh City and assigned a major task: redesigning the Call Center system for the telesales team at LC Pharmacy. This was one of the very first projects I worked on. It was both a challenge—due to relocation, time pressure, and a completely new environment—and an opportunity to prove my ability to solve real business problems through design.

During my probation period at G.STUDIO, a unit of F-Soft, I was relocated to Ho Chi Minh City and assigned a major task: redesigning the Call Center system for the telesales team at LC Pharmacy. This was one of the very first projects I worked on. It was both a challenge—due to relocation, time pressure, and a completely new environment—and an opportunity to prove my ability to solve real business problems through design.

During my probation period at G.STUDIO, a unit of F-Soft, I was relocated to Ho Chi Minh City and assigned a major task: redesigning the Call Center system for the telesales team at LC Pharmacy. This was one of the very first projects I worked on. It was both a challenge—due to relocation, time pressure, and a completely new environment—and an opportunity to prove my ability to solve real business problems through design.

About Project

About Project

About Project

LC Pharmacy is one of the largest pharmacy chains in Vietnam, rapidly expanding with thousands of stores nationwide. As part of its digital transformation, the company aimed to rebuild its entire sales, ordering, customer service, and inventory management systems. Among these, the Call Center played a critical role, as it served as the primary touchpoint between telesales agents and customers, directly impacting both order conversion speed and customer satisfaction.

My responsibility in this project was to enhance the telesales experience: eliminating tool fragmentation, modernizing the outdated UI, and helping agents shorten the time needed to consult and place orders over the phone.

About LC Pharmacy

About LC Pharmacy

LC Pharmacy is Vietnam’s leading modern pharmacy chain, part of F-Retail. By the end of 2023, it operated nearly 1,500 stores, contributing over 50% of
F-Company Retail’s total revenue, worth tens of trillions of VND. In just the first half of 2024, LC Pharmacy generated more than VND 11,500 billion, accounting for 63% of the group’s revenue.

With such massive scale and rapid growth, Call Center efficiency was critical to sustaining revenue.

LC Pharmacy is Vietnam’s leading modern pharmacy chain, part of F-Retail. By the end of 2023, it operated nearly 1,500 stores, contributing over 50% of
F-Company Retail’s total revenue, worth tens of trillions of VND. In just the first half of 2024, LC Pharmacy generated more than VND 11,500 billion, accounting for 63% of the group’s revenue.

With such massive scale and rapid growth, Call Center efficiency was critical to sustaining revenue.

LC Pharmacy is Vietnam’s leading modern pharmacy chain, part of F-Retail. By the end of 2023, it operated nearly 1,500 stores, contributing over 50% of F-Retail’s total revenue, worth tens of trillions of VND. In just the first half of 2024, LC Pharmacy generated more than VND 11,500 billion, accounting for 63% of the group’s revenue.

With such massive scale and rapid growth, Call Center efficiency was critical to sustaining revenue.

LC Pharmacy is Vietnam’s leading modern pharmacy chain, part of F-Retail. By the end of 2023, it operated nearly 1,500 stores, contributing over 50% of
F-Company Retail’s total revenue, worth tens of trillions of VND. In just the first half of 2024, LC Pharmacy generated more than VND 11,500 billion, accounting for 63% of the group’s revenue.

With such massive scale and rapid growth, Call Center efficiency was critical to sustaining revenue.

Teammate

Teammate

I worked along side:

Pham Dang Khoi

Product Owner

Nguyen Minh Hanh

Design Manager

Nguyen Bao Chi

BA Leader

Nguyen Anh Tu

Dev Leader

Tran Thi Thu Trang

Tele Sale Ecom Manager

Process timeline

Process timeline

Process timeline

Each step in our process was designed to transform
LC Pharmacy’s Call Center from fragmented tools into a seamless, efficient, and user-friendly platform for telesales.

Each step in our process was designed to transform
LC Call Center from fragmented tools into a seamless, efficient, and user-friendly platform for telesales.

Each step in our process was designed to transform
LC Pharmacy’s Call Center from fragmented tools into a seamless, efficient, and user-friendly platform for telesales.

Discover

Discover

Discover

Gathered data from demo sessions, screenshots, and insights from the Tele Sales Manager.

Gathered data from demo sessions, screenshots, and insights from the Tele Sales Manager.

Define

Define

Define

Identified key problems with fragmented tools and set goals to unify flows and simplify order handling.

Identified key problems with fragmented tools and set goals to unify flows and simplify order handling.

UX/UI Design
& Prototyping

UX/UI Design
& Prototyping

UX/UI Design & Prototyping

Created flows and wireframes that combined calls, orders, and customer details into one screen.

Created flows and wireframes that combined calls, orders, and customer details into one screen.

Test

Test

Test

Conducted usability tests using sample tasks, task timing, and eye-tracking to validate design choices.

Conducted usability tests using sample tasks, task timing, and eye-tracking to validate design choices.

Iterate

Iterate

Iterate

Refined the product into a standalone system with clearer hierarchy and simplified interactions.

Refined the product into a standalone system with clearer hierarchy and simplified interactions.

Deliver

Deliver

Deliver

Released version 2.0 with a modern UI, integrated call section, and more efficient workflows.

Released version 2.0 with a modern UI, integrated call section, and more efficient workflows.

Why Redesign?

Why Redesign?

In early workshops, my Design Manager and I quickly realized how inefficient the legacy system was.

  • Telesales had to juggle two seperated tools: a web portal for order entry and the Cisco softphone for calls.

  • The UI was outdated, inconsistent, and overly complex for new staff.

  • Cisco required IT installation and support—every technical glitch meant lost sales.

The conclusion was clear: the Call Center needed to be modernized, consolidated, and redesigned around the real workflow of telesales agents.

Research

Research

Research

From the very beginning, I faced a key challenge: due to security restrictions, I couldn’t directly access the legacy system. My understanding had to come from demo sessions, a few screenshots, and insights shared by the Tele Sales Manager.

From the very beginning, I faced a key challenge: due to security restrictions, I couldn’t directly access the legacy system. My understanding had to come from demo sessions, a few screenshots, and insights shared by the Tele Sales Manager.

From the very beginning, I faced a major challenge: due to security restrictions, I couldn’t directly access the legacy system. This meant that my research had to rely heavily on indirect sources, including demo sessions conducted by the team, a handful of screenshots from the live environment, and—most importantly—detailed insights shared by the Tele Sales Manager, who best understood how agents interacted with the system in their daily work.

To illustrate the issues, I included two screenshots of the old system, which showed how fragmented and outdated the telesales workflow was. These observations gave me a clearer picture of where the pain points lay.

To illustrate the issues, I included two screenshots of the old system, which showed how fragmented and outdated the telesales workflow was. These observations gave me a clearer picture of where the pain points lay.

Current Version that Tele sales using this to create an order

Current Version that Tele sales using this to create an order

Cisco Phone Simulator

Cisco Phone Simulator

In parallel, I conducted secondary research, reviewing best practices from Call Center platforms, analyzing dashboards on Dribbble, Behance, and Mobbin, and collecting UI patterns that emphasized clarity and simplicity.

In parallel, I conducted secondary research, reviewing best practices from Call Center platforms, analyzing dashboards on Dribbble, Behance, and Mobbin, and collecting UI patterns that emphasized clarity and simplicity.

From this, I distilled the key principles that guided my design: keep the flow simple and focused, maintain consistency, create a clear information hierarchy, reduce redundant actions, and unify tools into one seamless workflow.

From this, I distilled the key principles that guided my design: keep the flow simple and focused, maintain consistency, create a clear information hierarchy, reduce redundant actions, and unify tools into one seamless workflow.

Research Insight

Research Insight

While preparing for version 1.0, I spent time observing how agents handled calls. A key insight was that call status needed to stay visible across every task, so agents wouldn’t lose context when switching tabs.

This idea was inspired by mobile UX: whenever a call is active, the phone shows a persistent floating bar. I adapted this into the Call Center design. However, instead of making it float (which risked overlapping content), I decided to fix it at the top of the screen.

This led to the creation of the Call Control Bar – a persistent top section with multiple states (ready, incoming call, on hold, transferring, ending). It became the central hub for managing calls, ensuring clarity and efficiency for telesales agents.

While preparing for version 1.0, I spent time observing how agents handled calls. A key insight was that call status needed to stay visible across every task, so agents wouldn’t lose context when switching tabs.

This idea was inspired by mobile UX: whenever a call is active, the phone shows a persistent floating bar. I adapted this into the Call Center design. However, instead of making it float (which risked overlapping content), I decided to fix it at the top of the screen.

This led to the creation of the Call Control Bar – a persistent top section with multiple states (ready, incoming call, on hold, transferring, ending). It became the central hub for managing calls, ensuring clarity and efficiency for telesales agents.

Flow & Structure

Flow & Structure

Flow & Structure

From demo sessions and discussions with the Tele Sales Manager, I ideated a flow that unified three core actions: calls, orders, and customer information. My main goal was to let telesales agents handle everything from a single screen instead of switching between fragmented tools.

Once the flow concept was defined, I collaborated with the Business Analyst, who translated it into a detailed process flow. This ensured that the design direction was consistent with business rules while reducing unnecessary steps and keeping agents focused with the right context during calls.

Wireframes

Wireframes

From the flow I had outlined, I created multiple wireframes to explore how calls, orders, and customer information could be handled in one seamless screen. These wireframes helped me validate the structure and interactions with stakeholders before moving into detailed UI design.

Version 1.0 – Add-on Approach

Version 1.0

The first version of Call Center was designed with a very limited scope: it only included a call screen and a missed-call list, while order creation and inventory checks remained in separate tabs. It was a necessary first step—technically feasible, but clearly not enough for a smooth and efficient workflow.

Usability Testing

Usability Testing

After releasing version 1.0, I led usability testing on the staging environment:

  • Designed sample tasks (e.g., “create a new order while answering a call”).

  • Tracked task completion time.

  • Used eye tracking to study visual focus.

After releasing version 1.0,

I led usability testing on the staging environment:

  • Designed sample tasks (e.g., “create a new order while answering a call”).

  • Tracked task completion time.

  • Used eye tracking to study visual focus.

Key Insights

Key Insights

From this testing, I identified three critical upgrades

From this testing, I identified three critical upgrades

01

Transform Call Center into a dedicated subsystem, not just a side feature.

01

Transform Call Center into a dedicated subsystem, not just a side feature.

01

Transform Call Center into a dedicated subsystem, not just a side feature.

01

Transform Call Center into a dedicated subsystem, not just a side feature.

01

Transform Call Center into a dedicated subsystem, not just a side feature.

02

Unify calling and sales tasks into one streamlined screen.

02

Unify calling and sales tasks into one streamlined screen.

02

Unify calling and sales tasks into one streamlined screen.

02

Unify calling and sales tasks into one streamlined screen.

02

Unify calling and sales tasks into one streamlined screen.

03

Refine visual hierarchy: ensure the Call Module becomes the primary focus before users move on to secondary actions.

03

Refine visual hierarchy: ensure the Call Module becomes the primary focus before users move on to secondary actions.

03

Refine visual hierarchy: ensure the Call Module becomes the primary focus before users move on to secondary actions.

03

Refine visual hierarchy: ensure the Call Module becomes the primary focus before users move on to secondary actions.

03

Refine visual hierarchy: ensure the Call Module becomes the primary focus before users move on to secondary actions.

04

Expand beyond call tracking: integrate order history, order creation, call logs, and reporting into a unified interface.

04

Expand beyond call tracking: integrate order history, order creation, call logs, and reporting into a unified interface.

04

Expand beyond call tracking: integrate order history, order creation, call logs, and reporting into a unified interface.

04

Expand beyond call tracking: integrate order history, order creation, call logs, and reporting into a unified interface.

04

Expand beyond call tracking: integrate order history, order creation, call logs, and reporting into a unified interface.

05

Resolve contrast conflicts between the Call Module and the Action column, so users are guided naturally to the main task (making/receiving calls).

05

Resolve contrast conflicts between the Call Module and the Action column, so users are guided naturally to the main task (making/receiving calls).

05

Resolve contrast conflicts between the Call Module and the Action column, so users are guided naturally to the main task (making/receiving calls).

05

Resolve contrast conflicts between the Call Module and the Action column, so users are guided naturally to the main task (making/receiving calls).

Version 2.0 - Unified Flow

Version 2.0 - Unified Flow

Version 2.0 - Unified Flow

For version 2.0, I redesigned Call Center as a standalone module informed by usability testing. The new design emphasized the Call Module as the primary focus, reducing distractions from action buttons. Agents could now handle calls, orders, and logs in one clear and unified screen.

Final Solutions

01

Redesigned Call Center as a standalone module, eliminating reliance on RSA.

01

Redesigned Call Center as a standalone module, eliminating reliance on RSA.

01

Redesigned Call Center as a standalone module, eliminating reliance on RSA.

02

Modernized UI with stronger visual hierarchy, highlighting the Call Module as the primary focus.

02

Modernized UI with stronger visual hierarchy, highlighting the Call Module as the primary focus.

02

Modernized UI with stronger visual hierarchy, highlighting the Call Module as the primary focus.

03

Reduced IT dependency by integrating the softphone directly into the system.

03

Reduced IT dependency by integrating the softphone directly into the system.

03

Reduced IT dependency by integrating the softphone directly into the system.

04

Unified workflows: agents could manage calls, create/review orders, track history, and logs in one screen.

04

Unified workflows: agents could manage calls, create/review orders, track history, and logs in one screen.

04

Unified workflows: agents could manage calls, create/review orders, track history, and logs in one screen.

05

Floating call module improved multitasking and aligned with familiar mobile behaviors.

05

Floating call module improved multitasking and aligned with familiar mobile behaviors.

01

Cisco fully integrated into RSA, eliminating tool fragmentation.

01

Cisco fully integrated into RSA, eliminating tool fragmentation.

02

Modernized UI with clear data hierarchy, aligned with Long Châu’s Design System.

02

Modernized UI with clear data hierarchy, aligned with Long Châu’s Design System.

04

All workflows consolidated: call handling, order creation, history, logs, reports.

04

All workflows consolidated: call handling, order creation, history, logs, reports.

05

Fixed call module at the top of the interface, inspired by mobile patterns, improving multitasking and familiarity.

05

Fixed call module at the top of the interface, inspired by mobile patterns, improving multitasking and familiarity.

05

Fixed call module at the top of the interface, inspired by mobile patterns, improving multitasking and familiarity.

03

No more IT dependency: the softphone was built-in.

03

No more IT dependency: the softphone was built-in.

Design Breakdown

Design Breakdown

For version 2.0, I redesigned Call Center as a standalone module specifically for telesales. Agents could now manage calls, create/review orders, and log activity—all from a single streamlined screen.

Challenges

Challenges

My biggest challenge was the lack of direct access to the old system due to security restrictions, which meant I couldn’t rely on real user data at the beginning. To address this, I gathered insights from stakeholders (Product Owner, Design Manager, Tele Sales Manager), studied best practices from similar call center systems, and validated assumptions through usability testing.


Another challenge was balancing technical feasibility with design ambition. With limited engineering background, I worked closely with developers, aligning design solutions step by step to ensure what I proposed was practical and implementable.


On top of that, relocating from Hanoi to Ho Chi Minh City added personal challenges. The cultural differences and new working style required me to adapt quickly, improve my communication, and develop stronger soft skills. This experience pushed me to become more flexible and resilient, both as a designer and as a teammate.

Outcomes

Outcomes

01

Task time reduced by 25%+, boosting telesales productivity.

01

Task time reduced by 25%+, boosting telesales productivity.

01

Task time reduced by 25%+, boosting telesales productivity.

02

Agents worked on a unified screen instead of juggling tools.

02

Agents worked on a unified screen instead of juggling tools.

02

Agents worked on a unified screen instead of juggling tools.

03

Top call module improved focus and reduced distractions.

03

Top call module improved focus and reduced distractions.

03

Top call module improved focus and reduced distractions.

04

UI became clearer, more consistent, and enterprise-ready.

04

UI became clearer, more consistent, and enterprise-ready.

04

UI became clearer, more consistent, and enterprise-ready.

01

Task time reduced by 25%+, improving telesales productivity.

01

Task time reduced by 25%+, improving telesales productivity.

02

Agents could work all day in one unified screen instead of juggling tools.

02

Agents could work all day in one unified screen instead of juggling tools.

03

The floating button enhanced multitasking efficiency.

03

The floating button enhanced multitasking efficiency.

04

The new UI was intuitive, consistent, and enterprise-ready.

04

The new UI was intuitive, consistent, and enterprise-ready.

05

Call Center 2.0 was no longer seen as an add-on—it became a core subsystem of Long Châu’s digital transformation.

05

Call Center 2.0 was no longer seen as an add-on—it became a core subsystem of Long Châu’s digital transformation.

05

Call Center 2.0 turned into a core subsystem in LC Pharmacy’s digital ecosystem.

05

Call Center 2.0 turned into a core subsystem in LC Pharmacy’s digital ecosystem.

05

Call Center 2.0 turned into a core subsystem in LC Pharmacy’s digital ecosystem.

Outcomes

01

Task time reduced by 25%+, improving telesales productivity.

01

Task time reduced by 25%+, improving telesales productivity.

02

Agents could work all day in one unified screen instead of juggling tools.

02

Agents could work all day in one unified screen instead of juggling tools.

03

The floating button enhanced multitasking efficiency.

03

The floating button enhanced multitasking efficiency.

04

The new UI was intuitive, consistent, and enterprise-ready.

04

The new UI was intuitive, consistent, and enterprise-ready.

05

Call Center 2.0 was no longer seen as an add-on—it became a core subsystem of Long Châu’s digital transformation.

05

Call Center 2.0 was no longer seen as an add-on—it became a core subsystem of Long Châu’s digital transformation.

Learnings

Learnings

Learnings

Redesigning LC Pharmacy’s Call Center was not just about improving the product—it was also a journey that helped me grow.
Here are three important lessons I learned along the way:

Redesigning LC Pharmacy’s Call Center was not just about improving the product—it was also a journey that helped me grow.
Here are three important lessons I learned along the way:

01

01

01

Even a small idea can have huge impact if pursued with persistence and teamwork.

02

02

02

Data-driven testing (time tracking, eye tracking) provided clarity and credibility for design decisions.

03

03

Relocating and collaborating cross-functionally sharpened my adaptability, soft skills, and ability to assess feasibility with developers.

Impact

Impact

Impact

Seeing is believing: How digital transformation is shaping Long Chau.

Seeing is believing: How digital transformation is shaping Long Chau.

Impact

Seeing is believing: How digital transformation is shaping Long Chau.

Additional Research

While preparing version 2.0, I studied agent call-handling behavior. One key finding was that the act of taking calls could be adapted into a floating button model, similar to mobile devices.

  • Strengths: the floating button let agents start or return to a call from anywhere in the system without losing context.

  • Reasoning: this pattern was already familiar from mobile UX, reduced cognitive load, and allowed agents to multitask within the same screen.

This research informed my decision to bring the floating call control into version 2.0, making call handling more intuitive and flexible.

Teammate

I worked along side:

Pham Dang Khoi

Product Owner

Nguyen Minh Hanh

Design Manager

Nguyen Bao Chi

Business Analyst Manager

Nguyen Anh Tu

Dev Lead

Tran Thi Thu Trang

Tele Sale Ecom Manager

Teammate

I worked along side:

Pham Dang Khoi

Product Owner

Nguyen Minh Hanh

Design Manager

Nguyen Bao Chi

Business Analyst Manager

Nguyen Anh Tu

Dev Lead

Tran Thi Thu Trang

Tele Sale Ecom Manager

Create a free website with Framer, the website builder loved by startups, designers and agencies.