Case Study

BespokeCX

Designing a consumer insight solution for marketing research professionals and customer-focused brands

Role Product Design Platform Web/Responsive Audience B2B Timeline 11 months
Challenge

Simplifying Workflow for Marketing Research Studies

Customer experience consulting firm ONR faced challenges in managing multiple solutions for collecting and analyzing consumer data.

Having a variety of feedback methodology made it possible for ONR to run several types of research studies for their clients, but it also meant a more complex project flow for their internal team.

To simplify workflow and improve client reporting, an all-in-one solution was needed.


Project Goals

All-in-one Solution

Avoid switching between different applications to manage research studies by integrating consumer data from all available sources

Live Data Tracking

Reduce the need to reach out to third party vendors by enabling analysts to track survey quotas and verify data accuracy in real-time

Report Automation

Eliminate delivery wait times by enabling data analysts and research clients to check study results anytime and generate reports on-demand

Solution

An All-in-One Solution for Consumer Insights

The answer was BespokeCX, a responsive web solution that integrated consumer data from all relevant sources into a single place, tracked marketing research studies in real-time, and offered anytime reporting for ONR and their clients.

Data Source Selection

Ability to switch between research data sources directly from each report


Live Performance Targets

Real-time tracking of survey response quotas and performance targets for ongoing research studies


Data Visualization

Customizable options for data visualization available in each report

My Role

Product Designer

As the sole designer in a team of 3, I lead the user experience and user interface efforts for the MVP version of BespokeCX, focusing on product strategy, information architecture, content navigation, and data visualization.

My Team

Product Manager Product Designer Database Architect

My Tools

Figma Expression Design Photoshop

My Tasks

Requirement Definition Information Architecture User Personas Sketches Wireframes Task Flows Prototypes Usability Testing Mockups
Process

Designing in Sprints

The design process for BespokeCX involved a series of highly collaborative design sprints, beginning with defining business requirements and prioritizing product functionality, then ideating with wireframes and testing critical functionalities for usability with prototypes, and finally, refining the design into high-fidelity mockups.

Phase 1: Strategy, Phase 2: Research, Phase 3: Ideation, Phase 4: Testing, Phase 5: Refinement

Requirements

To begin this challenging project, I created a comprehensive list of high-level business goals, stakeholder requests and technical requirements, and ranked these based on business impact.

Prioritizing product requirements for BespokeCX based on business and customer goals.

Information Architecture

These initial requirements, along with marketing strategy and feature tiering, helped my team to determine which features should be included in the MVP version of the product, and informed the functional hierarchy for the solution.

Documenting the functional hierarchy and information architecture for BespokeCX, including product features, packages, reports, modules and metrics.

User Personas

BespokeCX's end-users included both internal agency roles, like data analyst, client rep, and developer, and external client roles, like executive owner, site owner, and content owner. I collaborated closely with the Product Manager to understand each persona and their areas of focus for the product.

Internal personas were focused on tracking and analysis tasks, so key information for them was survey quota information and response details.

External personas were focused on results and impact, so key information for them was performance scores and customer sentiment data.

Examples of internal and external personas for BespokeCX MVP

Sketches

To meet the timeline requirements for this project, my goal was to incorporate pre-existing components into the design wherever possible, and to take advantage of versatile data visualization tools like D3.js. With this in mind, I turned to the whiteboard for sketching.

Explorative sketches for planned report types, including Survey, Website, and Journey reports.
Explorative sketches for menu elements, including navbars, toolbars, and pop-up menus.

Wireframes

Wireframing was a highly collaborative process between myself, the Product Manager and the Database Architect. This ensured that all key perspectives were considered (business, user and technology) as the design evolved.

My team and I worked in weekly design sprints, iterating over several types of charts, visualizations and interface elements for each report type.

How might we.

  • … display different levels of detail without overwhelming users?
  • … tell a story with the data?
  • … improve readability with data visualization?
  • … differentiate navigational menus from contextual tools?

Levels of Detail

Exploring information display options for cross-tab data analysis features


Telling a Story

Sequencing information logically and highlighting key areas of focus to guide users toward end-goals


Improving Readability

Exploring data visualization options for performance metrics


Menus & Tools

Exploring responsive layouts for navbars and toolbars

Task Flows

Testing began with crucial design features like navigation menus, tool menus, and content search/filtering, as these functionalities directly impacted overall product usability. I created simple task flows to inform prototype interactions, focusing on how to handle errors and provide instructions for navigating restrictions.

Prototypes

The task flows informed low-fidelity prototypes for mobile and desktop, which I built with Figma, and shared with internal personas for feedback.

Responsive prototype screens for BespokeCX's navigation and search features.

Before & After

B1.1

The floating toolbar gave users quick access to important actions, but it obstructed content from view

B1.2

Users had difficulty locating the search button, expecting to find in under the menu icon, not in the floating toolbar.

B2

Longer reports with multiple sections were very tedious to scroll through on mobile screens

A1

Tab navigation was introduced to shorten longer reports and reduce scrolling on mobile screens

A2.1

A collapsed state was introduced for the floating toolbar, to minimize its visual impact. It also received a status badge to indicate if any of the tools hidden inside were enabled

A2.2

The search button was moved from the collapsible toolbar to the top menu bar, so it can be accessible to users with a single tap

A3

In-page navigation links were added to allow users to return to the top of a report without scrolling

Visual Styling

Visual styling for the BespokeCX MVP was defined with a focus on emphasizing goal-driving information using effective visual cues. To ensure design accessibility, I followed W3C's WCAG standards, and took styling cues from established design systems like Twitter's Bootstrap framework and Google's Material Design.

Mockups

Finally, to help ONR showcase the business value of BespokeCX to potential clients, I created high-fidelity mockups for key reports using branding guidelines from existing clients.

Results

Driving Success with Design Thinking

Business Growth

The MVP design generated enthusiastic feedback from external stakeholders, resulting in continued business investments from enterprise-level clients toward further development of the product at ONR.

Workflow Efficiency

Internally, the project's Agile Design process fostered a culture of design thinking within the company, encouraging an iterative approach of visual planning and testing before development.

Competitive Advantage

Further iterations of the MVP design enabled ONR to market its solution incrementally, building comeptitive edge in a highly competitive field.

BespokeCX, the fully-developed product based on this MVP design, has evolved into a customer experience solution for contact centre and digital journeys.