Saturday, June 18, 2016

Portfolio Website

The purpose of this page is page is to provide a case study that portrays the design process I follow when building new sites. This particular project sample has the most thorough examples and photos. If you do not have time to skim all the sample, this one would be the best example project to review.


Building the Perfect Portfolio

Planning

A lot of thought was put into building the perfect portfolio in only a few days. I started off by sketching low-fidelity wireframes on 4 pieces of paper. These had the basic idea of where I wanted everything to sit. Next, I took a few more pieces of paper and quickly made a list of criteria. I based a lot of my ideas on what I assumed should be in a great resume and how I would want to portray design to someone who is unfamiliar with user interface processes (without talking down to those who do). After I made my own list, I Googled keywords like, "tips for building design/ux/illustration portfolios" and "beautiful/clean/minimal design portfolios."

Examples

Click on any 'example' image to zoom in


Initial Goals and Research

Above all, I want my design work to stand out and speak for itself, but I know the medium is just as important in telling any story. In my second set of sketches, I included crazy ideas like a video tutorial, where I introduce myself and walk viewers through each of my favorite projects.

Future Enhancements

I thought it would be fun to have a light and dark theme that switch using a moon or sun icon. Next to those, I could throw in another random icon that looked like a wizard's hat. That hat would transform my sterile minimalist design into a magical world that would make any Disney or Blizzard designer proud. It could dazzle with css parallax designs and hidden gems that are subtle but show creativity in a bold way. Those are probably unrealistic out-of-scope future enhancements, but where so fun to imagine that I dreamed about them that night.

I spent a substantial amount of time Googling inspiration from illustrator/photography portfolio sites and Disney movie websites. Mostly because I knew those sites would look especially creative and have nice, unique layouts for showcasing specific work.

Inspiration:

Building the Site

Setting Goals and Criteria

After my initial sketches I used my blog website as a template to setup this website using Blogspot as the content management system. I'd already spent over a year cleaning up the code from my blog and developing a lot of custom functionality. I also knew that a blog layout would not be ideal for a portfolio site because:

  • I do not need to show ads
  • Cross-link posts like I do on Book Reviews
  • No need to promote sponsors
  • The goal(s) of this site are to introduce myself, how I think, and my work.

More-over, I hope that this website will show that I have a passion for design and creating user-friendly projects. So, I setup a new site using an old domain I already owned but had recently stopped using (Desaraev.com).

I knew my list of criteria for a portfolio site might not be complete, so, I once again turned to Google. I made sure to create a complete list of what other designer's recommended including in a portfolio based on my goals.

A secondary goal for this site is to show that I am familiar with the latest technology, coding best practices, and can customize functionality using HTML5/CSS3. So, I stayed up until the wee hours of the morning on day one cleaning up my original template. I deleted anything I didn't need. Blogger's out-of-the box code feels like (to me) a disorganized jumbled mess. So I integrated Bootstrap, removed most of Blogger's classes, and rearranged the code to go in chronological order from header to footer (it wasn't that way to start with). Most of Blogger's themes are not responsive, accessibility friendly, or easy to read (the code). So, that is why I deleted everything and changed all the styles to Bootstrap's grid styles. My original design already was recoded to be responsive, but not clean enough and I really want this site to shine.

Assumptions

Target Audience

The target audience for this website is the user experience team at Blizzard Entertainment. The Blizzard offices are located in Austin, Texas and Irvine, CA. Blizzard works on video games and entertainment software that requires computers which can process high resolution graphics and an internet connection like Fiber.

According to SitePoint 54% of internet users use Google Chrome. The second most used internet browsers are Internet Explorer and Firefox. Internet Explorer has been discontinued by Microsoft and is generally considered the bane of most developer's existences.

Since this site is being reviewed by a team while they are likely at work, they will most likely view the website on a desktop computer. They may also briefly test the site for mobile compatibility, but it is easier to navigate and read portfolio sites on a desktop.

Based on the above assumptions the target audience for this site will expect high resolution photos, so most photos have not been optimized for the web and are at a fairly high resolution. The site code and multiple themes are optimized for mobile, but content that is not important to the portfolio may be hidden on mobile browsers. The site was built on Chrome and not thoroughly tested in IE or Firefox (yet - it has only been live for a few days). There is a known navigation issue in Firefox, but the site has multiple ways to navigate so it is still very user friendly even without the left navigation (fixed 6-12-2016).

The team that will be viewing this site are likely user interface designers, developers, managers, or user experience researchers. So it is important that the site is not only well coded and user friendly but also that the content explains my design process in a comprehensive way that is consistent and easy to navigate. Unfortunately, since this site was built in under a week there may still be bugs or code that needs removed.

Secondary Audience

You never know who else might see a website, so I made sure to explain complex terms related to design. I'm not a copywriter, but wanted the story I'm telling to be accessible to non-designers/geeks. For that reason, many terms and processes are explained in more detail than might be necessary with a fellow UI/UX person. The site has been tested by over twenty friends, family and anyone else I could wrangle into my quest to build the perfect portfolio site. My quality team (aka the friends), provided help with usability and functionality testing. Their feedback has helped to improve the site in ways that would have otherwise taken me months to refine on my own. The content of the site is based on a conversation with Larry, a recruiter at Blizzard ENT, and information gleaned from the UX job requirements.

Content

Based on my original review of the job requirements I knew that I have the qualifications to fulfill the requirements. I really wanted to show my aptitude with more than just simple images. Adding a higher level of detail to my portfolio could provide me with a higher probability of standing out amongst other applicants, I did that through case studies and linking to documentation samples. I was also hoping that the effort would reflect my excitement to potentially work for one of the top gaming companies in the industry, a company that built one of my favorite games (I spend an inordinate amount of my free time playing it). I would have a very hard time quantifying my excitement about the prospect of this position.

Challenges

I ran into a number of road blocks while recoding the site. A few elements of blogger like to re-add themselves, this was a minor speed bump. I also had some issue adding links to custom code, especially jQuery/Javascript - to get past this I rewrote anything I could as CSS and the rest I uploaded to Github and used a link to the raw files as linkable code files (recently found fixes for most of this).

Blogspot has a set of CSS that overwrites some of the CSS in my external stylesheets. I'm not a fan of in-line styles or on-page CSS but for now I am using a set of classes listed under the head and on some unique pages.

Blogger deletes HTML markup from posts if the view of the WYSIWYG is changed to compose. Even if you do not save pages, paragraph tags may be removed and replaced with breaks at the end of each paragraph. I wish Google would fix this, but it is something slightly out of my control and I've tried to recode any effected pages. If you look at the code and see break tags, it is because of this issue (please report it using the feedback link).

User Acceptance Testing/Feedback

Once my initial rough draft was built, I asked a number of close friends and family to review the site. My test group came from a diverse background with varying levels of technology savvy and familiarity with software development (most are novices but many have heard me excitedly prattle on about technology for years). I sent each person a short introduction to the site and asked for their feedback.

Prototype website image High-Fidelity Prototype - Version One

After my interviewees responded I slowly revealed my goals, careful to try not to integrate any response bias into the survey/interview. I recorded feedback in my notes, being sure to note when people had similar responses. I noted, that many people related their ideas to what they had seen other sites do (like corporate sites) and often wanted the feeling of robust data to clutter their screen. One user mentioned that there was a lot of white space (not their same words) and that they knew most sites filled that space with ads, so maybe I should find something to add to the empty spaces. Most feedback was promptly integrated and some feedback did not align with initial criteria and goals.

Since the goal of this site is to highlight my work, make it easy to notice how to navigate between portfolio items, and to have a place where the portfolio and my resume may be downloaded as PDFs. Adding anything that wasn't important to those goals would distract users.

Integrating Behavioral/Data Analytics

Analytics will allow me to compile ongoing passive-feedback about user behavior. This data, allows user experience researchers to track issues, efficiency, and performance related to site goals. Later, I can use the data to continue refining the design.

Choosing a Color Scheme

I received a lot of feedback that my color scheme was too plain, sterile, too simple, and even hospital like. I decided, based on that feedback, to change my original color scheme (mostly white, gray, and a vibrant teal) and integrate more color. My second color scheme was based on a picture of my favorite super hero. The third color scheme was a light baby blue. The fourth and current color scheme, a deep blue, is a calming rich color that is easy on the eyes in dark or light settings. The emerald blue is combined with a dark salmon reddish orange to create a vibrate high-impact color scheme.

Secondary Color Scheme

Think the site needs a change of scenery? Look no further than the bottom left hand corner of any screen on this site and click the space toggle. The main theme will first change to a sunny polka dot setting with a few other style changes. The second click on the toggle will transport you to outer space. The darker space theme is perfect for night time reading and the stars twinkle with CSS. Fortunately or unfortunately, like all magic (as one of the themes is named magicbg), the theme transmog disappears whenever you leave or refresh a page. However, you can always renew the change with another click of the toggle.

Accessibility & Color Contrast

Many bootstrap features, like color, are not accessibility friendly or 508 compliant out-of-the-box. So, I updated colors for things like messages. The colors where tested using WebAim's color contrast checker.

Example

The difference in the pictures below may seem subtle, but for anyone with color blindness it can make a huge difference.

Before

alert warning banner using Bootstrap colors

CSS

.alert-danger, .alert-error { color: #b94a48; background-color: #f2dede; border-color: #eed3d7; }

Results from testing Bootstrap's colors (fail)

After

alert warning banner using custom colors that are accessibility friendly

CSS

.alert-danger { color: #9C0705; background-color: #FFEAEA; border-color: #ebccd1; }

Results from testing Bootstrap's colors (pass)

Final QA/Usability Testing

Portfolio Site Review (Interview with Rocky V.)

Contextual Inquiry

The following is information sent to participants of contextual inquiry (usability testing) and included in the testing survey.

Things to keep in mind when reviewing this site:

  • I do creative/technical work
  • The site should show that I have leadership experience
  • I want to show my capabilities/formal training in:
    • user interface (UI including graphic design and front-end development), fine art, program management, user experience (UX including formal research/evaluations, technical writing, prototyping, wireframes, process planning, and usability testing), and SEO
  • This site is built only for people who have requested to see my portfolio. The goal of the site is not to improve search engine optimization (SEO) to increase random visits from unknown users. This is also why my contact information is not provided. Anyone on the site should already be able to contact me.

Would you like to help me improve this site?

This link (http://goo.gl/forms/adS4pKSJhG0uu6fm1) will take you to a Google Web Form. I've created a short survey, you can think of it like a scavenger hunt.
Let me know if you've seen any issues on the site and what you think of the content/layout. Example of the type of things to look for include:
  • Spelling/grammar (it's not always my strong suit)
  • Did you understand the concepts described?
  • Did you like the projects I used in my portfolio (aesthetically)?
  • Do you see anything on the website that might be irrelevant (please skim the things to keep in mind)?

Mobile Testing


Mobile Test Me

Future Enhancements and Error Tracking

The following picture is an excel sheet of future enhancements. They are prioritized and color coded. This is to track ideas I have along the way or receive from contextual inquiry (e.g. surveys, user interviews, usability testing, analytics).

Tools and Skills

The following are a list of some tools, skills, and frameworks used to build this site.

My Photo
Senior UI/UX web designer. Adventurist and certified Yoga / Barre Instructor. Love aviation, books, and travel. More: References About

No comments:

Post a Comment