During the research phase, I conducted open and closed card sorts on participants and analyzed the results in order to create a new site navigation and site map. I also created wireframes from low fidelity to high fidelity for the Home, What We Do, Projects, and Who We Are pages through iterative feedback from usability testing.

Furthermore, I served as a Product Manager for the team, meaning I created a project timeline and served as the point person between the client and our team. I also acted as a design lead and was in charge of setting up all weekly meetings and communications with the client as well as within the team.

One of the client’s original concerns was that their navigation bar was too cluttered with drop-down options and it was difficult to navigate, especially for new users.

In order to get a better idea of how the navigation bar should be arranged, I decided to do an open card sort followed by a closed cart sort with three different participants.

I found that everyone thought ‘Projects’, ‘Stories’, and ‘What We Do’ were most important and should be on or accesible by the homepage. Everyone also thought that all the ‘Volunteer’ categories could be one ‘Volunteer’ section.  Most people were confused by Message from the President, COVID-19, and Newsletter and thought that the three should go together somehow. All participants also had difficulty placing ‘Board of Director’, ‘Financial Information’, and ‘Contact Us’, and in the open card sort they were grouped together as “logistics” or “boring admin info”.

Because we were a large group working remotely, we decided to create our Lo-Fi wireframes in Figma so that everyone would be able to access them. Unfortunately, we ended up directly iterating on those wireframes and turned them into our Hi-Fi wireframes so I no longer have images of them.

I created the first iteration of the new site map based on our card sorting results. I decided to create a ‘Take Action’ section under which you could find ‘Volunteer’ and ‘Donate’. I grouped ‘Newsletter’, ‘Message From the President’, and ‘COVID-19’ under a new section called ‘News’, and I put everything else under ‘About’ while retaining a stand alone ‘Donate’ button in the navigation bar.

After presenting this first iteration to the client, I decided to create a ‘Blog’ section where ‘Message from the President’ and ‘Stories’ could live because the client wants to keep these pages updated instead of stagnant. I also created a ‘Who We Are’ section for the logistic information so it would be easier for grant writers to find. For pages like ‘Projects’ and ‘Stories’ that have many different sections, I portioned each section into it’s own page instead of keeping all the information on one page which causes the pages to be text heavy and difficult to scan.

I focused on taking text heavy pages and rearranging the information hierarchy based on importance, for example adding graphics to make information easier to find or breaking up sections and giving them their own pages so that users don’t need to scroll past all other sections to find what they’re looking for.

Given the opportunity, I would engage in usability testing on the new website, especially with users who are grant writers because this is a very niche group that’s important to the nonprofit and we weren’t able to find any to test.

This was my first project where I worked with a team of five other designers rather than a product team consisting of a PM and developers where I was the sole designer. Furthermore, I served as a PM for the team as well as being a designer which taught me a lot about the importance of clear communication and taking responsibility for your work.

The client was also inexperienced in the UX design process as well as a bit stubborn about wanting to keep the website the same. Through these client meetings I learned to politely but firmly stand up for my designs and design decisions with the backing of research results.