Portfolio UX teardown

Who is the key user? This isn’t always clear, especially in marketplace sites, so take your best guess.

What is that user’s number one critical goal when using the site? Be as specific as possible if there are multiple options here, e.g. “to purchase a red wagon” instead of “buy a toy”.

What is likely to make that user’s experience particularly positive (i.e. provide good satisfaction)?

What is the approximate information architecture of the site? (sketch it out)

What is the flow through that architecture for the user who is accomplishing the critical goal you identified above?

What style(s) of navigation is/are used? Do they answer the key questions (Where am I and how did I get here? Where should I go next and how do I get there?)?

What key interactions does the user have? Are they clear and usable?

What did the site do well to allow the user to accomplish his goal effectively, efficiently and with good satisfaction?

What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and with good satisfaction?

Lets get started!

Who is the key user?

Hiring manager / potential client.

What is that user’s number one critical goal when using the site?

The key user comes to this site for a general impression of my abilities to see if I am worth the time for a deeper dive.

What is likely to make that user’s experience particularly positive (i.e. provide good satisfaction)?

Speed. The user wants my resume and my most relevant work right at their fingertips. Ideally, information is somewhat tailored to them based on what they are looking for. The site should be flat, the interactions simple and very clear. These users do not have a lot of mental bandwidth to spend trying to figure out how to get what they need.

What is the approximate information architecture of the site?

Landing Page — Resume

=> | Web Samples — Site Links — Site Modals with Information

=> | Code Samples — Code Samples (served inline)

=> | Blog

What is the flow through that architecture for the user who is accomplishing the critical goal identified above?

The user lands on the page and (hopefully) sees my resume. Then they navigate to code samples or web samples depending on their needs through the links in the terminal section.

IF CODE SAMPLES FIRST: The code samples require a high amount of user interaction to see samples. From here, they may attempt to see my web samples if they see the links in the floating terminal.

IF WEB SAMPLES FIRST: Web samples are served two at a time and lack a cohesive vision. Links are served at the top to visit other sections of the site.

What style(s) of navigation is/are used? Do they answer the key questions (Where am I and how did I get here? Where should I go next and how do I get there?)?

Navigation is served through a links section on each page. The home page has a “java links” section.

The code samples page has a similar navigation system.

The web samples section has this.

Does it answer key questions –

Where am I, how did I get here? No, the nav doesn’t reflect current position.

Where do I go next? No, there is no clear instruction for the user.

How do I get there? This is the worst part, navigation systems are difficult to find.

What key interactions does the user have? Are they clear and usable?

The first interaction is landing on the site. There is a typing animation for the content on the right. The user can shortcut the animation if they click on the terminal, but that is not clear. Because of this, the user has to wait for the animation to complete before they have access to links and information.

On the code samples, the user has to interact with the terminal to see code samples. This interaction is explained by text on the screen but not immediately apparent. Furthermore, the interaction creates a popup that can deter the user. The idea is interesting, but the execution can be frustrating.

On the web samples page, users can click Learn More on each web card which pulls up a modal with more information. The user can also click ‘visit site’ which brings them to an external link of the site or ‘visit my dev blog’ which brings them here. This interaction is straightforward, though I wonder if the modals are annoying to keep clicking them open and closed.

What did the site do well to allow the user to accomplish his goal effectively, efficiently and with good satisfaction?

Overall, the site shows a decent eye for design, is obviously hand-built and very custom and has some interesting elements. All of these things help give a positive impression to the key user. The animations and interactions show some chops and my resume is right on the front page.

What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and with good satisfaction?

The initial animation has caused a fairly high initial bounce rate per my analytics. Some users won’t wait for it to finish and the ability to shortcut the animation is not immediately apparent.

The text in the terminal is small. The terminal itself may throw off a person who has never seen one before and they may miss the links to the rest of the site.

The relevant information is buried on two other pages which both require significant UI to acquire necessary info. All in all, it takes too long. It’s not easy to know how to navigate

All in all, it takes too long. It’s not easy to know how to navigate, and the informaiton needs to bubble up right to the surface to appease very busy HR people.