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: UX Camp 2017, New York City

On June 24th, I attended a one-day “unconference”, called UX Camp. I heard about this through Meetup/email. I’m not sure what I expected, but I did hope for more hands-on workshops.

Sessions Attended:

Dance as cultural exchange

Using Dance for Cultural Exchange: This was presented by Ana Milena Aguilar-Hauke. I thought it was really smart and innovative, but only 2 people showed up to learn about this which is a shame. We could use more cross-cultural exchange these days. Her idea came from her experience living in Germany and the United States from the perspective of someone of Colombian descent. Her idea was to use salsa, which is a fun, easy to learn dance, to might help people interact with each other.

You can read more about this project on her website.

Kanban discussion list

Independent UX (More of a pow-wow/thought exchange): Helpful, especially for people who are managing their own work as an independent or seeking to. We used voting and Kanban boards, which I hadn’t heard of before, to go through ideas. I got that recruiters really take away your ability to earn more money because they’re skimming off the top. And, I learned that other UX professionals are experiencing the same portfolio headaches that I am.

I’ve since become interested in learning more about Lean and Kanban, which I’ll talk about in an upcoming post.

Some of the work we were doing for the design sprint workshop.

Tips on Design Sprints: I kind of wish I’d skipped this because, apparently, a really great talk that confirmed many of my job hunting suspicions was going on that I missed and probably would have enjoyed. But on the other hand, it was a hands-on activity like I wanted and it gave me new ideas to think about.

Agile to Tri-Track: This was presented by Dave Malouf. I wanted to learn more about Agile. I figured “tri-track” was an improvement…? I am still not quite sure what this was about.

Systems Thinking: I went because I wanted to learn about systems thinking. It sounded like an interesting discussion. It wasn’t quite what I’d hoped, but maybe he will improve it later.

Portfolio Discussion: This was helpful and vindicated some of the concepts I’ve been thinking and writing about when it comes to what UX managers look for (or don’t look for) when reviewing portfolios. My strategy now is to include information about an unexpected challenge I experienced and what I learned on the job.

 


All Photos

Web/Portfolio Update – Part 2: Performance

Currently finished with the 90% of the HTML/CSS of my website. I found this great free photograph to use in the main image section of the site. (Looks so classy.) I need to post some of the portfolio image alternatives I came up, but decided not to use.

This post is all about site performance optimization, what I did and what I learned. (That big, fat, red F in my cover image is explained below!)

Getting Started
I wasn’t initially set on improving the performance of my site. (It’s only 1 page.) But, remembering all my lessons on Treehouse, I decided to minify some files anyway, like a pro. For CSS minification, here’s a nice simple site for that: cssminifier.com. This site also has a js minifier and image optimizers. In addition to working on my style.css file, I went through and deleted unnecessary classes for my font-awesome css file, and minified the CSS, since I only needed about 12 icons. (I’ve since added a few back.) I also minified the smoothscroll.js file, which gives my site that, you know, smooth scroll effect. It’s a pretty short file, but it doesn’t hurt.

Before I used cssminifier.com, I also took it through a clean CSS filter on http://www.website-performance.org/ to prettify* my style.CSS file before minifying it. While I was there, I also decided check out the site performance. Ouch! Some big issues, especially with compressing images, including my new classy photo. This is where I got started on improving site performance.

Optimizing Files
Two big problems were too many CSS calls and images that were not optimized. I realized that I needed to link to some CDNs to reduce CSS calls. Instead of including the jQuery.js, Bootstrap.js, and Bootstrap CSS files, I’m now linking to the the files via CDN. I tried using one of the above websites to optimize my images, and also convert some of them to PNGs, but the server couldn’t handle it. So I used good, old Photoshop.

“Gzip Compression”
I did not know what this term meant, but I got an F from a few site performance websites. GTMetrix explains that using a compressed, zip, file will save a lot of space. But it’s up to the browser to decide which file to use. GTMetrix and Website-Performance.org both suggested compressing my styles.ccs, bootstrap.css, and font-awesome.min.css files. Well, since I’m going to be using a CDN for the Bootstrap and jQuery files, I’m not too concerned about those. But I did continue as it advised for the relevant files.

Having done all this, I am happy my site loads fast, especially on mobile. And a learned a lot, not just from these websites, but also about the tools I used to complete them. For instance, Cyberduck, an FTP-transfer client doesn’t show .htaccess files, but Filezilla does.

screenshot of checklist of full site optimization recommendationsAnnoyances
The sites were a little pedantic about image compression, and they would complain about the need to compress images another 1-4% or so. Since I’m using a portfolio site, it’s not really that important to me to try to squeeze every last unnecessary pixel out of my images, especially since most of them aren’t visible when the page loads. The only one I might consider continue to optimize is the main hero image, because it’s the first one you see.

The optimization sites also pointed about how long it takes for an embedded Vimeo link to load. This is also not a concern for me, because the video is only visible in a pop-up. And the sites also dinged all my embedded CSS files and image files because they were not coming a CDN. I looked into the option of uploading them into a CDN, but abandoned that idea. (I think it might have required a payment, and per my previous entry, that was not going to work for me.)

Summary
For my next project, I’ll start with this site first, because it lists out everything that’s slowing down a site, such as a missing .htaccess file — or I may use it to improve the performance of my other project sites. The nice thing about the results it provides is that it’s very helpful for organizing tasks and working systematically through the performance optimization process.


* Yes, prettify is word!