My design process

1
Discovery

Learn everything I can about the problem and the space around it. Gather the requirements. Zoom out from the problem and look at the bigger picture. Think of things the customer didn't. Make sure we're working to solve the right problem in the right way.

2
Design

Find a way to bring order to chaos, simplify the presentation, and streamline the user experience. Map out the user's journey. Get more eyes on it. Test it. Then make it look pretty without letting pretty get in the way. Test it again.

3
Development

Methodically plan and organize a coding approach, aiming for human-readable code, logically organized files, minimal impact on the HTML, and separation of content, style & behavior. Build it. Test it. Launch it.


Main College Website

How do you organize, design and code for a mountain of content on a constantly moving foundation with no real support from IT? Continuously, incrementally, and with great care.

There are so many factors at play in the design of a college website that it's hard to capture it in a few bits of text — the needs of the target audiences, the changing business goals of the College, distributed content authors of varying skill levels, the need to support antiquated web browsers, the pressures of department politics, the importance of long term flexibility. The list goes on. Suffice it to say that a lot of thinking has gone into this website and most of it isn't visible in a screenshot.

I've been at the helm for 13 years, guiding and evolving OCC's websites toward an architecture where this fluid state can thrive, and where a very small web team can carry it all in stride.

Homepage 1 Homepage 2 Homepage 3 Header Navigation

Sitelets

Sometimes it's necessary to provide a look & feel that differs from the core design. This used to require back-end programming resulting in long delays as OCC is very short-staffed. It occurred to me that by having the programmer adjust a small piece of code in the core template file I could remove the need for custom programming for every new sitelet.

Each sitelet starts as a menu in the CMS and every menu has a title. By having the template file grab the menu's title from the database and add it to the <head> as menu_title.css, it would allow me to override the global stylesheet with a local one.

This one small change gave me the power to skip over the programming bottleneck and get new sitelets up and running within minutes. I quickly modified the core template file to have an open canvas at its core allowing me to take full advantage of this new potential. It has been the most impactful change to the sites and to our productivity in a decade and is the model for how we plan to architect the sites on the next CMS platform.

Believe in Better Weekend College Parents & Families Explore Visit Programs Transfer Opportunities Applying to Onondaga Sketch

Student Intranet

This is the 5th iteration of this site. My focus on this version was to strip away all of the noise and pare things down to the core tasks, minimizing the number of clicks to get to the desired content. I met with students several times during the project to do card sorts and to watch them navigate the site, and sifted through years of analytics and search queries to get to the truth of how they use the site and where the problems lie. With the addition of responsive design I removed the need for a dedicated mobile website.

As is the norm, the College's needs kept evolving after this site launched. There is a greater need now for more effective communication with students to keep them engaged and aware of events on campus and to get key messaging to them with minimal fuss. I maintain a notebook of developing needs and it'll be the first place I look when it's time for another redesign.

Student Intranet 1 Student Intranet 2 Student Intranet 3

Other Work

Business Process Redo Bitey Beads Collateral Fall Fest Logo Sandbox Logo Altavault Logo Christine Hanna Yoga & Bellydance Logo
Back to Top