With large retailers like Amazon breathing down their neck, other retailers have to make some changes to keep up. REI is looking to design a new version of their e-commerce site. After looking at the site, one question prevailed: “How can I figure out how to re-design an already fantastic site?”
100 items were taken from the REI site and put into a closed card sort. We tested a total of 3 users. The users are given the cards, and different categories to sort the items into. The main findings we gained from this method is that REI has a lot of niche stuff, that many people don’t know how to sort into the given categories, and ended up putting a lot in “miscellaneous” because they either
a. didn’t know what the item was, or
b. didn’t know where to sort it with the categories provided.
REI's existing Site-Map will help give you an idea of the feature bloat that we were dealing with. 13 categories stretched out across the top with multiple subcategories for the user to click through. From this sitemap, the problem became more clear. There are too many options for the user to sift through. While the site is very thorough with their menus, these menus overwhelm the user and make the site seem to cluttered and dense.
REI has a beautiful website. They are also a great company working towards the common good just as much as the bottom line. But how can we change the site to make it even better? To keep moving towards a solution, we needed to dissect the sitemap.
To back up this theory, user testing was conducted. This proved that, yes, the amount of content in REI’s menus are too daunting to search through. I gave them the task of clicking into the Hike and Climb section and buying a backpack. While both were able to do it, they had a hard time picking through the categories. Just too many options! Beautiful options…
“I’m not sure what I’m looking at here…” Kevin, 32 Avid Outdoorsman
“No mention of the Petition for Zinke but it’s all over their Instagram page…” Danielle, 28 Graphic Designer
Out of the 14 menu categories in the top navigation bar for the e-commerce side of the site, these needed to be condensed into no more than 7 categories. This will make the landing page look cleaner, and easier to navigate. But the subcategories in the actual menus needed to be condensed further as well. Most users found that, although the site was very welcoming and colorful, they had to scroll through a lot just on the first page to see everything that REI had to offer. The most important things needed to be shown at the top of the fold, or people just weren’t interested in scrolling down. But they’s be more inclined towards a side scroll. To help visualize the new design, wireframes were created.
Landing page and main menu went from images on the left, to images on the right.
This video shows the user flow of the REI site re-design. This hi-fidelity prototype was created using Sketch and Craft extension for Invision. The top navigation was changed, and menu items re-organized and slimmed down to reduce feature bloat. New pictures, and logos were created, and the home page scroll was shortened.
"Dealing with man's relation to land and the animals and plants which grow upon it." Leopold Aldo, Environmental Conservationist