The portfolio case study describes the process of building desaraev.com including a comprehensive portrayal of the design process I follow when building new sites.
Jump to a Section:
Building the Perfect Portfolio
Planning
I based my first wireframes and lists of goals 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).Requirements Gathering
This site was built for the purpose of submitting samples to prospective employers. The portfolio site itself has been built and documented with similar processes that would go into building a client project. In the initial stages, I documented employer expectations, asked friends for input, and researched online documentation (like a competitor analysis).
Features and Wireframes
After I had a general list of features and content I wanted to include, I sketched a few low-fidelity wireframes on 4 pieces of paper. These had the basic idea of where I wanted everything positioned on the website. Next, I took a few more pieces of paper and quickly made a list of criteria. I used the criteria list to create multiple prototypes, employer personas, and expectations on the user's behavioral flow.
Examples
Click on any 'example' image to zoom in
Jump to a Section:
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. It could dazzle with css parallax designs and hidden gems that are subtle but show creativity in a bold way. Initially I created a few of these ideas, but later determined that they where unrealistic and distracted from the content of my portfolio.
Inspiration:
Jump to a Section:
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 a user experience team. Software development teams require computers which can process high resolution graphics and a faster-than-residential internet connection, not necessarily Fiber but closer.
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.
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.
Jump to a Section:
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 an 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). At one point, Github lost my CSS and I had to rewrite a lot of the styles or pull from places I saved bits of the original CSS. This has made the code very messy and sometimes redundant. At some point I will need to clean that up.
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).
Jump to a Section:
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.
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.
Changing the 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
CSS
.alert-danger, .alert-error {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
After
CSS
.alert-danger {
color: #9C0705;
background-color: #FFEAEA;
border-color: #ebccd1;
}
Jump to a Section:
Final QA/Usability Testing
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?
I've created a short survey, you can think of it like a scavenger hunt. It's a dynamic Google Web Form. Thank you in advance! Your feedback is very much appreciated.
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)?
Portfolio Site Review (Interview with Rocky V.)
Mobile Testing
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).
Jump to a Section:
Tools and Skills
The following are a list of some tools, skills, and frameworks used to build this site.
- Bootstrap Buttons
- Boostrap Menu
- Bootstrap Glyphicons
- Font Awesome
- Usability Testing
- Beta Site
- Stackoverflow: CSS Only - make text appear on hover
- Codepen
- Saving CSS/jQuery on GitHub (original)
- Full theme on Github
- Creating code snippets
- Create static homepage for Blogger
- http://kyleschaeffer.com/user-experience/10-things-a-website-should-never-ever-do/
- Accessibility Checklist
No comments:
Post a Comment