Why My Website Sucks.

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.

Change Log from 2017

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