Smart Capture Interactive Demo

• Objectives
• Solution
• Summary

Objectives

Laserfiche® introduced a new product feature, Smart Capture, necessitating the development of a web-based demo to support marketing and sales efforts. Despite collaboration between the development and product UI/UX teams, dissatisfaction persisted with the demo's design. Its complexity hindered comprehension and lacked compelling interactive elements. The goal of the project was to encourage engagement with our users, so they could see the power of our new Smart Capture feature.

Solution

As a member of the Marketing Creative team, I guided the nuanced discussions between the marketing, UI/UX design, and development teams in order to enhance the demo's engagement potential. This hands-on involvement provided me with valuable opportunities to enhance my UI skill set and explore innovative standards and practices tailored to Laserfiche's needs. The resulting project now stands as a significant sales asset for Laserfiche.

Design

I collaborated closely with the product UI/UX team to enhance their layout design in alignment with our marketing objectives. Drawing upon my expertise as a marketing UI/UX designer, identifying necessary changes—such as adjustments to hierarchy, copy, and visual design—came naturally to me.

Hierarchy

Original Layout Concerns

The original layout crafted by the UI/UX team presented three significant hierarchy challenges; placement of the sample invoices, headline, and the “Upload Your Own” box.

Sample Invoices: The UI/UX team positioned the sample invoices at the top of the layout, introducing information that was disconnected from the messaging and functionality of the demo. These images lacked any affordance, so users were ignoring them as if they were simply graphics.

Headline: The positioning of the headline in the middle of the layout, directly beneath the sample invoices, disrupted the interaction between the sample invoices and the upload your own feature. This consequently made users feel their only option was to upload their own invoice – something that requires extra effort on the user’s part, discouraging interaction.

“Upload Your Own” Box: The drag-and-drop functionality was situated at the bottom of the demo, which fell below the fold. The demo’s usability was extremely low due to this, causing very low engagement.

Layout Corrections

In order to fix these issues, I had to better organize the sections. The following edits made for better engagement and interactivity rates.

Headline: The new layout commences with a strategically crafted headline, serving as the focal point to capture users' attention, convey the primary message succinctly, and facilitate orientation towards the demo's functionality.

“Upload Your Own” Box: In line with the project's objective to illustrate Laserfiche's applicability, the "Upload Your Own" Box was strategically positioned above the fold, promoting user engagement. Its clear labeling enhances the overall user experience.

Instructional Text: Recognizing a flaw in the initial design, I made space for technical instructions to support the "Upload Your Own" box.

Sample Invoices: Concluding the layout, sample invoices were incorporated as a supplementary element to the demo, catering to users who may not have their own invoices readily available for testing.

Copy

The initial headline for the demo was “Smart Capture Feature,” and I drafted “Try the Smart Capture Demo” as an alternative. "Try the Smart Capture Demo" surpasses "Smart Capture Feature" as a headline choice due to its ability to prompt immediate user engagement. While "Smart Capture Feature" provides information, "Try the Smart Capture Demo" actively invites users to interact with the product, instilling a sense of involvement and prompting exploration of its capabilities.

Furthermore, a critical flaw was identified in the initial design: the absence of image upload specifications within the demo. Consequently, certain users experienced errors while trying to upload their invoices, leading to abandonment of the demo. To resolve this issue, I implemented image restrictions, ensuring users were informed about the required specifications for successful uploads.

Visual Design

The initial layout suffered from a lack of brand consistency and clear affordance cues. Leveraging the style guides I developed during the website redesign, I seamlessly updated the layout to align with the brand's visual identity. However, addressing affordance issues proved more intricate. This required the incorporation of iconography for improved legibility, customization of the "Upload Your Own" box to resemble a standard upload element, and the addition of interactive hover elements. During internal UI/UX testing, it became apparent that the sample invoice section was disjointed and underutilized. To enhance usability, I introduced a styled "Try a Sample Invoice" subheadline, clarifying the two interaction options available within the demo. This dramatically increased interactivity with the demo.

Development

The next phase involved working directly with the development team, translating the design into functional code and overseeing deployment.

Front-End Development and Collaboration

After completing my front-end development tasks, the project transitioned to one-on-one collaboration with development teams, a crucial step towards finalization. Working closely with back-end developers proved invaluable, enhancing my ability to articulate front-end needs, grasp back-end structures, and synchronize feature implementations. This collaborative effort bolstered my technical proficiency and streamlined project progress. Through multiple working sessions, I collaborated closely with the backend team, leveraging Chrome debugging tools to facilitate discussions. Together, we identified and implemented necessary modifications, ensuring alignment between frontend and backend code and meeting project requirements.

Collaborative Problem-Solving and Quality Assurance

I collaborated with the back-end team to resolve cross-domain privacy concerns during the implementation of the demo as an iframe. We implemented Cross-Origin Resource Sharing (CORS) on the content-hosting server, specifying authorized domains for accessing resources via the iframe. Through the establishment of appropriate CORS headers, we effectively controlled access to sensitive data and mitigated unauthorized cross-domain requests. This experience provided me with valuable insights into authentication, authorization, encryption, and other security practices essential for building secure applications. Additionally, closely collaborating with our QA team to ensure thorough verification of the asset's functionality. I provided comprehensive testing criteria to facilitate rigorous quality assurance measures:

• Test all interactive elements (buttons, forms, links, etc.) to ensure they work correctly.
• Check how the webpage looks and acts on various browsers, devices, and screen sizes for consistency.
• Evaluate the user interface for clarity, ease of use, and responsiveness to different screen sizes.
• Ensure fast loading times, good performance, and no security vulnerabilities.
• Confirm accessibility for all users, including those with disabilities, and proper translation for different languages.

This ensured that the asset adhered to brand and security standards with seamless performance.

Summary

• Led the improvement of Laserfiche's Smart Capture demo, working with diverse teams to simplify design and boost user engagement, creating a valuable sales asset.
• Facilitated discussions among marketing, UI/UX design, and development teams to enhance demo engagement, refining UI practices to fit Laserfiche's needs.
• Collaborated with product UI/UX teams to redesign layout, addressing hierarchy challenges for improved user interaction.
• Made strategic layout changes, like moving the 'Upload Your Own' box and adding instructional text, to increase demo engagement.
• Worked with back-end developers to tackle cross-domain privacy issues by implementing CORS for secure data access, learning valuable lessons. Also, closely collaborated with QA teams to ensure thorough testing and maintain brand standards.