A brochure website for the TomKat Charitable Trust, a bay area philanthropic organization.

The client needed a website built from the ground up. Initially considering a website with deep content—resources, in-depth grantee profiles, bios, etc.—the client decided to slim down for their first website.

The primary need was to simply establish a web presence to help put them more in control of their image and to also communicate to grant seekers they do not accept unsolicited grant requests.

The ultimate concept focused on minimalism using fullscreen, immersive images paired with each grouping of content.


Process

Once we had agreement on the scope and scale of the website, we focused on the content. With the simplified approach in mind, we agreed the mission statement, a brief history, explanation of the areas they work in, brief grantee profiles and the non solicitation statement would be the main groups of content. We knew each block of text would be concise. 

I began thinking of the content and groups of content as 'screen fulls.' And the concept of positioning the content over panels that would scroll up and down became my main focus.

 

Sketches

With the content figured out and a general concept in mind. I began experimenting with sketches to verify the concept would be doable. I knew there would need to be a little flexibility around copy length and took that into consideration as I sketched. I designed layouts with copy blocks that could scroll if necessary, without breaking the design.

 

My originally concept included the idea of small images embedded on the page, next to blocks of text.

One iteration for presenting the three areas they work in—good food, good money, good energy.

Another iteration for their three areas

One iteration for presenting grantee profiles using a carousel

Text based page

The third iteration for their three areas

Second iteration for presenting grantee profiles using a grid approach


Prototyping

The concept felt pretty solid after sketching so I began laying things out in Axure. I was able to get a better idea for how scrolling text would behave along with the panels scrolling as well. 

I also began polishing the labels used in the left side navigation as well as filling in gaps in the concept, i.e. landing page, individual grantee profile, write ups for the three areas they work in. 

 

Responsive

After getting agreement on at least the general direction of the desktop wires, I began working on the mobile views. Much of the content behaved the same. There were some exceptions though. The navigation was consolidated in a panel that slides in and out using a hamburger icon. And the three areas they work in, now labeled 'Priorities' and the grantee profile grid both use accordion patterns on mobile.

 

The Final Prototype

I built a lot of trust with the client and there wasn't a need for more than about one round of revisions on the wires in collaboration with them. Transitioning this into visual design was quite easy. Visual design required little to make this a successful design—great, immersive imagery, sophisticated typography and few graphical elements. 

VIEW PROTOTYPE

 

Development & Beyond

Once the visual design was approved and development began, we ran into a few problems. The paging, or scroll jacking, was a little difficult for the developer to implement. We came to a point where we thought we needed to rethinking the panels and paging. After investigating other sites that successfully use scroll jacking while allowing content scrolling on a panel, I was able to give the developer clearer implementation instructions. 

We helped the client select and process background images for the panels and we uploaded their copy in the CMS. Despite the snag during development, the ultimate site is quite pretty and the client is really happy.

ANNOTATIONS DOC  |  VIEW LIVE SITE