Shop Roam
United
Shop Roam United Heuristic Evaluation and
website redesign
website redesign
Overview: I was contracted on with Roam United which is a small business clothier based out of North Georgia.
Impact: All of their products are made to order and a portion of the proceeds go to help the Laramie Foothills Bison Reserve in Colorado.
The founder and owner is a high school teacher in Gwinnett Co., GA and has a wife and daughter. He created the site prior to getting married as a way of creating an additional income aside from teaching. Since being married and having a daughter, he has not spent as much time with the site and wanted to “breathe some life” into it.
Heuristic Evaluation
I conducted a heuristic evaluation based on the 10 heuristic principles as defined by the Neilson Norman Group. I found problems that violated four of the heuristics. Here are my findings for needed changes:
1.) Visibility of System Status
“The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”
Rating: 3- Major usability problem. Important to fix so should be given a high priority.
The majority of the website functioned the way it was supposed to as an E commerce site, except for this one exception.
As you can see in the corresponding screenshots, a user would click “add to cart” and would be prompted with the feedback, “added to cart!”; however, the corresponding icon in the cart in the header would not update.
Additionally, when you’d click on the cart it would slide in a pop-up window from the right of the screen and show this message. However, when you’d refresh the page, the cart and the cart icon would update as normal.
2.) Language
“The system should speak the users’ language with words, phrases, and concepts familiar to the user rather than system oriented terms. Follow real-world conventions, making information appear in a natural and logical order.”
Rating: 2 – Minor Usability Problem. Fixing this should be given low priority.
Some of the language, terminology, and navigation links had terms that were confusing or vague. For example, unless you knew about the Laramie Foothills Bison cause that the website is passionate about, you’d never know what “LFH Bision” meant in the header.
I ended up consolidating the header navigation to have Home, Apparel, Adventure Series (blog), and Impact. LFH Bison was renamed to Impact after having seen it called impact elsewhere in the site.
The footer was cluttered with terms, often leading to broken or incorrect links, which I’ll cover later. Social responsibility was a vague term that could have meant any number of things to a given user.
I removed this term, along with other non-essential links that I’ll cover later in the case study.
Another great example is some of the copy that the owner had placed on some of his product pages. This includes some of the copy you see here. What is Dark Heather? What is “4.5oz/y2”? What is shoulder to shoulder taping? All of these points were confusing and didn’t add any value to the product page.
I removed the bullet points that were confusing and moved them under this link which opens a lightbox of the image of the sizing guide. This applied to all products and freed up space on the product and home pages which were too cluttered by excessive copy.
3.) Consistency and Standards
“Users should not have to wonder whether different words, situations, or actions mean the same thing.”
Rating: 2 – Minor Usability problem. Fixing this should be given low priority.
There were two specific issues with consistency that stuck out to me. One was the footer, which I mentioned earlier. Most of the links listed connected to broken, or incorrect pages.
Here are some examples of where the links lead:
- Press room – some news station
- “Join” Our Team – just a list of team members
- Social Responsibility – how to become a blog contributor
- Shipping – the about page, which was a filler page
- Speaking Inquiries – lead to the about page
- Contact Us (arguably most important) – lead to the broken about page
After removing a number of broken or unnecessary links, this was the resulting footer.
An additional feature throughout the site that was helpful was the breadcrumbs. However, there were several pages such as the blog posts where the breadcrumbs were conspicuously missing.
This was a simple fix, but it needed to be done as it created consistency throughout the entire site, even the blog.
Also on the blog pages were this additional “main menu” that was hidden off to the right of the blog. The menu items were different than the global navigation and were oddly placed on the page where other information would be a better fit.
I removed the additional “main menu” and instead replaced it with a section so users could subscribe to the blog.
4.) Aesthetic and Minimalist Design
“Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with relevant units of information and diminishes their relative visibility.”
Rating: 1- Cosmetic Problem only. Need not to be fixed unless time is available on project.
Here are examples of needed aesthetic changes:
- Header- Its functional, but when scrolling, the header didn’t stick to the top and it was transparent so the page words were visible under the words. Additionally, it was originally only possible to get to the blog if you happened to click on the image on the front page, or you had clicked the drop arrow at the bottom of the parallax screen. Now, the blog has been added to the main navigation, and called adventure series so users can find it easier.
- Footer – entirely too cluttered and the majority of the users didn’t need most of the links. I also made the background black and made the links completely white instead of grey to add more contrast.
- Collections Page – several collections of items were placed on the back-end when they didn’t have products in them resulting in “no image” place holders on the live site.
- Product Page – had a “free shipping” and “collections” drop down that were collapsed by default. These could be removed. The product description that also had a size guide that could be hidden away. Because of the template his website is using, there was not a way to make the product copy on the home page different from the copy on the product page.
- Product Review Stars – most products did not have reviews so the review stars were empty. At this time, it would be best to hide the stars until more users had reviewed the items and then re-add the stars at a later time.
- Links- the links on all pages were a light grey color which provided minimal contrast to the white background. This link specifically to donate to the Bison project was moved to the impact page.
Next Steps
Currently, the issue with the cart not updating is being worked out. I’m working with several developers to fix the issue as the coding is beyond my skill set. Once fixed, the page will be updated to reflect it.