Portfolio updates, 2016 edition

Design considerations, thoughts, and feelings

Fellow UX designers — is it just me, or does every designer look at their personal design portfolio and think “yup, this is great… I just love my portfolio website. It really explains my process well. Is that my personality shining through, too? No need to ask for any feedback, I’m sure my friends will think it’s perfect.” (Insert cricket sounds)…

After many iterations and back-and-forth, I am happy to present my new product design portfolio, updated as of November 2016. Ta-da! What do you think?

The new site is not perfect, but it is live on the internet, done, shipped, and it’s only November… we still have a full month before the new year.

I wanted to share a behind-the-scenes look at my design process, the “before and after” shots, and explain some of my design considerations that went into the making of this MVP portfolio.

The “before” shot

I used a WordPress template site from 2014 through the majority of 2016, because it was the fastest and cheapest way for me to feature my work. I did not yet have the HTML and CSS skills to personally code my site.

The old site featured a busy, colorful grid layout on the homepage with projects listed in chronological order. Small, light grey captions (a color that probably did not have enough color contrast…) provided visitors a brief project title. At the time, I was nervous that people needed to see as many projects as possible to trust I was a quality junior designer. Upon reflection, my strategy was overkill and overwhelmed visitors by not featuring my top work in a manageable or curated layout.

Problems with the old portfolio

As I collected feedback from fellow designers and reflected on my old portfolio, I identified these key problems with the old site:

  • The portfolio’s homepage was hard to scan and required multiple clicks away from the homepage to access basic information such as timeframes, skills, and methodologies used on projects
  • The portfolio featured too many projects, instead of just my top work
  • The WordPress grid layout promoted all work up front, instead of my work presented in an orderly, curated list
  • Visually the site looked busy, instead of clean and modern
  • CSS updates were confusing to edit without knowing more coding skills, so I was completely constrained by the template style guide
  • Overall feedback from designer colleagues and friends indicated that the old portfolio was underwhelming because it did not succinctly or effectively explain my design process
  • My brother even told me that the portfolio looked like a “lame Best Buy ad” due to all the computer and phone screens… (that one really hurt!)

Value proposition for the new site

Synthesizing feedback and identifying my old portfolio’s problems helped me decide whether or not building a new portfolio was worth my time and effort. Ultimately, I thought the old portfolio was out of date, did not give visitors a favorable impression of my past experience and capabilities, and was causing me embarrassment. I was motivated to code a new portfolio from scratch and decided I couldn’t-not update a new site.

Leaning on lean design principles

After establishing the value proposition in favor of designing and coding a new portfolio, I approached the project with lean methodologies at top of mind. I made it a goal to practice what we preach at Lab Zero: design and code an MVP site, launch it, and ask for feedback to validate the site sooner rather than later.

Fundamentally, I strongly agree with folks like Dan Olsen (Lean Product Playbook) and David Heinemeier Hansson (Rework) in that the best product strategy is to launch a site sooner rather than later so that you can get build-measure-learn feedback loop started. To do that, I kicked off my efforts by establishing my design principles.

Establishing design principles

Before moving one pixel in Sketch or writing one line of code, I established my key design principles:

  • Clean and modern: I wanted the new site to appear clean and modern with lots of white space to better emphasize content and visuals.
  • Scannable: I wanted my portfolio to be easy to scan, leaving visitors with a clear understanding about what kind of designer and human I am.
  • Friendly and collaborative: As an extroverted designer, I wanted to emphasize how much I value working with other colleagues and mentors. A lot of folks have helped me along the way, so I wanted to use the site to give credit and say thanks.
  • Purposeful hierarchy: I wanted content and visuals be curated in a more purposeful order, to show visitors my most important work at the top of the site. Grid layouts can be overwhelming by lacking hierarchy.
  • Easy to update: I needed the site to be easier to update on an ongoing basis. Similarly, I wanted to design the site in a minimalist fashion to mitigate it looking outdated down the road. Portfolio maintenance is time consuming and often out of reach, so I wanted to design with this in mind.
  • Lean and mean: Most importantly, I wanted to launch my MVP site asap so that I could ask for feedback, validate ideas, and iterate sooner rather than later.

Identifying constraints

Next, I identified my top constraints:

  • Work under NDA: Nearly all of my most recent work at Lab Zero is not surprisingly under NDA. I also cannot share client names.
  • Content over visuals: As a product and interaction designer, I do not have big flashy images within my portfolio, like many visual designers might have. I realized that I needed to prioritize content over visuals to tell my story as effectively as possible.
  • Code, not a template site: Since UI/UX is software, I believe designers should know how websites work under the hood to some degree. I also believe hardship is a blessing, thanks to my Germanic-midwestern upbringing, so I decided the site needed to be properly coded the old fashion way using nothing more than vanilla HTML and CSS.

Drafting content

After establishing my design principles and identifying my constraints, I began drafting content in a Google doc. I shared the doc with a few friends to get feedback to gauge what people thought of my narrative. Getting the copy right was a top priority since the new portfolio needed a content-first strategy.

Whiteboard sketches

With content underway, I started ideating and sketching early concepts. I bookmarked websites that I liked as well as sites I disliked to start formulating ideas. I also viewed other designer’s portfolios. When whiteboarding, I made it a point to sketch as many ideas as quickly as possible before moving any pixels in the Sketch App.

Low fidelity wireframes

After sketching lots of possible layouts, I used the Sketch App to begin wireframing. I sent the first batch of ideas to friends for feedback:

Batch 1 with 6 versions, which included low fidelity wireframes that I shared with friends for feedback in August 2016

Iterations

After collecting feedback, I made iterations and sent out batch two to collect more feedback:

More iterations

By this point, feedback was not super positive and I was feeling lost and uninspired.

So I kept at it by playing around with mobile-first ideas and produced the next batch of ideas:

Even more iterations

I dialed back the level of polish on my mocks and continued playing around with ideas and feedback, while keeping my design principles, constraints, and content at top of mind:

Batch 4 with 4 versions of wireframes

The fourth batch of updates was still not “right.” I was still relying too heavily on visual placeholders instead of content, evident by the large grey image placeholders, shown above. I had forgotten one of my design principles: prioritize content over images. So I went back to the drawing board and reset my thinking.

Then it hit me: I iterated on some ideas and came up with the winning solution:

Color inspiration: International orange

With low fidelity wireframes under control, I shifted gears to think more about colors and visual polish for the site. This part of the process came much easier for me, since I had spent so much time already putting together low fidelity mocks using the Sketch app.

Inspired by the Golden Gate Bridge, I used International orange #F04A00 as my primary accent color.

  • Orange contrasts well with black font on a white background.
  • Orange is vibrant and energetic.
  • Orange is a secondary color. Primary colors are great and all, but not my cup of tea. Plus, every other tech company uses blue.
  • Other favorite colors — including yellow, green, and purple — often get mixed reactions or have contrast issues, so I wanted to avoid using any of these options.
  • I moved to San Francisco in 2010 thanks to the support of two family friends, Cynthia and Bob, and the bridge is one of San Francisco’s most prominent icons.
  • As a cyclist, I have logged a lot of miles and quality time crossing the bridge from SF to Marin and Sonoma.

By December 2016, the MVP site featured the accent color primarily for links, primary calls to action, and the favicon:

Transition to code

I decided it was time to hang up wireframing and to start coding. I used the whiteboard to pseudocode along the way to organize my thoughts, for example, when I implemented Flexbox:

My helpful coworker, Jeffrey, reviewed my code with me. I also utilized front-end resources online like CSS-tricks and a tutorial from Scotch.io:

November 2016: The resulting “after” shot

Presenting my new MVP product design portfolio, live as of November 2016:

After launching this initial MVP hosted on Github, I emailed six friends on November 23rd to ask for feedback. Within a week, three friends provided thoughtful feedback. I continued reaching out to additional designer and developer friends and colleagues. I am trying to synthesize all feedback to make sure the portfolio is received well overall by trusted designer friends.

What do you think? Do you have comments or feedback? Please share any feedback with me. Thanks!

November 2016 updates: Reflections and next steps

I plan to continue collecting feedback from friends. As I work on more projects at Lab Zero and other projects on the side, my site is less intimidating for me to update.

Post-MVP, I plan on including additional case studies to my larger client projects, to show my process, sketches, wireframes, and results from past work. In the theme of launching an MVP, I wanted to get the landing page up and running, to start the feedback loop. Stay tuned, more to come in the new year.

I will leave you with a quote from my favorite drag queen, Ru Paul: “If you can’t love your [own portfolio], how the hell are you gonna love anyone else? Can I get an ‘Amen?’”

December 2016 updates: More iterations and additional considerations

After launching the site in November 2016, I emailed and Slack’ed more designer and developer friends to ask for yet more feedback.

Within a month, 11 friends shared feedback. I made sure to get feedback from guys and girls, designers and developers, and SF and non-SF friends and colleagues.

Soliciting feedback is part of the “build, measure, learn” process that we practice at Lab Zero. By launching the site and asking for feedback, I hope to find out what people think about the site to make sure I’m on track. If more and more people say “something doesn’t make sense” or that they “don’t like a particular part of the website,” these signals help me iterate and improve the site sooner rather than later. Some examples of December 2016 updates included:

  • Accent colors: The MVP site featured link colors that transitioned from orange-to-yellow as you scrolled down the page. Each div featured a slightly different color change from one section to the next. People found this color effect distracting and/or annoying. One friend even said “it looks like your link colors are all messed up and it’s playing mean games with my eyes.” Four other people explicitly commented on how distracting the color change was to them, as well. Signals were strong that the MVP site needed a color palette adjustment. While I wanted to take some risks and try different designs on my site, I also know I need to take helpful feedback when I get it. The goal of the site is to help readers learn about my design skills and experience — not wow them with visual effects to show off my visual design skills. Hence, I opted to remove the orange-to-yellow ombre and to stick only with international orange, inspired by the Golden Gate Bridge. Plus, boats can theoretically see my site better in the fog… bad boat joke, moving on…
  • Hover colors: Several friends specifically mentioned that desktop hover effects “were missing” — to make the site more usable, I opted to add a hover color for desktop viewers. The updated did not help the mobile friendliness of the site, but the fix was easy enough for desktop that it seemed worth the minor effort.
  • Letter spacing: Several friends recommended I add letter spacing to my h1 and h2 tags, to make the site look more modern, easy to read, and polished.
  • Navigation: Of the 11 helpful friends and colleagues who have thoroughly reviewed the site, only two people thought I needed to include a top line navigation bar. These folks said they expected to see clear calls to action at the top of the page, first thing. I appreciated this advice, but had nine other friends saying they liked the clean, crisp layout and lack of noisy calls-to-action. Thanks to the range of feedback, I decided to leave the introduction section as-is and to wait for more feedback to roll in.
  • Font family: Nearly all reviewers liked my choice of fonts and told me such. Only one person said the fonts looked a bit generic, lacking a certain personal touch. I went with the majority and left as-is.

I received a lot of other helpful feedback and am weighing more options for future updates. Stay tuned!

Thanks for checking out my work. If you have any feedback or questions, please let me know.

Product designer focused on UX/UI and user research (he/him) claytonhopkins.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store