Carry The Load

Memorial May:
An Event page

March 2023, 5-week sprint

My Role: UX/UI Designer

Tools: Figma, Zoom, Teamwork, and WordPress

The Client

Carry The Load is a non-profit organization dedicated to honoring military service members, veterans, first responders, and their families by restoring the true meaning of Memorial Day. Its signature initiative, Memorial May, is a month-long campaign culminating in the Memorial Day weekend with events like nationwide relays, community rallies, and the Dallas Memorial March. These activities raise awareness, funds, and foster remembrance of the sacrifices made by those who serve, while supporting organizations that provide critical resources for their families.

Objectives

  • Increase donations

  • Improve UX/UI

  • Platform migration

  • Legend & button clean-up

  • Page hierarchy

Solutions

  • Make it easier and the ‘why’ to Donate more clear

  • Help new site visitors understand the various Memorial May events and ways they can participate 

  • Change route icon 

  • Make visual distinction between buttons vs labels 

  • Move event information above the map

Research and Planning

Project Goals

  • To create an engaging, modern, and on-brand site experience that highlights Memorial May.

  • To ensure users can easily navigate through events, relays, and opportunities to participate

  • To enhance storytelling and promotion of Memorial May’s mission and impact.

  • To design a more strategic and functional platform that drives engagement and action.

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

  • Memorial May

  • Dallas March

  • Volunteer to March

  • Donate

High-Fidelity Wireframes

  • Memorial March

  • Dallas Memorial March

  • Volunteer to Walk

  • Donate

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

Clear primary buttons like “Join a Relay”, “Donate”, or “Learn More”.

Engaging banner with a Memorial May call-to-action (e.g., “Honor Our Heroes: Join Memorial May”).

Determine how to visually represent the connection between the rallies, the Dallas Memorial March, and individual events during Memorial May. The chosen solution was to use a timeline to illustrate their progression and relationship.

Moving Forward

The page improves user engagement by featuring prominent event details, streamlined navigation, engaging visuals, and a flexible layout, while serving dual purposes as both an event hub and a Google Ads landing page.

Next Steps

Make it easier to find on the navigation

It is not easy to find Memorial May in Navigation

Continue to update as event information changes

Carry The Load has new information each year, so the page will need to be continuously updated

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

Carry The Load Tribute Wall v3