Challenge

Tracking the Digital Customer Journey

Customer experience consulting firm ONR was challenged by an enterprise-level client in the consumer technology sector to track and evaluate the overall performance of their brand.

Having a global presence, the client relied heavily on digital channels to reach their customers around the world, but the complexity of their organizational structure made it difficult to track the digital customer journey across all touchpoints.


Project Goals

Single-Point Solution

Integrate customer data from various digital sources, including satisfaction surveys, feedback widgets and web analytics tracking

Overall Score

Provide an overall score for brand performance by configuring KPI metrics and performance targets to the client's own business rules

Actionable Insights

Offer data-driven recommendations for improving customer experience across key areas of impact along the customer journey

Solution

Using Voice of Customer to Evaluate Customer Experience

The answer was OnSite, an innovative reporting solution that combined web analytics data with customer feedback to provide a holistic view of customer experience across the entire digital journey.

Audience Profiling

Customer segments and performance targets unique to each client


Sentiment Visualization

Customer feedback and sentiment data evaluated with machine learning


Journey Tracking & Analsis

Deep exploration of customer journey performance, from domain level down to individual URL

My Role

User Experience Lead

As the sole designer at ONR, I lead the user experience, user interface and front-end development efforts for OnSite, collaborating in a team of 3.

My Team

Product Manager UX Lead Technical Lead
that's me !

My Tools

Microsoft Expression Design Adobe XD Photoshop Microsoft Visual Studio Azure DevOps
most used

My Tasks

User stories Feature planning Wireframes Task Flows Prototypes Mockups Front-end Development
most time spent

”During her time at ONR, Andreea consistently delivered high-quality work. She displayed a meticulous and detail-oriented approach to design, carefully considering all project requirements, and using iterative reviews to validate all design decisions.“

Jason Ten-Pow
Founder & CEO, ONR

Process

Emphasizing Collaboration

To create OnSite, my team and I used a structured process with a user-centered approach. I focused on specific user needs to determine functionality requirements, and emphasized collaboration with stakeholders to align design decisions with the overall project goals. The result was an effective product with user-friendly features.

Hide project assets

User Stories

After conducting several phone interviews with the client's target users, three main personas were defined for OnSite by the Project Manager, each with distinct goals, task flows and content needs.

Using these personas as a guide, I created short user stories to inform the product design process.

Product Features

With the user stories in mind, I planned the product's features in close collaboration with the Product Manager. General functionality requirements included:

Visualization

To meet the users' reporting and presentation needs, data would need to be presented in a visual way, highlighting key areas of impact.

Accelerators

To help users navigate complex data hierarchies, tools like search & filtering would be needed to find specific information quickly.

Customization

With each user having different task flows and areas of focus, it would benefit them to be able to save and track specific information according to their assigned responsibilities.

Engagement

To keep users engaged with the product, some features, like saving and tracking specific information, were designed to be time-sensitive actions.

Recommendations

Suggesting related content and pro-active next steps related to the users' areas of focus would help them gain more context about what was driving performance.

Sketches

The most complex functionality to design was the customization feature, so I started there.

I proposed a report pinning feature that allowed users to create shortcuts to specific reports and add them to a personalized dashboard page.

This would provide each user with a shortcut to goal-driving information, without having to search for it every time.

Explorative sketches for report filtering and pinning features
Explorative sketches for OnSite's report filtering and pinning features.

Task Flows

Next, I wanted to explore how the report pinning feature would work for each user profile. Although each persona had different task flow needs, my goal was to design a pinning flow that worked the same for all users, yet still allowed each user the option to customize it to preference.

Exploration of possible user paths for pinning report shortcuts to the dashboard.

Wireframes

The wireframing process involved many iterations and design reviews. I paid special attention to user interaction, contextual menus, responsive layouts, annotating all wireframes in detail to ensure clear communication during design reviews.

Responsive wireframes for Performance report
Responsive wireframes for OnSite's "Performance" report

Mockups

Final design phase for OnSite involved applying colour, typography, iconography and styling to create high-fidelity mockups. The solution was designed to adapt easily to any branding requirements specified by ONR's clients.

Mockup for domain-level performance report

Workflow

With the final designs approved by the client, the product was ready for front-end development.

During this phase, my primary collaboration was with the Technical Lead, to ensure the solution met existing technical requirements and was compatible with server-generated content.

Our shared goal was to build an application that was adaptable to client needs but also scalable to future projects.

We worked in weekly development sprints, to keep the product aligned with evolving project goals.

Environment

I built OnSite's user interface using Visual Studio as the primary development environment, and Azure DevOps for version control.

I created responsive HTML layouts styled with the Bootstrap CSS framework, and added dynamic visualizations using the D3.js library, which gave the design interaction and an extra layer of visual interest.

To ensure a consistent user experience, I regularly performed cross-browser compatibility tests for design, accessibility, responsiveness and functionality across all major browsers and target device types.

Deliverables

Templates for product reports

Style themes and client branding

Responsive layouts grids with Bootstrap

Dynamic charting with D3.js

jQuery behaviour and DOM manipulation

ASP.Net controls for server-generated content

Results

Transformative Insights

Within 3 months of launch, target users of OnSite reported:

Customer Understanding

Gaining a better understanding of customer experience

Planning Efficiency

Planning business actions more efficiently based on customer feedback

Business Potential

Discovering untapped business potential and opportunities


Within 6 months of launch, C-suite users of OnSite reported:

Breaking Barriers

Gaining cross-department insights that allowed them to overcome silos and divisional barriers within their organization

Continued Investment

Implementing OnSite in other departments within their organization, and investing in additional customer experience solutions at ONR over a period of 3 years