BespokeCX
Designing a consumer insight solution for marketing research professionals and customer-focused brands
Case Study
Role Product Design
Platform Web/Responsive
Audience B2B
Timeline 11 months
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
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
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
”Andreea's exceptional visual communication skills played a pivotal role in transforming complex business concepts into designs that resonated with both our clients and their target audiences. Her designs not only met but exceeded expectations and contributed to our overall growth.“
Jason Ten-Pow
Founder & CEO, ONR
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.
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.
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.
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.
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.
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.
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.
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.
