EvanChute.design

Portfolio Website

While writing a case study for my own portfolio website might seem a bit indulgent, bear with me. Evolving my career into the UX Design field has been an incredible journey so far, and I wasn't about to waste an opportunity to exercise some newly honed skills, as well as brush off some old ones.

Slacking off at user research

You don't know what you don't know, and there were plenty of things I didn't necessarily know about building a UX portfolio when I started this project. So I did what any UX Designer worth their salt would do: I embarked on some user research. I performed ad hoc interviews with friends in the tech industry, chatted with other UX Designers, and did a deeper dive with the senior UX Designer who was facilitating the UX course I was attending. But my favorite user research story came from an unexpected place. I had asked about resume writing services for creatives in the Denver UX Slack channel, and immediately received a boatload of (very good) advice on how important it was to structure a portfolio correctly. It wasn't the advice I had requested, but it was the direction I needed.

Feeling the flow and roughing it

Having made the research-based decision to write case studies, and having documented a pretty solid list of projects I've worked on in a UX capacity, I felt content strategy was under control. This could only mean that it was time to think about site format and user work flow! My desk research—i.e. looking at inspiring online UX portfolios—indicated that one-page scrolling style portfolio sites were pretty popular. I quickly roughed out a "Single Page Plus" user flow, with some initial ideas for page layout, and ran it past a few folks. The general work flow appeared to resonate with people. Don't fix what ain't broken, they say. Concept: validated.

Sanding and polishing the rough edges

The next task was to get a little more specific with the layout of the one-page sections, and to sketch up a quick idea for how the case study pages would function. Pen and paper wireframes worked nicely for this, and since there aren't many pages to this site I was able to map out the workflow on this iteration as well. Turns out, nothing had really changed in that regard from the first round. Pfew.

Hi-fi comps ain't nothin' ta fool with

At some point during this project, I adopted the project management tool Asana to help me keep track of the To-dos and don'ts. A couple items of note in my backlog are "Write user personas" and "Craft user stories with requirements based on personas." Those two documents are generally critical in guiding a UX design team as they create digital experiences and products. While I haven't formalized these artifacts, my target user and their goals when visiting this site have been top-of-mind. My interactions with senior level UX Designers and others in the tech space has informed all the design decisions to this point.

These interactions have also led me to believe the site should showcase who I am as a person and a designer, because cultural compatibility is important. To that end, the high fidelity designs were crafted to portray my outgoing personality, while also letting the case studies speak to a more serious approach to my work. I created a quick prototype in Sketch, and showed the concepts and variations to an assortment of friends and colleagues. People preferred the pink.

Exploring mobile design with pen and paper

Based on my research, I had determined that the primary viewport for this project would be a desktop environment. Still, it would be unfortunate if the site were completely un-viewable on a mobile or tablet device in the off chance that a hiring manager only had the capacity to view my portfolio on their phone. While I had worked through the user interface of the case studies on large screens, it was clear that the slideshow approach wouldn't work on a small screen, as there wasn't enough room to have a static slideshow with scrollable content. A quick exploration in the sketchbook, and a little digging through a front-end dev resource to ensure feasibility, yielded a potential solution. There are still a few interaction tweaks I'd like to make to some of the UI elements, but I'll need to bone up on my jQuery skills to address them. Also, I bought some new pens.

Implementing a steep learning curve

I made the decision to build the site myself using the MODX content management system, Bootstrap 3, and a smattering of jQuery components and libraries. MODX was chosen for it's flexibility and lack of opinion about markup and styling, making it a perfect tool for UX Designers like myself to develop site on. While the process has taken much longer than creating a site from a stock theme, it has also allowed me to realize a ground-up UX Design, and implement some user flows and delivery of content that may either not exist or would have taken a long time to locate. Plus, slinging curly brackets can be rewarding.

And now comes the fun part: user testing. The site is implemented, case studies have been written, and you're viewing it right here, right now. What's working for you? What's not? Do you have ideas for improvements? Did I miss something? Send me an email with your thoughts, and I'll stick the relevant ones in the backlog for consideration during the next phase of development.