A look at my previous UX portfolio, with pages displayed side-by-side.<\/figcaption><\/figure>\n\n\n\nOn the About and Colophon pages, on the far right, the arrows show a change from using a thin\/fine font weight for the titles to using a heavier font weight. I had also changed the whole page to have much wider margins. <\/p>\n\n\n\n
Notice also that, like the About and Colophon pages, some projects do not have images.<\/p>\n\n\n\n![\"Changes](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/about-2.jpg\")
Changes to the About and Colophon pages.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\nVersion 4.2, March 2021 — Major changes<\/h2>\n\n\n\n
With these March 2021 changes, I’ve massively updated the website. As I did with my last major update, I wrote a little note to myself to document the changes. That note…I wrote right in my Sketch file! Below is an edited copy of what I wrote to myself.<\/p>\n\n\n\n
Overview & Goal<\/h3>\n\n\n\n
The goal of these changes was to build on the theme of unification, which I started in the February update. The changes include the following:<\/p>\n\n\n\n
- Inclusion of a main images for projects<\/li>
- Removing and rearranging projects<\/li>
- Include principles of personal branding<\/li>
- Selecting image ratios for project galleries<\/li>
- Updating the color palette<\/li>
- Updating the language and tone<\/li>
- Inclusion of mobile enhancements<\/li>
- Updates to the About and Colophon pages<\/li><\/ul>\n\n\n\n
\n\n\n\nDetailed Changes<\/h3>\n\n\n\n1. Make sure all projects have a main image.<\/h5>\n\n\n\n
No More “Swiss Image<\/strong>“<\/p>\n\n\n\nI decided on a new look for headlines on project pages. In my previous update, I’d changed the headlines so that the projects would have a unified look, regardless<\/em> of whether or not they had an image. However, after more consideration, I felt that the lack of an image for projects was a weakness. <\/p>\n\n\n\nI was sad to move away from the \u201cSwiss poster\u201d -style headline. I originally selected this style due to its asymmetrical appearance and unusual look. I felt this would help my portfolio seem more memorable. Here is a before and after:<\/p>\n\n\n\n
![\"Old](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/05\/SwissImageStyle.png\")
Previously, project pages used a layout I called “Swiss Image”.<\/figcaption><\/figure><\/div>\n\n\n\n![\"Side-by-side](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/titles-1.jpg\")
After: all projects now have images.<\/figcaption><\/figure>\n\n\n\n2. Removed Adorama project as a page. <\/h5>\n\n\n\n
My intention for this project was to provide a logical overview of my research activities and thought process. However, due to previous iterations of my portfolio, the presentation of this project was much different from the others:<\/p>\n\n\n\n
- The portfolio page was somewhat short<\/li>
- A comprehensive explanation was available, but required linking to a blog post<\/li><\/ul>\n\n\n\n
While the blog post was comprehensive, I felt the project summary on the site wasn\u2019t very strong. In reconsidering my strategy for the experience of this page, I decided that forcing people to click through to a blog post seemed too much. So, I removed the page.<\/p>\n\n\n\n
I felt a sense of nostalgia for this page because this project helped kick off the first changes on this website, from Bootstrap to Tachyons. <\/p>\n\n\n\n
But there’s an update: <\/strong>Actually, I put this project back! However, I did eliminate the link to the blog post. Instead, I updated the page itself to include more detail. I put this off for a while because I had assumed that this would be more work than the gain I’d get from it. But the effort wasn’t as bad as I thought. So of course there will be another portfolio update! <\/em><\/p>\n\n\n\n3. Scrapped a 7th Project<\/h5>\n\n\n\n
I had plans to include a 7th project page, which would be just user journeys and maps; sort of stand-alone examples. Ultimately, I decided against it:<\/p>\n\n\n\n
- I wasn’t sure it was a strong enough page<\/li>
- The page was too different compared to the others<\/li>
- Trade-off between showing more work vs showing too much was imbalanced<\/li><\/ul>\n\n\n\n
It’s possible I may reconsider including this page at a later time, if another project gets eliminated.<\/p>\n\n\n\n![\"Project](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/wrk-cover.jpg\")
7th project I didn’t end up using.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n“Catalog” SVG Images<\/strong><\/p>\n\n\n\nIn addition to removing the project page, I also ended up removing some of the SVG images at the bottom of the page. These images would have been available as example projects\/links. <\/p>\n\n\n\n
I ended up adding two new SVGs. Although, I may need to revisit this and look at which SVGs I want to include.<\/p>\n\n\n\n![\"Changes](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/icons.jpg\")
Over time, I changed the list of projects\/companies displayed at the bottom of the index page.<\/figcaption><\/figure>\n\n\n\n4. Applying Sales Copy and Personal Branding: Index Page, Testimonials<\/h5>\n\n\n\n
After attending some webinars on personal branding, self-promotion, and writing sales copy (for personal branding), I realized how powerful testimonials can be on a website. <\/p>\n\n\n\n
The good news is that I was already including testimonials. The bad news is that they were a little difficult to find. You had to click on each project to find them, which meant some of them might go unnoticed. They were also were long and wordy.<\/p>\n\n\n\n![\"Example](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/05\/quote.png\")
Example of a testimonial from a project page. In order to read this, you had to click on a project. <\/figcaption><\/figure>\n\n\n\nThe change I made was to highlight two quotes on the homepage, and then include a link to a Testimonials section on the About page. Rather than include the full testimonial, I included just a sentence or so. Readers can visit LinkedIn to view the full quotes.<\/p>\n\n\n\n![\"Left](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/branding-1024x192.png\")
Transformation of the homepage. Left image shows no testimonials. Middle image includes 2 testimonials. Right image shows a group of testimonials, with a link to LinkedIn.<\/figcaption><\/figure>\n\n\n\nI also changed the home page to reflect more of what I learned during the webinars. For instance, the title is meant to appeal to hiring managers without being too explicit. <\/p>\n\n\n\n
The testimonials also provide a sales purpose: as a webinar leader said, testimonials are a way to “borrow” authenticity.<\/p>\n\n\n\n
5. Language and Tone<\/h5>\n\n\n\n
I made a few changes to language and tone with the following activities:<\/p>\n\n\n\n
- Editing corrections by reading out loud<\/li>
- Using an active voice <\/li>
- Updating project descriptions <\/li>
- Using original descriptions in project titles and subtitles <\/li>
- Updating descriptions on the homepage<\/li><\/ul>\n\n\n\n
\n\n\n\nRead each project out loud<\/strong><\/p>\n\n\n\nTying into point #4, I went through every project and read it out loud. This helped me find typos, and make sure each page flowed well. I didn\u2019t find too many typos, but I often repeated myself from section to section. Reading out loud helped me find and fix those issues.<\/p>\n\n\n\n
\n\n\n\nUse an Active Voice<\/strong><\/p>\n\n\n\nI also took the advice of a personal branding expert to use an active voice, especially when describing myself. Here is an example of a change:<\/p>\n\n\n\n
- Old version: <\/strong>I\u2019m the kind of person<\/strong> who can get into the weeds and takes on challenges<\/em><\/li><\/ul>\n\n\n\n
- New version: <\/strong>I am<\/strong> comfortable getting into the weeds and taking on challenges.<\/em><\/li><\/ul>\n\n\n\n
Maybe this could be better, but overall it\u2019s an improvement.<\/p>\n\n\n\n
\n\n\n\nUpdated Project Background\/Overview<\/strong><\/p>\n\n\n\nUnder each project image is a little background information about my role, the company, the client, etc. I felt this section was too tall and drew too much attention. <\/p>\n\n\n\n
I added a title for the Background section and cut down on the client\/company overview for each project by creating a 3-column group of text.<\/p>\n\n\n\n![\"Updated](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/background.jpg\")
Updated background section is shorter, eliminates the image. Goes to 3 paragraphs.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\nUpdate Projects with Original Descriptions<\/strong><\/p>\n\n\n\nI decided maybe I was creating more work for myself by trying to come up with my own interpretation of what a project was about. <\/p>\n\n\n\n
My solution was to search through my inbox, and find the specific descriptions used in project or company descriptions, as they were pitched to me. If I couldn’t find an email, I sometimes searched online \u2014 sometimes taking descriptions from Wikipedia \u2014 for company descriptions. Here’s an example:<\/p>\n\n\n\n![\"Showing](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/titles.jpg\")
The second subtitle comes directly from the job post.<\/figcaption><\/figure>\n\n\n\n![\"Background](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/background-2.jpg\")
The description on the right uses language from the hiring manager, describing the company.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\nHome Page Project Descriptions<\/strong><\/p>\n\n\n\nI also considered how I described each project on the home page. It turns out I was describing projects in 2 different ways. For instance:<\/p>\n\n\n\n
- By project activity: \u201cRedesign for\u2026\u201d <\/li>
- By project outcome: \u201cDesign Tools\u2026\u201d<\/li><\/ul>\n\n\n\n
I decided to update the descriptions. Now the titles describe the project outcome and the description explains the activity\/detail. <\/p>\n\n\n\n
For another layer of home page detail, I also included the name of the company. I felt I had more space, since I was removing other projects.<\/p>\n\n\n\n![\"Showing](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/home-page-desc.jpg\")
On the home page, I modified language and tone for each project so that they were all more consistent in language and style. <\/figcaption><\/figure>\n\n\n\n6. Color Changes<\/h5>\n\n\n\n
As I was revisiting some of my research on portfolio websites, and looking for ideas, I came across www.vitsoe.com. This appears to be the website for the company run by the German designer, Dieter Rams. <\/p>\n\n\n\n
The website is quite organized. It follows a very clear 3-column layout. And it only has 4 colors: Black, White, Grey, Blue.<\/p>\n\n\n\n
![\"\"](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/vitsoe-1.jpg\")
vitsoe.com<\/figcaption><\/figure><\/div>\n\n\n\nI liked the blue color, which they use for links. After trying it out a bit, I decided to use it for my website \u2014 also for links.<\/p>\n\n\n\n
After that, I decided to do a lo of color exploration, to make sure all my colors coordinated. This eventually led to an entirely new palette. It was all based on this one color!<\/p>\n\n\n\n![\"Screenshot](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/colors.jpg\")
Exploring colors, using the blue link color as a starting point.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\nHistoric Color Reference<\/strong><\/p>\n\n\n\nI 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 I used a white background that wasn’t pure white. It was actually an extremely light version of the dark navy blue color I had been using for the footer and the page titles. I took that hue and created a few shades to use as background colors. <\/p>\n\n\n\n![\"Screenshot](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/blue.jpg\")
The image on left is from my 2017 portfolio. Both of these colors have the same hue, but different saturation and brightness.<\/figcaption><\/figure>\n\n\n\nAfter generating so many colors, I decided to try out some of the new dark shades to see if maybe I should make some other changes.<\/p>\n\n\n\n
The previous primary font color was 220 HSL, which is that 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.<\/p>\n\n\n\n
I updated all of the project images with hues from the new color palette. The new colors are kind of pastel and muted, including greens, purples, and off-whites.<\/p>\n\n\n\n![\"Overview](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/palette.jpg\")
New Palette. These aren’t all the colors, but many of them.<\/figcaption><\/figure>\n\n\n\n7. Image Ratios<\/h5>\n\n\n\n
As I mentioned, I had a goal to create more of a unified look across project pages. I knew that one way to do that would be to make sure all the images were the same size or aspect ratio. <\/p>\n\n\n\n
This was something I had been thinking about for a while, but I hadn\u2019t quite gotten around to it yet. The Vitsoe.com website, for example, uses 2 sizes: 1×1 and 16×9. <\/p>\n\n\n\n
![\"Image](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/aspect.jpg\")
Aspect ratios are built into the CSS framework I’m using. They are 8×5, 7×5, 16×9, 6×4, 4×3, and 1×1.<\/figcaption><\/figure><\/div>\n\n\n\nAspect ratios are built into the CSS framework I’m using. I just needed to apply the styles after making a decision. To decide, I created image masks and tried out a few options. I selected 8×5 for project images and 16×9 for project covers. <\/p>\n\n\n\n
8. Mobile only enhancement on project galleries. <\/h5>\n\n\n\n
I was concerned that mobile users might not know to click on the image to see a larger version or to see more images. I added a message to click the image to view the gallery. The message only appears when the browser is resized to a mobile view.<\/p>\n\n\n\n![\"Example](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/mobile.jpg\")
Below the image, it says “Click to view gallery”, which is on mobile only. On desktop, the images change opacity on hover to indicate they’re clickable.<\/figcaption><\/figure>\n\n\n\n9. About and Colophon<\/h5>\n\n\n\n
My research on portfolio websites show that About pages are so varied. As a result, I go back and forth on what this page should look like. I honestly really don\u2019t know what people want to see on About pages! <\/p>\n\n\n\n
Ironically, it was after I began looking for a dentist that gave me my inspiration. I saw how some of the dentists described themselves, and I thought it was a good approach.<\/p>\n\n\n\n
Here’s how the About page is outlined:<\/p>\n\n\n\n![\"Screenshot](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/about-v2-1.jpg\")
My newest About page<\/figcaption><\/figure>\n\n\n\nReturn to Full-Page Width<\/h6>\n\n\n\n
For both the Colophon and About, I returned to a full-page width. I think it looks so much better.<\/p>\n\n\n\n![\"Screenshots](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/width.jpg\")
Changes to the Colophon, from left to right.<\/figcaption><\/figure>\n\n\n\n
\n\n\n\nConclusion<\/h2>\n\n\n\n
Quite a lot of changes! All focusing on creating a unified look, changing language, and updating colors and aspect ratios. To recap the changes:<\/p>\n\n\n\n
- Main Image<\/strong>: Revised the header for each project by making sure each page has a main image (except About and Colophon)<\/li>
- Updated Projects<\/strong>: Removed Adorama project and updated SVGs, though I later changed my mind on the project<\/li>
- Personal Branding and Testimonials:<\/strong> Added concepts of personal branding and modified the testimonials used on the site<\/li>
- Language and Tone:<\/strong> Focused on language and tone to revised the wording on the home page, project descriptions, descriptions of myself<\/li>
- Colors:<\/strong> Updated the color palette to muted colors, after testing a blue I found on vitsoe.com<\/li>
- Aspect Ratios:<\/strong> Created a more unified look by selecting image ratios in 8×5 and 16×9<\/li>
- Mobile Enhancements:<\/strong> Added mobile enhancements for project images, with instructions to click to view<\/li>
- About\/Colophon Updates:<\/strong> Updated the bio on the About page and changed page width on the Colophon<\/li><\/ul>\n\n\n\n
\n\n\n\nAnd yet the portfolio has changed again! I’m glad I included on the Colophon that the website is always under construction, because that is so true! <\/p>\n\n\n\n
Some of those changes have already been explained, but the rest it will be in another update.<\/p>\n","protected":false},"excerpt":{"rendered":"
An overview of portfolio updates, from March 2021.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,3],"tags":[534,353],"_links":{"self":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/4621"}],"collection":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/comments?post=4621"}],"version-history":[{"count":18,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/4621\/revisions"}],"predecessor-version":[{"id":4847,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/posts\/4621\/revisions\/4847"}],"wp:attachment":[{"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/media?parent=4621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/categories?post=4621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alliwalk.com\/blog\/wp-json\/wp\/v2\/tags?post=4621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Side-by-side](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2021\/03\/2021-v4-1-1024x766.jpg\")