As the Senior Product Designer at Accutics, I led the design of a highly customizable B2B product that streamlined campaign tracking and metadata classification for various advertising channels. In addition to my responsibilities of conducting user research, creating wireframes and prototypes, and designing the product's aesthetic and user experience, I also designed the flow for configuring highly customizable solutions for clients like Volvo, Pandora, Grundfos, and Unilever.
Working closely with product management and cross-functional teams, I ensured that the product aligned with the needs and goals of all stakeholders. By incorporating feedback and insights from stakeholders throughout the design and development process, I was able to create a product that met the unique needs and requirements of each client while maintaining a high standard of design quality and usability.
My contributions to the product included creating an intuitive and visually appealing user interface, developing a responsive design that adapts to various device types, and incorporating user feedback to optimize the product's features and functionality.
The success of the Accutics product resulted in improved campaign management and performance for clients across various industries. With my expertise in designing highly customizable solutions, I was able to deliver products that met the unique needs and requirements of each client, leading to increased customer satisfaction and retention.
Exploring problems and finding effective solutions
- A Chrome extension
As a product designer in a collaborative team, we constantly seek innovative solutions to meet our clients' needs. We saw an opportunity to streamline the campaign data generation process, reducing costs by cutting down the extended hours agencies typically need. During the conceptual phase, we identified a major pain point: the fragmented and time-consuming process of managing data across multiple platforms. Agents had to switch between the Accutics platform and various marketing tools, copying and pasting data repeatedly. By conducting user research, observing workflows, and gathering insights, we devised an effective solution. This collaborative effort led to the development of the Accutics Chrome Extension, a tool designed to enhance data generation and management for marketers.
Removing anything the user doesn't need to know in this context
Challenge
Managing data across multiple media platforms presented several hurdles:
Fragmented Workflows: Marketers had to switch between different tools to generate tracking URLs, short URLs, and QR codes, leading to inefficiencies.
Inconsistent Data Standards: Ensuring uniform naming and tracking conventions across various platforms was challenging.
Time-Consuming Processes: Manual efforts in generating and managing data were prone to errors and consumed significant time.
Data Display Constraints: Fitting extensive data into one screen was difficult due to horizontal space limitations. User interviews revealed that agency users primarily needed the generated output and metadata. This insight prompted a redesign to display selected data in a tiled view, leveraging vertical space more effectively.
Solution
The Accutics Browser Extension was developed to address these challenges with several key features:
Instant Generation: Branded tracking URLs, short URLs, and QR codes can be generated instantly within the browser, eliminating the need for multiple tools.
Unified Workflow: The extension integrates across all media platforms and internal tools like CRM and online spreadsheets, standardizing naming and tracking conventions.
Simplified Data Management: Powered by existing Accutics features, it provides context-aware guidance to prevent errors and maintain clean, accurate data without disrupting workflows.
Optimized Data Display: The extension was redesigned to present selected data in a tiled view, making efficient use of vertical space and focusing on the essential output and metadata.
Outcome
The Accutics Browser Extension significantly improved data management processes for marketers:
Efficiency Gains: Usability tests showed a 60% reduction in time spent on submitting the marketing data.
Error Reduction: Context-aware guidance is estimated to have a 25% decrease in data entry errors, ensuring more accurate and reliable data.
Enhanced Usability: The switch to a tiled view not only facilitated faster platform usage but also made the extension more user-friendly, specifically tailored to the needs of agency users
UX Methods Used
User Interviews: Engaged with agencies to understand their challenges and needs.
Contextual Inquiry: Conducted in-depth field studies to gain a robust understanding of work practices.
Affinity Mapping: Categorized and sorted qualitative data to identify themes and insights.
Usability Testing: Tested the extension with real users to uncover problems and opportunities for improvement.
Iterative Design: Continuously refined the extension based on user feedback and testing results.
Whiteboarding and Wireframing: Collaboratively brainstormed and sketched initial ideas and created low-fidelity wireframes to visualize the flow.
Prototyping: Developed interactive prototypes to test and refine the user experience.
UX Principles Applied
Law of Proximity: By organizing related data elements into tiles, users can quickly understand and access relevant information, improving their workflow efficiency.
Fitts' Law: The design ensures that key functions and controls are easily accessible, reducing the time required for users to perform tasks.
Hick’s Law: Simplifying the interface by focusing on essential outputs and metadata minimizes cognitive load, enabling faster decision-making and task completion.
Peak-End Rule: Ensuring that the most critical interactions are smooth and error-free, and ending the user journey on a positive note, leaves a lasting favorable impression on users.
Reflecting on client success
I constantly strive to enhance our platform's usability and ensure it meets the intricate needs of our clients. Feedback from users not only validates our efforts but also guides our ongoing development to better serve their requirements. Here’s a glimpse of how our intuitive design and robust features are making a difference, as shared on G2, where you go for software insights based on over 2.5 million real reviews:
"Accutics solution is the perfect antidote to these challenges with integrations with all major media buying platforms and an intuitive UI that simplifies these processes. We have seen firsthand how this impacts our clients' businesses across compliance, accuracy and ultimately return on marketing investment."
Conor M., Analyst, Marketing Analytics Agency
"Accutics' "Standardize" tool gives marketers the ability to help standardize naming conventions. It has a good UX. Accutics is an effective tool, easy to use"
Anonymous, Head of Marketing, Small business
"The best thing about using Accutics to measure our performance is the simplicity of the service. By far the most intuitive system I have worked with."
Mathias L.,CRM manager, Alka Forsikring
"We operate in a fairly complex martech setup where a part of the advertisement is done via GMP and part is done in different ad engines while the measurement is done in Adobe Analytics, as well as engines and GA. This is done across 15+ markets and for us it is imperative that we have consistent tracking on the campaigns that allow us to reach a proper level of granularity when slicing the campaign data for reporting, this would not be possible without Accutics. The system is easy to use and support is fairly good with the Accutics team ..."
Nikola K., Head of MarTech Section, Saxo Bank
Integrating feedback into our analytics setup has been a game-changer. It’s fulfilling to see how our efforts in digital marketing governance help clients maintain control over their campaigns, directly impacting their KPIs related to accuracy and compliance.
Creating a Design System with Figma
- An Atomic Design Approach
I led the creation of a comprehensive design system using Figma to align our design and development teams. We aimed to ensure consistency, enhance efficiency, and facilitate collaboration. The primary challenge was to unify our UI components across various platforms and products.
To tackle this, I employed an atomic design methodology, breaking down our UI into fundamental building blocks:
Atoms: Basic elements like buttons and icons.
Molecules: Combinations of atoms, such as form fields with labels.
Organisms: Complex components like navigation bars.
Templates: Page-level structures.
Pages: Final designs with real content.
Using Figma, I created reusable components, defined design tokens for styles, and utilized variants and variables to manage different states and dynamic data. This approach ensured all elements adhered to the same design principles and made it easier to manage component variations.
I also developed comprehensive documentation within Figma, including guides, interactive examples, and a change log. This documentation facilitated better communication and collaboration between teams, ensuring everyone was on the same page.
Design system example showcasing the atomic design approach
In maintaining the design system for Accutics, variables play a crucial role in ensuring consistency and flexibility. For color schemes, variables allow easy switching between dark and light modes, providing a seamless user experience regardless of the environment. Spacings and responsive shapes are managed through variables to maintain a cohesive layout across different devices. Additionally, taxonomy and translation keys are standardized using variables, facilitating accurate and efficient localization. This approach ensures a scalable and adaptable design system that meets diverse user needs.
Accessibility Audit and WCAG 2.2 Compliance
At Accutics, I conducted a comprehensive audit to ensure our platform aligns with WCAG 2.2 standards. Even though our platform is not public-facing, maintaining compliance with the latest accessibility guidelines is crucial. This proactive approach ensures we stay at the forefront of industry changes, meeting the expectations of new clients and contracts.
The audit included a detailed analysis of our platform's accessibility features, identifying areas for improvement. I provided actionable steps to enhance our compliance, focusing on:
1. Improving keyboard navigation
2. Enhancing screen reader compatibility
3. Ensuring sufficient color contrast
4. Simplifying content for better readability
To support these efforts, I enhanced our design process by integrating plugins for Figma. These tools streamline compliance checks and make it easier for designers to adhere to accessibility guidelines. Additionally, this improvement facilitates a smoother handover to developers, ensuring that accessibility considerations are maintained throughout the development lifecycle.
This commitment to accessibility not only aligns with our values but also strengthens our market position by addressing the needs of all users.