Kelvin's Portfolio

Stream One Project: User-Centric Frontend Development - Code Institute

For my first milestone project, I have chosen to create a portfolio that is simple, modern, attractive and colour-blindness friendly in design. This is will be a portfolio that will serve as a clear career roadmap for those interested in learning what I have to offer as an software development and or marketing professional.

Demo

A live demo can be found here

Here is the responsiveness preview:

UX

User Stories

As an employer, I want to be able to easily, swiftly, and seamlessly find a list of Kelvin’s skills and his proficiency in each one.

As a recruiter, I want to be able to easily, swiftly, and seamlessly view all of Kelvin’s software development and or marketing projects, both past and present.

As a member of the colour-blind community, I want to be able to clearly view the information on this website without any serious difficulties brought about by my vision.

Strategy

My goal was to build a portfolio that allows the user to find and view the information they want in as little steps as possible (across all devices) without compromising aesthetic appeal.

It was important to me to design a colour-blindness friendly UX design. This is because, in all my reading about UX/UI, I did not come across many UX/UI designers that made it a point to accommodate the needs of people who can’t view the world like everyone else. In fact, Ivan Tuchkov highlighted this very point in an article, in which he reminds UX designers that:

“People with regular vision and people with protanopia see the same image. In the eyes of colorblind, the flower and the background are almost in the same color. And if we talk about user interfaces, such perception leads to a bunch of problems: text becomes unreadable, call-to-action buttons inconspicuous, etc.” (Tuchkov, 2018)

Tuchkov goes on to talk about how this issue can not only appear extremely discriminatory, but can also hurt the client’s aims:

“Every type of color blindness causes inconvenience; this carries over to user experience. At worst, colorblind people cannot use a product at all. It’ll upset a lot of users and a business will lose potential clients too.” (Tuchkov, 2018)

So, in this milestone project, I have taken upon myself the additional challenge of designing with colour-blindness in mind wherever I can.

Scope

The purpose of this undertaking is to display my skills and projects in a way that is quick, simple and intuitive. It is meant to serve as a portfolio, showcasing my professional journey and career trajectory.

Having worked in the recuitment space, I understand that recruitrs and employers often don't have the time to sift through detailed resumés and portfolios. Additionally, being a marketing professional, I also understand that the attention span of the average buyer/user is growing shorter by the decade. Advertisements and promotions must be able to arrest attention and or convey a message within 2 seconds, lest they risk losing the onlooker forever.

Therefore, this portfolio will be slightly more narrow in scope than some others out there, and it will prioritise the more "at-a-glance" and "on-the-go" user.

Surface

I decided to go with the blue, white, and pink colour scheme because my research showed that seemed to be a happy medium between a colour-blindness friendly aesthetic and an eye-catching and dynamic design. Many sources agreed that a minimalistic design was best so I opted to keep the general layout clean, clear, uncluttered.

From a purely stylistic point of view, I myself do favour the combination of blue and white anyway, for its minimalism, modern feel, and timeless quality. However, I decided to add a pop of pink to evoke a sense of dynamism and creativity, as I find that one of the few failings of blue and white coupled together is that it can come across a little boring, repetitive, and uninspired at times.

I must add that I was inititially going to go with a predominatly greyscale scheme because it is by far the most colour-blindness friendly aesthetic, however, that felt a little too bland for my personal taste. So, I eventually opted to go for a white, blue, and pink combination while still designing with colour-blindness in mind in the places that I could. This is why I added texure and animations to the skill bars because research shows it is much easier for colour-blind individual to make out things that are textured or moving on a screen.

Skeleton

• Landing Page
• About
• Skills
• Projects
• Contact

Structure

Here are a list of the wireframes I developed during the inital mock-up. They are quite self-explanatory and rudimentary, but they didn't need to be overly compelx. They merely needed to serve as a base for me to extrapolate upon. Two of the wireframes had to be redone because I was having trouble with creating responsive speechbubbles, so I opted for basic rectangles instead because they are far easier to make responsive. This is in reference to the about page and the projects page, so you will see two wireframes for each of those.

Features

• I opted to use a single page format to make navigation much simpler and intuitive, meaning the user doesn't need to click back and forth between pages.
• The default setting for the navbar seemed to create a very stark and jarring transition to whatever you clicked on. It wasn't a very smooth effect. So, I opted for a smooth scrolling effect instead of just appearing on whatever navbar item you click on, and this made for a much nicer, more fluid experience.
• I made the skill progress bars textured and animated because my research showed that it is often easier for colour-blind individuals to make out things that are textured and or moving on a screen.
• I created the footer to mirror the navbar in design, being black. This made for a very balanced and symmetrical visual experience when both were present and visible on the screen.
• I included social media links in the footer and added a small rotation and colour changing animation to help enhance their visibility and presence.

Features left to implement

• I would like to develop a better way to display my projects. As it is now, it isn't so bad because there aren't many to show. But, in the future, I will need to come up with a more econonic use of space in that section.
• I would like to add an education sections to display that information more clearly and give it its own section. As it is now, it's mentioned in the About section, but I feel it would stand out more if it were given its own place.
• I would like to improve the site's overall look by finding a more uniservsally suitable colour-scheme, because it became clear in the latter part of my testing phase that the pink I had chosen can appear very harsh for some people. An example of this is provided further below in the testing section of this readme.

  Technologies Used

  • Visual Code Studio - code editor used for this project.

  • HTML - to create the structure of the project and define the "skeleton", so to speak.

  • CSS - to design and style the project, adding the "flesh to the skeleton", so to speak

  • Bootstrap - used as a framework to make design faster and easier.

  • Git - used for version control.

  • Font Awesome - used for social media icons.

  • HTML Formatter - used to beautify html.

  • CSS Formatter - used to beautify css.

  • Am I Responsive? - used to test responsiveness.

  • JavaScript - used with Bootstrap.

  • JQuery - used to support Java Script.

  Additional resources and tools

  • W3 Schools

  • Stack Overflow

  • CSS-Tricks

  • GitHub

  • Youtube - used for various tutorials. I find that I am a visual learner i.e. I learn better by watching others do, so I used YouTube tutorials for help pertaining to certain things I find tricky, such as the nav bar and the social media links

  Testing

  The first step of my testing began by using Am I Responsive? to deduce whether my project was indeed responsive and compatible across all devices, the results of which can be observed at the beginning of this readme in the responsiveness preview.

  The second stage involved sharing the deployed link with a few colleagues and friends to double check whether it was actually responsive or not, and this is where I ran into a curious issue. It would seem that the particular shade of pink that I used may appear differently on different devices, and this will probably negatively impact visbility for effected users. Below you will a screenshot of what how the site appears to me and most users compared to another screenshot of how it appears to a select few.

  This is what most users (myself included) see:

  This is what a small number of users may see:

  This occurs regardless of using DevTools or sites like Am I Responsive. So, essentially, if the colour appears correctly for you, then it will do so no matter what medium you view it through. Unfortunately, the same is true vice versa. While I remain unsure what the exact cause of this is, it would appear that this is may be due to one's individual device settings. This issue does seem to be localised to the minority, meaning that for the average user the project should appear normally. But this finding has given me a note of improvement and points me towards something that I can work to make better in the future.

  The third step of my testing involved the utilization of Code Verifier, which yielded the following result:

  Deployment

  This site is hosted on GitHub pages and it's deployed directly using the master branch. The deployed site will update automatically when new commits are made and then pushed from VSCode. To deploy the site correctly, the landing page must be named 'index.html'.

  To run locally, you can clone this repository directly into the editor of your choice by pasting git clone https://github.com/kel151/1stmilestoneproject.git into your terminal. To cut ties with this GitHub repository, type git remote rm origin into the terminal.

  Credit

  Content

  All of text in the "About/A Little About Me..." section was written by me.

  Media

  The images used in this project were taken from Undraw, an open license and highly customizable resource that I greatly recommend.

  Colour-blindness research sources:

  Tuchkov, I. 2018. http://www.garethbotha.com/color-blindness-usability-testing/. Accessed: November 5th 2019.

  Bigman, A. 2012. Why all designers need to understand color blindness. Accessed: November 5th 2019.

  Hiller, L. 2018. Considering colour blindness in UX design (with five examples). Accessed: November 5th 2019.

  Cravit, R. 2019. How to Use Color Blind Friendly Palettes to Make Your Charts Accessible. Accessed: November 5th 2019.

  Botha, G. 2017. Color Blindness in Usability Testing. Accessed: November 5th 2019.

  Acknowledgements

  • My mentor, Aaron Sinnot, for all of his patience, advice, and recommendations.
  • My friend and fellow member of the Code Institute Slack Community, Mia, for all of her advice, kindness, and encouragement.
  • The Student Care team, particularly Claire Lally, for the constant support, encouragement, and check-in messages.
  • Anthony O'Brien, a fellow member of the Code Institute Slack Community, for his patience, tenacity, and perpetual willingness to help, no matter how late.

  The inspiration for this project came from a portfolio by Haley Schafer, which was used to expemplify what a high quality milestone 1 project could be.

  This is for educational use.