How and why I redesigned my portfolio

Current portfolio home page, on Jun 28, 2017

I published 2 web applications that I developed using the Ruby on Rails web framework. One is a social network for students to study called Qwiz Notes, the other is a simplified issue tracking content management system called Issue Tracker App. Yes, I know, they both have amazing names.

Now that I have completed my first 2 apps, it is time to put together my portfolio. I initially gave myself a deadline of 24 hours to put something online. I started it on the afternoon of Wednesday, May 3rd, 2017. I had it published by Thursday afternoon. Just start and iterate. Very hard for a perfectionist such as myself, but I’ve learned how to cope.

Before I go into great detail, I would like to give special thanks to Mohammad Owainati, who gave me small pointers that made a huge impact on the design of my portfolio. I’ve been very fortunate to connect with him after a UX Lightning Talk meet up at Bitmaker. Without him, this whole redesign would not have been possible. Feel free to click on any image to see an enlarged view.

Original design looks interesting, but what does this site offer me as a user?

Initial reception

When I first published my portfolio I shared it with a couple friends. I got mixed reviews. “Nice site man!”, “I love your photo!”, “It looks kinda empty.”, “You need to add the following things…”. If you’ve said one or more of these things to me, you know who you are! I appreciate every single comment. Even a simple :-). What I appreciate more is the in-depth constructive criticism I received from Mohammad.

When I initially decided to create my personal site, I did not have a target audience. It was meant to be my online home, welcome to everybody. I kinda threw everything I had in there, with no real aim or purpose. After talking with Mohammad, I realized that I need to think more like a UX designer.

In other words, I don’t want to be like Facebook and Walmart which have everything. I want to be focused like Instagram and Ambrosia Natural Foods, who specialize in photos and healthy food choices respectively. Full disclosure: I frequent both web apps and both stores. I want to focus my visitors around one theme: Discovering why I’m an excellent candidate for a position as a web developer.

What I needed to fix

  1. Every section of every page should be focused on delivering maximum value to potential employers.
  2. Change the background color to help readers focus on the text.
  3. Add a detailed account of my web development process for each project.
  4. Add more images to break up the monotony of text.

Colors

Initially, I wanted the portfolio to be image heavy so I chose darker colors, especially for the background, to help accentuate the details of the images. When I was told to focus more on my process for web development, I decided to change from darker values to lighter values, to help emphasize the text instead.

Sample text from the Qwiz Notes project page.

Navigation

Before and after of portfolio home page.

For the navigation title, which is my name, I initially didn’t put much thought into it. I thought to myself “Italic will suffice. Just get something finished first.” I would like to design a logo for myself at some point in the future but for now, I need to work iteratively and “focus on the big rocks”. I stylized the “logo” by giving the font for my first name a heavier weight (500) and the font for my last name the lightest weight (100)

In the first version of the navigation bar, there was no hierarchy and everything was just shoved to the right. What is the most important question to a hiring manager? “Does he have skills?”. This is why I put the Projects link first. Then, directly related to my projects, are the list of skills that I have. Finally, after you’ve looked at my projects and skills, you might be interested in finding out more about me and/or contacting me directly. Projects are now the priority.

I also noticed that I had lumped all my social networks into a drop down menu titled, you guessed it, “Social Networks”. The question I asked myself is: “Who cares? Who am I building this site for?”. The answer is: potential employers. Period. Now I have 4 simple links and 1 clear call to action: “Contact me”

About me

Before and after of About section, which was moved to the About page.

Before I decided who my target audience was, my about me section was just a little blurb about who I am and what I’m about. Looking back on this, I’m now wondering “Why would an employer care about this?”. The first thing they want to know is “Does he have experience? What projects has he worked on?”.

I decided that it would make more sense to jump right into the projects I’ve worked on. Because I’m now focused on employers who visit my portfolio, I can save them time by giving them only the information they need up front. If they want to know more about me, they can click the “About” link.

Skills

Before and after of Skills section on home page.

Here are my skills! *Yawn*… Who cares?! This skills list doesn’t excite me, and I’m the one who developed them! I decided It was time for something more visually appealing. Something that would draw an employer in and make them want to hire me.

The goal was to make my skill set more visual and grouped by project phase. The visual representation draws the viewer in and peaks their curiosity. I wanted to illustrate my development process while showcasing the list of skills I’ve acquired over the years. Instead of having one large chunk of seemingly random skills, I now have 3 groups of skills related by phase in the development life cycle.

Interests

I added a list of my interests to the About page.

I don’t have any relevant work experience so I needed some additional info that will help me stand out. Enter, “My interests”. I believe that I have a unique combination of interests that make me a healthy, happy, and well-rounded individual. I want to showcase these interests in an effort to help potential employers find a common ground with me before we even meet. I have many more interests, but I only show the ones that have my deep seeded passion. In other words, if money were no object, would I pursue any of these interests with my undivided attention? The answer is yes. I believe that with this combination of interests, I’m bound to fit in with the company culture of any organization.

Projects

Before and after of Projects section on home page.

I decided that in order to get attention from companies I want to work for, I have to look and act like them. That includes my portfolio. I noticed that companies frequently use a 2-column-alternating-row-color design. (If you know the actual name for this design please comment below).

Also, instead of just posting plain sample photos, they often include some context. Whether the sample photo is on a device floating on a transparent background or in an actual environment with people interacting with it.

Before and after of Qwiz Notes project page.

Initially, on each project page, I had 2 sample photos, a brief description, and links to creative briefs, functional specs, and other related info. Mohammad suggested that I include my process into my portfolio.

I added the creative brief and functional spec for Qwiz Notes and Issue Tracker App directly to my portfolio and I realized that this version is too long and boring. What employer would have the time or the interest to read such a long document? Instead, I decided to create a shorter case study version that simply outlines my process: Planning, Designing, and Developing. I added links to the longer versions of the creative briefs, and functional specs, and other resources for those who are interested in more details. Mohammad also mentioned that it’s important to add a section about the lessons I learned and what I would do next or do differently.

The page is still long but I decided to add a table of contents for desktop users and additional images for each project. The table of contents on the left side of the right image serve as links to the corresponding sections, while the images serve to break up the text and make the case study more visually appealing.

Contact page and footer

Before and after of Contact page with the footer.

The initial contact form was as plain as butter-less toast. It made my throat dry. The social network icons looked cool… for all of 5 minutes. I wanted to design something more enticing and mature.

I looked at a few portfolios with contact forms and I realized that something was missing from mine. “Who am I contacting?” It felt impersonal. There’s no face. I could be sending an email to some mailing service that would add me to their unappealing newsletter. A scary thought.

I decided to add one of my favorite “pondering pictures” with a quote from my favorite entrepreneur. “Going to bed at night saying we’ve done something wonderful … that’s what matters to me.” — Steve Jobs. I want to let prospective employers know that their mission will become my mission.

The most important social networks for my audience are GitHub, LinkedIn, and Stack Overflow. It is best to focus on these rather than introduce the paradox of choice. I placed these in the footer as visible icons. This rest of my networks are in the “more…” button in the footer, for those who are interested.

Things I’ve learned

  • The importance of having a target audience, which I had learned from my other projects but I did not think it applied to my portfolio.
  • Try to please everyone and you end up pleasing no one. Hence the need for a target audience.
  • Always focus on your “Why?”. This will help guide you throughout the process
  • Learn and apply design principles as much as possible
  • Even something seemingly small and simple can require precision, planning, and patience. Wow, that’s a mouthful!

Thank you for reading!

If you made it this far, I want to give you special thanks. It was a lot of work to redesign my portfolio and document the whole process. This experience has opened my eyes to the importance of design in general and UX design in particular. I believe it is important to be proud of the things you build. With the right knowledge, tools, and people, you will be able to create wonderful things people will be dying to share. Thank you.


I write to entertain and educate. Please help spread the joy and knowledge by:

  1. Clicking the ❤ button below
  2. Clicking the “Follow” button
  3. Sharing on Twitter and Facebook

Also, have a look at my portfolio and follow me on Twitter.