Building Data Logic That Works Like
Marketers Think
Simplifying complex data entry workflows and enforcing cleaner, smarter marketing data for Uptempo’s enterprise customers, such as IBM Corporate, SolarWinds, and SAP Emarsys - helping marketers work faster with more accurate, dependency-driven data.
About Uptempo
Uptempo is a B2B SaaS company that provides marketing operations solutions for large enterprise teams. Their platform helps unify strategic planning, budgeting, and performance tracking in one place - enabling marketing leaders to align their investments with business goals, improve visibility, and make more data-informed decisions.
-
Uptempo Plan (SaaS Platform)
-
2024-2025
-
Lead Product Designer
-
Project Manager, Engineer Lead, Lead Software Developer, Four (4) Supportive Software Developers, Two (2) Professional Service Team Members, & UX Technical Writer
-
Marketing Technology (Enterprise SaaS)
Problem
In our platform, Uptempo, attributes such as cost centers, GL codes, or activity tags are typically inherited through predefined hierarchies — for example, the activity hierarchy for performance reporting or finance structures for cost reporting.
However, not all attributes follow these inheritance rules. Some are driven by external business logic, such as legal requirements, compliance frameworks, or physical logistics (e.g., location-based constraints or safety regulations).
challenge
When these exceptions mentioned in the Problem Space occur, users face a key challenge:
They need a way to control and limit attribute selections based on these alternate business rules, ensuring that users can only choose valid and compliant options.
Without such controls, organizations risk data inconsistencies, compliance issues, and reporting inaccuracies — particularly when multiple business rule systems overlap.
⚠️ Some platform screenshots and sticky notes are blurred throughout this case study. These represent my design process at different stages - from research synthesis to testing - while keeping customer data and internal materials confidential.
My goal is to show the thinking and collaboration behind each stage, even when specific content can’t be shared.
how customers experienced the feature
Part 1 | UX : discovery → definition
This part of the project focuses on understanding our users, their challenges, and our internal constraints - setting the foundation for design decisions that followed.
Due to confidentiality, some UX artifacts (research notes, Miro boards, internal workflows) are shown as static images and are not clickable or zoomable. Screenshots have been selectively cropped or blurred where necessary to protect customer and product information.
P1-1/a
p1-2/a
p1-3/a
p1-4/a
Defining the Problem Space
Before starting the design process, I held a meeting with my PM to break down the problem space into three main jobs, which we then divided into micro-jobs for discussion with the development team. Since he was joining the customer meetings, he helped me gain deeper insights into user needs.
team alignment before design
After breaking down the problem space and defining user needs and goals, I facilitated three solutioning sessions with the entire team, bringing together the engineering lead and all developers to collaborate on potential solutions and align on technical feasibility. The screenshot below was taken during the first design session.
Combined quantitative and qualitative research to understand user behaviour and pain points.
Used Microsoft Clarity to analyze interactions within the Spend module, identifying how users entered data and where they experienced friction.
Conducted in-depth interviews with key enterprise customers - IBM and SAP - to uncover workflows, motivations, and pain points.
Synthesized findings to reveal patterns in user behaviour, highlighting what worked well and areas that needed improvement.
These insights directly informed our solutioning phase, ensuring design decisions were data-driven and user-centered.
System Realities
Compiled follow-up questions for the Professional Services (PS) team to clarify how customer data is structured and integrated into the platform.
Validated research findings by aligning user insights with technical and operational realities.
Facilitated a second cross-functional solutioning workshop session with product and engineering to share user insights and discuss how existing components could be reused in the new design.
Encouraged the team to raise additional questions to further define problem areas and collaborate with the PS team for clarification.
This step ensured our solutioning phase was grounded in both user needs and implementation feasibility.
p1-5/a
To deepen our understanding after the user research, I reached out to the Professional Services (PS) team, who manage customer onboarding and data setup.
The session helped us connect user insights with backend realities, revealing how data configurations influence the overall user experience.
The PS team shared current UI/UX pain points they had observed while supporting customers - such as confusing data entry flows, unclear field dependencies, and inconsistent terminology across sections.
These firsthand insights validated some of our research findings and also uncovered new usability issues that weren’t immediately visible from Clarity data or user interviews.
By collaborating with PS early, we were able to spot technical constraints and design opportunities before moving into ideation, ensuring our future solutions would be both user-friendly and feasible to implement.
p1-6/a
p1-7/a
IBM Data from Uptempo Spend
-Confidential
Team Questions to ask the PS Team
-Confidential
User Insights and Technical Reality
List of UX Concerns from the Professional Services Team
From Insights to Ideas
After completing the research phase, I gathered additional insights from the PS team, the engineering lead, developers, and the PM to deepen our understanding of technical limitations and backend dependencies.
In parallel, the engineering lead and developers held a separate working session to create user stories and integrations based on those technical constraints.
I then used these materials as preparation for the second solutioning session of my workshop, which focused on transforming insights into design opportunities.
During this session, I facilitated several design activities using a Miro board to encourage collaborative ideation and visual thinking:
“How Might We” exercises to reframe user pain points into design challenges.
Brainwriting sessions to spark idea generation across disciplines.
Crazy 8s sketching to explore multiple solution directions quickly.
These sessions enabled the team to co-create early design ideas, identify promising directions, and ensure that each concept met user goals with technical feasibility.
Some Engineering Work
-Confidential
Team Sketching from the 2nd Solutioning Workshop
healthy conflicts
With this refined direction I mentioned on the 6th stage, I organized the final workshop with the PM and engineering lead to align on feasibility and prioritization.
Together, we built a Value vs. Effort prioritization matrix to evaluate each proposed solution - mapping what would deliver the highest user and business impact against what was realistic to implement.
This stage often surfaced healthy conflicts, as the PM focused on delivery timelines and the engineering lead highlighted development complexity or cost.
To navigate these discussions, I facilitated structured trade-off conversations, reframing debates around user value and possible minimum viable product (MVP) scope.
By focusing on shared goals and user impact, we reached common ground - agreeing on an MVP that balanced usability, feasibility, and business goals.
The final outcome was a clear roadmap of design priorities, ensuring we could deliver quick wins while planning for long-term improvements in future iterations.
Prioritazition Matrix
Uptempo was formed through the merger of three leading innovators in the marketing performance management space - BrandMaker, Allocadia, and Hive9. To shape the scope of our solution, we analyzed how customers had been using these legacy platforms, identifying what worked well and what didn’t to inform our design direction.
Hive9 Platform
-Confidential
Uptempo Spend Platform
-Confidential
user research + data collection
Brandmaker Platform
-Confidential
part 2 | UI : Solutioning → Design Execution
Building on the insights and priorities defined during the discovery phase, I moved into translating concepts into tangible designs, validating them with users, and refining the experience through iteration.
UI designs and prototypes in this section are clickable and expandable. These visuals are recreated versions of the original flows and contain no sensitive customer data.
p2-1/a
p2-2/a
p2-3/a
p2-4/a
designing the solution
The “Save” button state was initially active throughout the process, allowing incomplete saves. Both PS and customers pointed out that it should remain disabled until both controlling and dependent attributes were selected.
I updated the logic accordingly and added a tooltip for the disabled dropdown, improving clarity and preventing user errors.
p2-5/a
p2-6/a
Goal: Translate workshop insights into tangible design directions by exploring and testing existing UI components for scalability and usability.
After the solutioning workshop, I synthesized all the team sketches and ideas generated during our brainstorming sessions.
I merged overlapping concepts and refined the most promising ideas into a cohesive end-to-end flow.
The main focus was on designing a table view that allows users to easily view, edit, and delete attribute dependencies directly from each row.
Since our existing UI library lacked a standardized table pattern, I created a new table component by combining and adapting existing Ant Design elements.
Explored multiple layout and interaction options using UI library components to define the most intuitive and scalable structure.
first version of the design
Final Alignment + Handoff
Creating a Flexible Table Component by Combining Ant Design Components
Goal: Combine refined ideas and early component explorations into a cohesive first version that visualizes the end-to-end user experience.
Using the refined concepts from the solutioning workshop and newly defined table component, I created the first version of the design to visualize how all elements could come together in a cohesive, end-to-end experience.
Focused on ensuring that the table interactions (viewing, editing, and deleting dependencies) were intuitive and aligned with real user workflows.
Reused as many components from our UI library as possible while adapting certain parts for better usability and data readability.
Presented this first version to the core UX team to gather feedback on layout hierarchy, and clarity before moving into deeper iterations.
This version served as the foundation for subsequent refinements - bridging the gap between conceptual exploration and practical, system-ready design.
Collaborating with Engineers + Technical Writer
Goal: Validate the end-to-end dependency configuration flow with internal experts and key enterprise customers.
For the MVP, I replaced the modal-based deletion with inline delete actions to streamline the flow and reduce clicks. The PS team and customers agreed the simplified interaction worked smoothly and aligned with their expectations. The modal deletion was excluded from MVP scope but documented for a future enhancement round.
Editing dependencies :
The inline editing experience tested extremely well. Both PS and customer participants noted that the direct edit-in-table approach made updates faster and more intuitive - no changes required.
Goal: Align on scope, finalize deliverables, and ensure a smooth transition from design to implementation.
Designer Notes cards showing implementation details in a dev-ready Figma file
Goal: Validate the near-final build with internal teams and selected customer stakeholders before release.
Participated in a pre-launch demo session with PS and engineering teams to review the feature under the live environment’s feature flag.
Invited customer representatives from IBM and SAP to observe the flow and provide early impressions.
The feature performed as expected - no major usability issues reported.
Logged minor enhancements (e.g., tooltip delay timing, icon type for cosnistency) for post-launch iteration.
The demo acted as a final confidence check before rollout, ensuring design, technical, and business stakeholders were fully aligned.
Held a final review meeting with the PM and engineering lead to summarize testing outcomes and confirm what would ship in the MVP.
Reviewed the Value vs. Effort matrix to align priorities - confirmed inline editing and deletion as MVP features, deferred modal deletion for future enhancement.
Documented design specs and interaction logic directly in Figma for developer reference, including tooltips, button states, and validation rules.
Collaborated closely during the handoff phase, clarifying interaction edge cases and verifying implementation details.
Joined early feature flag testing sessions to confirm UI accuracy and functional parity with the prototype.
Pre-Launch demo + Feedback
technical feasibility check
Deleting dependencies :
Assembling the First Cohesive Design
Goal: Combine refined ideas and early component explorations into a cohesive first version that visualizes the end-to-end user experience.
Met with the engineering lead and developers to review technical feasibility and ensure consistency across the product.
Due to time constraints and the need for UI consistency, the engineering team suggested reusing an existing table component previously implemented in another feature.
That table supported row-level deletion but lacked inline editing, which was essential for this use case.
The team confirmed inline editing could be added with minimal effort, but the migration from Angular to React introduced extra development time.
To balance effort vs. value, I proposed adjusting the MVP scope:
Keep the existing table design for consistency.
Enable inline deletion as part of the MVP.
Exclude deletion via modal for this release and defer it for future enhancement.
This alignment ensured a consistent user experience across features while maintaining a realistic delivery timeline.
testing with the PS Team + Customers
Conducted three validation sessions with the Professional Services (PS) team and representatives from IBM, SAP, and SolarWinds, who actively manage data configuration in our platform.
Focused on testing the dependency configuration flow, where users set relationships between controlling and dependent attributes during setup.
Participants identified a critical UX issue: confusion around the required order of selection - whether to choose the controlling or dependent attribute first to save dependencies successfully.
They also uncovered a button state error: the “Save Dependencies” button appeared active even when no valid controlling attribute was selected.
Another issue was that when a controlling attribute became disabled, there was no tooltip explaining why, leaving users uncertain about the next steps.
Based on this feedback, I:
Added inline tooltips to clarify disabled states.
Updated button state to activate only when dependencies were properly defined.
Collaborated with the technical writer to refine microcopy to make the dependency relationship clear and intuitive.
These validation sessions ensured the design reflected real configuration workflows used by PS teams and customers, bridging the gap between product logic and user expectations.
Creating dependencies :
Final Product
how did i measure success?
well…
Success for this feature wasn’t measured in numbers - it was measured in clarity, accuracy, and confidence.
Because this workflow is used by internal PS teams and enterprise admins during setup (not by thousands of self-serve users), we don’t have traditional analytics or volume metrics.
So instead, I measured success through:
Real customer validation (IBM, SAP, SolarWinds)
Reduction in configuration errors reported by PS
Adoption and friction levels during early rollout
Internal operational feedback
Success Indicators 🎯
Reduced misconfigurations: PS teams reported noticeably fewer errors during initial customer setup thanks to clearer dependency logic and improved state handling.
Positive customer validation: IBM, SAP, and SolarWinds confirmed the redesigned flow was far more intuitive, especially when selecting controlling vs. dependent attributes.
High adoption with zero friction: Inline editing and deleting were used confidently by PS and customer teams - no usability issues were reported during early rollout.
Improved data quality: Button and dropdown state logic prevented incomplete saves, reducing invalid configurations.
Consistent UX patterns: Reusing/adapting the table pattern improved cross-feature consistency and shortened onboarding time for new admins.
Internal efficiency gains: PS and engineering both noted that the updated interface reduced training overhead and made setup steps clearer for enterprise customers.
key learnings 💭
Goal: Reflect on what this project taught me as a systems-oriented product designer.
· Early engineering alignment prevented significant redesign later in the process.
· Testing with PS + customers revealed edge cases no internal UX review could catch.
· System constraints are not blockers - they shape smarter, more scalable UX patterns.
· Maintaining consistency across features (table patterns, edit patterns) reduces cognitive load and dev effort.
· Clear microcopy and tooltips can eliminate major user confusion in complex workflows.
project takeaway 🧠
This project reaffirmed the importance of designing within system and technical constraints, a reality of enterprise UX I’m very familiar with. It strengthened the need for structured, systems-first thinking when handling complex logic flows.
It also emphasized how early alignment with engineering and PS is essential - not optional - for preventing rework and keeping delivery efficient.
And ultimately, it served as a reminder that enterprise UX succeeds through clarity, predictability, and error prevention, enabling users to work with confidence and minimal friction.