Atlanta Juggler’s Association

A website redesign for a non-profit organization.

Project Overview

My Role

UX/UI Designer

Team

Katherine Arias, UX/UI Design, Jake Nachlas, UX/UI Design

Duration

4 weeks

Tools

Pen & Paper, Adobe Xd, Illustrator, Google Forms, Google Slide, Trello, Miro, Zoom

Website

https://atlantajugglers.org/

Summary

My team had the opportunity to redesign a website for a non-profit organization of our choice based in Atlanta, Georgia. After researching possible non-profits, we chose the Atlanta Juggler Association (AJA). We thought it would be an excellent opportunity to transform their site to provide more to users who are not only looking to join the association, but who are interested in learning to juggle, hiring their services, or donating to their cause. We felt its value to support this non-profit because the AJA does more than perform. They are active members of the Atlanta community encouraging joy and entertainment to those around them.

😫 The Problem

Based on our research, we found that users who visit the site find difficulty in locating vital information, such as the association’s mission or community involvement.

🤔 The Challenge

How might we organize relevant content while also providing an engaging experience for new, current, or potential members to feel excited to join and motivated to donate?

😊 The Solution

Data supports that AJA’s site should be responsive as the dominant method of donations is done on the organization’s website. Interview feedback also reveals the website needs a more visible donation button and transparency in knowing what their organization is all about. Our goal with these implemented solutions could result in new member sign-ups and frequent donations.

User Research & Insight

To begin the redesign, we approached AJA’s current website by performing a user interface analysis. The analysis supported us to further dig into the existing design decisions.

Visually, the site lacked hierarchy and failed AA regulations of contrast ratios.

Next, we needed to plan for our usability test. Since we could not get in contact with a stakeholder from AJA, we developed a proto-persona to find understandings of potential needs, goals, and frustrations that could occur.

We found our proto-persona to be a man in his late 20’s, new to Atlanta, bored with his job, wants to try something out of the norm, and join a diverse organization that’s also fun to be a part of. (We chose a male gender in his late 20s as we noticed there were a majority of young men represented in the website’s photos.)

To meet the needs of our potential users, we needed data:

• what are the motivating factors for getting involved in a non-profit organization?

• what is the decision-making process for choosing a particular non-profit to participate in?

To obtain essential qualitative data, we developed a user research plan, interview, and survey.

In figure 1, we collected data from two, 1-on-1 interviews, and 17 online survey responses.

In figure 2, we brainstormed by developing an affinity diagram. We categorized the collected data, which then developed tasks for our usability testing.

With our collected information, we developed two user personas:

• Jonny is introverted and interested in picking up an exciting hobby.

• Laura is a busy student but wants to donate (time/money) to an organization that holds activities and events.

To evaluate how effective AJA’s interface is, we developed a guerilla usability test to examine its appearance, content, navigation, and efficiency/functionality.

With scenarios given to aid our users, their tasks were:

• navigate to when and where their meetings are held.

• discover their mission and what they do.

• when are their events?

• how can you donate?

While the users completed our test, we recorded audio — with permissions — and took notes of initial reactions.

Users also stated AJA’s website was visually off-putting, challenging to navigate, text-heavy with font sizes too small, and found difficulty in noticing the donate link. As a result of our guerilla testing, I found that our users left feeling uninformed and eventually disengaged.

Below is a screen recording of one user guerilla testing.

https://atlantajugglers.org/

Ideation

To prioritize features that were essential for both our user and AJA, we exercised the “I like, I wish, What if” method.

📣 Users wanted —

• an inviting donation button

• visual legitimacy

• relevant and easy-to-read content

• FAQS on one page

• a clear understanding that they’re a non-profit — which in our research is vital for users to take further action, such as making donations.

Information Architecture

We found our most significant challenge to be organizing relevant content, as there was a lot of information to sift through on the current site. Our goal was to provide users with essential content while weaving passion and purpose into new and existing pages.

My team’s card sort (left); Participant’s card sort (middle, right)

To organize the current website’s sitemap, our team did a card sorting exercise. We approached it with an A/B testing method in mind. We first sorted as a team and recorded the data, then scrambled the cards up and asked a group of participants to sort. We had very different structures and it’s clear to say that, “we are not the user!”

Wireframing

Once the sitemap was designed, we rapidly began to wireframe the UI of the website using Adobe Xd.

We began wireframing and designing the potential solutions that were uncovered during the research as being important. We restructured each page with a content hierarchy using visual elements to support it. We also rearranged the navigation to reflect what participants revealed through card sorting, which could produce a more intuitive flow for our users.

Data from our guerilla test-backed decisions to explore solutions and further support our goal in a successful redesign. Key problems found were the mission statement and donation button were both undiscoverable. To resolve that we decided to place the mission as the hero on the homepage along with a fixed-scroll donation button.

Lo-Fi Prototype Testing

We tested our lo-fi wireframes on three users, asking them to perform tasks produced from our usability test. This is what we found.

🔎 User Feedback:

• “the donation button was difficult to find due to size and color”

• no mission statement — “why should I get involved?”

• “a sitemap should be shown in the footer to further find pieces of information.”

• lack of apparent home button in desktop navigation confused users

• text overload on some screens

We learned that although the prototype is lo-fi all content should still be provided to give full context for our users who are testing this for the first time. We also found that just because there is content on the current page doesn’t mean it should be carried over to the new design. Analyzing and exporting relevant content accompanied by UX writing is a great tool to interact and further guide the user throughout their experience.

Style Concepts

When developing a style for AJA’s new site we adopted its mission statement as an overall intent to redevelop its brand. Festive and fun was the intention we designed for. We also wanted to create for the personas we identified. Being that they’re a student and young professionals we aspired to our style to feel present-day.

Furthermore, being that we could not get in contact with an AJA stakeholder on their design decisions, we wanted to pay tribute to their current site’s colors as they used bright tones of red, yellow, and blue. We chose to take their palette and make use of it with a semi-muted approach, which was fresh and contrasted well against loads of white space. Although we aimed for fun and pops of color, we wanted our users to feel AJA is still a professional organization.

Poppins and PT Serif are the combined typefaces throughout our site. Its contemporary and friendly combination was most appropriate and provides a variety of weights and readability on screens.

We redesigned the AJA’s logo as it was very busy including colors that failed ADA regulations. We played off the idea of their current logo by incorporating juggling balls bouncing on the association’s acronym. Additionally, the orientation of the association’s name changes as the site goes from desktop to mobile. Featured in the style guide are light and dark mode logo variations.

Our CTA buttons feature gradients when you hovered and we implemented the use of the salmon color as an eye-catching contrast to the majority of our actionable features.

Cards are used throughout the website which was a clean and minimalistic approach to organizing information. It also served useful as a way to organize the mobile layout when transitioning from a desktop.

Among carried-over photos of real members from the association, HD quality stock images were used to present a diversity of audiences involved in the arts of juggling to attract new members. From children to college students, to professional entertainers, and simply everyday people, we wanted to showcase that inclusion was a part of this association.

Hi-Fi Prototype Testing

In obtaining our user frustrations from the lo-fi testing we designed resolutions along with the implementations of our style guide. We then asked users to complete tasks from our usability test.

😫 Frustrations —

• “hover color link needs to be darker” — we tested our link colors, and it failed AA contrast ratio

• the font sizes were too small in areas throughout the desktop

• a bolder text for legibility on hero image

• the mobile top navbar required adjustments to its layout

• left-to-right scroll buttons could be a potential issue for mobile accessibility

😊 Wins —

• simple to use flow and navigation

• the color palette was fun and professional

• donation button was quickly discoverable

• enjoyable context throughout

• good UX writing

Putting It All Together

At this point in our case study, our deadline had come, and we presented our redesign — which had a very positive response. It came a long way from the current site. However, in an effort to solve the hi-fi frustrations found during the prototyping phase, I moved forward independently to complete what we started. The iterations took me an additional week, and I’m delighted with what came out of it.

Before, After, and Conclusion

Before & after comparisons, give a more unobstructed view of the visual work involved in this redesign. I hope with the solutions found throughout our research, modern style, and fully curated pages, visitors can connect to AJA’s community. Further, I suspect this redesign would result in higher donations, member inquiry, and, most importantly, a delightful user experience.

Takeaways and Future Steps

💡 Don’t underestimate lo-fidelity prototypes. A strong lo-fi with supporting context leads to a better understanding of the user during testing and eventually, a more fluid development towards hi-fi.

💡 Design decisions should be chosen with intent.

💡 Save all versions of your iterations. Exploring different ideas is essential to problem-solving, but saving and comparing your iterations is excellent to see how you’ve found solutions along the way.

🔮 To measure my approach in the hi-fi prototype, a 5 Second Usability Test would be an excellent method to also measure first impressions via desktop and mobile.