WordPress-Driven Microportfolios

As with Eli Review, I couldn't find a platform that would run my portfolio the way I wanted, so I had to build something myself

Client/Project: Myself
Timeline: October 2018
Objectives: Build a portfolio system optimized for content reuse and customization
Team: Myself
My Role: Information design, information architecture, WordPress development, front-end development, back-end development
Categories: , , , , , ,

Overview

This is the story of how I had to build myself an online portfolio. I investigated pre-packaged options but found most platforms where designers and developers create them to not represent me or my understandings of writing. Inspired by a designer I admire, I decided to build a custom portfolio engine using WordPress so that I could create all my portfolio content once and then reuse it and customize it for any purpose.

Background: a perfect tech-writing exercise

“Reuse”—the concept of creating one piece of content that can be used again and again in a variety of contexts—has been one of my core design principles since my first reading in technical communication (thanks @hartdav2). Designing for reuse requires an understanding of content design, content management, and information architecture, all of which form a Venn diagram. My brain tends to live at the center of that Venn diagram.

When it came time to build this portfolio for my professional purposes, I was inspired by an article on CSS Tricks arguing for portfolio microsites for case studies, or creating small independent sites for individual portfolio pieces. I thought that might be overkill because I have a lot of case studies, but a “microportfolio” might be a perfect solution.

A model for how I thought a series of microportfolios could reuse content from a larger comprehensive portfolio.

A “microportfolio” built for reuse, as I imagined it, could only exist alongside a “comprehensive” portfolio that includes all of the content that might ever be reused, much like single-source publishing. In the microportfolio, I would draw selected bits from that content and localize or annotate them to explain how they fit the situation (a job, a grant application, anything). The microportfolio would maintain some visual consistency with the comprehensive portfolio, but it would be its own entity with a distinct audience and purpose.

I was unenthused for a long time about the prospect of developing portfolio content, but developing a method for creating these microportfolios was an exciting technical writing and content management challenge, and I knew I could accomplish it using only WordPress.

Nerd Note: This case study tells the story of why I built this portfolio rather than the technical details of how I made it work. For that information, see this blog post on how to set up a microportfolio system in WordPress.

User Stories and Scope

You are not your user” is a design cliche and it’s always true except when it’s not. In the case of my portfolio project, I will likely be the only user of the infrastructure for creating and maintaining the comprehensive portfolio and all microportfolios, so I didn’t need to worry about researching my own knowledge and capabilities. I might invest more time developing the WordPress backend if others were involved with the project, but not when I am the only user.

You are not your user, except sometimes when you are (via Coraly Rosario on Medium.

The other audiences I anticipated for the portfolio project are unsurprising: people who want want to learn what I’m capable of or what I could bring to a team. This could include recruiters, hiring managers, potential future colleagues, or anyone who might have an interest in knowing my backstory, my qualifications, or my some degree of my personality. I didn’t develop detailed user stories for each, but I kept these audiences and purposes in mind throughout the project.

Design and Development

The work I did designing the visual aspects of the portfolio is important and difficult, and it could be a case study of its own. Here, however, I want to focus on what I did to expand the infrastructure of WordPress to make the microportfolio possible:

  • Custom post types – Expanding on the basic post and page information objects in WordPress, I added work sample and portfolio object types
  • Custom theme – WordPress themes do control the visual presentation but they are also where code gets written to drive custom functionality— in this case, code for retrieving and displaying the custom post types and also for both the comprehensive and microportfolio.
  • Portfolio content –  Getting the portfolio up and running meant having real content to work with, so I prepared more than a dozen pieces including writing samples and case studies (see all my work samples and my blog post trying to figure out what a “case study” is)
  • Subdomain configuration method – The most challenging technical component of the project was figuring out how to create a custom domain for each microportfolio (e.g. ecorp.mcleodm3.com) and the solution ended up being a combination of a configuration change in Cpanel and a file to control how WordPress operates for the microportfolio.

Portfolio in Action

Comprehensive portfolio vs microportfolio – There are two landing page designs in the WordPress theme I built. The comprehensive portfolio is written for an unspecified audience coming from a business card, a presentation,a referral, or something without a specific exigency. It includes more introductory content than the microsite, but a microsite would almost never stand alone in the way the comprehensive site would. A microsiste would almost always accompany standard application materials or proposal genres, so repeating that information on the microsite would be redundant.

mcleodm3.com - the comprehensive portfolio with content not tailored to a specific audience.
ecorp.mcleodm3.com - A microportfolio for the fictional Ecorp with content tailored for that job and portfolio objects selected specifically for those circumstances.

Both designs share a great deal of visual style to create consistency between them, with enough separating them to make clear that they are different objects. The microportfolio connects to the comprehensive portfolio if users want the full version, but not the other way around.

In both cases, samples are selected through a WordPress shortcode. Each instance of a shortcode displays the identified portfolio piece (the ID assigned to it in the database) along with the custom caption:

Writing Sample

This is a custom annotation for the microportfolio audience. Details

This way, the work samples are each their own object in WordPress, but by using these shortcodes, I can include them in different views for different audiences with almost no additional effort.

The Work Samples page on the comprehensive portfolio aggregates all of the samples into a single view
The tag view in the comprehensive portfolio aggregates samples by tag.

Microsites only consist of a landing page, but the comprehensive site is, well, comprehensive, so samples show up in a couple of other places. For example, on the “Work” page via the primary navigation, which aggregates all samples in a single place. A similar view shows all samples matching a selected tag (“Technical Writing”, for example), making it possible for a user to find all samples matching a specific topic or subject area.

The composing space for the microportfolio is for using shortcodes to identify which samples to include.

Specifying which samples to include in a microportfolio happens in the post type’s WYSIWYG editor by including the same shortcode referenced above. Microportfolios can contain as few or as many samples as necessary, as long as each is referenced using the same shortcode and specifying the ID of the sample and providing an annotation.

I added custom fields to the microportfolio that allow me to create situation-specific framing for the portfolio.

Finally, the unique microcopy for each microportfolio is defined using a series of Advanced Custom Fields following the standard post WYSIWYG. These fields make it possible to tailor the language framing the selected samples to each situation with only a bit of additional work.

The subdomain management interface in cPanel where each microportfolio needs to be registered.

The last step for creating each microportfolio is registering it with its own domain name. Granted, each one would already have its own address thanks to WordPress (e.g. mcleodm3.com/portfolio/ecorp) but, from a UX perspective, it’s not as compelling to see a standard domain structure as it is to have a custom domain. This requires a bit of setup for a new subdomain using a web host’s cPanel, but compared toall the writing for creating a portfolio, this last step is relatively painless.

Outcomes / Takeaways

I didn’t start the process of creating my portfolio with the intention of building a custom system, but based on the feedback I’ve received during the development process, I believe it is worth the added effort. Beyond having the system to use, some of the outcomes include:

  • Positive feedbackI created a survey to solicit feedback from colleagues and friends, and they were are generally very supportive of the concept and the execution
  • Microportfolio tutorial – I’ve shared all of the details for how someone else can replicate this setup, so that hopefully it’ll help save other folks some of the hard work I had to do.

I’ve only received feedback from colleagues at this point, so the real stress test will come when I start using it for its intended purposes. Questions I’ll be paying attention to when that happens:

  • How does the audience respond to the microportfolio vs. the comprehensive one?
  • How do they perform technically? I’ve tested in a wide range of devices and browsers but still never sent one out into the real world.

The ultimate purpose of this work, though—telling stories about my work and having them in the world in a usable form—has definitely been achieved.