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.

Event: The Art of VR at Sotheby’s

On June 23rd, I attended The Art of VR event, held at Sotheby’s. It was billed as “A 2 day curated VR exhibition featuring: Studio premieres, theatrical & brand case studies, studio exhibitions, hands-on demonstrations.” I signed up through Eventbrite.

Virtual reality has certainly advanced from Second Life. Now there are headsets and immersive devices. The tickets were somewhat expensive but I went to the event, anyway, because I didn’t have that much experience with virtual reality; I thought it would be a good way to jump in. I spent time trying out VR at the different booths, then spent time listening to the talks, which were pretty good.

VR Booths and Hands-On Demonstrations

Many works were commercial, intended to demonstrate the graphics capabilities of a type of computer, to promote a film, or for some other commercial purpose. In my opinion, VR for entertainment purposes automatically comes across as a bit insincere, unless the provenance of the work — where it comes from, how it was produced, who produced it and why — is known because it can help the audience get over their skepticism.


Photos from the Galleries

There were also a number of artworks, and so far I think it works best for art experiences. The mechanics of the experience are incredibly intimate, yet it remains very public – which describes how art is experienced, as well. But, trying VR can be an intimidating activity. You have to get over feeling embarrassed for looking stupid with these giant geeky goggles on your face while other people are watching. And, as a panelist later mentioned, VR can be clunky and clumsy, even in an artistic setting.

Despite my initial embarrassment, I participated as much as I could. I enjoyed the experience and learning about VR.


Discussion Panels

I’ll admit that I initially wasn’t compelled to visit the floor where the discussion panels were being held. But once, I did I was very impressed. The president of the VR Society led at least 2 panels I listened to; he’s a very good moderator. The two discussions that impressed me most were a discussion on medical uses of VR and a discussion about a cinematic experience, called “Lincoln in the Bardo”.

Photos from the panel discussions

Discussion: Medical Uses of VR

On the far right (partially off-camera), is the surgeon moderating the discussion and presenting his use of VR in surgery. The man to the right of center is the psychiatrist.

One of the discussion panels was about medical uses of VR. Overall, this was the most impressive topic discussed or demonstrated for me.

  • Surgery: First, a neurosurgeon described how he used virtual reality to help him remove difficult tumors in the middle of a patient’s head. He showed how, due to the tumor’s location, historically the surgery left people disfigured and possibly blind or deaf. (The images were not attractive.) With VR, he showed, he’s able to more accurately and precisely navigate around major arteries and nerves, to minimize the intrusiveness of the surgery using orthoscopic surgical tools to minimize long-term damage and scarring.
  • Mental Health: Next, a psychiatrist described how he used VR to simulate settings for PTSD patients, to help them overcome their disorder in a controlled setting. For example, he can simulate Iraq for war veterans. He also showed how VR can be used to help patients manage pain, specifically burn patients. Pain, he explained, requires attention. If you can distract patients from their pain, they will experience pain relief. His example was showing a burn patient experiencing an ice world.
  • Medical Education: Finally, a medical artist showed how he used VR drawing tools to augment his work. I don’t entirely remember everything about his discussion, but his work sounded very interesting. And it seems like a type of art that is completely overlooked.

Anyway, the medical talk was very innovative and I’m glad to see this new technology being used in such important ways.


Discussion: Lincoln In the Bardo

“Lincoln in the Bardo”. The director is on the far left. The NYT VR director is 2nd from left. The VR Society president is on the far right.
Another impressive talk was a discussion about Lincoln in the Bardo, VR experience. This experience was a collaboration with the NY Times. It sounds like it was a pretty intensive project, so although I didn’t see it or write about it that much, don’t underestimate it, especially if you’re into cinematic VR experiences.
Lincoln in the Bardo

In this immersive narrative short, President Lincoln pays a nighttime visit to the haunted cemetery in which his beloved son has just been laid to rest. Based on “Lincoln in the Bardo,” the new novel by George Saunders.

You can possibly view it in 360-video on nytimes.com if your browser supports 360-video. I also found a link on YouTube if it doesn’t. It’s produced for a VR headset, so it won’t be the same if you don’t have a headset (I don’t).


Sotheby’s Art Gallery: BUNKER

Somewhat related to the VR event, Sotheby’s also had a pop-up gallery, called BUNKER, “which since 2014 has featured artists who collaborate with technology to create code-driven sculpture, augmented reality and virtual installation”. I took some time to check it out. There weren’t that many projects, but here are few projects I especially liked.

One that was really clever used the cassette frames and an audio output. Since it was using headphones, a video would have only caught half of it. So, I didn’t capture it at all.

The installation will be at Sotheby’s until July 20, 2017.

Kihachiro Kawamoto: Japanese Animator

I recently watched The Exquisite Short Films of Kihachiro Kawamoto. I had never heard of this animator and I did not know what type of animation I was going to get. But, being a fan of animation, I looked forward to watching the DVD.

After watching a few, I did a little research. It turns out that Kawamoto was a well-known animator in Japan and internationally. One of his signature animation styles is stop-motion animation, especially his use of puppets. As Wikipedia points out, Kawamoto was well known for his puppet making skills and design.

The Films

I wanted to share these films as another example of storytelling. Japan has so many traditional methods of storytelling, which these films are a part of. As far as World and Character go, many Japanese stories are set in the samurai/Edo period. Most of the films below are the same. I suppose that frees up the storyteller to focus on the subtleties of how the story is told, rather than convincing the audience that the world and characters are believable. For instance, in Dojoji, there’s a scene where the woman chases after the priest. I love that Kawamoto takes the time to animate her breathing.

All the Kawamoto films were good, but there were a few that stood out to me. Here they are below:

Dojoji

19 minutes

Dojoji is a well-known Japanese play and one of the few that involves a large prop. The play tells the story of the installation of a new bell in Dojo-ji Temple. After the monks have been hypnotized by a mysterious dancer, the abbot tells the story of what happened to the first bell. The story is a woman falls in love with a priest who stays in her father’s inn every year. When the woman admits her love, the priest rejected her. She pursues him anyway, across a river to Dojoji Temple. In her passion, she transforms into a demon that kills him and destroys the bell. Kawamoto’s version of Dojoji is the story of the woman and the traveling priest. It is very tragic.

Going into the story of Dojoji more, I’d heard of this story after watching a Japanology episode on Kabuki and Noh. Dojoji was one of the examples of Kabuki, which is more elaborate than Noh and features a female dancer.

I was very impressed with the beautiful watercolor backgrounds serving as the backdrop for Dojoji and House of Flame (below). The sets are also well done.

The Demon (or Oni)

7:30 minutes

The Demon is also based on an old story, but I did not come across any versions of it as a play. The story is that an old woman, who has had a hard life, now lives as an invalid with her 2 sons. One day they go out to hunt and come home to a shocking discovery.

The postscript of the story is: “It is said that parents in their old age become demons who will consume their children.” Maybe this is the origin of the practice explored in Ballad of Narayama?

House of Flame

19 minutes

House of Flame is another stop-motion puppet animation that caught my interest. This one animates a horse, very realistically. I was quite impressed. This is also the only story with a narrator for the puppets. The story is about a woman who cannot decide between two suitors and lives in guilt forever more.

As I mentioned above, this one is another example of beautiful backdrops and sets.

A Poet’s Life

19 min

I chose this story for the interesting story about a worker who is fighting for worker’s rights after losing his job. The details of this story are too unusual to give away, but it is a very unique story.

This animation is a drawn style, though it still could be stop motion using paper cutouts. It reminded me more of The Snowman, by Diane Jackson, because of the way the pencil markings jump around frame by frame.