I extended the design originally created for Georgetown.edu into a WordPress theme that would ultimately serve over 300 school and department websites across the university.
CHALLENGES
The theme needed to be robust and scalable enough to be used for at least 6-8 years while serving a wide variety of goals. Extending this design required close collaboration with developers, project managers, and clients.
Design works hand-in-hand with a strong approach to content strategy. My goal was to get editors to consider their content—the story they’re trying to tell, and how to communicate with their audience—as part of working with the design. We also needed to accommodate information-heavy content in a theme that was primarily designed for marketing aims.
The theme needed to be robust and scalable enough to be used for at least 6-8 years while serving a wide variety of goals. Extending this design required close collaboration with developers, project managers, and clients.
Design works hand-in-hand with a strong approach to content strategy. My goal was to get editors to consider their content—the story they’re trying to tell, and how to communicate with their audience—as part of working with the design. We also needed to accommodate information-heavy content in a theme that was primarily designed for marketing aims.
SOLUTIONS
Big Picture
Our new theme involved an updated approach to our overall communication and building pages.
First, we revisited how we communicated with our partners—and also strengthened the handoff between design and development. I created a proposed flowchart process to streamline our team’s communication with clients during the discovery and research phase of each site build. Similarly, I created a flowchart to improve collaboration between design and development when introducing new design patterns for the theme.
Big Picture
Our new theme involved an updated approach to our overall communication and building pages.
First, we revisited how we communicated with our partners—and also strengthened the handoff between design and development. I created a proposed flowchart process to streamline our team’s communication with clients during the discovery and research phase of each site build. Similarly, I created a flowchart to improve collaboration between design and development when introducing new design patterns for the theme.
Closer Look At Design
The new visual designs involved a more guided approach as to how our partners/editors can use them to smooth out the transition into more content centric designs. I conducted an audit review of how editors used blocks in our previous WordPress theme. This helped us understand how and why editors used certain blocks and helped us map functionality across the old and the new themes. The development team used this map to inform our content migration efforts.
We also added new design patterns—some pulled from the previous theme—to better serve our clients’ needs. For each new pattern, we conducted user tests and interviewed stakeholders/editors to ensure that the pattern met their communication needs and fit within our overall system.
The Info Card Deck and CTA Card Deck block are a couple of blocks from our previous theme, retrofitted.
CTA Card Deck - Before & After
Info Card Deck - Before & After
The highlight block is an example of a new design pattern presented to editors.
One of the goals of this project was to ensure that the WordPress admin UI wasn’t cluttered. This required a deep understanding of the WordPress UI guidelines; iteration with the development team to build different UI prototypes; and user testing in order to make an informed decision about where to place controls.
One of the goals of this project was to ensure that the WordPress admin UI wasn’t cluttered. This required a deep understanding of the WordPress UI guidelines; iteration with the development team to build different UI prototypes; and user testing in order to make an informed decision about where to place controls.
As part of our work, we built upon a basic style guide that was delivered as part of the Georgetown.edu redesign. I evaluated and filled in specifications for pattern usage, image and thumbnail sizes, character counts for text. I also created page models—fully realized pages with annotations explaining design choices—to aid site owners (and to promote best practices!).
As part of our work, we built upon a basic style guide that was delivered as part of the Georgetown.edu redesign. I evaluated and filled in specifications for pattern usage, image and thumbnail sizes, character counts for text. I also created page models—fully realized pages with annotations explaining design choices—to aid site owners (and to promote best practices!).
Finally, I worked with project managers to create a content bootcamp for site editors. This exercise was designed to showcase best practices and guide editors through the process of setting up pages in our new theme.
Finally, I worked with project managers to create a content bootcamp for site editors. This exercise was designed to showcase best practices and guide editors through the process of setting up pages in our new theme.
IMPACT
Early feedback has been positive—both for the look and feel of the new theme and for the content process we put in place in working with our clients.
Selected Works
Georgetown University RedesignRedesigning the Flagship Website
1789 Design SystemBuilding a Wordpress Theme
Visual Identity for the WebCreating Guidelines & Governance
Contact
Resume
E-mail: [email protected]
X: @fabuloso
LinkedIn: linkedin.com/in/fabalca