Leucadia 101— A UX/UI Case Study
An Effort to Save Small Businesses Amidst the Coronaconomy
Project: Leucadia 101 in partnership with Keep Small Strong
Duration: 6 days
Role: UX/UI Designer
Team: Josh Bechtler-Levin and Biana Salomon
Location: Remote
Small businesses are the backbone of America. According to the U.S. Census Bureau, there are 30 million small businesses in America, which means small businesses comprise 99% of all U.S. businesses. Unfortunately, with COVID-19 currently wreaking havoc on our society, our nation’s small businesses are amongst the most threatened.
Backstory
To rewind briefly back to mid-April, when we were in the depths of COVID-19 lockdown, I wrote a case study about a local Mexican restaurant that was trying to adapt to this new crazy world. I posted the case study to LinkedIn, which piqued the curiosity of a former colleague of mine, Mike Villa.
Mike had recently started working with the non-profit, Keep Small Strong, and recognized that there might be an opportunity to apply the same type of UX process that I had conducted with that local Mexican restaurant, The Taco Stand, with other small businesses that were struggling due to COVID-19 as well. He said,
“the timing of your article and my involvement with Keep Small Strong was all too coincidental, I felt I couldn’t not reach out.” — Mike Villa
Keep Small Strong (KSS) is a collective effort to save small businesses across America. The collective is made up of passionate individuals who work at incredible companies, and who are volunteering their time to save thousands of small businesses from shutting their doors due to COVID-19 — the shops, restaurants, and services that each of us has in our own respective communities, and that we proudly call “my local [shop]…”.
After my call with Mike, I felt inspired to join the movement and help. The next day, I discussed the KSS initiative with my instructor, davidfast, and pitched that we work with the non-profit for our final project. Fast forward one month, and here we are!
The Client
One of the small businesses that applied to KSS for help was Leucadia 101. Leucadia 101 is a non-profit community-based organization that works in partnership with the city’s local neighborhoods, businesses, and surrounding cities to preserve and revitalize what it means to “Keep Leucadia Funky.” They offer a wide variety of events throughout the year that are aimed at bringing residents a unique atmosphere while exploring the community and stimulating the local economy.
Where is Leucadia?
Leucadia is a quaint beach town located about 40 minutes north of downtown San Deigo. It also happens to be where I currently live, so I was extra invested in this project!
DISCOVER
To kick things off, we arranged a Zoom call with the stakeholders. We spoke with Adam Grohs, Founding Member of Keep Small Strong and Founder/CEO of agnoStack, Chree Taylor, Ops + Resource Director at Keep Small Strong, Annika Walden, Executive Director of Leucadia 101, and Aditya Pandurangan, Managing Partner at TAOS Digital.
The key takeaways from the call were that Leucadia 101 needed:
- Dire help with funding
- A way to engage with the local community amidst COVID-19 lockdown
Lean UX Canvas
We organized our findings via the Lean UX Canvas — a living document that we returned to throughout the sprint.
Typically, a project like this may have taken 6 months to design, engineer, set up an e-commerce store, etc. However, we were in a unique situation. KSS is backed by multinational multi-million dollar companies that are currently donating their time and expertise to help small businesses as quickly as possible. With time being of the essence to keep Leucadia 101 from shutting their doors, we were in a fortunate position to pair our Design Thinking and rapid prototyping knowledge, with other volunteers from KSS to deliver a solution in record time.
“Let’s put aside our typical playbook. And let’s move at the speed that these businesses need our help.” — Adam Grohs
With only three months of funds left, we needed a way to increase donations to Leucadia 101, as well as virtualize their live events (for community engagement and to promote donating).
Competitor Analysis
Competitive research for this project was tricky because direct competitors were not apparent from the start. Leucadia 101 oversees a wide range of local shops and restaurants, so we had to determine who we were directly helping — Leucadia 101’s users or the users of the local shops that Leucadia 101 works with? The two go hand-in-hand, but after further research and discussion with the stakeholders, we determined that the users directly engaging with Leucadia 101’s website, events, and fundraisers would be the primary target.
In our competitive research, we examined Eventbrite, Go Fund Me, Twitch, Patreon, and Vous Church. While there were more features than just the handful we listed here, we decided to focus on the areas that revealed feature gaps, the “Blue Ocean”, and our users’ mental models.
Twitch was a competitor of particular interest given their recent popularity as a platform to Livestream a wide array of events (not just gaming) as a result of COVID-19.
In an effort to be as efficient as possible, Bianca and I split up our mission, with Bianca taking lead on donations, and me taking lead on events. Then, throughout the process, we would come together to share data, updates, discoveries, etc.
Market Positioning Chart
To better understand the “Blue Ocean”, or untapped market opportunity, we created two market positioning charts. The first identifies the “Blue Ocean” as having virtual events with high audience engagement.
The second “Blue Ocean” is for donations and represents “Aspirational/Personal Storytelling” as it intersects with a high level of “Recurring Donors”, below:
Quantitative Data
One of the most important lessons that I’ve learned from my time at Ironhack is that data is king. If you can drive solutions that are rooted in data, then you will be providing ultimate value to your users. With that said, we created 2 surveys that we posted to a variety of Subreddit threads. In total, we collected 90 responses in just over 24 hours.
Here are a couple of key findings from the events-focused questions:
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
Next, donation-related questions provided the insights below:
57% of responders are driven to make donations based on the organization’s objectives and wanting to help their community
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
To support the data from the surveys, we dug deeper into our research by collectively conducting 6 interviews. The interviews provided even richer data points, some of which you can see below:
“I feel comfortable going to parks, but I can’t say that I feel comfortable going to an event.” — John V.
“I like virtual events for the access to musicians and concerts that you would have had to pay for, or traveled to, otherwise.” — Abby S.
“The best part of virtual events is that you don’t have to wear pants” — Kathryn M.
With this mutual understanding of our users, we were ready to move into the Define stage of the Design Thinking process.
DEFINE
The first step in making sense of the survey and interview data was to lay it all out on a whiteboard. Given our new virtual environment/work-from-home situation, we used Adobe XD’s Whiteboard plug-in — I highly recommend it!
Affinity Mapping
After meticulously combing through the survey responses, user interviews, and stakeholder interviews, we transcribed each data point onto a sticky note. In total, we collected 115 data points, seen below:
Up until this point in the UX process, there was so much information gathering, that it was tricky to hold a line-of-sight. So, adding just the slightest bit of structure (via sticky notes) came as a big relief. To do so, we began grouping similar points (as seen by the bold black labels) below:
Affinity mapping continues to be one of my favorite exercises because it takes ambiguous information and turns it into a digestible foundation to build off of. For this reason, it also imperative that this part of the UX process is done thoroughly.
Value Proposition Canvas
Viewing the data through the lens of the Value Proposition Canvas (VPC) helped us see the importance of community engagement as it correlates to donations. This was another living document that we returned to throughout the sprint. The customer side of the chart is shown below:
User Persona
Adding more color to our data, Bianca and I created two user personas — one for events and one for donations.
Say hello to our events-based persona, Virtual Valerie!
Virtual Valerie's friend, Supportive Sam, is our donations-based persona below:
Both of these user personas were born from the data that we gathered. They represent a composite of our target majority audience. Building these personas was useful to our process because it gave us a reference point that we could always circle back to. When we got stuck, we would ask ourselves — What would Supportive Sam say? Or, what would Virtual Valerie do? In doing so, we also removed (or lessened, at least) our own bias from the equation and put the user at the center. As the famous UX motto goes —
YOU are not the USER!
Task Analysis
After establishing our personas, it was time to test how our personas interacted with the Leucadia 101 website.
Before moving forward with a solution, it’s important to understand the current state. The task analysis helps illustrate that current state.
The path to click through to the “Events” page was relatively straightforward and is shown below:
The path to click through to the “Become a Member” page is seen here:
Already, we noticed some confusion with what it meant to be a member versus what it meant to donate / if there was a difference. At this stage, we were still defining the space, so we made note of our observation and continued onward.
User Journey Map
Diving deeper into Virtual Valerie and Supportive Sam’s experiences with events and donations, we created two user journey maps.
First, this is Virtual Valerie’s journey as it relates to her experience with attending Leucadia 101 events (or lack thereof due to COVID-19).
Virtual Valerie’s Journey
The three low points, or pain-points, that we uncovered in her journey were:
- She’s afraid of going out due to COVID-19
- She’s worried about her emotional state from being isolated
- She’s unsure of how she can do her part to help out
Next, we examined Supportive Sam’s Journey as it relates to her wanting to make an online donation to Leucadia 101.
Supportive Sam’s Journey
The three low points, or pain-points, that we uncovered in her journey were:
- She’s worried about the sustainability of her community know that funds are running low due to COVID-19
- She wants to help but is unclear about the difference between member versus donor
- She wants to know where her contribution will be making an impact
By examining how our users felt, as well as what they thought, throughout their experience navigating the website, we obtained a glimpse into their emotional state. Because most decisions have an emotional component (whether we are conscious of that emotional involvement or not), it’s vital to look closely at human behavior to tease apart the truth.
If we can correlate specific emotions to proceeding actions, then we have valuable data that can directly be utilized toward building an accurate, user-centric solution.
DEVELOP
How Might We…
In flipping Valerie’s pain-points into How Might We’s (HMW), we began reimagining how the problems would look in a positive light.
For events, we asked ourselves:
HMW…offer users up-to-date information about COVID-19 in Leucadia?
HMW…provide users a way to feel connected to the community?
HMW…encourage users to help protect Leucadia’s funky spirit?
In solving for ways to increase donations, we asked ourselves:
HMW…offer compelling stories and details that will motivate users to donate to Leucadia 101?
HMW…be clear about the difference between membership and contribution?
HMW…guarantee the impact of the users' contribution and make them feel involved?
Ideation
I’ve mentioned this before, but ideation continues to be one of my favorite parts of the UX process! Collectively, we placed our 6 HMW statements (yellow stinky notes below) onto our Adobe XD Whiteboard. We then conducted 5-minute time-boxed brainstorming sessions per HMW.
After 30 minutes, we had generated 70 ideas. Next, we conducted another 5-minute time-boxed session to group similar ideas, as well as agree upon the best ideas. The time-boxing technique, simply put, cannot be overused!
MoSCoW Method
We then funneled those 70 ideas through the MoSCoW method to prioritize which ideas we should focus on first — Must have, Should have, Could have, Won’t have.
We also took this opportunity to re-connect with the stakeholders to discuss which ideas were most feasible. Together, we agreed that we would move forward with the ideas circled in red below:
Value Proposition Canvas
Circling back to the other side of the VPC, we examined the emotional state of our users in relation to the events and donation features we were hoping to add.
Understanding how our features would affect the emotional state of our users puts the user at the center of the equation. It also provided us, as designers, an opportunity to reflect on our decisions up until this point and decide if we should pivot or persevere.
Quick Recap
As a reminder, here are the 6 main pain-points that we were solving for:
EVENTS
- She’s afraid of going out due to COVID-19
- She’s worried about her emotional state from being isolated
- She’s unsure of how she can do her part to help out
DONATIONS
- She’s worried about the sustainability of her community know that funds are running out due to COVID-19
- She wants to help but isn’t sure about the difference between member versus donor
- She wants to know where her contribution will be making an impact
MVP
With our users’ pain-points, rooted in data, top of mind, we drafted our Minimum Viable Product.
Leucadia 101 will unite the local community amidst COVID-19 fears by offering:
- Live-streamed happy hour sunset sessions
- Live-streamed crafts and wine tasting
- “People of Leucadia” Instagram campaign (as seen in the portrait shots throughout this case study)
Leucadia 101 will keep people engaged with the community through strategic storytelling that drives donations via:
- COVID-19 updates (pop-up/banner messaging)
- Dedicated page for donations
- Donation goal attainment progress tracker*
*AHA Moment: By adding a progress tracker bar at the top of the website navigation, we hoped to bring acute attention to the fact that Leucadia 101 desperately needed funds. The tracker also gives people a visual target of what Leucadia 101 needs to achieve and somewhat gamifies the experience.
Jobs To Be Done
Referencing the Jobs to Be Done (JTBD) framework, Leucadia 101 needs to unite and connect with the local community virtually, and in turn, the community can stay engaged and hopefully donate to Leucadia 101’s relief fund.
The JTBD lens is a helpful tool to identify which steps the user needs to take in order to feel that their true needs are realized. When stuck in quarantine, the user wants to experience Livestream performances and unique online events, so that they can temporarily escape isolation, preoccupy their kid(s), and feel a sense of community.
Additionally, 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
While historically the user flow has been one of the most difficult parts of the UX process, I’ve come to enjoy the problem-solving/puzzle aspect of this step.
Given the short nature of this sprint, we designed only one happy path for the events page and one happy path for the donations page. With more time, we would have also included unhappy paths, as well as alternative happy paths from different access points on the site/ Instagram.
Below is the user flow, or blueprint, for how we intend on navigating our users to a Livestream event through the Leucadia 101 website.
Events Flow
A quick note: It’s important to tease apart which steps in the flow are human decisions vs. human actions vs. computer decisions. It requires you to breakdown tasks, which are often tasks that we perform subconsciously.
We also built a flow to represent how our users would be encouraged and directed to donate to Leucadia 101’s relief fund, below.
Donations Flow
Site Map
While the user flow provides a step-by-step micro-level vantage point of our users’ activity within the website, the site map provides a more macro-level view of the interaction. The black boxes represent the current website flow, and areas that we left unchanged. The blue boxes represent new flows that we decided to add to the existing website.
We also took this opportunity to organize another Zoom call with the stakeholders and hear their input. We agreed to move forward with the flow below:
DELIVER
Mockup Sketches
Time to break out the pen and paper! We started with a series of simple sketches as a way of brainstorming the layout.
HOMEPAGE:
EVENTS PAGE:
Lo-Fi Prototype
Moving into the lo-fi prototype, we created two flows — one for events and one for donations.
Below are a few illustrations of the events page checkout process.
For our donations goal tracker, we decided it would be fitting for Leucadia (given that there’s a strong surfing community) to use a wave as the progress bar.
We also made the donation values easily accessible with large, clickable icons. In doing so, we hoped to help our users save clicks, and in turn, time.
Lo-Fi Usability Testing
After 10 usability tests (5 for events and 5 for donations), we found that users wanted an option to add a custom donation amount, in addition to different payment options. We also learned that we were lacking an input field for users to enter an email address. Overall, we learned valuable pieces of information that we would then implement into our mid-fi prototype.
Mid-Fi Prototype
Building off the test results from the lo-fi prototype, we applied changes and built the mid-fi prototype. Personally, this is one of my favorite stages in the design process because you begin to see the skeleton come to life.
The image on the left is the way that the website currently looks. Given that COVID-19 was the reason that Leucadia 101 was in trouble in the first place, it was paramount that we acknowledged the issue with a pop-up message (right). Additionally, we included a banner message prompting users to donate to the relief fund.
In our usability testing, users suggested making the COVID-19 pop-up a static part of the page, rather than something that could be “X’d” out of. The reasoning was that this user was the type of person to click away from pop-ups without even reading the message, which, is actually quite a common behavior for people.
After clicking “Donate”, the user is taken to the Donations page seen above (currently, there is no dedicated page for donations on the website, only a page to become a new member). Here, the user is prompted to make a donation.
We also developed a hashtag to raise awareness for the cause:
#SociallyDistantLocallyPresent
The hashtag is repeated throughout the website, including our “Humans of Leucadia” Instagram campaign to spotlight local business owners.
Next, we worked on the Events page (below). The photo on the left represents the current layout of the website. On the right, is the re-designed page. We decided to exclude “Past Events”, and make the UI cards for upcoming events much larger with space for engaging photos. Rather than CTA (Call To Action) buttons labeled as “Learn More”, we changed the ontology to say “Register”. This phrasing made more sense given our findings from competitive research.
Once an event is selected, the user is brought to that event’s individual page. Below is a screenshot from the current website (left), and our re-imagined webpage (right).
In addition to event information, we also included a quick-donate option on the side. Because our stakeholders emphasized that a lack of funds was the biggest threat to the business, we decided that we needed to include an option to donate at various strategic points on the site.
Then, once the user decides to register for an event, they are prompted to checkout. For this use case, we created a Livestream mask-making event. This event is to be free for the community and is designed to promote community engagement, reduce feelings of social isolation, and also keep young kids (who may be driving their parents crazy after months of being home) entertained — we heard you, parents!
Mid-Fi Usability Testing
Again, we conducted 10 usability tests (5 for events and 5 for donations). There was a 75% completion rate, and the average time to complete the tasks was 2 minutes and 12 seconds. Heat mapping results, via Useberry, gave us a glimpse into our users’ thought process, and also revealed a series of ontology and taxonomy issues.
Visual Competitive Analysis
Before beginning the hi-fi prototype, we conducted a visual competitive analysis. This gave us a sense of how other organizations were approaching similar issues to what we were trying to solve. We looked at Go Fund Me, Red Cross, San Diego Foundation, and the neighboring city of La Jolla for inspiration. Below are a few screenshots from those sites:
Brand Attributes
The stakeholders defined Leucadia 101’s brand as:
Inclusive | Eclectic | Fun-loving | Devoted | Local
With these attributes in mind, we then constructed our mood boards.
Mood Board
The mood boards helped us convey the feel of Leucadia 101 — we pulled images that represented the Leucadia lifestyle — beach culture, music, family, art, and most importantly, Leucadia’s motto,
“Keep Leucadia Funky!”
Style Tile
Our style tile consisted of typography and color patterns from Leucadia 101’s website. By defining the current visual state of the website, we were able to identify the constraints we had to work within, as well as the foundation to build from.
Atomic Design Inventory
Building off the style tile, we created our atomic design inventory. This was a living document that we added to as we built out our hi-fis. It also allowed us to design in parallel/ more efficiently, and most importantly, maintain a cohesive website brand feel.
___________________________________________________________________
Hi-Fi Prototype
Finally, the icing on the cake! Click this link to see our hi-fi prototype in action!
___________________________________________________________________
Hi-Fi Usability Testing
Due to the time constraint, we didn’t gather as many usability tests on the hi-fi design as we would have liked, but we still gained a couple of key insights. Most notably, in keeping with the funky nature of Leucadia, a suggestion from one of our users was to add textures and alternative typefaces for headings. This would give a more natural/ organic feeling to the website, in-line with the vibe of Leucadia. This was a very valuable observation, and we were able to accommodate the changes before the project deadline.
Success & Failure Metrics
We will know that our website re-design is successful if we see a boost to Leucadia 101’s funds due to donations/new memberships, and in turn, Leucadia 101 isn’t forced to shut their doors. We will also measure success by the number of attendees who tune in to Livestream events. If we see increased participation, then we hope that will create a happier community that doesn’t feel as socially isolated due to COVID-19.
On the other hand, we will know that our website re-design is failing if we don’t see a change in the number of donations/ new memberships. Our Livestream events are intended to drive donations, so if people don’t tune in to our events and notice CTAs to donate and help Leucadia 101’s relief fund, then we would consider our efforts to be unsuccessful as well.
Generally, if we see the same or fewer number of click rates (whether through the website or their Instagram page), we will know that we have more work to do to drive awareness and traffic.
Key Learnings
With more time, we would have loved to conduct additional desirability testing on our mood boards and style tile. Receiving input from others is always incredibly valuable and helpful throughout any iteration.
Given that we only had six days for this sprint, we also learned to truly embrace time-boxing. This tool was and continues to be, one of the most valuable tools in our UX toolkits for staying focused and on track.
Takeaways
In addition to frequent stand-ups with our stakeholders throughout the sprint, we also set up a Slack channel that was great for quick communications. In doing so, we were able to work efficiently, while managing the business constraints of Leucadia 101 and KSS.
With the fate of Leucadia 101 on the line and the downstream effect on the local small businesses that Leucadia 101 supports, I felt extra pressure to deliver a result that truly brought value to the community. As I mentioned at the beginning of my case study, Leucadia is where I grew up and currently live, so I was highly motivated throughout this sprint!
Next Steps
Down the road, we’d like to build an additional user flow for traffic coming from Instagram (a large portion of the younger demographic stays up-to-date via that channel). When events go live, we would also want to advertise a “swipe up” feature on Instagram stories to funnel all users to the Livestream events.
Lastly, we would also suggest allocating a portion of the funds towards Leucadia 101 merch. Citizens of Leucadia are proud to be from this amazing city, so simple, well-designed t-shirts and hats would be a hot ticket item and further unite the community in these tough times.
Final Words
After 9 weeks at Ironhack, I am amazed at the amount of information I have learned. Between classes, project work, and supplemental educational readings/videos, I was averaging 12–14 hours of work every weekday, and another 10–15 hours of work every weekend. I was constantly pushing myself and breaking down new mental and physical barriers.
This experience was a challenge through and through. There were multiple occasions where I was “banging my head against the wall” trying to figure out technical issues, or condense massive amounts of information into clear/synthesized information. Sometimes those struggles would last minutes or hours, and sometimes multiple days (looking at you Webflow)! However, emerging out the other side of those intense struggles were some of the most gratifying moments of my formal education.
9 weeks is a very short amount of time, so every day was precious. By viewing each day as such, I entered a state of intense focus and determination, that I believe would have been harder to achieve in a longer format program or self-learning attempt.
Sadly, COVID-19 (which was the catalyst to the whole cohort going remote in the first place back in March), continues to affect our society. Despite this headwind, I’m proud of my whole cohort for digging deep and pushing through the course. With literally nothing else to do but to stay inside, I ate, drank, and slept UX/UI Design. I was fully immersed from sunup to sundown (also literally) — my cohort was based in Miami so I was at my desk (“in the Zoom class”) every morning at 6:00 AM PST sharp.
The main point is that I was pleasantly surprised at all that could be achieved in such a short amount of time by applying the right mindset. Adapt, overcome, and evolve.
To any future students of this Bootcamp, or anyone else digging into some tough challenges, here is one of my favorite mottos that gets me through just about anything:
Mentality is reality.
Thank you, Ironhack, for your thoughtfully structured and rigorous program. I can’t thank my instructor, davidfast, and my TA, Kathryn McClure, enough for their daily investment in my success. I’m proud to be an Ironhacker and can’t wait for what the future holds (if you’re hiring lmk)!
Thank you for taking the time to read through my final project. If you’d like to connect, send me a note on LinkedIn :)
