L.L. Bean: Redesign

Project Info: Fa21-GRAC-0007-CE-Web Design I, Individual Class Project

Project Type: eCommerce Website Redesign

Project Timeline: 1 week (December 2021)

Skills and Techniques: Rapid Prototyping, Wireframing, Presenting

OVERVIEW

Brief: Redesign the shopping experience for an eCommerce site using Figma. Reimagine the order experience to look like it belongs with the branding of the site as if it was plucked directly from it, including CSS design elements like color codes and fonts.

Background: L.L. Bean is a well-established retail company that sells casual apparel, outdoor gear, luggage, and home furnishing. It is an iconic brand known for high-quality outdoor apparel and gear, especially on the East coast. L.L Bean puts customers first and provides great customer service.

When browsing through potential eCommerce websites for my project, I was surprised to find that L.L Bean's website is not necessarily well-designed and there are areas for improvement in user experience. I thought the shopping experience and the overall layout and visual appearance could be improved to be much simpler, cleaner, consistent and visually appealing.

PROCESS

Stage 1: Discover

Branding: Website Style Elements

In order to retain the branding of the site in the redesign, I first looked at style elements like hex color codes, fonts, and padding. Using the Chrome extension CSS Peeper was helpful in inspecting different parts of the website and identifying the specific elements.

As a company that specializes in outdoor products, L.L Bean reflects that outdoorsy theme and feel on its website, with natural and earthy colors, greens, and oranges. With its iconic logo being dark green, different tones of green are used throughout the website in places like call-to-action buttons, headings, and as visual feedback, as observed on the image on the right..

Stage 2: Define & Ideate

Analyzing the website design and the user experience, I noticed some inconsistencies in style elements, especially with the colors and UI buttons. Below are some potential pain points and opportunities (areas that need improvement) in the UX-UI of the L.L. Bean website.

As identified above, 4 green colors with different hex codes are used throughout the website, which is unnecessary and could confuse the users. The color of the logo slightly differs from color of the headings, and a lighter green is used to provide visual feedback as users hover over links.

Note: L.L. Bean's current website has a different design than the version in December 2021, when I did my project. The screenshots below belong to December 2021

Stage 3: Develop

Below displays some changes I implemented to the original website for the main shopping page and the individual item page, including the design rationale.

Main Shopping Page

Not including rating star symbols under each product. This is redundant and uncommon with most eCommerce websites. Users can sort the products by clicking "Customer Rating" under the "Sort By:" dropdown menu if they want.
Placing the "Sort By: " dropdown Menu on the top right corner above the line instead of the top left corner below the line to make it more obvious and easy to click. Conventionally it is placed at the top right corner.
Making color options appear in squares on hover, not at all times to eliminate visual chaos. Most products have a minimum of 5 different colors and it is overwhelming to display them all.
Making "Quick View" appear when the user hovers over one specific product. There is no need to display it by default and affect the visual view.
Editing the "Shop by Category" and "Filter By" dropdown menus on the left-hand side to be more visually appealing and bigger in size. Visual feedback in orange (consistent with brand colors) and the appearance of the number icon based on the number of selections make it easier for the user to filter
Changing the shopping bag icon to be simpler, matching the conventional
Placing the "Search” bar at top right corner next to the bag as in most eCommerce websites, making it smaller and changing the color of the button to standardized green borrowed from the logo for all CTA buttons

Individual Item Page

Standardizing the orange color for clicked items
Making all CTA buttons the same tint of green borrowed from the logo, including the ”Add to Bag” button
Placing the product title and review stars above the price on the right
Removing the repeating information about Free Shipping
Making item and size squares easier to click with more obvious visual feedback when clicked
Shortening statements on "Reserve at a store” and "Save 15% with card”
Putting Size Chart hyperlink above, not below for better navigation and easier clicking
Putting quantity selection box near the “Add to Bag” button to eliminate an extra row.

Reflection

It was interesting to see L.L Bean has many inconsistencies within their website and some of their eCommerce website elements do not follow the conventions. The current version of the website in fact is less visually overwhelming and individual item pages are much more simplistic and plain. Seeing these changes L.L. Bean showed me that I was in the right direction.