L.L.Bean Quick Tips
In this project, I worked with the senior graphic designer and senior designer at L.L.Bean to create a “quick tips” module to include in the new templates for articles. In the spring of 2022, the team began redesigning stories on the Get Outside Guide but did not consider the quick tip callouts because they do not appear in every article.
Brief
This project’s scope was to create a template that utilizes hierarchy to draw readers’ eyes to quick tips. Quick tips are included in several stories in the Get Outside Guide, and they help readers succeed in their outdoor activities.
I was responsible for providing options for my team to choose from for implementation. The design needed to be visually appealing, simple enough to build in FirstSpirit, the CMS we were working in, and applicable to every story.
Ideation & Exploration
I researched other blogs to see if they included tips in their posts and found that some do while others do not. Those that do often call out their tips using unique colors or icons. I found the icons very effective and began considering how I could apply this to this project. I first experimented with the magnifying glass because the quick tips often take a closer look at a concept or clarify it.
If we did not choose to use an icon, I considered other ways we could call out the quick tips. I decided another option could be to use a vertical rule that would draw the eye but has less potential for distraction than an icon.
Design Process
I began making compositions based on icons, a vertical rule, and a combination of both.
Icon composition
Vertical rule composition
Combination composition
After presenting this to my team, we brainstormed some other icons that could work and experimented with a flashlight and a lantern because they shed light on something, like the purpose of the quick tips.
I also received feedback asking to include some inspiration from the original quick tips in the new layout. Because the original used a grey color block behind it, I experimented with the same concept but using L.L.Bean colors. When presenting this at the second round of revisions, I noted that this layout resembles ad banners on many websites, so it was quickly dismissed as an option.
Icon composition
Vertical rule composition
Combination composition
The vertical rule was a popular choice, but my team was concerned that we would not be able to build it in FirstSpirit. I built an example to assure them that it could be done with CSS, but we decided against it because we would have to have the web development team build a module in FirstSpirit, which would take too long.
With the color block and vertical rule eliminated, my team and I were left with the icons option. After reviewing the flashlight and lantern, we decided to move forward with the lantern because it is more visually appealing and works better in the space.
Results
The outcome of this project was a template for a quick tips callout applied across the Get Outside Guide.
