Mothers Without Borders' Gala

Mother’s Without Borders (MWB) is a non-profit based in Provo, Utah. At their request, I designed a responsive website for their annual gala.

View Prototype

Overview

Client: Mothers Without Borders

Role: UX Designer

Scope: Research, Information Architecture, Wireframing, UI Design, IxD, Prototyping, Testing, Handoff

Time: ~ 100 hours

Tools: Figma, Google Suite, Maze, Calendly

UX Research Plan

Goals

Understand the organization’s main objectives, development constraints, industry (gala) best practices.
Understand what the target audience's ideal gala website looks like, how it should behave, and the user's main objective(s) and purpose of visiting a gala website.

Research Plan Outline

Problem
Background
Research Goals
Objectives
Questions
Methodologies
Target Audience
Assumptions or Risks
Timeline

Methodologies

PROTOTYPE

CONTACT ME

Key Findings

Improve Path to Donate Auction Item
Improve “Learn More” section
Make it easier to scroll through ticket options
Make ticket buttons more obvious

Background

Mothers Without Borders (MWB) is a nonprofit organization that offers hope in developing countries by strengthening local communities in their efforts to:

"Nurture children in crisis by providing a safe home, access to caring adults who invite healing from trauma, clean water, nutrition, and education"
"Empower women and girls with literacy and business skills. We teach principles of conscious living, personal growth and self-reliance to inspire each individual to be the best version of themselves."

MWB holds an annual gala every November, an event where the organization’s successes are highlighted, celebrated, attendees are educated and informed and funds are raised.

The Problem

"[There's] nothing on our website [...] for the gala," said Liz, Development Manager. MWB had a functional and modern website, but they didn't have an online presence for their gala, a vital part of sustaining the organization. They needed a gala website or webpages in order to provide a way to educate, inform, and market their annual gala, as well as allow for donors, sponsors and other supporters to view and purchase admission packages.

The Solution

I created a responsive gala website that fulfilled users' needs and MWB’s needs. The website design was eloquent, research driven, and consistent with MWB’s current gala design patterns and information.

Secondary Research

Competitor Analysis
I analyzed 6 major gala websites that were comparable to MWB’s mission. I took notes on what worked, what didn't, and which designs overall felt the best. I narrowed down my favorite to The Hope Gala, the inspiration behind my first mid-fidelity screens since it flowed well and contained much of the need information on the homepage, decreasing the need for additional pages.

Constraints
I researched WordPress to understand what constraints or limitations MWB's developers may face. My biggest takeaway: WordPress can sometimes get really complex and tends to load slower than other sites. This meant I would want to make my designs simpler and easier to implement in the case that they are working with a novice developer (e.g. intern or volunteer).

Provisional Personas

I created provisional personas to give me something to go off of when preparing my surveys and interview guides: 1) the Billionaire, 2) the Activist, 3) the Celebrity, and 4) the Sponsor/Business.

Survey & Interview

Survey Challenges
It was challenging getting the survey to my target audience. I expanded my survey exposure to LinkedIn, Facebook, and a UX school community on Slack. With over 1,000 views on LinkedIn alone, I was still only able to get 7 qualified survey responses. I ended up sinking more time into this methodology than planned in an attempt to get more qualified responses.

Interview

Using my findings and observations up to this point, I crafted a guide with open-ended questions (largely based on survey responses) so that I could dive deeper into the needs, pains, and expectations of my audience.

New Strategy

I quickly realized that due to narrowness of my market, and my time constraint to get data, I would need to lean on my secondary research in order to provide data-supported designs.

Findings

Summary
When referring to a gala’s website, the first goal people have is to gather the basic information about the upcoming event (date, time, ticket, where, etc). By comparison, other motives (such as becoming a sponsor, learning about the organization, or viewing past events, etc.) were ranked lower in priority, indicating that most attendees are searching for info that’s actually needed in order to attend. They want to be prepared for the gala.

Persona

Time Crunch

I created 2 personas using a template from the Figma community to save on time. I changed some of the formatting, style, and content fields to fit the needs of my project.

Personas

Persona 1: Business Owner (Conrad Campbell)

Persona 2: Retired Investor (May Williamson)

Conrad and May had their differences, but there was also common ground:

Both needed to feel confident in the organization before supporting it.
Both desired to feel/know that their contributions would make a difference.
Both wanted upfront information (event details, org details, mission, etc.)

Information Architecture (IA)

Sitemap
Using my findings from the competitive analysis and previous research, I was able to create this IA (sitemap). Referring back to my research routinely, I was able to determine which IA iteration best handled the users' needs, as well as the organization's needs.

Final Iteration

MWB's limited resources in mind, I opted for the iteration where most details would be displayed on the homepage (not having their own, exclusive page) and navigation options would often link to an anchor point on the homepage (where it was already provided). This reduced the number of pages, resulting in an easier to implement design for MWB's volunteer developer(s). Separate pages can be added later if desired by the stakeholder.

Mid-Fi Wireframes

Screenshot Tracing
I gathered screenshots from various top gala websites (see competitor analysis) and selected the best match for MWB’s purposes. It’s not always necessary to reinvent the wheel; I traced the selected screenshots and modified them as I saw fit. (The Hope Gala was my main inspiration)

Mid-Fi Wireframe
After tracing the desired screenshots, I modified and redesigned the mid-fi screens while applying my research findings and IA. It was also a habit of mine to refer back to my personas regularly.

According to my findings, event details were the most important element to the user, so I kept this at the very top.

Usability Test 1

Why Test Earlier?
I prefer testing earlier on in the design process with a low or mid fidelity design first because I can learn faster and identify potential problems areas sooner before investing time in Hi-Fi. Testing a low or mid-fi wireframe instead of hi-fi also means that my testers will focus on the UX rather than “prettiness” of the design.

Priority Matrix

I tested the Mid-Fi wireframes with 7 testers using Maze. Each task and background given to the testers were based off of my personas' backgrounds, needs, and desires. I aggregated the results and prioritized the needed changes using a Priority Matrix.

Hi-Fi Wireframes

I made the necessary changes from my test results and then applied the existing style guide MWB provided. I then finished the Hi-Fi design by making a fully interactive prototype for desktop and mobile devices.

Usability Test 2

Priority Matrix (Findings)
Overall, the Hi-Fi prototype was a success, but I also uncovered some minor and significant changes that needed to be made:

1 - Package Scannability
The package details varied in length between packages, some having long lists of bullet points. It was difficult for a potential sponsor to scan the package details quickly.

2 - Auction Details
The auction page (while not a top priority) would need some additions and significant iterations in order to provide a better user experience for potential auction donors.

Handoff

Final Iterations

I completed a last round of iterations on the Hi-Fi wireframes and prototype. Ideally, I might have had at least 1 more round of testing and iterations, but, this project had a planned end date that had come.

The Handoff

Shared Files & Folders (Figma)
Annotated data-driven designs
Included a basic guide to the Figma file (Instructions)
Handed file off to the Dev. Manager
Set follow-up expectations (POC for future team members)

Final Thoughts

What I Learned - Stakeholders

I worked with the development manager at MWB, who was this project's primary stakeholder. Here are some of my takeaways and learnings from the experience:

Understanding Constraints and Limitations. I started the project with the "end in mind", exploring what constraints and limitations the organization may have. I learned from the stakeholder that they had a small workforce and that most of their graphic design and web-design had been interns, college volunteers, and occasional hires. Knowing this limitation/constraint led me to try and simplify the design so it would be easier to implement by potentially less-experienced developers.
Keep stakeholders involved in the process, even if it's just a little. They'll feel more invested and sold on the design because they've seen where it came from. My stakeholder's availability was limited, but I made the most of it through conversation scheduling, prepared & concise questions, and provided executive summaries.

Creating the Hi-Fi Prototype was really fun! I've come to love & enjoy the interaction design aspect of UX, as it's satisfying for me to see a prototype function and interact in the way you'd expect and beautifully.