The VetsWhoCode team was gracious enough to allow me to perform my case study on the VWC website, their baby, so let’s go through that together. Hopefully we all learn something!
Starting out we’re going to create a couple personas of the users who would be going to the vets who code site, then evaluate the site based on their assumed actions and outcomes.
The first persona we have today is Mark. Mark is 28 and he works in a major cell phone retailer in the middle of the country. He is a veteran of the armed forces and moved back to his hometown after his enlistment. He lives in an area of little opportunity so is looking to find a way to make himself a more valuable candidate for positions without going to college. Mark likely heard about the program from a podcast he listens to and was intrigued enough to check out the website. As a potential student of the program the main goal Mark has is to understand if and how the program can help him. Does he even qualify? Is it really free? What does the training schedule look like? How can he apply? Those kinds of questions are the ones we want to make sure Mark can find easily.
Generally speaking, consumers are browsing on their mobile device more often than they are on a desktop computer, and Mark is no exception. He uses his mobile device for all his web browsing needs. Let’s take a look at a few of the pages that Mark is likely to encounter on his user journey.
The first page he will navigate to is the home page of the main site. Luckily that is the first search result on Google, so Mark will have no issue finding the appropriate site. The first thing I noticed when navigating the the VetsWhoCode mobile site is that the buttons move. The typing text gets your attention and draws your eye to the call to action buttons below them, but when the text says ‘learn javascript’ the text causes a line break which makes the buttons move. Not hugely inconvenient but if you’re hovering your finger over those buttons to press, and they move, its unexpected.
Since Mark is interested in the program and not wanting to be a mentor, he will probably click on the apply button. The apply button takes him to the page listing the pre-work as well as the application process. It would probably create a better user experience if Mark were given an initial option to learn more about the program before jumping into the apply section. There is a navigation item for Mark to view the syllabus, but the movement of the words above the CTA buttons draws Mark to those two actions before anything else. In the grand scheme of things, most people in the position to want to join the program have heard more about it than just the name of the organization, so they have a pretty good idea about the ins and outs. On that same note, the pre-work links could use an additional indicator that they are a hyperlink. The text being colored and capitalized only visually indicates emphasis, only upon scrolling over the text do you realize it is a hyperlink. Keeping that the way it is and then including more button looking items below the text above the application would be a more clear indication that you are supposed to end up somewhere else. While we are on the aesthetics, the apply page, on mobile, has no margin or padding around the main text. Again, not detrimental to the function of the site, but could improve the look of that particular page when being viewed on a mobile device.
The next step of the user journey for Mark is to find the syllabus. The syllabus has the initial information Mark was looking for to figure out if this is the kind of tech he wants to learn. Two things the syllabus page could benefit from are an apply now button and padding on the first paragraph text.
Marks journey probably stops here if he doesn’t like the information he read or he will navigate back to the apply screen if he wants to continue. From there he will fill hopefully find the pre-work, complete those tasks, apply and join the next cohort.
While Mark’s journey likely ends there, we will move onto Michelle’s experience. Michelle is an advertising executive that believes strongly in giving back. She volunteers her time as well as makes monetary donations to organizations she believes in. She has recently started supporting veteran organizations because her sister is married to a service member and she recognizes the sacrifices bother her sister and brother-in-law are making. She is looking to make a donation to a veteran supporting organization and is researching various groups to make her decision. Her primary purpose in visiting the site is to find out how the organization supports veterans, how to make a donation and if her donation is tax deductible.
Michelle’s user journey also starts at the home page but she will be visiting the site on her desktop computer. She works from home at the moment so she is always at her desktop and currently does most of her browsing that way. When Michelle gets to the homepage, she will click on the donate CTA. An organization that runs solely on contribution from others, there are many donate buttons, which is important because the faster someone can complete the transaction, the more likely they are to follow through to completion.
Once Michelle gets to the donate page, she is greeted with a donor box widget and small paragraph of text to the right. Aside from the stylistic grammar modifications in the text, it would be great to see the entire donor box widget without having to scroll. Placing the headline text above the aside text would eliminate enough space at the top for the widget to be fully seen above the ‘fold’. Another added reassurance Michelle would like to see is that all donations are tax deductible. It is generally understood that all 501(c)(3) organizations are, but having it in writing gives her that verification.
If Michelle isn’t quite ready to make her donation, she will browse around to read more about the organization. She will likely navigate to the About Us page to read more about the program and also the Testimonials page to read of the impact the organization is making. Michelle really likes the about page, the video holds her attention and the information she is looking for is right there. When viewing the testimonials page though, she remembers reading that Vets Who Code has helped over 250 veterans, but there are only 5 testimonials? It would give Michelle more reassurance to part with her hard earned money if there were more stories she could read about.
Once Michelle has all the information she needs, she will navigate back to the donate page, which is really easy to find from anywhere on the site and complete her contribution. That is the end of the user journey for Michelle.
I am really appreciative the VetsWhoCode team let me take a peek at their baby and make suggestions. As you can tell, their baby isn't ugly but we can make some changes that could help their website visitors with their overall experience.
Top comments (0)