KEY RESPONSIBILTIES

  • Collaborating closely with stakeholders to

    execute the end-to-end design process

  • Creation of high fidelity prototypes

    and design handover doc

MY ROLE

UX/UI Designer

LENGTH

2 weeks

STAKEHOLDERS

Customer Success

CTO

Software Engineer

KEY RESPONSIBILTIES

  • Collaborating closely with stakeholders to

    execute the end-to-end design process

  • Creation of high fidelity prototypes

    and design handover doc

MY ROLE

UX/UI Designer

LENGTH

2 weeks

STAKEHOLDERS

Customer Success

CTO

Software Engineer

  • curious thing

  • curious thing

  • platform improvement

  • platform improvement

THE PROBLEM

THE PROBLEM

While our current results page provides users with the ability to filter through thousands of records to find relevant information, it lacks functionality for more in-depth investigations. Currently, users must download the CSV from the platform, follow the link to the audio, and sift through minutes of additional call recordings before arriving at the answer they seek. To streamline the process and enable users to jump directly to the desired answer, we aim to implement new features that will enhance the platform's capabilities.

THE SOLUTION

THE SOLUTION

To address this issue, we propose creating an 'Individual Caller Page.' By clicking on the names displayed on the results page, users can access a detailed page that includes caller information, the complete audio recording, and the conversation flow with audio recordings of specific questions and responses. This page will provide users with a comprehensive overview of each call and allow them to easily download and share any necessary audio with their teams.

SOLUTION BREAKDOWN

SOLUTION BREAKDOWN

SOLUTION BREAKDOWN

UNDERSTANDING & RESEARCH

UNDERSTANDING
& RESEARCH

UNDERSTANDING
& RESEARCH

SCOPING SESSION WITH STAKEHOLDERS

Before we develop any new features, we'll hold a meeting with the project owner, engineering team, and customer success team to discuss what the business needs and what problems users are facing.

During this meeting, I'll ask questions to better understand the feature and what its key components should be. This will help me identify the most important aspects of the feature and anticipate any technical challenges that may come up during the design process.

TAKEAWAY FROM THE SESSION

The user want to have quick access to the recording

Listen to audio on platform instead of downloading CSV and clicking a link to download the audio.

Show the conversation flow, question and the response from their client

VISUAL RESEARCH

I looked at UI example from companies like LinkedIn, Asana and Dribble to get inspiration on the layout, hierarchy of the information that is similar to the page design I am looking for. Also look at different sound bar designs to make the design more impactful.

  • Use different colours in Project to help user identify different projects

  • Collapsible information

  • Bento design to help categories information

  • Bento design to help categories information

  • Use colour and font size to create hierarchy for example: black text for name grey text for current location

  • Cluster that shows where the conversation is at in the audio

  • Showing time stamp

  • Ability to adjust play speed

FINALISING MVP

Based on the scoping session, visual research and deeper conversation with Customer Success team and research, I identified the the MVP with key stakeholders that solve user pain points and meets our business goal.

Reducing the number of steps required to search for records and save time

Able to see information from the CSV to help users make informed decisions

Establishing a clear visual hierarchy to guide users through the page

Allowing users to view the conversation flow and multiple records associated with one person

WIREFRAMING THE SOLUTION

After the research and the MVP in mind, I used my design system to quickly mock up some wireframes to gather feedback from customer success, engineering and the product owner on the overall layout and structure of the individual profile page.

FEEDBACK FROM THE TEAM

  • There is no hierarchy in the call detail box.

  • Associated record box is not needed since most of the campaign only have 1-3 same records

  • Custom audio bar are not achievable in this design, we will need something that already existed from google library

  • Most people prefer design 1 instead of design 2

WIREFRAMING THE SOLUTION

After the research and the MVP in mind, I quickly mocked up some wireframes to gather feedback from customer success, engineering and the product owner on the overall layout and structure of the individual profile page.

WIREFRAMING THE SOLUTION

After the research and the MVP in mind, I quickly mocked up some wireframes to gather feedback from customer success, engineering and the product owner on the overall layout and structure of the individual profile page.

FEEDBACK FROM THE TEAM

  • There is no hierarchy in the call detail box.

  • Associated record box is not needed since most of the campaign only have 1-3 same records

  • Custom audio bar are not achievable in this design, we will need something that already existed from google library

  • Most people prefer design 1 instead of design 2

FINAL PROTOTYPE

After incorporating feedback from the team and finalizing the design, I hosted a reverse scoping session to review the design with the team and ensure that all pain points were addressed and achievable by the engineering team. Throughout the development phase, I closely collaborated with the engineering team to specify any missing interactions that were not covered in the high fidelity mockups.

Once the development was completed, I conducted a UX review with the design team for each front-end ticket to ensure alignment with the designs. Additionally, I organised a testing session with team members to verify that everything was functioning correctly before it was launched.

WHAT'S THE IMPACT?

WHAT'S THE IMPACT?

After launching the product we waited for 1-2 weeks for customer success team to gather some feedback from the client. The feedback was amazing, they love that now they are able to do more in the platform and go through less steps to achieve their goal. Below are some stats for this feature improvement that I'm proud of!

Audio review time reduced

With less steps and ability to listen to sections of the call, clients uses 60% less time going though an audio.

Stickiness increased

User are able to view the information and listen to the audio on the platform instead of view the CSV file on different platform.

TAKEAWAY FOR THIS PROJECT

TAKEAWAY FOR THIS PROJECT

Involve engineering upfront

This helps to reduce any rework later on as an understanding of the technical limitations upfront will help to inform your design strategy.

Testing doesn’t end after development

Design is a constant iteration of improving the experience for the end user. Always find ways to collect and listen to your user's feedback. We try to attend client meetings and ask their experience about he new feature

Don’t get too attached to your design

Designers can get attached to their work, but it's not always bad. Sometimes constraints or priorities can prevent a good design from being implemented. However, you can always bring up the design in the next phase to add more value to the product.

FINALISING MVP

Based on the scoping session, visual research and deeper conversation with Customer Success team and research, I identified the the MVP with key stakeholders that solve user pain points and meets our business goal.

Reducing the number of steps required to search for records and save time

Able to see information from the CSV to help users make informed decisions

Establishing a clear visual hierarchy to guide users through the page

Allowing users to view the conversation flow and multiple records associated with one person

FINAL PROTOTYPE

After incorporating feedback from the team and finalizing the design, I hosted a reverse scoping session to review the design with the team and ensure that all pain points were addressed and achievable by the engineering team. Throughout the development phase, I closely collaborated with the engineering team to specify any missing interactions that were not covered in the high fidelity mockups.

Once the development was completed, I conducted a UX review with the design team for each front-end ticket to ensure alignment with the designs. Additionally, I organised a testing session with team members to verify that everything was functioning correctly before it was launched.

WHAT'S THE IMPACT?

After launching the product we waited for 1-2 weeks for customer success team to gather some feedback from the client. The feedback was amazing, they love that now they are able to do more in the platform and go through less steps to achieve their goal. Below are some stats for this feature improvement that I'm proud of!

Audio review time reduced

With less steps and ability to listen to sections of the call, clients uses 60% less time going though an audio.

Stickiness increased

User are able to view the information and listen to the audio on the platform instead of view the CSV file on different platform.

TAKEAWAY FOR THIS PROJECT

Involve engineering upfront

This helps to reduce any rework later on as an understanding of the technical limitations upfront will help to inform your design strategy.

Testing doesn’t end after development

Design is a constant iteration of improving the experience for the end user. Always find ways to collect and listen to your user's feedback. We try to attend client meetings and ask their experience about he new feature

Don’t get too attached to your design

Designers can get attached to their work, but it's not always bad. Sometimes constraints or priorities can prevent a good design from being implemented. However, you can always bring up the design in the next phase to add more value to the product.

GET IN TOUCH ✉️

WESLEYPWX@GMAIL.COM

GET IN TOUCH ✉️

WESLEYPWX@GMAIL.COM

GET IN TOUCH ✉️

WESLEYPWX@GMAIL.COM

GET IN TOUCH ✉️

WESLEYPWX@GMAIL.COM

FINAL PROTOTYPE

After incorporating feedback from the team and finalizing the design, I hosted a reverse scoping session to review the design with the team and ensure that all pain points were addressed and achievable by the engineering team. Throughout the development phase, I closely collaborated with the engineering team to specify any missing interactions that were not covered in the high fidelity mockups.

Once the development was completed, I conducted a UX review with the design team for each front-end ticket to ensure alignment with the designs. Additionally, I organised a testing session with team members to verify that everything was functioning correctly before it was launched.