Digital Transformation Assessment

• Objectives
• Solution
• UI / UX Testing
• Summary

Objectives

Empower® serves as Laserfiche's® annual flagship conference, attracting thousands of attendees year after year. The theme for Empower 2018 was Digital Transformation, an initiative dedicated to reshaping client workflows into streamlined, digital-centric environments. Collaboration across multiple departments was instrumental in crafting the event's overarching message and content. Within this collaborative effort, my pivotal role was to create a dynamic web experience. This strategic decision raised awareness about the Digital Transformation Model and Empower and significantly fostered lead generation for Laserfiche demonstrations, leaving a lasting impact on our audience.

Solution

Empower was the one project where management encouraged us to be creative with the Laserfiche brand and think unconventionally. I seized this opportunity to transform what could have been a basic landing page with a downloadable asset into a much more immersive user experience. My solution garnered significant acclaim and became a standard asset in Laserfiche’s template library. To crown this achievement, I was recognized and invited to present it at the prestigious Empower conference, a testament to the impact of my work.

Content Strategy and Technology Sourcing

I focused on maximizing user interaction and engagement when developing my content strategy. I adopted an innovative approach to information gathering, understanding that user experience is key to driving conversions. Instead of a traditional landing page, I implemented a progressive quiz layout. This strategic decision was driven by my goal to enhance user enjoyment and participation, thereby reducing abandonment rates and optimizing conversion pathways.

My design decisions were informed by a combination of past testing experiences and industry best practices in UI/UX design. I recognized the progressive quiz format as an effective means of breaking down the information-gathering process into manageable steps. This approach aligns with user preferences for interactive content and fosters a sense of progression and accomplishment as users navigate through the assessment.

To support this interactive quiz concept, I evaluated various technology options as part of the content strategy. Despite exploring external platforms like SurveyMonkey and Google Forms, I encountered limitations in either budget constraints or technical functionalities. As a result, I turned to our in-house solution, Laserfiche Forms, recognizing its potential for customization and seamless integration within our overall digital ecosystem.

By strategically employing a progressive quiz layout, informed by robust content strategy considerations, I aimed to create a dynamic and engaging user experience that drives meaningful interactions and ultimately achieves our conversion objectives.

UI/UX Design

Visual Identity

The overarching vision was to develop a creative way to educate customers about the Digital Transformation Model, increase conversions, create a fun new way to engage customers and promote the Empower conference. The landing page was part of the corporate site, so the visual elements (color scheme, typography, logo usage, grid, etc.) were seamlessly integrated into the project.

Content Optimization

The primary target audience was potential Empower attendees. Although the site was accessible to the public, we also considered our landing page audience in the awareness and consideration phases. While the Product team controlled the messaging, my marketing background allowed me to influence the content. I helped simplify the questions to align with the awareness and consideration phases our target audience was in. Asking overly detailed questions could overwhelm researching individuals, causing them to abandon the page. Instead, we kept the tone conversational to resonate with the target audience. For example, we asked, "Have you integrated your content and process systems with one another?" rather than the more in-depth, "Have you integrated your content management system with your business process workflows to streamline document management and improve productivity?"

This approach ensured the messaging was clear and inviting, helping to effectively guide users through the funnel.

Teaser Page Transition

One project constraint was that customers couldn't be directed straight to the assessment quiz; instead, they were guided to a teaser page for the Digital Transformation Model, which then linked to the quiz. The only available asset for the Digital Transformation Model was a comprehensive white paper, "Accelerating Digital Transformation: How to Realize Digital Innovation Fast in a Post-Pandemic World," aimed at bottom-of-funnel customers, leaving limited content for the teaser page.

My primary goal was to avoid high bounce rates due to this limitation, so I encouraged users to proceed to the quiz quickly. To achieve this, I designed the hero section like a banner featuring a compelling image, a concise headline, and a highly visible button to guide users toward the quiz.

Progress Bar

Progress bars are crucial in form progression as they provide users with a clear visual indicator of their current step and overall progress. This navigation aid reduces user anxiety, clarifies remaining steps, and encourages completion by offering a sense of control and direction throughout the form journey.

The native behavior of Laserfiche Forms was to provide a basic text indicator (e.g., "1/10" to represent being on the first question of ten). To improve the user experience, I aimed to develop a custom progress bar that served as a navigational aid, created intrigue, and enriched the visual experience. To achieve this, I designed a series of brand-consistent icons to represent each of the 16 questions.

At the time, the VP of Marketing restricted stock photography in favor of a more minimalist look and feel. In response, I developed a set of unique icons for this purpose. I ensured the icons' weight, spacing, and subject matter matched existing marketing collateral and had them reviewed by the Creative team for alignment. These icons became part of the Digital Transformation Model style guide and were used by the Creative team in subsequent projects. I implemented the icons as part of the progress bar to create a visually appealing guide. They served as an anchor for the layout from page to page and facilitated quick comprehension of the subject matter.

Question Legibility

Using large, clear text for the quiz questions made them easy to digest, enhancing readability and reducing cognitive load. This simple, visually accessible approach helped users quickly understand each question, leading to a smoother and more efficient form-filling experience. The only improvement I wish I could have included was to make the question text left-aligned instead of centered for legibility reasons.

Quiz Answer Buttons

To ensure form progression was easy and engaging, I decided to use big button design and a one-column layout. Big button design leverages large, visually prominent buttons to facilitate clear navigation by drawing immediate attention to key actions. Their size, simplicity, and strong contrast make it easy for users to identify and interact with primary calls to action, improving overall usability and guiding users seamlessly through desired conversion paths.

I also stacked the 'yes,' 'no,' and 'maybe' answer buttons vertically in a one-column design to enhance clarity and readability. Aligning the options vertically allows users to process their choices quickly while minimizing visual clutter. This layout ensures each option is larger and more accessible, particularly on touch devices, reducing selection errors. Additionally, the single-column structure aligns with natural scanning patterns, providing a consistent and streamlined user experience across all devices.

Development

CSS Overrides

The implementation of these layouts involved a key technique-CSS overrides. This was necessary to maintain brand-consistent styles, as the default Laserfiche Forms styles posed technical challenges due to their specificity and rigidity. To address this, I meticulously identified the critical CSS classes and selectively applied overrides, ensuring they were practical and non-intrusive. This approach allowed me to circumvent conflicts with existing styles, enabling me to create custom designs.

Custom Flow Control in Laserfiche Forms

I wanted to display each question individually to increase visual appeal, reduce form fatigue, and enhance the landing page's interactive fun. The default functionality of Laserfiche Forms couldn't accommodate this behavior, so I had to think of a creative solution. Laserfiche Forms does allow for tabs, providing a basic framework that I extended using jQuery. I engineered custom functions to suppress the default behavior of Laserfiche Forms, allowing for precise control over the progression of the assessment. By tailoring these custom scripts, I could manipulate form behavior to adjust the assessment flow based on user inputs dynamically. This enhanced control ensured that each user experienced a personalized journey through the assessment.

Quiz Logic Development

I first needed to establish a point system to create a dynamic quiz. I collaborated directly with the Product team, which authored the white paper, to develop a point-based logic system for the quiz. This process involved defining a comprehensive set of scoring rules and implementing a dynamic scoring algorithm. The branching logic ensured personalized responses based on user input, delivering tailored feedback and enhancing engagement. This innovative feature elevated user engagement and delivered a truly customized experience, showcasing the power of intelligent design in interactive web applications.

WordPress Wrapper

Following the completion of assessment design and development, the subsequent step entailed integrating the assessment inside our corporate website. This custom wrapper served the dual purpose of maintaining domain control over the assessment while also creating an immersive environment for delivering our marketing message.

One of the primary challenges encountered during this phase revolved around cross-domain privacy policies. Due to security constraints, our IT team couldn't adjust server settings, necessitating direct collaboration with Laserfiche Form developers to devise a solution. This interdisciplinary cooperation provided valuable insights into vanilla JavaScript and cookie creation, facilitating seamless communication between the Laserfiche Form server and our corporate website's server without encountering rendering or console errors.

Responsive States

Laserfiche Forms cannot be embedded on another website natively, so I employed iframes to work around this limitation. When a page renders, the iframe executes inside a parent DIV, which can constrain its height. This means that its height is affected when the quiz renders in different responsive states. Since the parent DIV and iframe do not automatically expand with the content, the infamous "double scroll bars" can appear—one for the window and one inside the iframe. To ensure only the window scroll bar renders for the best user experience, I considered two options:

Option A: Utilize a jQuery iframe control script that detects the window size and adjusts the iframe size accordingly. This offers greater design flexibility but doesn't always render correctly, potentially causing the double scroll bar issue.

Option B: Simplify the iframe design by avoiding placing elements below the iframe. This way, the parent DIV can be percentage-based, allowing it to expand naturally. This approach ensures bulletproof responsive behavior but limits design flexibility.

I ultimately chose Option B to guarantee a seamless, responsive user experience, even if it meant limiting some design options.

Dynamic Results Page

The last primary technical goal for the Assessment Quiz was to create a dynamic results page that displayed custom assessment results. I used base64 encoding to pass data from the Thank You page to the results page via a URL variable to achieve this. I then used PHP to process the data with the base64_decode and explode functions. I ensured the values could be accessed anywhere on the page by printing the decoded variables back into local JavaScript memory using a basic echo function.

I utilized custom HTML blocks and JavaScript to create dynamic shortcode functions in the WordPress results page. These functions read the user-submitted values and return the appropriate content. Once the shortcodes were defined, I could quickly call them within the results page design. This setup allowed me to get creative with the design, incorporating flourishes like the animated graph and dynamic checkmark content.

UI / UX Testing

I collaborated with internal team members to evaluate the user interface and experience of the assessment landing page. This fosters a sense of ownership and involvement, resulting in stronger marketing assets. Each member assessed specific criteria including marketing message clarity, navigation ease, load speed, responsiveness, and overall customer experience. They were encouraged to explore the page at their own pace and provide candid feedback based on their impressions and observations.

This process gathered diverse team perspectives, providing a holistic understanding of the landing page's strengths and weaknesses. It led to actionable recommendations, including refining the marketing message, simplifying button design, and reducing contact form fields. These changes boosted user experience and business outcomes.

Summary

• Strategically reimagined a basic landing page, crafting an immersive experience that became part of the Laserfiche template library, and won an invitation to present at the Empower conference for the project's innovative impact.
• Crafted a satisfying user experience by diligently considering the needs of our target audience and strategically implementing UI/UX design principles. Ensured brand consistency, employed progressive disclosure, and established a strong visual hierarchy, resulting in an engaging and intuitive interface that resonated effectively with users.
• Creatively adapted Laserfiche Forms to align with project objectives and overcome technical constraints, demonstrating resourcefulness and determination in achieving project success.
• Conducted comprehensive UI/UX testing in collaboration with internal team members, resulting in actionable recommendations that enhanced marketing message clarity, navigation ease, load speed, responsiveness, and overall customer experience, ultimately boosting business outcomes.
• Successfully integrated the assessment into the company website, adeptly overcoming cross-domain policy challenges to deliver a dynamic results page aimed at nurturing our target audience more effectively.