Nelson Reid UX Designer

Personal Portfolio Website

Project Overview

The Challenge

I needed an online portfolio website to feature my work as a UX Designer upon graduation of my UDXI course at General Assembly. It had to look and feel modern and accessible to appeal to professional hiring managers and recruiters while still representing me as a designer and a individual.

The Solution

I utilized the UX design process to help make sure my audience of hiring managers and recruiters had what they needed. I designed and developed a fully responsive, mobile first website. The typography and graphics are crisp and professional while still appearing playful, fun and unique. The navigation structure and page layout are easy to understand and follow and look great on both mobile devices and larger screen desktops.

Research and Discovery

Sitemap Temp

User Interviews

I conducted several interviews with hiring managers and recruiters and aimed to understand the the type of information they need to access quickly. I also asked general questions about when and where they access portfolio websites when searching or evaluating candidates.

Competitive Analysis

I looked at several UX Design portfolio websites of local and international designers. I did a competitive analysis of each of these websites in an attempt to understand how professionals are organizing their information. I also looked at the labeling of navigation items to make sure my naming conventions weren't out of alignment with industry standards.

Project Plan

Sitemap Temp

Defining the features

Armed with some useful insights I decided on some main content choices to focus on:

  • Case studies of past UX projects focused on showcasing my process as a designer.
    • These case studies should include examples of documentation such as personas, wireframes, hi-fi comps etc.
    • A link to the final completed deliverable should be included within the first section of a case study.
  • A simple contact page / form.
  • And a resume page.

Design

Sitemap Temp

Wireframes

I sketched various wireframe layouts in an effort to explore various design possibilities.

High Fidelity Mockups & Front-end Development

Sitemap Temp

With the wireframes and overall layout of my portfolio website decided on I switched modes and spent time in Photoshop generating a high fidelity mockup to guide me through the front-end development phase. Building the layout into a fully responsive grid was next, I utilized my experience in HTML5 and CSS3 to build out the project.