As my last post described, my UX Portfolio previously looked like this:
The arrows show a change from the About and Colophon pages using thin letter for the titles, to using thick letters but I changed the whole page to have much wider margins.
With my changes in March 2021, I’ve massively updated the website. Again I wrote a little note to myself, documenting the changes.
Version 4.2, March 2021 — Major changes
The goal of these changes was to build on the unification from the February update.
1. Made sure all projects have a main image.
I did pick the new headline look, sadly away from the “Swiss” poster-style headline. I wanted projects without a headline image to look unified, but I eventually decided to make an image for all projects because I felt the lack of an image was a weakness.
2. Removed Adorama project as a page.
Although the write-up of this project shows a logical thought process and my thorough research activities, I felt the project summary on the website wasn’t very strong. And it was really different from the other projects which were more substantial. I also felt forcing people to click through to a blog post to read again what they’d just partially read through was too much. It’s still there, but only as a link.
This was kind of a big change for me, because this project helped kick off the first changes on this website to this new look.
Update: Actually, I put this project back! I instead eliminated the link to the blog post, which I had assumed for so long would be much more of an effort, compared to the other projects. So of course there will be another update!
3. Scrapped 7th Project
I had plans to include a 7th page, which would be user journeys and maps. Ultimately, I decided it wasn’t strong enough and it was too different of a page to include, so it’s not there. Though, it’s possible I may include something like this at a later time.
When debating the new page, I ended up removing some of the SVG images at the bottom of the page that would have been included as examples. I ended up adding two new SVGs, but now realize I haven’t put the old ones back into the Catalog, so maybe that will be a new update.
4. Applying Sales Copy and Personal Branding: Index Page, Testimonials
I had already included some testimonials from LinkedIn onto the project pages, but they were quite long and big blocks of text. After attending some webinars on personal branding, self-promotion, and writing sales copy, I realized they were useful, but not hidden throughout the website. So I took a few quotes and put them on the home page, then linked to a Testimonials section on my About page.
I also changed the home page to reflect the webinars on personal branding and self-promotion. The title now is meant to appeal to hiring managers without being too explicit. The testimonials also serve that purpose, from a sales point of view. As the webinar leader said, it’s a way to borrow authenticity.
5. Language and Tone
Read Aloud: Tying into point #4, I also went through every project and read it out loud, to make sure each page sounded right and flowed well. I didn’t find too many typos, but I did kind of repeat myself a lot.
Active Voice: I also took the advice of the personal branding webinar, and changed sentences to an active voice:
- Old version: I’m the kind of person who can get into the weeds and takes on challenges
- New version: I am comfortable getting into the weeds and taking on challenges.
Could probably still be better, but overall it’s an improvement.
Background: I added a title for the Background section, and cut down on the client/company overview for each project. I felt it was too tall and drew too much attention.
Original Descriptions: I also searched my inbox, as much as I could, to find the specific descriptions used by the hiring managers to describe their own projects or to describe their own companies.
Home Page Project Descriptions: I also considered how I described each project on the home page. For instance, was I describing the project “Redesign for…” or was I just giving the title, “Design Tools…”.
I felt that using both was inconsistent, so I rewrote the titles so they were more consistent in language style. Then I used the description to explain the details. I also included the company, as another layer of detail on the home page, since I was removing other projects.
6. Color Changes
As I was revisiting some portfolio websites, looking for ideas, I came across www.vitsoe.com. I take it to be the website for Dieter Rams’s company. As you might expect, it’s quite organized, very clearly follows a 3-column layout, and it only has 4 colors: Black, White, Grey, Blue.
After trying the blue color, I decided to use it for my website. I did a lot of exploration, but I really created an entirely new palette around this one color!
I also went back to my 2017 website to find good ideas, since it was a good enough portfolio to get me a 6-month gig. Turns out the white background isn’t pure white. It was actually an extremely light version of the dark navy blue color I selected for the footer and the page titles. I took that hue and created a few shades to use as background colors.
Meanwhile, I tried out some of the new dark colors to see if maybe I should change the hue, which I ended up doing. So the former color was 220 HSL, which is a very dark navy. The new color is 280 HSL, which is a very dark purple. I think the new color is a little warmer, and lighter shades look kind of lilac.
I updated all of the project images with hues from the new color palette, which are kind of pastel and muted: greens, purples, and off-whites.
7. Image Ratios
Something I had been thinking about for a while, but hadn’t quite gotten to was formatting all of the images so they would be the same aspect ratio, to create more of a unified look across project pages.
The website Vitsoe.com uses 2 sizes: 1×1 and 16×9.
Aspect ratios are built into the CSS framework as pre-built styles. I created image masks for some of the choices, and tried out a few options. I selected 8×5 for project images and 16×9 for project covers.
8. Mobile only enhancement on project galleries.
9. About and Colophon
[Sigh] I honestly really don’t know what people want to see on about pages. My research has show that it’s so varied. Ironically, I got my inspiration after I was looking for a dentist and saw how some of them described themselves. I kind of took that approach.
For both pages, I moved back to a full-page width, which I think looks so much better.
Quite a lot of changes here! All focusing on a unified look, and making changes to colors and aspect ratios.
And yet the portfolio has changed again! One page I’ve already indicated, but there are others, particularly with how I describe project overviews. I will get to those changes in another update.