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.

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.

Navigation

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

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

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.

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

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.

I’m going to tell you about a man named John Ngo who has revolutionized the way I see customer service. I had the great fortune of being able to observer him working with his “guests” for a couple hours. I say “guests” because though they may have entered as a customers, they left feeling like guests.

In April of 2016, my girlfriend needed some passport photos and she asked me if I know anyone. I said “No, sorry. Google it.” Yeah, I know, I’m a nice boyfriend. She told me she’s doesn’t know who to trust. I told her to look at reviews. I think her and I both know that this conversation could go back and forth for hours. She’s probably aware that eventually I’ll get sick of it and just Google it for her. Yes, she’s that clever. That’s why I love her.

I understand she wants a place that’s high quality and inexpensive. I know, like a unicorn. Almost non-existent. I grabbed her phone and I probably typed in something like “Best Passport photo Toronto” (I retyped it in Google a moment ago to make sure it works). Lo and behold there is a 5 star result from Yelp with 209 reviews (At the time of this writing).

I vaguely remember that I was semi annoyed and most definitely busy doing something else so I wasn’t even that impressed with the number of reviews. I skimmed through some of the reviews and probably said something like “Look: ‘Pictures come out great. John is amazing. Best experience. What a nice guy.’ See? He’s good. Just go to John.” And she probably said something like “Yeah, but…” and then I said “Honey, just go to John”.

I remember the next evening when she came back from visiting John she said “Oh my God! He was so nice and funny and smart and amazing…” And I smiled, feeling accomplished and said, “See? I told you to go John.” Little did I know how amazing the experience actually was.

Fast forward to May 2017. I wanted to take some professional photos for my social networks. I want a professional photo for LinkedIn and something more fashionable for the rest of my profiles. I was looking around at photographers in the area and they were charging large amounts for even one Photoshopped photo. I looked at Groupon but the deals still weren’t good enough. All I want is a little bit of touch ups for a couple of photos. I didn’t want to have a makeover that transforms me into Kim Kardashian.

It seemed unreasonable to me so I said to myself “I guess I’m going call John.” I called him up, he told me the price and I was pleased. I guess especially after hearing the other prices, hearing a number that is half the other numbers sounds like a steal. His prices are good and he has a good reputation. How could I go wrong?

We had arranged to do the photoshoot 2 weeks prior but he became very ill and was unable to make it in to the shop. We stayed in touch a few times until he was finally feeling better and I was available. Throughout this time he was very polite, cheerful, and apologetic. I often try to care about the other person’s situation more than my own. I kept telling him to focus on getting better and we will work together at some point in the future. John later told me that he really appreciated this and I think that’s what helped us connect.

We finally met on Thursday, June 8. The first thing he said to me when I saw him was: “Greg man, So glad to finally see you! I really apologize for the mess. Don’t worry, I’m going to take care of you today.” Whoa! I feel as if I’m reconnecting with a childhood friend I haven’t seen in 20 years! We talked a bit about Barak Obama and his charisma. He showed me some of his work. Actually he showed me a lot of his work. More than just the quality of his work, I could sense the pride he has for his work. Almost cocky, but you know it’s coming from a good place. A place of love and compassion for his fellow human.

We started the shoot after 20 minutes of talking. Not a fast “Wham, bam, thank you m’am!” Kinda of business model, but I’ve grown to appreciate it. He brings in the human touch. I’m sure if I or anyone else were in a rush we could tell him and he’d get to work, but then you’d be missing out. You’d be missing out on a chance to get to know a person who is unique, intelligent, hilarious, and compassionate.

He put on a BBC radio essential mix. Did I mention I love these mixes?! I said to him: “You can never go wrong with EDM. You can always find a genre that someone likes. House, D & B, Jungle… something!” He agreed, started nodding his head to the beat and started to prepare his equipment.

He flowed with the music and did his work like a flair bartender. He said a lot of things, mostly about positioning me for great photos. He was smooth and melodic as if he were speaking through the music. I wish I could remember what he was saying. I was too focused on looking good for the shoot and he helped me with that a lot.

People came and went throughout our shoot. They were all there for passport photos. He would acknowledge their presence, take a few shots with me, and then switch over to finding out what type of passport photo they needed. It was incredible to watch him take something as mundane as passport photos and turn it into an experience. He had his guest laughing, joking, and even high fiving or fist bumping by the end of their visit. I now got a chance to see how he made me feel from a third person perspective. He made each and every one of them feel special, even if it was for just a moment. They all got what they came for and much more.

Some of his jokes were repeated, yet delivered with the timing of a seasoned comedian. Laughter guaranteed. I found myself giggling at the same joke I heard at least 3 times for 3 different guests. Maybe I found it funny just because they were laughing and smiling too. An infectious charm and happiness. It spread, right into my soul.

When he would stop to show me the shots, I noticed that even the ones that looked bad, looked good. He has this indescribable way of bringing the best out of everyone. I really got to appreciate this as I watched him work with the other guests that came trickling in. They looked happy and confused. Confused as to why they felt so good doing something as dreadful as taking passport photos.

At one point, we decided it was time to do a few fun shots. Being the great actor that I am, I started to “fake” laugh about something we spoke about earlier. Next thing I knew, he was talking fast and making jokes and he made my fake laugh turn into a real one. I could not stop laughing. Hard as I tried to reduce my laugh to a giggle, I was unsuccessful. It was an enlightening experience. I had never seen photos of me having that much fun. Simply unforgettable.

I feel I really got to know him in the 3 hours I was there. He educated me on the difference between samurai and ninja. He told me about the true story of the Taj Mahal. We talked about happiness, customer service, connecting with people. I don’t experience these conversations often, but I’m always eternal grateful when I get the opportunity to bond with someone on this level.

At one point he said “I think the service industry has gone to shit. As long as people are giving bad service I’ll always be in business.” I froze in my tracks. I didn’t even realize it until he said it. I’ve thought about it, but I never really had anything to compare it to. Shit customer service is what I get most of the time at most places. Good customer service is what I get sometimes at some places. Great customer service is what John demonstrated on this day.

When I left his shop, 2 hours later than I expected, I gained way more than just an amazing set of photos. I gained a true friend. This is the importance of the value exchange. Thank you John, for making me feel like a friend first and a customer second.

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.

The following took place on Sunday, June 4th, 2017 in York Region, Ontario.

I went to Staples at High Tech and Red Maple Road, in Richmond Hill, to print a double sided document on 100lb card stock paper. It was a publicly viewable Google Document.

I spoke to a lady at the Copy Center and explained to her my situation. She said to me, “I can’t login to your account on our computer. It’s our store policy.” I said to her, “I understand that. The document doesn’t require a login. It is publicly viewable.” She said, “It doesn’t matter. We still can’t access any sites. You can put the document on a USB drive and give it to us.” I told her I don’t have a USB drive. “You can buy one,” she said.

Wait, what?! You’re telling me I have to buy a USB drive to do a simple print job of a document that’s publicly available? I admit, I had an external drive with me, but I really don’t feel comfortable putting my drive in a machine accessed by hundreds of people per month. Just not safe.

I was frustrated. I was ready to leave, never to return to that location, or any Staples Business Depot for that matter. I thought there must have been some misunderstanding. I remembered when I was at that location in February, and the associate was new and had a hard time coping with the demands of the inpatient customers. I remember I had to speak to the manager in order to get my situation handled. I went to look for the manager and it turns out it was the same manager from the last time I was there. Excellent.

I said hello to her and asked her how she was doing. She was more polite than the previous lady. I thought I was off to a good start. I explained to her my situation and she told me that I can “rent” one of the computer and print the document from there and then get the associate in the Copy Center to photocopy it on card stock paper. The cost of renting the computer is 30 cents per minute. She explained to me that this is the new store policy because the computers in the Copy Center have been down for the whole day a few times because of a customer.

Wait, what?! You’re telling me that I have to pay 30 cents a minute, hope that the computer and internet connection are fast, pay to print my document, and then pay to photocopy it to card stock paper at lower print quality? Or I can buy a USB drive, put my document on it, pay to print my document, then silently pray that my newly purchased USB drive does not become infected with whatever nasty virus shut down their system several times? Now, I’m just confused. Did I misunderstand her? Should I leave yet?

I decided to ask the male associate at the Copy Center, to get my third and final opinion. “Hello, I have a document that I would like to print on 100lb card stock. Can I email you the PDF version of it and have you print it for me?” He said, “You can either put it on a USB or print it at the computer over there and then we can photocopy it.” I said, “I don’t have a USB. I just want to print this document on card stock. Can I just email it to you?”

The female associate came into the conversation with a somewhat rude tone and said, “Actually sir, we’re not even allowed to take emails any more.” I smiled and very polite said, “I’m really sorry. I must be confused. Can you print this or not?” She said, “No sir. We can’t help you.” I thanked them and left.

I’ve been going to User Experience (UX) Design talks lately and reading books like Don’t Make Me Think by Steve Krug and all I could think to myself was, “Wow, what shitty UX. Wow, absolutely shitty UX.”

For the uninitiated, User Experience is very similar to Customer Experience. User Experience is the more software focused version of Customer Experience. According to Wikipedia, User Experience is “the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product.” Let’s substitute the word “product” with “service” and we can see that they failed at delivering accessibility and pleasure in my interaction with them.

I decided that after the last 2 experiences with this particular Staples Copy Center, I was ready to look for another company. At this point I’m even willing to pay more for this simple job, just to ensure that I have a decent customer experience. I was driving home and decided, out of curiosity, to see what would happen at the Staples located at Dufferin and Clark Avenue, also in York Region.

I went into the store and saw a long line at the Copy Center. I decided to first ask the manager if they could do what I needed. He was busy but I walked up to him and said, “Excuse me, I have a quick question. I would like to print a double sided document on 100lb card stock paper. I can email it to you as a PDF. Would you be able to print it?” He said yes.

Wait, what?! He said yes? Interesting. I waited patiently in line and when it was my turn I explained the situation to the female associate and she said, “Not a problem, just email it to this address and we’ll print it for you.” Am I in the same store? Is this the same company? 2 completely different responses for the exact same request? Why? Only Staples Canada head office can answer this question.

When I finished my job. I decided to explain the whole situation to the manager at this location. He was confused. He never heard of that policy. He explained the situation to the lead Copy Center associate and asked her if she ever heard of that and she said no.

The pain points:

• Unpleasant attitude from female Copy Center associate at the High Tech and Red Maple Road location
• The staff seemed unwilling to be helpful and polite
• Inconsistent response to the same query between the 2 stores
• Long line up at the Dufferin and Clark location

What they could have done differently:

• Set a store policy and make it effective across all locations. Now I know never to go to the High Tech and Red Maple location because they can make up their own policies.
• Have the associates explain why the store has this policy. This makes a huge difference for understanding customers.
• Smile and be friendly even if you’ve had a difficult day. I’ve work many customer service jobs. I’ve learned how to do this well.
• Busy periods are often unpredictable and it would not be cost effective to add more staff but at least have staff periodically say something like, “Hello everyone, we apologize for the delay. We will be with you shortly. Thank you for your patience.” My barber does this and it makes me feel at ease because he is being empathetic to the situation. TTC does this on the subway, even though sometimes it is difficult to hear.

Conclusion

I’m grateful that I was able to experience this situation while being calm and observant. I had no idea I would be writing this article but it helped me truly appreciate the value of great UX. I understand the difficulties that employees and managers face in their different roles but we must also understand the difficulties customers face in their lives.

Personal lives aside, it can be difficult to interact with other people in public, but I feel it is important to lead with your best foot forward while aiming to maintain peaceful and pleasant relationships with our fellow human beings.

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.