Webflow only includes two social buttons: Facebook & Twitter. As a designer, I don’t think those platforms do a great job of showcasing my work. So in order to include social media buttons in my portfolio, I had to make them myself. Social Media buttons are important to include on portfolios because they let viewers dig deeper and start a networking connection with you. In this article, I’m going to walk through my thought process of designing icons for my portfolio.

First, I had to decide which social media outlets to include on my portfolio. I would need to include a social media outlet that showcases my best work. As well as an outlet where I can write about my work. And of course, I would want a social media that allows viewers to connect with me on a professional level.

My design work is showcased on Dribbble and Behance. In the past, I used to showcase some of my designs on Instagram. Instagram ended up being a time and productivity stealer, so I deleted the app from my phone. Now I just stick with Behance and Dribbble. I like Dribbble better than Behance because of the minimal design and how it behaves like actual social media. Behance’s layout is messy and overwhelming. So between the two, I decided to go with Dribbble.

I only use Medium to write about my work, so that was an easy selection. For professional correspondence, I had several options. I could go with Facebook, where I talk to my family, so I keep my content above board. I could also go with Twitter but as a former comedian, I have a lot of jokes on Twitter. Going through my Twitter to make sure everything is SFW would take a long time. Then there’s LinkedIn which is made specifically for professional networking. Whether it actually helps with job searching or just makes the process worse is a whole other article I could and maybe will write in the future. Out of these options, I decided to go with LinkedIn because it was meant for professional networking. I’ll leave Twitter for my friends & fans and Facebook for my family.

Now that I decided on which social share buttons I was going to create all that was left was doing the work. I downloaded the official Dribbble, Medium, and LinkedIn logos from their website. They were not hard to find. It just took a quick google search. I opened those bad boys up in Sketch. First, I resized them so they would fit nicely on my website. I went with 40 px x 40 px as the dimensions for each icon. That way they were large enough for someone to see and click on but small enough that they wouldn’t steal attention away from the meat of my portfolio, the case studies. I drew an ellipsis shape over each icon and centered them in the middle of each ellipsis. I then changed the color to a dark gray so again they wouldn’t steal the attention from anything else on my portfolio.

Next, I uploaded the icons onto Webflow. I decided to stick them in the footer of my website because it’s a prominent position on my website. The icons serve as a good way to communicate “Want to learn more about me? Check out my social media,” without actually having to type all of that out. Good design communicates ideas with visuals.

I would be interested to learn how many people click on my social media icons after interacting with my portfolio. I could do that by changing the links behind my buttons to bit.ly links and then I could measure whether my designs are successful. Alas, another project for another day.

I had a short conversation with an old coworker who still works at this company about the site’s design. I discovered they’re inching towards a redesign of the online catalog. Following the conversation, I started looking through their website. I contemplated what I would do to redesign it.

If I had the resources I would want to work through the whole UX process on this site. But, unfortunately, I do not have the resources. A quick way to test usability is to complete a heuristic evaluation of the site. A heuristic evaluation would help me figure out if the site meets the standard usability principles. So I completed the evaluation, shown below.

After the evaluation, I wrote some recommendations for improving the design’s site. The recommendations are listed below.

• Cleaning up the site’s design to make more minimal and aesthetically pleasing
• Adding more hierarchy when displaying content on pages
• Making the font larger so it’s easier to read especially on CTAs
• Adding emergency exits and help section to every page
• Providing character count micro-interaction when entering a password in the login form
• Card Sorting to determine labeling and site map for users

Taking these recommendations into account, I completed a new mockup of a proposed site. This mockup is shown below. Please note the larger primary CTA, the sign-in button, and a large Secondary CTA, the search bar.

This exercise has me thinking a lot about tech support and UX and how they should work closer together. They’re both heavily based on empathizing with the user to solve their issues. I think one depends on the other. If the UX team does its job, the tech support team has less work to do. However, tech support teams would provide really good insights on users' frustrations as they work with users every day. I’m curious now if there are companies where the two teams work together to help the user.

Sources

Nielsen, J., 1994. 10 Heuristics For User Interface Design: Article By Jakob Nielsen. [online] Nielsen Norman Group. Available at: <https://www.nngroup.com/articles/ten-usability-heuristics/> [Accessed 14 April 2020].

The Relationship Between Tech Support and UX Design was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.