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.
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
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.
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.
I noticed on larger screens my featured article went way too wide. I've set the maximum width to 1800px to correct that.
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.
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.
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.
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.
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!
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!
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.
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.
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.
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.
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!
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.
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.
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.
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.
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 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.
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.
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.
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.
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 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.
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.
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.
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."
I prefer teams that like functional and inclusive digital products before pretty ones. Especially products that help people or societies become better versions of themselves.
Kind of a research nerd and bookworm. Understanding contexts and people helps me break rules easier.
Pursuing a calling at Deloitte Digital. I do user research, UI design, and accessibility evaluations on behalf of a range of clients.
Email me now at email@example.com. I'll respond within 24 hrs or else I owe you coffee.
Or let's be LinkedIn friends, whatever that means?