Carry
The Load

Tribute Wall v3: Building an Interactive Form

June 2023, 7-week sprint

My Role: Product Owner and Associate Designer

Tools: Figma, Zoom, Teamwork, WordPress

The Client

Carry The Load is a nonprofit organization dedicated to honoring and remembering the sacrifices of military service members, veterans, first responders, and their families. The Carry The Load Tribute Wall is a digital platform with a heartfelt mission, designed for individuals to pay tribute to loved ones, heroes, and causes. The charity's vision extends beyond the current platform, seeking a permanent home for it and improving the tribute submission process
for engagement.


Problem

  • Carry The Load needed to find a suitable replacement for their existing Tribute Wall platform.

  • The replacement platform needed to offer essential features, including tribute searching, filtering, and the generation of shareable URLs for tributes.

Solution

We have implemented a solution that involves removing the third-party form from the workflow and introducing a new "Live Preview" form. This user-friendly 4-step process not only streamlines data collection but also gathers valuable marketing insights. Moreover, we have established an automated workflow that includes HTML to PDF conversion and integration of form inputs into the database.

Research and Planning

Project Goals

The Carry The Load Tribute Wall has set forth several key goals. On the technical front, the platform aims to establish a permanent infrastructure via WordPress while implementing HTML to PDF automation for streamlined document creation. From a business perspective, the focus is on cultivating community engagement and fostering a profound sense of remembrance. This aligns with Carry The Load's overarching mission to honor the sacrifices of military, law enforcement, firefighters, and their families, as well as other impactful individuals and causes. Lastly, for users, the goal is to empower them to create heartfelt tributes and easily share them with a wider audience, thus encouraging shared appreciation
and remembrance.

Information Architecture

Sketches

I conceived the idea inspired by Docusign and its automated form-filling, where it felt like one was signing a document. The concept revolves around a community actively creating signs using poster boards in real time. I intended to make users feel like they are involved in a collaborative group activity.

The initial page needed to be inviting and serve as a screener to ensure users qualified to submit a tribute.

I aimed to ensure that users could instantly view their information as they filled out the input fields.

Implementing a confirmation page that guides users back to the Tribute Wall landing page or encourages them to contribute to the non-profit.

User Workflow


The workflow begins with users submitting a storyboard form and image, which are stored as a "Tributes" post in Wordpress Admin. Admins then review and edit the post, password protecting it before sharing a preview URL for user feedback. Upon approval, the post is published to the Tribute Wall, with an option to generate PDFs
for printing.

Low and High-Fidelity Wireframes

In considering the design of the broader framework, our focus was on making it intuitive and easy to understand. We aimed to provide users with a preview of the final PDF before sending it to the printer to eliminate errors. After filling out the form, the information would be automatically integrated into WordPress for the copy editor to edit later.

Low-Fidelity Wireframes

  • Share Your Story

  • About You

  • Share Your Story

  • Confirmation

High-Fidelity Wireframes

  • Start

  • About You

  • Create a StoryBoard

Usability Testing

A usability test was used to determine if users like the overall user interface, test the application's ease of use, and see if participants would use the app's main features.

Goals

  • To discover errors that block the user from completing a task successfully

  • To acquire a 100% error-free rate

  • To evaluate the usability of the app

Test Objectives

  • To discover potential usability issues and errors in adding and replying to comments

  • Identify missing objects that are necessary
    or desired

Prototype

Scenario

Submitting a Tribute on the Tribute Wall

Step 1: Go to the Tribute Wall main page.

Step 2: Click "Submit a Tribute."

Step 3: Fill out the Qualifiers and Tribute Details sections, including uploading an image.

Step 4: Review and click "Submit."

Step 5: Download a copy if needed.

Step 6: Share and celebrate the tribute.

Iterations

The individual tribute pages on the Tribute Wall now offer enhanced features, including shareable URLs, scannable content, and simplified social sharing, making it easier for users to share and engage the tribute pages while fostering a sense of community and remembrance.

Through a series of iterative updates, we introduced a user-friendly 4-step form with a progress bar, ensuring an intuitive experience. Furthermore, we implemented robust form error checking and data validation for accuracy and reliability.

In addition to these functional improvements, we also focused on elevating the visual aspects of the Tribute Wall. Moreover, we utilized data and marketing insights to refine the project further, creating a comprehensive and user-centric solution.

A filtering system was added to allow efficient search for individual tributes based on name, location, and branch. This functionality provides users with a streamlined and personalized way to find specific tributes without having to scroll.

Conclusion

By overhauling their form integration process, our client achieved a streamlined workflow that not only enhanced operational efficiency but also facilitated better data collection for marketing insights.

Next Steps

Email Subscribers About New Form and Features

We will send out emails to inform our subscribers about the latest form and functionality updates.

Highlight Tribute Wall on the Homepage

We plan to prominently feature the Tribute Wall on our homepage for increased visibility and engagement.

More design work on the Tribute Wall landing page

Continuously incorporate UI features and additional information onto the Tribute Wall landing page to enhance user comprehension of its purpose and to encourage them to
submit tributes.

Lessons Learned

  • Controlled scope creep can cause project delays and increased costs

  • Allocate extra time to accommodate the changes.

  • Mitigate scope creep by narrowing down the number of tags and deliverables

  • Test using an individual outside the project.

Previous

Just Us Project
Next

Carry The Load Memorial May