UX Case Study: Keep Small Strong x Leucadia101

Project: Help Keep Small Strong save Leucadia 101 amidst COVID-19 impact on small businesses around America.

Teammate: Josh Bechtler-Levin

Role: UX/UI Designer

UX Design Tool: Adobe Xd, Figma

Timeline: 6 Day Sprint

For this project, Josh and I were given the opportunity to partner with Keep Small Strong to help save the community-based, non-profit organization, Leucadia 101.

Before we dive into our process, I’d like to share some insights into both businesses:

As most of you may know, small businesses throughout America have been negatively affected by COVID-19. According to John Waldmann, CEO of Homebase,

By the second Sunday of social distancing, March 29th, more than 50% of businesses in the U.S we’re not operating. Researchers say we’re now at a point of losing at least $2 billion in wages a day.

Thankfully, Keep Small Strong has encouraged volunteers to come together to help them assist in connecting locals to small businesses in their community. These volunteers offer digital solutions and optimize those businesses’ online presence at no cost.

When we found out that Leucadia 101, was one of those businesses that needed our help, we were excited and honored to volunteer our time. Coincidently, Leucadia 101 happened to be based in Josh’s hometown, which inspired our greatest empathy to the cause.

Leucadia 101 is a non-profit community-based organization that works in partnership with their neighborhoods, businesses, and surrounding cities to preserve and revitalize what it means to “Keep Leucadia Funky.”

They offer the San Diego community events that promote local businesses by organizing popular gatherings such as Battle of the bands, wine and food tastings, farmers’ markets, and many more fun activities throughout the year. Unfortunately, given the circumstances of COVID-19, they’ve been struggling with innovative ways to stimulate the local economy which in turn caused difficulties to keep business afloat.

Our Approach

Double Diamond

This project was completed in a 6 Day sprint, using the British Design Council’s Double Diamond design process model. This approach was ideal for us to process our information and create viable solutions to help save Leucadia 101.

At the early stages of our process, Josh and I divided our work to efficiently prioritize workload and implement practicality while still maintaining open communication with one another as well as virtual daily standups with the stakeholders.

Discover

Given that this project was done remotely, our introduction to the stakeholders was done via Zoom. During the call, one of the founding members of Keep Small Strong, Adam Grohs, along with his colleagues, Cheer Taylor and Aditya Pandurangan introduced us to Annika Walden, Executive Director of Leucadia 101, who shared the business problems.

“Fundraising is super important to us right now just because we haven’t been able to host our physical events. We’re basically hemorrhaging money at this point.”

— Annika Walden

Key insights from our conversation:

  • They needed a strategic way to stay engaged with the community amidst COVID-19's quarantine.
  • As well as, a way to further the lifetime of the business, economically.

Leucadia 101 only had three months left of savings to keep business running, it was imperative for us to come together and find ways to increase their funds as well as provide virtual events that would keep the local community engaged.

Normally, designing and developing a website would take 3–6 months to make possible, but due to constraints, this needed to be accomplished as quickly as ever. Thankfully, once we would have completed our design research and rapid prototyping, a team of Keep Small Strong volunteers would help bring our final designs to life.

So the research began...

We used the Lean UX Canvas to keep track of the business problems, the business outcomes, and user benefits, as we discovered them throughout our design thinking process.

Lean UX Canvas

What’s the market gap?

Given that Leucadia 101 partners with numerous local shops, they had trouble identifying their competitors. So Josh and I took the initiative to research and determine the companies and organizations that shared common characteristics and missions. This helped us to identify the essential features of the competitors’ websites, including the missing elements as well as the user’s mental model.

Competitive Feature Analysis

Market Positioning Chart

While testing many of these websites, we identified the feature gaps and moved on to create two market positioning charts. It was at this stage that Josh and I decided to split the tasks. He took on the events side of the business problem and I tackled the donations challenges.

To differentiate our product, I envisioned it to feel more “guided towards making a donation” by sharing Aspirational/Personal Storytelling — it should be as clear as possible to the user where to start and what to do. I also saw a chance to encourage reoccurring donors on the website.

Market Positioning Chart — Donations

Our second opportunity to stand out in the market lied between offering virtual events with high audience engagement.

Market Positioning Chart — Events

User Research

During our user research, we sent out 2 surveys regarding donations and events and conducted 6 interviews. In a matter of a few hours, we were able to collect 90 survey responses along with rich data from our users’ interviews.

Quantitative Data

57% of responders are driven to make donations based on the organization’s objectives and wanting to help their community

57% of responses attend their local community events (art walks, street fairs, etc.)

50% feel only somewhat safe being out in public right now given COVID-19

42% say it’s important to see the impact of their donation

68% are interested in attending fundraisers that are both educational and entertaining

Qualitative Data

“I feel for small businesses and my intention is to support as much as I can, when I can” — Sabrina D.

“I support local vendors because they offer unique and original products you can’t find elsewhere” — Claudia D.

“If I see something that doesn’t give me a backstory or I don’t know their background, I’m not going to donate” — Maria Jose F.

“I feel comfortable going to parks, but I can’t say that I feel comfortable going to an event.” — John V.

Define

Once we discovered what was happening both on an organizational and individual level, we sorted our 115 collected data points into an affinity map, where we uncovered the users’ shared behaviors.

Affinity Map

Key Insights:

  1. Users were motivated to donate because of their interest in the community along with the organizations’ backstory and mission — they were interested in seeing the impact of their donations.
  2. Users felt compelled to attend events because of opportunities for social interactions and connecting with their community.

User Persona

Based on our discoveries, we were able to put a face to our user type, two faces actually. We created two user personas, one event-based named Virtual Valerie, and another donation-based, called Supportive Sam. This helped reduce the risk of losing sight of our users’ mental model.

User Persona- Supportive Sam
User Persona-Virtual Valerie

Task Analysis

To get a sense of what the user currently experienced while navigating the Leucadia 101 website to view the upcoming events or make a donation, we broke down the steps users needed to take to complete their tasks.

The first scenario was to identify the next events Leucadia was planning:

Task Analysis- Events

The second scenario involved making a donation to Leucadia 101:

Task Analysis- Donations

Journey Map

By visualizing and creating each of their phases, we added context to each phase to identify both Supportive Sam’s and Virtual Valerie’s main pain points.

Journey Map- Donation
Journey Map-Virtual Valerie

Our Discoveries:

Our research proved that our users were mainly concerned with:

  1. The sustainability of their community knowing that funds are running low due to COVID-19
  2. The difference between member versus donor
  3. Where and how their contribution will be making an impact
  4. The fear of socializing out during COVID-19
  5. Their emotional state from being isolated
  6. The uncertainty of how they can do their part to help out

Develop

Ideation

At this stage, it was beneficial to invite the stakeholders to be apart of our brainstorming session, to make sure ideas aligned with the business’ capabilities as well as creating a space where everyone gets a say. This also gave us a sense of common goals and purpose with our stakeholders.

Brainstorming

MoSCoW Method

Together we considered the best ideas on how might we…

  • Offer users up-to-date information about COVID-19 in Leucadia?
  • Provide users a way to feel connected to the community?
  • Encourage users to help protect Leucadia’s funky spirit?
  • Offer compelling stories and details that will motivate users to donate to Leucadia 101?
  • Be clear about the difference between membership and contribution?
  • Guarantee the impact of the users’ contribution and make them feel involved?
MoSCoW Method

…and agreed that we would move forward with implementing the circled ideas. While considering the impact vs. effort, we prioritized the ones that would bring forth the minimum viable product.

Minimum Viable Product

Once we had ideas to build from, our key problems finally met the solutions, the MVP:

Leucadia 101 unites the local community amidst COVID-19 fears by offering:

  1. Live-streamed happy hour sunset sessions
  2. Live-streamed crafts and wine tasting
  3. “People of Leucadia” Instagram campaign

The Leucadia 101 website keeps people engaged with the community through inspiring storytelling that drives donations using the following features:

  1. COVID-19 updates (pop-up/banner)
  2. Dedicated page for donations
  3. Donation goal attainment progress tracker

Jobs To Be Done

Leucadia 101’s website will aim to unite the local community through live stream events and engaging content that encourages donations to Leucadia 101’s COVID-19 relief fund.

Events main feature story: When stuck in quarantine, the user wants to experience live stream performances and unique online events, so that they can temporarily escape isolation, preoccupy their kid(s), and feel a sense of community.

Donation main feature story: When users visit the Leucadia 101 website they want to connect to the organization’s mission and story so that
they feel empowered to donate which gives them a sense of hope and awareness.

User Flow — Events and Donations

Finally, we created the user flow to define the screens and actions needed for a user to experience a happy journey while navigating the Leucadia 101 website for a Livestream event as well as encouraged to make a donation to Leucadia 101’s relief fund.

This tool was important for us to analyze and refine the steps taken towards a successful outcome.

Donation Flow
Events Flow

Site Map

Additionally, to improve the website’s navigation and reduce clutter while still adding value to our information architecture. This blueprint was a key tool in our process to help us deliver a better user experience. We also took this time to jump back on a call with our stakeholders to share our new key pages.

The sitemap below presents a rearrangement of the new pages (the blue highlighted boxes) in accordance with the original pages(the black boxes) by having a clear understanding of our value proposition. This helped prioritize our focus and centralized our visual thinking while building our prototypes.

Site Map

Deliver

Once we got the stakeholders’ approval, it was finally time to put our design direction on paper and create concept sketches that aligned with our minimum viable product.

Concept Sketches

In our designs, we aimed to (1) Show the importance of saving the organization (2) Clarify to the community that it was critical to bring locals together and donate to save the organization(3)Invite users to take part of our virtual events(4)Keep the site “Funky”

Usability Testing

Our solutions were tested with 10 users, (5 for donations — 5 for events).

and these were our key discoveries:

  • Users expected an option to add a custom amount to donate
  • Along with an area for them to input their email
  • And they requested more payment options

Mid-Fi Prototype

Keeping in mind the insights from our usability tests, we were able to evaluate our concept sketches and apply the users’ requirements to our mid-fi prototype.

I should mention that Josh and I found it challenging to draft aspirational copy for mid-fi, which slowed us down a bit. We wanted to make sure that we were conveying Leucadia’s community-focused story accordingly and effectively. A great solution to our problem was adding two hashtags throughout the website that would reinforce Leucadia 101's mission:

#SociallyDistantLocallyPresent

#KeepLeucadiaFunky

Mid-Fi Prototype

Usability Testing

We were determined to create a great experience for the end-user, so we conducted another 10 usability tests on the mid-fi prototypes. (5 tests for events, 5 for donations).

and these were the users’ key concerns:

“What impact will my donations make?”

“What topics would be included in the newsletter?”

“What is the progress bar tracking?”

Visual Competitive Analysis

Before creating our hi-fi prototypes, we conducted a visual competitive analysis to analyze how our competitors’ websites were structured visually and identified key elements they used to persuade users to take action.

Visual Competitive Analysis

Brand Attributes

In order for Josh and I to create meaningful and cohesive visual elements to the final designs. We asked Leucadia 101’s Executive Director, Annika Walden, how she would want locals to describe her organization in 5 words. This was her response: Inclusive, Eclectic, Fun-loving, Devoted, Local.

Brand Attributes

Mood-Board

While considering those brand attributes, we created two mood-boards (1 for donations, 1 for events) to use as a visual guide for our hi-fi prototypes.

Mood-Board

Style Tile

We created a style tile based on their site's current state to make sure we were reflecting the essence of the brand in the colors, shapes, and overall feel of the website.

Style Tile

Atomic Design Inventory

We established a design system to use as a pattern library to help create consistency throughout the website. You’ll notice that we incorporated the Funky Leucadia yellow for a pop of color and representation of the community.

Atomic Design Inventory

Hi-Fi Prototype

After all of our research and testing, we created a high-fidelity prototype of the website which we tested. Our users made a valuable suggestion of adding texture to show more of the organic feel of Leucadia. As a result, a script font and textured background was added, which indeed emulated Leucadia 101’s personality.

Hi-Fi Prototype

Success Metrics

  • Web Traffic & Funds Increase
  • Low Bounce Rate
  • Donation & Community Engagement Increases

Failure Metrics

  • Web Traffic Decreases
  • High Bounce Rate
  • No Donations & Funding Diminishes

Key Learning

  • Share your discoveries with the stakeholder to validate assumptions.
  • Thinking outside the box can lead to great ideas.
  • Organizing and documenting your process reduces blockers
  • Collaboration reduces the risk of a narrow perspective.
  • Estimate the level of effort needed to complete tasks and time-box yourself.

Next steps

Building up the ROI by adding a swipe up feature on Instagram stories and reference links on other social media channels to encourage users to visit donations and live stream pages.

Thank You

Thanks for the claps if you enjoyed this article. As always, feedback is appreciated. If you’d like to connect, please reach out! — Bianca Salomon

Product Designer