March 2021 Portfolio Updates

An overview of portfolio updates, from March 2021.

Introduction

This post is a follow-up on recent changes to my UX portfolio. The changes are detailed below, but here is a quick outline:

  • Main images
  • Featured projects
  • Personal branding
  • Images
  • Colors
  • Language and tone
  • Mobile enhancements
  • About and Colophon pages

Before I get to these changes, here is a quick update from my last post.


Quick Follow-Up: About and Colophon

As my last post described, my UX Portfolio previously looked like this:

Side-by-side view of all project pages next to each other, showing an older view.
A look at my previous UX portfolio, with pages displayed side-by-side.

On 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.

Notice also that, like the About and Colophon pages, some projects do not have images.

Changes from About and Colophon, from skinny headline title and wide width, to heavier headline with narrow width.
Changes to the About and Colophon pages.

Version 4.2, March 2021 — Major changes

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.

Overview & Goal

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:

  • Inclusion of a main images for projects
  • Removing and rearranging projects
  • Include principles of personal branding
  • Selecting image ratios for project galleries
  • Updating the color palette
  • Updating the language and tone
  • Inclusion of mobile enhancements
  • Updates to the About and Colophon pages

Detailed Changes

1. Make sure all projects have a main image.

No More “Swiss Image

I 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 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.

I was sad to move away from the “Swiss poster” -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:

Old Lux-Retail image with Swiss poster style
Previously, project pages used a layout I called “Swiss Image”.
Side-by-side view of project images, showing the unified look of the projects
After: all projects now have images.
2. Removed Adorama project as a page.

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:

  • The portfolio page was somewhat short
  • A comprehensive explanation was available, but required linking to a blog post

While the blog post was comprehensive, I felt the project summary on the site wasn’t 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.

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.

But there’s an update: 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!

3. Scrapped a 7th Project

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:

  • I wasn’t sure it was a strong enough page
  • The page was too different compared to the others
  • Trade-off between showing more work vs showing too much was imbalanced

It’s possible I may reconsider including this page at a later time, if another project gets eliminated.

Project image for mapping page
7th project I didn’t end up using.

“Catalog” SVG Images

In 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.

I ended up adding two new SVGs. Although, I may need to revisit this and look at which SVGs I want to include.

Changes to catalog section at the bottom of the homepage.
Over time, I changed the list of projects/companies displayed at the bottom of the index page.
4. Applying Sales Copy and Personal Branding: Index Page, Testimonials

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.

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.

Example of a testimonial from a project page. In order to read this, you had to click on a project.
Example of a testimonial from a project page. In order to read this, you had to click on a project.

The 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.

Left image shows no testimonials. Middle image includes 2 testimonials. Right image shows a group of testimonials, with a link to LinkedIn.
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.

I 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.

The testimonials also provide a sales purpose: as a webinar leader said, testimonials are a way to “borrow” authenticity.

5. Language and Tone

I made a few changes to language and tone with the following activities:

  • Editing corrections by reading out loud
  • Using an active voice
  • Updating project descriptions
  • Using original descriptions in project titles and subtitles
  • Updating descriptions on the homepage

Read each project out loud

Tying 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’t find too many typos, but I often repeated myself from section to section. Reading out loud helped me find and fix those issues.


Use an Active Voice

I 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:

  • 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.

Maybe this could be better, but overall it’s an improvement.


Updated Project Background/Overview

Under 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.

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.

Updated background section is shorter, eliminates the image. Goes to 3 paragraphs.
Updated background section is shorter, eliminates the image. Goes to 3 paragraphs.

Update Projects with Original Descriptions

I decided maybe I was creating more work for myself by trying to come up with my own interpretation of what a project was about.

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 — sometimes taking descriptions from Wikipedia — for company descriptions. Here’s an example:

Showing how I changed the title and subtitle on project pages; typically going from a longer description to shorter.
The second subtitle comes directly from the job post.
Background section showing a change to the Agency Profile with image to description with a short paragraph.
The description on the right uses language from the hiring manager, describing the company.

Home Page Project Descriptions

I also considered how I described each project on the home page. It turns out I was describing projects in 2 different ways. For instance:

  • By project activity: “Redesign for…”
  • By project outcome: “Design Tools…”

I decided to update the descriptions. Now the titles describe the project outcome and the description explains the activity/detail.

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.

Showing changes to project descriptions on the homepage
On the home page, I modified language and tone for each project so that they were all more consistent in language and style.
6. Color Changes

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.

The website is quite organized. It follows a very clear 3-column layout. And it only has 4 colors: Black, White, Grey, Blue.

vitsoe.com

I liked the blue color, which they use for links. After trying it out a bit, I decided to use it for my website — also for links.

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!

Screenshot of a collection of screenshots, of coordinating colors
Exploring colors, using the blue link color as a starting point.

Historic Color Reference

I 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. 

Screenshot of my old website and colors.
The image on left is from my 2017 portfolio. Both of these colors have the same hue, but different saturation and brightness.

After 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.

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.

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.

Overview of updated color palette, based on the blue.
New Palette. These aren’t all the colors, but many of them.
7. Image Ratios

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.

This was something I had been thinking about for a while, but I hadn’t quite gotten around to it yet. The Vitsoe.com website, for example, uses 2 sizes: 1×1 and 16×9. 

Image masks to test out image ratios.
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.

Aspect 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. 

8. Mobile only enhancement on project galleries. 

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.

Example of click to view image, on mobile vs desktop
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.
9. About and Colophon

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’t know what people want to see on About pages!

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.

Here’s how the About page is outlined:

Screenshot of my About page showing the different sections
My newest About page
Return to Full-Page Width

For both the Colophon and About, I returned to a full-page width. I think it looks so much better.

Screenshots of changes to the colophon page, from original to narrow width, to wide width again.
Changes to the Colophon, from left to right.

Conclusion

Quite a lot of changes! All focusing on creating a unified look, changing language, and updating colors and aspect ratios. To recap the changes:

  • Main Image: Revised the header for each project by making sure each page has a main image (except About and Colophon)
  • Updated Projects: Removed Adorama project and updated SVGs, though I later changed my mind on the project
  • Personal Branding and Testimonials: Added concepts of personal branding and modified the testimonials used on the site
  • Language and Tone: Focused on language and tone to revised the wording on the home page, project descriptions, descriptions of myself
  • Colors: Updated the color palette to muted colors, after testing a blue I found on vitsoe.com
  • Aspect Ratios: Created a more unified look by selecting image ratios in 8×5 and 16×9
  • Mobile Enhancements: Added mobile enhancements for project images, with instructions to click to view
  • About/Colophon Updates: Updated the bio on the About page and changed page width on the Colophon

And 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!

Some of those changes have already been explained, but the rest it will be in another update.

February 2021 Portfolio Updates

Updates to my UX portfolio site, what I call “Version 4”.

Screenshots of portfolio site, on a black background.
Portfolio in 2020, using “Swiss” header. At the end of 2020, my portfolio looked like this.

To summarize:

  • Home page with 4 stacked rows of projects, then a grouping of companies and brands at the bottom.
  • Each project had a large image and a “Swiss” style for the title.
  • Three projects at the bottom linked to other projects, but not all of them had images.
  • I included testimonials from LinkedIn, which are the tan blocks of text.
  • And, as always, I was not sure what to do with the About page….

Feedback Generates Ideas…

I can’t remember who reached out to whom, but a friend and I had a video chat about her desire to revise her website. During the chat, I gave her a little walkthrough of what I did to update my own website, including the 2019 Portfolio Analysis and the research I conducted to complete it. She also gave me some feedback as she clicked through my site. So, I knew I would make some changes, but I also got a few new ideas.

Not only did I make updates to my website, she also gave me a suggestion to create a complementary Google Slides presentation. I’ve definitely started that, but of course I got side-tracked into website updates!


Major Changes for 2021

One change I was aiming for was to create a more unified look across all project pages, regardless of whether they had an image or not. For this, I used the same headline style, with a heavy top border above the title. With or without a main image, the headline looks the same.

I also made an update to the main index page, which is all the way on the left in the pale green color.

Mockups of portfolio updates, on a dark background
“Version 4” updates to my portfolio. Two right-most pages have similar treatment to the title, but one has an image and one doesn’t.

There were actually so many changes, I wrote a little note to myself in my own Sketch file! So here is what I wrote to myself:


Version 4, Feb 2021 — Major changes

The goal of these changes was to unify the look of all projects, even those without an image. And to include projects that were on the website in 2019, to provide more balance and make sure the projects are not too research heavy.

Major Changes

  • Changes layout of index page to 2 rows of 3 project + 4 projects. It is a big departure!
  • Removes the “swiss poster” look of project pages. All pages now have a top border, heading, sub heading — including About and Colophon.
  • Addition of Next project section at bottom of every project page, with list of next 4 projects including project and description. Single link to next project is gone.
  • About and Colophon are using an elegant thin weight for titles; it does not read well for longer titles
Updated About and Colophon, with thin font weight for title text.

Other Important Changes

  • Moves Heineken project out of project list
  • Moves Adorama to 2nd tier project (no 7)
  • Changes “Small Bites” to “Catalog”
  • Removes all [project] links to blog, except for Adorama Deep Dive
  • Removing Top “hat” icon from bottom pages, and replacing with character entity arrow to reduce server calls. Only Adorama project calls the Emoji CSS.
  • Removed unused color variables from CSS file, and not really use most of the ‘small-bites’ class

Minor Changes

  • Punched up the contrast by using dark-gray font on all pages, except for subheadlines, “eyebrow” text (mostly all caps/ tracked) using gray
  • Changed the display of company/client profile and role, below header
  • Increased font size of most text on mobile, esp header sizes

Sadly, my updates meant abandoning my beloved Swiss style (which is a template within the CSS framework). But instead, I was able to sort of borrow from other inspirational images.

Examples of Swiss style posters/type design.
Inspirational images from my Sketch file.

Conclusion

Maybe some of these changes don’t seem like much but it was a drastically different site with very different projects.

But it didn’t end there! The next post will have the changes I made in March 2021, for even bigger changes.

Solving Design Problems like a Mathematician

While reading a forum discussion on FreeCodeCamp, I came across a reference to George Pólya’s book, “How to Solve a Problem”. In this post, I review Pólya’s problem solving strategy.

In a recent FreeCodeCamp forum, someone asked a question about journaling:

Hi coders,
While looking for the source for my project, I saw that some programmers or developers wrote a kind of diary to keep track of the code. I think it’s nice, but I was wondering exactly how you can structure a diary and if any of you use this to write code. Question here.

Good question. I’ve seen other people use diaries or online journals, or those things people use…writing logs or whatever. 🙂

Anyway, the only reply includes a link about using a “logbook”. On the link page, the author references George Pólya and his book How to Solve It. I had never heard of this person or his book, so I did a little research.

George Pólya, (1887 – 1985)

George Pólya was a Hungarian-born mathematician who was known for his mathematics work, as well as his work in heuristics. Heuristics is “any approach to problem solving or self-discovery that employs a practical method”.

“Examples that employ heuristics include using a rule of thumb, an educated guess, an intuitive judgment, a guesstimate, profiling, or common sense.”

He wrote a book about solving problems using common sense principles.

1st edition cover of “How to Solve It”, published in 1945, by George Pólya, a Hungarian mathematician.

The George Pólya Method of Solving Problems

The Wikipedia page shows that Pólya lays out some pretty good heuristics for solving problems. Although he intended for these strategies to be used for solving math problems, I think they could be used to provide a structured method for solving almost any difficult problem.

The Pólya problem solving method involves 4 principles:

  1. First, you have to understand the problem.
  2. After understanding, make a plan.
  3. Carry out the plan.
  4. Look back on your work. How could it be better?

So how does it work?

Principle 1: Understand the Problem

Pólya based the first principle, Understand the Problem, on the idea that math students struggled to solve problems due to a lack of understanding the problem in full or in part. His technique involved coaching teachers to prompt students with the following questions:

  • What are you asked to find or show?
  • Can you restate the problem in your own words?
  • Can you think of a picture or a diagram that might help you understand the problem?
  • Is there enough information to enable you to find a solution?
  • Do you understand all the words used in stating the problem?
  • Do you need to ask a question to get the answer?

Essentially one should not move past principle one until a constructive answer can be given. It’s not clear from the Wikipedia entry if a constructive answer is required for each question or the entire problem.

 Principle 2: Make a Plan

Basically he felt that a person gets better at selecting a good plan/strategy the more times they solve problems. Here’s a big list of strategies:

  • Guess and check
  • Make an orderly list
  • Eliminate possibilities
  • Use symmetry
  • Consider special cases
  • Use direct reasoning
  • Solve an equation
  • Look for a pattern
  • Draw a picture
  • Solve a simpler problem
  • Use a model
  • Work backward
  • Use a formula
  • Be creative – (“[Have] patience to wait until the bright idea appears”)
  • Applying these rules to devise a plan takes your own skill and judgement – (“Always use your own brain first”)

Principle 3: Carry out the plan

Simple enough, but the main problem people have with this step is giving up too soon. For that, the Wikipedia entry says:

“In general, all you need is care and patience, given that you have the necessary skills. Persist with the plan that you have chosen. If it continues not to work, discard it and choose another.”

Principle 4: Review, Reflect and Extrapolate

Take a look at what you’ve done, and evaluate how well it worked (or didn’t), and see how you can use what you’ve discovered for future problems.


Finding the book:

If you want to find this book, I recommend trying your library. I found it by searching for "how to solve it book pdf" (Google suggested the "pdf") and I found a copy.

Update:

An earlier version of this post included an account of how I applied Polya’s technique to my portfolio changes. A follow-up post will focus on that account.

Portfolio and Website Updates: Incorporating Feedback

An update to a previous post on the feedback I received from friends and acquaintances on my portfolio, and ongoing work.

I’ve been making updates to my portfolio and website, and I have even more updates to report. In this post, I want to go a little deeper on some of the feedback I received from friends and acquaintances, and how that has influenced some of my updates.

I’ll continue to make updates, of course. These are just changes I’ve made so far.

My Initial Reaction

I asked most people to review my portfolio, which is on CargoCollective. When I got the feedback, my emotions ranged between feeling overwhelmed and disappointed.

I was overwhelmed with what I had received, which was not all negative, because I felt that I’d wasted so many first impressions.

For months, I’ve been sending out links to my portfolio and not getting anywhere with it. Despite my hard work with updating my resume, including the time I spent gathering tips, I felt I had ultimately been short-changing myself by sending out a lackluster portfolio. It felt like a huge waste of time. I even felt like a fraud, giving out tips at the NYC UX Camp 2019.

It was disappointing that other people weren’t seeing my vision or hadn’t understood the history how this site came to be. But, you know, people only reviewed what I asked them to review. They weren’t providing holistic direction on how to reframe my image as a designer. And they weren’t evaluating anything a hiring manager wouldn’t evaluate, either. In other words, it wasn’t personal.

In any case, after a few days (or hours), I started thinking about how I could make changes. My personal website, alliwalk.com, actually went through a whirlwind of changes, large and small. And then I started focusing on my portfolio.

So let’s go through some of the top feedback and how I addressed it.

The Feedback: 1-2-3

The 3 biggest areas of feedback centered on:

  • Domain: Using a real domain name, instead of a third party site.
  • List of projects: Feeling overwhelmed by the number of projects; not sure where to start; emphasizing the projects.
  • About: Adding a tagline or a paragraph to the home page to give a sense of who I am.

Now I’ll go through these top 3 pieces of feedback and give my thoughts, and what I did (or didn’t) do to address them.

1.Personal Domain

Jared Spool gave a talk at BostonCHI in Jan 2019, about the difficulty of hiring designers. In the talk, he called out employers who discriminate against candidates who use third-party sites like Wix or other CMS tools.

Specifically, in his example, he recounts an encounter with a design leader who felt that “good designers” should be able to code and would have coded their own websites. The video is linked to this point in the presentation.

If you’re reading this on my blog, it’s clear that I do have my own domain. I also have own website and I did code it myself.

The reasons I coded my own site were not to prove myself as a “good” designer. They were due to: a) cost, and; b) exploration/personal expression. Let’s review:

A. Cost: It’s cheaper to code your own website on your own domain than to pay a 3rd-party site to do it. A site that costs $12/mo is $112/year, which is over $500 after 5 years, assuming you keep it running all that time. Many sites cost more than $12/month. About five years ago, when I first created my site in Bootstrap, I needed to find areas to cut back on my expenses. This was an easy choice to make and I’ve stuck with it.

B. Exploration: As mentioned above, about five years ago, I started seriously learning more about front-end development. I used building my portfolio and a few side projects as opportunities to learn. I like designing my own website. So why am I also using Cargo? Because updating a domain can be a small project but updating a CMS takes a few minutes.

I could use my own domain to host an external website, but it feels like giving up control of my own website. And, I’m not sure that the external template available is what I want to use on my own site. Plus I get control over my own analytics.

Ultimately, I won’t be moving the Cargo portfolio to my domain. But, I did update my website to more prominently point to the portfolio.

2. List of Projects

I admit: I do have a lot of projects. I’ve heard that using 3-5 projects is a must. I don’t know if that’s a max of 5, but I’d definitely heard a minimum of 3.

Even the NN/g article that prompted this redo suggests 3-5 projects:

Step 2: Choose 3–5 Projects as Detailed Case Studies

But I want to share an image from the NN/g article on UX portfolios. It depicts a gallery of projects.

Web PortfolioHow many projects do you see? I see 8. Clearly the maximum number of projects is not hard-limited to 3-5.

At the moment, I may have too many at 11. However, the first 3 projects are the same as from my website. And on my website, I used analytics to narrow the list from 6-7, to 3 based on visitor traffic.

Most people view a website in an F shape. Using that logic, my most popular projects are placed first. This doesn’t mean I shouldn’t continue trying to narrow the list. But there’s clearly some discrepancy what’s too many, and my choice of projects and the order they’re presented have some thought behind them.

Providing Signposts with the Writing

To help address the feedback that people might be feeling lost, within each project page, I have been working on improving the writing. As mentioned in my last post, I’m updating the writing make it easier for people to scan.

I’ve made changes such as:

  • Incorporated images at the top of projects, when appropriate. (Suggested by feedback.)
  • Organized the writing a bit better. The format is now: a) description; b) images.
  • Included additional promo information, like videos, for people to find more information if wanted.
  • Used more headings, lists, and bold text.

My hope is that even if people feel like they don’t know where to start, once they do, they will feel more directed.

3. About

I used to have an About Me page on my website, alliwalk.com. I removed it because analytics showed that very few people ever visited the page.

But, two respondents mentioned making About info more prominent, like right on the homepage. They asked about adding a heading sub-title or adding a paragraph above the project.

Unfortunately, those are not options I can pursue due to limitations of the CMS template. There are other changes I can make:

A. Using a Landing Page: The template does allow me to select any page as the landing page, even if that page is not public. (Public pages do not show in the nav in the template I’m using.) So I am working on creating a landing/about page, but it’s not something I can easily test without it immediately going live. So, I’m being very cautious.

B. Improving “About”: While working on the writing and updating images, I have updated how I described myself on both my website and my portfolio. I used a combination of my resume and cover letter. I also provided answers to a few questions I tend to get in interviews, like:

  • Are you more of an information architect or visual designer?
  • Do you typically work full-time or freelance?

I just wove that information into the writing itself, and then I put the same information on both my website and my portfolio.


Still more to go. I haven’t made much progress on my website regarding the responsive images, semantic HTML, or migrating to Bootstrap 4.

And, coincidentally, I recently participated in a virtual session with Google, on their design review process. I learned a few things…which is for another post.

Portfolio and Website Updates

After reading a Nielsen Norman Group article on UX Portfolios, I recently began a process of updating my own portfolio and website. Here is a recap and plans for the future.

I have begun a process of updates for my website at alliwalk.com and an additional portfolio at cargocollective.com/alliwalk.

Here are changes in mind for the portfolio and the website.


Portfolio Updates

Changes for my portfolio began after I read a Nielsen Norman Group article on UX Portfolios. The article is called 5-Steps to Creating a UX-Design Portfolio. The 5 steps are:

  1. Take Inventory of All Your Projects
  2. Choose 3–5 Projects as Detailed Case Studies
  3. Choose Your Desired Format
  4. Create Your Portfolio
  5. Get Feedback and Iterate

Implementing the Tips & Other Updates

Take Inventory

Given my work on improving my resume, I’ve already taken some inventory of what I feel I’m good at and what differentiates me from other designers.

3-5 Projects

But I do have a lot of projects. Far more than 3-5 as recommended. So that’s been difficult to evaluate objectively.

Writing

I also took a second look at the writing and how I described my projects. And I’ve decided to focus on improving the content so it’s ideal for the web.

  • Hemingway App helped to simply sentences and eliminate long words
  • Lists help get points across in an easier to scan format.

A short course I’ve been referencing is available on Lynda.

Styles

Styles aren’t part of the list, but I made a few changes:

  • I used Coolors to use find colors that complement each other
  • Use HSL instead of HEX values

Feedback

I’ve asked a friend, a new contact, and an acquaintance for feedback on my portfolio. Not everyone has responded with their take, but I’ve already begun making edits.

Upcoming

I plan to continue making more changes and improvements, to the order of each project and the writing.


Also, Website Updates

Some big changes here….

I recently made some pretty drastic updates to my website.

Style, Images, Content

  • Using Coolors to get a complementary color palette
  • Adding SVGs from UnDraw.co
  • Updating the content: Removed CSS projects; Added an “About” section

That’s it for now, but there are more changes I still want to make.

More Changes I Want to Make

Remove IDs

3-4 years ago when I first made this site, I didn’t know the difference between IDs and Classes. Now I do and I want to update the HTML to use the correct tags.

Add Responsive Images

The technique now is to use responsive images, using srcset and sizes. A how-to is available on MDN.

Update to Bootstrap 4

Although I think I’m OK with Bootstrap 3, it would be a good idea to update to the newest version. Bootstrap 4 uses Flex by default and possibly Grid.

Optimize the SVGS for Animation

In order to add animations to SVGs, the different paths and shapes need to be given names. Moving the styles out of the code means colors and other styles can be animated.

Animate the SVGs

After optimizing the SVGs, I can add some animations.

Create a CSS Experiments page

The site used to have a section for CSS animations. But I took that out to focus the page on just one message. I plan to put everything I removed onto a new page/section.

Domain Email

I’ve got a domain but I’m not using the email for it. This isn’t really a website thing, just a professional thing.

Happy to report, this is done!


I plan to write another post about some of the feedback and ongoing changes.

UX Camp 2019

Recap of UX Camp 2019.

On Saturday June 29, 2019, I found myself again at UX Camp. UX Camp, which I also attended and wrote about 2 years ago, is an “unconference” which means that there is not set schedule of topics or speakers. Instead, the participants come up with the schedule by proposing talks they want to talk about. (Then the organizers choose the time and which room.) This year’s UX Camp was again held at General Assembly.

As this was my second time going, I tried to be a little more social and chit-chat with other participants. Unfortunately, Jared Spool and Dave Malouf weren’t in attendance. Jared Spool is a great speaker — here’s a video I watched recently. However, I decided to not only get over my fears of small talk, but also get over my fear of presenting my ideas in public. So I gave a presentation, based on one of my favorite prior blog posts of this year, “My Favorite Pro-Tips from NYPL Experts on Crafting a Resume”!

Ok, only a few people attended, but presenting was a very satisfying experience.

Most of the people who signed up to lead sessions did not have slides. I did because I based them on my blog post, so it was relatively easy to put the deck together because my thoughts were already written and organized.


Overview

Other than my own presentation, here are a few sessions I attended:

Interviewing

One of the participants wanted to discuss interviewing, because she found herself in a new situation and was curious about other people’s experiences. I used the opportunity to make a comment on my observations about what UX hiring managers are looking for, especially regarding portfolios, according to the articles I’ve researched online.

Mentorship

This was kind of a workshop about mentorship. We spent a bit of time discussing our experiences with mentorship. After getting through everyone, the speaker led us through an exercise where we discussed what a mentor is and is not.

First, a mentor is not:

  • a parent
  • going to punish you
  • responsible for your career
  • necessarily your boss, but could be

A mentor is:

  • Someone who has achieved what you want to achieve. Someone said, “They only need to be one step ahead of you.”
  • Has current knowledge about the job, current events, etc
  • A champion for your success

We then broke out in small groups to talk about: How to create boundaries, Framing your conversation (with your mentor); and Getting from having no mentor to having a mentor. Afterwards, we shared our discussions.
Tips on Working with a Mentor

  • Respect the time of your mentor. Pretend your mentor has 100 mentees
  • Be responsive and be clear about what you want.
  • Fully implement their advice and then follow up with them with the results
  • Boosters; some people really like to help others
  • Be willing to provide value to the mentor

A book mentioned was the 2-Hour Job Search by Steve Dalton.

Visual Storytelling

Another talk I went to was by an architect who was a very talented illustrator and hoping to break into product design. His talk was on Visual Storytelling.

He showed us some examples of his work and we discussed the story he was trying to tell with his images. He also discussed his process a little.

Some tips I got from him about visual storytelling:
– Pick key moments to visualize
– Show only 1 (one) idea per image
– Include enough relevant information, but don’t go overboard in detail

I wanted to ask him questions about design and improving in visual design, but when I tried to ask my questions, I found that my anxieties about improving in design only aided in making my words come out jumbled. He tried to answer anyway and suggested that just knowing what’s good design and what’s not good is OK.

I like his tips — very clear and straightforward.

Cultural Relevancy and Experience Design

The very last talk I went to was about Cultural Relevancy and Experience Design. It was a very interesting topic. The speaker shared with us situations in which technology (sensors, photography) failed her in key moments due to the technology not being tested on a diverse audience. It’s true that some sensors are poorly calibrated to pick up darker skin tones. For instance, “self-driving vehicles may have a harder time detecting people with dark skin”. It’s probably not because the technology cannot do it, but because it’s not being testing for a variety of skin tones. https://www.businessinsider.com/self-driving-cars-worse-at-detecting-dark-skin-study-says-2019-3

I also got some recommendations for books:
– Design in The Era of the Algorithm
– Politics of Design
– Mismatched

Conclusion

Although I missed seeing some well-known names at the conference, I still got something out of it — namely public speaking experience.