Why My Website Sucks (Alot)

Simply put, my website sucks because I'm not done learning- and I never will be. But that's ok, reflecting on my many failures encourages me. On an annual basis, I commit a month of time to revisit my image, brand and website fueled by snacks and midnight espresso. You can consider this as a living testament to my growth.

My Past Portfolio Reviews

Unlike the past two years of this series, I didn’t sit down in front of my computer to muscle an update in one go. Instead, it’s been an iterative process.

2018 in Review

I am a UX Designer. I am not a graphic designer. I am not developer. Can I do work in both? Yes, but that’s not what I want to communicate.

2017 in Review

The doubt kicked in. Maybe my website really is bad. No, sweet and innocent younger me, it sucked and it always will.

2016 in Review

Change Log Since 2017

Added breadcrumbs to sub-article pages

These pages failed the Krug's trunk test pretty badly, so this is a step in the right direction. I'll roll this out to the Perfect Brew pages soon too.

Updated footers to be more actionable

Realized that my bounce rates were high, so this is an effort to encourage more exploration. I added a bio section to encourage more people to contact me. Currently only rolled out to featured articles.

Set maximum width for featured article

I noticed on larger screens my featured article went way too wide. I've set the maximum width to 1800px to correct that.

View desktop update

Capitalized navigation

Should have been obvious, but all lower case slows reading and looks ugly. My goal is functionality over aesthetics, so I need to stay consistent with my values.

Updated logo animation

To be consistent with my updated logo, I designed a new animation for my contact page. I used principle to create a gif to replace my prior svg anime.js animation.

View desktop update

Hyperlinks turn red on hover

To be consistent with my navigation and visual theme, I've updated all my hyperlinks to turn red on hover on desktop. I'm hoping it will make for a delightful interaction.

Made visually consistent articles

There were several different UI elements that were accomplishing the same task of displaying articles. I settled on one, and eliminated all deltas to improve habituation.

Added a featured item

I added a new three-tier hierarchy to my portfolio. It's now comprised of a featured item, three cards and small articles. This will hopefully better nudge you to my better, more recent work!

View desktop update

Created responsive navigation

I added more breakpoints in my navigation to make it more responsive. So much more space is saved this way and it's delightful watching it adjust!

Deleted present reads

I removed present reads from my reading list. I've been zooming through books so quickly this year it's been impossible to keep this up to date without going insane. By removing it I'm saving my own sanity and valuable space on the page.

Revised content for mobile

I added viewports in my navigation to remove the logo on resizing to save space. I also removed and reprioritized information with mobile-first design in mind. For example, removing this giant picture of me gives so much more content it's ridiculous.

Justifed article content to the left

With my navigation update, I had to commit to left-aligning content. It's more legible now that the user's eyes don't have to dart around. I also increased the font size of article titles to give emphasis to the summaries.

Updated global nav

With my new logo, I was able to finally update my navigation. The nav is now one line which saves valuable space. I've worded "work" as "Josh's Portfolio" for clarity. I've also added blue underlines to be consistent with my design choice for hyperlinks.

Rebranded my logo

My old logo looked so dated, and was way too distracting on the page. My 2019 logo emphasizes my old logo's themes more clearly while taking away the noise. If you're curious about the thought behind it, talk to me about it!

Increased font size to 1.1em

Legibility is important. My website is still far from accessible, but this is one step in the right direction. I also worked to abbreviate some content. Next up will be ensuring all images have an alt tag.

Changed "read more" buttons to secondary buttons

There should only be one call to action/primary button on the page. Having >35 wasn't a good look, and was incredibly distracting from the content. I wanted to also give more priority to the recommend button.

Added verbs to titles

Content is king, but I still use abbreviations, shortcuts and other instances of brain-dead wording throughout this website. I tried to add verbs to the cards throughout this page to make everything more understandable. I still have alot more to correct though fml.

Fixed usage of links and buttons

I wanted to stay consistent with how I use links and buttons. Links redirect, so a buy link shouldn't be presented like the "Read More" button which calls a function. I also used an unordered list to separate the buttons from the links in the footer of every card.

Removed all target blanks

Nuked all target blanks (hopefully) from this website. Opening in a new tab takes control away from the user and violates all sorts of inclusive design and HCI guidelines. This was an awful assumption I made when I originally created this website.

Reduced column width

Reduced bootstrap column width from 8 to 6 to improve legibility on desktop. I'm going to try and keep all of my text columns at a max of 6- anything more can strain the eyes.

Removed "scroll to top" button

I deleted the top button from all pages that had clickable items (I probably missed a couple here and there, but the important pages are covered). This really shouldn't have been here in the first place as it's distracting and not a call to action.

Updated global nav

Thank god I updated this finally. I changed the hover state to be underlined instead of crossed through, changed the selected state to be overlined and also made it sticky. I've also made the nav (almost) global, so you can jump to my contact page (hit me up) or about page easily from wherever you are. The goal is function over form, this is another good step in that direction.

Removed table format

I don't know why I even bothered to use tables for image and text based content in the first place. The flexible columns just weren't working from a readability perspective in the prior version. Switching from a table format to cards thins content to columns on desktop and makes mobile finally usable.

Added "read less"

This was a really awful interaction I left hanging for the longest time. Changed the "read more" button to "read less" on click. I also added carrots to indicate expand and collapse. This would be much better if I could add a very short animation/color change as well to give extra visual indication of a change of button functionality, but this will do for now.

Fixed table column width

Fixed the column which was unreadable on mobile. Since I couldn't figure out how to debug the responsive table at the moment, I opted to simply reduce the number of columns to make mobile reading easier. On the flip side, the desktop version is difficult to scan since the column for "reason" became wider. However, since it is still more usable than the un-usable prior version on mobile by a large margin, I have opted for this bandaid fix. I've also added images of the changes to the most recent items as well.

Updated featured article layout

Previous version of this page was not very scannable on mobile. Too many large titles and featured images were distracting and devalued the more important articles I want people to actually read through. Furthermore, the locked Deloitte Digital article did little to help in terms of interaction as it simply said to "contact me" despite being the most prioritized item on the page. Furthermore, other articles such as my Perfect Brew project were hidden beneath many of the others above.

To solve this, I re-named the first work section as "Featured Work." I re-ordered the existing items and wrote a new article I wanted people to view. The formerly locked Amtrak article was changed into a smaller card format hopefully reducing frustration of not immediately getting information. I'm still considering if I want this up there at all. Since I changed the name to "featured" I'm able to bump up my perfect brew project as well to the top portion and give it more visibility. The bottom as work.other could hold less important articles that simply add more context to my background.

Changed "why I read" description

Not so much usability based, but I came to a new realization that my motivations for reading had changed. Whereas originally it was for solely for study and passing the time, it grew into a passion and mission. After beginning work on health-related state level projects, I realized every design decision I made would have sizable consequences. I want to be better not for me, but for the people who will ultimately use what I create. That's all the motivation I need.

Added "read more" button

Content on reading list page became inconsistent since some books had significantly more content others. This broke the design on the page and would have forced me to use masonry (which I tried), which broke symmetry and chronological order. Losing order made the page less user friendly. Adding a read more button grants progressive disclosure and improves scannability. This still needs work though since after clicking "read more" it does not change to "read less."