The Industry's #1 Digital Vehicle Inspection Solution

Project Overview

The campaign creation process in Autoflow's B2B enterprise web app was complex and challenging for users to navigate. The previous screens required extensive manual input, resulting in confusion and inefficiencies that affected both user satisfaction and campaign accuracy. I led a redesign effort to streamline and enhance the experience, making campaign creation more intuitive, faster, and error-free.

‍

The Story

The previous campaign creation flow was a cumbersome experience for Autoflow users. Imagine trying to build a campaign while faced with numerous disorganized fields, unclear navigation, and minimal guidance. Users had to rely on guesswork or reach out for support, which slowed them down significantly. I knew that to make a real impact, we needed to put ourselves in the users' shoes, understand their struggles, and craft a solution that simplified their work.

Execution

Understanding the Pain Points

Through user interviews and analyzing usage data, we pinpointed the biggest challenges users faced:

• Overwhelming Input Fields: Users were presented with an excessive number of fields, all without logical grouping. This lack of structure made it difficult for them to understand what to do next. Users described feeling overwhelmed and often unsure of whether they were filling out the fields correctly.
• Lack of Guidance: The legacy system provided little to no contextual help. For new users, the steep learning curve made campaign creation feel intimidating. They often had to seek help, which slowed them down and led to frustration.
• Fragmented Workflow: The flow lacked cohesion. Users had to jump between different screens and tabs without any sense of progress, which increased the chances of missing important steps.

Designing the Solution

Our approach was simple: listen to the users, iterate based on their feedback, and design a process that makes campaign creation effortless. Here’s how we did it:

1. User Research & Feedback Collection: We engaged users directly to gather their thoughts. They shared stories of struggling with navigation and not understanding the interface. Their feedback became the foundation of our redesign.
2. Information Architecture Overhaul: We restructured campaign creation into a linear, step-by-step process. Instead of jumping around different tabs, users now had a clear journey—from Information to Message, Settings, MSO (Multi-Shop Operations), and Summary. Each step logically led to the next, reducing the cognitive load.
3. UI Redesign with User Focus: The new design groups related fields, making the process feel more manageable. We introduced collapsible sections to reduce information overload, allowing users to focus on one part at a time. Key fields were prioritized, and unnecessary clutter was removed.
4. Prototyping & Testing: Building interactive prototypes in Figma was crucial. Users interacted with these prototypes, and we observed how they used the interface. The feedback was clear—users loved the new navigation flow, clearer hierarchy, and visual enhancements.

The Redesigned Campaign Flow

The new campaign creation process is a guided, user-friendly experience:

• Step-by-Step Navigation: Campaign creation is now divided into distinct stages, represented clearly in the UI. Users no longer feel lost—each step is defined, giving them confidence in what comes next.
• Contextual Guidance: Tooltips, inline explanations, and preview options were added throughout the interface. These features ensure that users have the right information at their fingertips, reducing the need for external support.
• Drag-and-Drop Email Editor: One of the standout features of the redesign is the introduction of the drag-and-drop email editor. Instead of a plain text field, users now have the flexibility to build visually engaging emails using a variety of elements. This shift not only saves time but also empowers users to create campaigns that truly reflect their brand.
• Visual Enhancements & Progressive Disclosure: By utilizing whitespace effectively and applying progressive disclosure, we kept users focused. Settings only appeared when needed, which helped in reducing visual clutter and simplifying decision-making.

‹ ›

‍

Lottie Animations and Motion Graphics

+

Using Figma components, I created layers that export to Lottiefiles to create a compact, low-runtime lottie animation, ready to import into the webapp. Below is an example of the lottie animations used.

Results that Matter

The impact of our redesign was immediate and measurable:

• 50% Reduction in Time on Task: The streamlined flow helped users complete campaigns in half the time it used to take. Clear guidance and logical steps reduced hesitation and rework.
• User Confidence & Positive Feedback: Users expressed that they felt more confident navigating the new system. They appreciated the logical flow, clear instructions, and modernized, clean interface. Comments like “I finally feel in control of my campaigns” became common.
• Reduced Support Tickets: There was a 30% drop in support tickets related to campaign creation. This demonstrated that users no longer needed assistance for basic navigation or understanding field requirements.

Reflections on the Process

This redesign taught us the importance of empathy in design. By truly understanding our users’ frustrations and creating a solution that addressed their pain points, we were able to transform an overwhelming process into one that felt simple, intuitive, and even enjoyable. The journey from a fragmented, confusing interface to a seamless, user-friendly experience shows the power of user-centered design and the difference it can make in real people's work lives.