Problem

The John Carroll School was facing a series of challenges: their website was becoming increasingly costly to maintain, exacerbated by limited integration with their data systems, and unkempt information architecture and an appearance failed to captivate visitors effectively. The school's administration was concerned that their  hindered ability to communicate effectively was negatively impacting enrollments and community engagement.

Requirements

In order to improve their enrollments, increase engagement from within the community, and ease the work required to maintain the site, the School needed a new and improved web presence. One that could:

1. Leverage automation to streamline processes
2. Interface with their databases to improve information flow
3. Be more inclusive and engaging for visitors
4. Empower the school staff to manage and update the site post launch
5. Make the maintenance work that is needed easier to accomplish
6. Adapt to dynamic and shifting needs in the future
7. Increase enrollments and alumni sponsorship through effective story-telling and personalized design touches

Context

The website was to be developed within an evolving data ecosystem, meaning it needed not only to harmonize with existing digital infrastructure, but be scalable for future updates and advancements. My role was central to the projects completion, carrying the majority of the design and development duties, alongside management responsibilities. This required continuous collaboration with the client to translate their requirements to our backend team in order to implement necessary services. The project's success counted upon my ability to maintain open lines of communication, adapt to technical constraints, and deliver a solution that balanced aesthetic appeal with practical functionality.

Design

My roles required me to be my own cross-functional team, working within a larger cross-functional team. I was to coordinate graphic design, marketing, information and web design, web development, and business goals for my company and the School, all the while communicating progress and roadblocks, managing myself, and advising on the management of the project on the whole.

While plans are necessary, they can never prepare you for everything. The design of the site was constantly evolving as new requirements, requests, challenges, and ideas came to my desk. While not linear, and often unpredictable, the design process was nevertheless iterative and I was always trying to find ways to better the site for the School and it's users.

Information architecture & visual design

With an understanding of what what required and the context in which I was working, I began by developing how to structure the new website. Working with the school's marketing director, we arrived at a structure that:

1. Improved information grouping for better navigability
2. More closely aligned with conventions to decrease friction for new visitors
3. Updated naming and semantics to improve recognition
4. Would allow us to expand outwards in a natural manner
5. Utilized Webflow templates to decrease the number of unique static pages

Concurrently, I was crafting a new UI that drew inspiration from the IBM design system. I aimed to create a style which emulated a sort of analog digitalism, designed to be punchy, accessible, and professional.

I advocated for a shift away from the school's primary color for digital content, something one could already starting to show in certain print media. The muted gold and supporting blue (which did not exist anywhere outside their website), made it difficult to create visually appealing pages that were also web accessible. I also improved upon the typographical guidelines, establishing more proportional sizings, and standardizing contextual usage.

Wireframes and prototyping

Turning my eyes to the web design, I started by playing around with snippets of the website, ideating various ways in which that information could be conveyed. As I explored, I felt myself closing in on an design language that would serve as the foundation for the rest of the project. One strategy that I found helpful in doing this was apply artificial constraints on my designs. This provided me with opportunities to approach designs from new angles, forcing me to think outside the box.

A proof of concept, focusing on a representative subset of pages built using the new design language, served both to validate the architectural decisions and to begin the construction of a component library. As I continued to refine the designs over several weeks, I iterated until finding myself looking at a system that I felt content with. A professor of mine once told me that once you get something to 80%, you either need to pivot, or build it. When I proposed these designs to the client and received the seal of approval, I decided it was time to build.

Development

The construction process was as much an exercise in Webflow as it was an exercise in collaboration. Throughout this phrase I was constantly coordinating with the client to monitor progress and guide their message. At the same time, I was collaborating with our engineering team to organize and execute upon the supporting services necessary to facilitate automatation.

Adaptation and abstraction

When the vision changed, aesthetics and components were refined, but the iterative spirit of the process stayed true. I employed a regular cycle of growth, cutting back, and abstraction to maintain momentum in spite of a shifting goalposts. This also allowed for facilitating a lightweight architecture and component-based design library.

‍

I was constantly on the lookout for opportunities to turn pages into templates, and information blocks into components. The more of the site that was template or component based, the easier it would be to maintain for the client once the site was handed over to them. Come deployment, the Webflow CMS system comprised 20 collections, thousands of collection items, and over 100 components that could be configured without needing to touch any code.

Documentation

Along the way, I created a comprehensive style guide that would serve to explain my class naming conventions, component configuration and usage, content best practices, Webflow tips, and style standards to instruct any development outside my existing system. The guide covered of navigation, typography, utility classes, spacing and layouts, common components, and more. While I did not intend for the client to need to code, I still felt it valuable to provide this information if there comes a time down the road someone comes back to this project and I am not there.

Automation and finishing touches

With the website taking shape, I prompted the client to finalize their message, and I assisted in identifying content and copy that would advance the information they wanted to get across to visitors. My writing philosophy is often utilitarian, which I find valuable when working with clients because I am able to outline the essentials, and leave room for them to incorporate their own personality.

With the assistance of my company's engineering team, automation was the last big hurdle to cross. The data needed by the site, and how to map that data from the school's systems to the site, I had outlined ahead of time. This just left engineering to build the needed services to meet those specifications. These services would update the site content on regular intervals ensuring the everything stayed relevant, and removed the burden from school staff. Establishing this workflow also laid the groundwork for future automation.

Once the site had reached maturity, it was time to deploy. Moving the old site to an archived domain, the new site took its place at the primary domain. Monitoring the site over the following days, I watched and corrected for growing pains. In it's wake, I onboarded certain school staff to the site, and refined my documentation in response to those interactions.

You can explore the site for yourself at www.johncarroll.org.

Retrospective

The reconstruction of the John Carroll School website was my first project of significant scale and scope. The experience enhanced my hard skills in UX design, web development, and information architecture, alongside my soft skills in teamwork, communication, and adaptability. Despite my apprehensions, the project became a chance to test my mettle, and a rich source of personal and professional growth.

Aptitude and adaptability

This experience emphasized for me the value in having a focused and curious approach to one's work. When I was faced with problems I did not know how to solve, or with solutions I did not know how to execute on, I needed to rapidly acquire new skills and knowledge that allowed me to tackle those challenges. The unpredictable nature of the design and development process affirmed the necessity for flexibility in one's approach. This experience has highlighted that grasping the underlying problem is more valuable than a predefined solution, because it means you can stay opened minded; guided in the right direction, not toward a fixed destination.

Team dynamics

Navigating the complexities of client/company relations and cross-team collaboration highlighted for me the essential roles that communication plays in the execution of a plan. We do our best to prepare, but things will inevitably go wrong, and it's how well you can move through those challenges that really determines how well you operate as a team. Every role's contribution is needed to achieve success, and the more in line with one another these contributions are, the better the end result will be. The sum is greater than it parts, and frequencies amplify more when then are resonant.