While we had UX templates, it was still necessary to create wireframes applying those template elements to our site map to visualize the overall structure of the site. To the right you can see my initial wireframe for the landing page. I tried to incorporate as much text as possible, as we did not yet have a copy manuscript and I knew we wouldn’t run short on text when it did become relevant.

Just to the left of the desktop wireframe, you can see the corresponding mobile wireframe for the landing page.

Following client approval of my wireframes, I moved on to present a few visual styles based on their branding. I showed both applied to the desktop landing page so that they could have a side-by-side compare and contrast. My recommended style (immediate right) was clean and bright, maximizing white space and using color as an accent only. The second option (far right) was higher contrast, using their brand navy color as a background in many situations.

The client liked both, so we ultimately leaned towards the brighter option but incorporated a little bit more of the navy in it for our final design.

To the left is the final desktop landing page, a fusion of the two styles we initially pitched to the client.

To the left you can see a secondary wireframe in desktop (far left) and mobile. This was an interesting one—and I’ll cite two differing opinions here. The person leading our digital department was adamant that we create a wireframe not based on an actual page of the site, but instead showing all possible UX modules on one page. We were only showing the landing page and this hypothetical page with all secondary elements in wireframe form to our client, so I could see how it would be helpful to show all content modules that would be seen throughout the site in one place; however, I thought it would have been more practical and helpful to show the client the UX layout of an actual secondary page so that they could more easily picture the content of each area.

In the end, the client did have a hard time with this concept as we presented it, being unable to imagine what content each module would hold, and where it would be used.

I also felt that this exercise was not helpful in that it didn’t show the overall flow of any particular page. I felt that the placement of each section was important to show the overall flow and structure of a page, which was not indicated by this page showing elements in an order and structure that would not ultimately be used in final execution.

I also created wireframes showing the navigation in use on both desktop in mobile, as well as cookie trays and a leaving website interstitial popup. For brevity, I’ve chosen not to show these images in this case study.

Six Areas of Support

Because most of this project was so straightforward, I’m going to focus on highlighting a few areas that took more iteration and development.

To the right is a module I developed showcasing six areas of support. These are repeatedly highlighted across TSCC’s messaging. I organized these into a fairly standard layout of icons, subtitles, and short paragraphs in a grid structure.

However, in previous instances, the Biller Family Foundation had shown these icons in a circular layout. For consistency, they wanted to show it in this format on the website.

I set out to explore a revamped version of what they sent me, looking at different ways to incorporate it in a way that would be interactive and usable.

Above you can see a few iterations of my ideas for the design of what we referred to as “the wheel” showcasing the different areas of support. Due to the odd shape of a circle, especially on a webpage, I thought that the space would be best utilized by cutting it off to be more of a semicircle, with arrows to navigate to the unseen support element. I acknowledge that it may seem a bit odd to show 5/6 elements, and only hide one, but I personally felt it still outshone the alternative of showing the full circle and all the space it would take up.

Ultimately, I found that the developer did not incorporate all of my edits, which had an interesting end result. Some of the animations are delightful, but on the other hand, I was unhappy with many of the unresolved bugs—including the alignment of the text, the inconsistent placement of the blue overlay on hover, and the placement of the arcs on hover. You can play with the final animation here, and I’m sure you’ll be able to notice the details I’ve described.

Evolving the Resources Page

As I mentioned, when I created the initial site design, much of what I added was provisional based on future content. This was true for the resources page—at the point when I was creating it, we had little to no content from the client to know what this page needed. I created a layout that I felt flowed nicely, included a compelling amount of imagery, and would be able to accommodate links to articles, research, and toolkits down the line. To the right is that initial page design.

Several months after the initial site launch, the client returned with more content for this page, and a request for a new layout that would best fit the content they now had.

The new content meant that they needed a page that would accommodate ~40 links to resources, with room for more down the road. They also wanted to add filter functionality.

Below are two iterations of one layout. One of the primary challenges here was to break up a very text-heavy amount of content, which I did by adding icons where each organization’s logo could live. The first layout shows a 2-column view, and the adjacent layout shows the same but toggled to a 3-column view. Instead of having pages of content, we landed on an infinite scroll, with a “load more” button at the bottom of the page, which would load 10 results (2-column view) or 15 (3-column view) at a time.

To the right: an alternate filter option, which was presented but ultimately not adopted.

From an interactive standpoint, the idea was to be able to click on any of the icon circles and have it swing around to the top of the wheel, with its short description and title popping up. The size of the icon would be relative to its position on the wheel, with the active icon being the largest, and the icons further down being the smallest. Small arcs would indicate the active icon as well as popping up as the user hovered any other icon.

Ultimately, the client wanted to have the wheel appear as close as possible to its original form, and chose to have it shown in the full circle. They were pleased with the interactive ideas and we were able to move forward with the concept as a whole.

To the left is the final visual iteration of the wheel.

After getting final client approval on the concept, I was able to work with the developer writing the code for the animation to begin to finesse the movement and interactivity of the wheel and its individual components. While I’ve worked with developers before, I hadn’t collaborated on such a highly interactive, animated element before. It was enlightening to hear how even some small movements would require significant work on the back end.

As a designer, sometimes it’s easy to assume that others can see the vision we have mentally. This process reminded me of how important it is to stipulate the smallest details to ensure that the product aligned with the seamless vision I had of it. Below, I’ve included some screenshots of critiques I communicated to our developer to make sure that nothing was lost in translation.

To the left: a preview of the functionality of the dropdown filters.