The Current Website

Doing an initial casual audit of the site before our first meeting, there were definitely some ways in the org could benefit from changes to branding and some of the flows for their offerings.

In this site walkthrough, I assessed that:

• stock images on the website aren't cohesive and make for untrustworthy branding
• the branding colors feel very clinical and, paired with the content and media of the current site, looked uncanny valley
• they seemed to cater to two users through the site: students (via scholarships or attendance of their workshops) and donors (via scholarships donations)
• the footer and header navigation had fairly different structures

Of course, we wanted to ask questions to get more context on what our client's goals were.

The Problem

Upon meeting with the client, we had questions prepared to probe them about what they want done to their website and other things to define scope.

We learned:

• They wanted a way to solicit volunteers online
• They wanted their offerings to cater to: potential members, current members, and students as users
• But what is membership in 3to1?:
• The site did not do a good job clarifying this term of "membership", which was a donation that came packaged with their seminar as incentive
• Their webinars have served: high schoolers, 1st generation college students, unemployed job seekers, business owners
• but they do not have data or a perceived idea of differences in the motivations of their site visitors
• Why do they like working for 3to1?: Michelle has a background in project management and business and grew up feeling education was important

What did 3to1 essentially need help on from us?

The previous web designer left and our client was left to inherit everything. They said they want our recommendations to be focused on improving aesthetics, layout, mission, and communicating their past success and scholarship recipients, to ultimately better gain trust from a broader set of users that they feel they lack.

Our clients also said they want to highlight personal finance series and promote what events they have to offer on financial education, being their main offerings.

Some metrics I was thinking about in response to their answers to our questions were involved with: increasing donations, how long the user stays there, soliciting volunteers.

Scoping out research with recruitment constraints

We started out with a couple interviews, but after that soon learned that our interviewees, which we asked for support from the foundation in recruiting, were largely not willing to talk for an hour or half hour.

The length of the project was only about 4 weeks and recruiting and conducting research would leave us with a week to design AND test. I didn't really feel comfortable being given this much time for what was essentially our main deliverable that we would handed off to our client and the developer. Looking at the way the site's changes were being discussed and thinking about the time commitment, I brought up my opinion in our team's strategy discussion.

Deciding on how to conduct research due to lack of willing users + time

Our team was at a crossroads due to these constraints on research and also on approach. The directions my team and I considered in response were:

• Do we make a hypothesis and test that?: Do 1-2 cards sorts moderated and ask them about the language/how they define it (when you think about “investor” what comes to mind?)
• Go totally generative: Talking to them in a huge qualitative interview
• Put the sitemap into a tree jack test through Optimal Workshop: The user would be unmoderated, which has its limits in richness of answers, but is also quicker and more fitting of what our stakeholders said about the unlikeliness of the foundation's members to be willing to talk for 1 hour.

After the interview and discussing our options, we came away with plans to concurrently work on: a proposed information architecture to use for testing, dropping the user interviews (unfortunately), and getting ready for a tree jack tests.

Proto-personas

We chose to go with tree jack tests because the site had general usability issues and we still wanted learn from users' mental models on navigation/IA. Although time constraints had us drop user interviews, we decided to leverage the types of members reported by our client from interviews as proto-personas.

Users mentioned were categorized as follows:

• New visitors interested in financial education: Our client reported that in their seminars, they've seen high schoolers 1st generation college students, unemployed job seekers, business owners. This is a broad definition, since 3to1 said they wanted to appeal to more people outside of their community or state when asked what they want to achieve with their new site. In an ideal situation, I would have wanted to use user interviews to further specify this persona.
• Needs: Easy access to and understanding of teaching services offered, Clearly defined and more trustworthy branding, Minimal less overwhelming information
• Students desiring scholarships: This is distinct from people who want to learn from 3to1's workshops. 3to1's scholarships benefit people within their community, and employees' children are usually encouraged to apply.
• Needs: A usable page to apply to scholarships, resources for students, Easily understandable journey to scholarship application
• Cain Waters Association (CWA) employees: Our team was able to interview some employees and mostly just got an idea on how they would want 3to1 to be rebranded. This was because, when asked about their usage of the site, none of them said they visit the site to browse it deeply. CWA employees donate to 3to1 as a sister company, but whether they use the site to do this was unlikely. We considered this low priority.
• Needs: Doesn't really visit site at all, Easy way to donate to scholarships if anything

Insights from tree jack tests

Issues understanding Membership and 3to1's services

17/21 of our questions regarding nav items in the tree jack test were correct. Analyzing the results, there were 4 meaningful questions that pointed to usability issues. These questions were related to where they would find 1) membership (which is essentially either a $300 or $2000 donation with access to financial education resources), 2) free tools and community content, and the option to 3) book a financial seminar speaker.

The most salient was question 3: Where can you find the option to become a paid member? 57% of testers got this question wrong and 4% skipped the question. We expected membership to be confusing since membership and donations were the same thing; they take up different CTAs or wording throughout the website, but the only difference was the organization's online seminar being included as incentives for memberships.

Another insight was from question 1: Where can you teach someone financial principles at your school? The proposed IA for 3to1's services were listed all under Learn but may seem similar to each other in content to people. Thus, we wanted our designs and copy to emphasize clarity in explaining the 3 different ways 3to1 can deliver their services as a solution.

Looking at the paths the answers went in Optimal Workshop, the answers for question 3 were the most varied, which led me to believe there was variation in the mental models that the testers had and that the way the site presented its services was not clarified. To some testers, membership may have meant the desired answer, Donation, while for others it meant Sign In or in the About Us pages.

Requirements on building out wireframes and hi-fi landing page

Requirements based on patterns from tree jack data and client

Per the clients' early requests that we documented from check ins, we wanted to to make sure that we showed off testimonials of scholarship recipients on the hero and have less stock imagery. Exemplifying that the organization's altruistic brand identity was to generate trust of new visitors.

Also, in our clients words, membership was their bread and butter. Thus, with the findings from our tests, we decided we needed to focus on making the clarity of the organization's financial education services, along with our clients initial desire to highlight their past recipients and altruistic brand identity.

Our client also requested for a way for volunteers to sign up since they have no direct way of soliciting them on their site.

The current site ran on a Wordpress theme called Vamtam. While talking to the developer, he made comments saying he wanted to move away from this and wanted to use another sitebuilder called Elementor. Thus, designs were made with this type of site that had features for calendars and a sticky header in mind.

I started out by making some individual user flows and we compared each others' flows over discussion. Our project was scoped out to design a hi-fi landing page and wireframes for the main user cases (Scholarship, Donation, Learn and Events/calendar pages.) The flows I made were as follows:

Applying insights and requirements to initial designs

In order to start building, we made user flows for event signup, seminars (attending, online, booking a speaker), donation, scholarship, and landing pages.

Based on the tree jack results, the confusion of Membership affected our designs, but our client said that we needed to keep the hybrid membership/donation content since they inherited it (it was non-negotiable). So we started looking into how to work around this constraint and its negative affect on the understanding of 3to1's seminars.

Huge disconnect in what is on the site and what is actually offered

Another impactful challenge that we faced throughout this project was something that we had to learn over time and ask repeatedly from our client: is the content for these seminars distinct? We treated them like distinct services, but could we possibly rework it if they were similar?

Factors that were confusing and lead up to an overhaul of the IA:

• In our regular meetings with our client, they started out saying that they have these in-person classes (which they interchangeably referred to as classes, seminars or events) and the online Personal Finance Series. We considered these 2 distinct service.
• But also in a separate meeting, they mentioned there is also a service that they offer where speakers from the parent company teach financial workshops at high schools. So we considered this another service.
• There was also content for an Accumulating Wealth Seminar that we had to ask about, and they said they were starting to dissolve that since it wasn't offered anymore.
• There was also a way for students to apply for a voucher to the online resources if they attended a workshop at their high school that a Cain Waters Association (3to1's parent company) taught at. There was no content that implied applying a voucher on the site.
• They also said that the content of all of these workshops, classes, or seminars was largely the same but in a different format.

So how do we make sense of this in the information architecture? To summarize it, we decided to use these findings and given our research insights, we made a "Seminars" page that framed the product as one thing that is taught in three different ways: online, hosted by them, or at their school/business.

User testing and using RITE method

With the usability testing script drafted, we wanted to have users go through use cases for becoming a volunteer, making a donation, booking a 3to1 speaker for a talk, and looking for a financial calculator.

Client feedback

Our initial landing page used too many colors and did not feel fitting for our client. When they pointed out to us that they wanted to adhere to their previous marketing materials/branding, we made the design less busy while still having a modern and professional feel.

Using color sparingly was in the feedback from our client

Also, our client gave us some of their digital assets. There weren't many, but the client emphasized they wanted us to more closely follow the branding that they currently had, emphasizing they wanted use of their same blue and greys. The flyers and banners also incorporated "swooshes" they wanted us to take into account.

User testing feedback

The original site showed off ways that donations helped students are specific milestones. I made a visual for this, but both our client and users said it was hard to read and, upon reflecting, I agreed that it would be hard to read, especially on mobile. Thus, I made an interactive element where the user could press arrows to see how each different dollar amount could benefit a prospective college student. This saved more space and brought more attention to the donation modal, which I felt was an overall improvement from the site's layout of how their donation benefits students.

On the original website, there was a list of external links to financial tools. The client wanted to keep these but shoehorning it into our initial wireframes seemed out of place based on sentiments in tests. We made a separate page for this since it was external content didn't seem to fit amongst all the main services of 3to1.

Financial Resources page shows marketing videos and external tools

We also made adjustments to copy that was inconsistent in tone or verbiage based on users' feedback and confusion in testing. We settled on making the copy more straightforward rather than the broad words (Learn, Give) we used initially. We also wanted to make sure copy did not elicit negative emotions for underprivileged persons (e.g. moving away from "Teach Me" or "Start Learning").

Changes of copy in CTAs for clarity, directness, and inclusivity

Final deliverables, style guide and handoff

We presented our final hi-fi landing page and accompanying wireframes (compare the original website and mockups below). Our final prototype was polished so that the secondary color was used more sparingly and the primary blues and grays adhered to their branding guidelines--not as edgy and still professional.

The landing page also flowed in a more interesting way by showing off more professional stock photos containing children in classrooms and testimonials showing off their stories to reflect users associating 3to1  with college tuition and youth.

The user flows for their services were made consistent and had sub pages for better visibility of status and less cognitive overload. And of course, the new main nav was the main major overhaul. (Home, About Us, Seminars, Scholarships, Free Tools, Events/calendar pages, Volunteer and Donate CTAs)

I made a style guide detailing what markup elements the developer should apply certain stylings. Figma already has inspect mode but I wanted to make sure styles were applied to the correct layer and because the developer really wanted this. One of my colleagues also made a style guide that shows how to use the styles should they need to apply styles to a new page or feature that was out of our hands.

The founder, developer and even the founder's daughter (who had a graphic design background, very cool) gave us good feedback and were happy as to how we dialed back the colors from our previous iterations. And the website functionality they had no issues with.

We recommended them to use a WordPress site builder package that allows them to use any templates under an annual fee, which would cost them less money than the budget they gave us.

Compare the original website versus my screenshots below!

Reflection on constraints and ambiguity and microcopy

Asking the right questions about the seminar and recruitment

I really liked this project because I felt it was one of my first instances of more evident ambiguity that I felt I handled well. We were sort of worried about robustness of our data when we used the tree jack and couldn't get interviews from the busy employees of Cain Waters. It was also my first time using a tree jack having access to software like UserTesting.

If I were to work on this longer, making the remaining pages hi-fidelity would be the main goal. I also got feedback from a user on a dropdown menu for the Learn page and 3to1's services that I thought would be worth adding.

Another form of ambiguity I felt we had to deal with was the gradual understanding we had of their services. We went from thinking there are 2 distinct services and then to framing it as 3 ways they deliver one piece of content, their financial workshops/talks. My team and I definitely noticed this lack of understanding. We had to infer and ask in multiple meetings over time to figure out that the content of these seminars or workshops were very similar, just in a different format essentially. Having the intuition to sense they weren't sure of how their legacy products worked was something that I was happy our team influenced.

Wanting to integrate UX writing more efficiently and writing microcopy

I had attended a workshop from a former Google Content Strategist on UX writing and was being attentive to how I could apply it to our project. I specifically thought about how practices from the perspective of a content strategist would work with a researcher in our stage of the process, which was generative research. Incorporating site audits and card sorts were what we executed, but if there were more time I would have liked to better map our copy to the site audit my colleague made.

And on the topic of microcopy, I liked this project for making me reflect on the impacts of microcopy, how it interacted with the prototype and affected the user's experience in tests. The confusion on what the product meant to someone changed whenever it was not clear and concise. The word "membership" and how it was essentially a donation that the organization didn't want to drop definitely would be something I'd dissolve if I were to make the decision. The clarity would appeal to a broader set of users, since they wanted to reach people nationally.

Another small instance of this that I thought was really insightful: the client wanted us to ask for their job and skills in the form. We wrote these questions with the same idea of being direct and concise. However, upon designing it, we thought that it'd be better to reword it to just asking why they wanted to volunteer and making occupation not required. Ultimately this was to simply make a visitor not feel bad for not having a job or having skills relevant to them. You shouldn't have to have these things to be able to volunteer!