Erin Condren Storefront

A refreshed storefront for Erin Condren that is modern and easy to navigate. The goals were to have clear hierarchy, a cohesive style, easy navigation and a mobile friendly experience.

Erin Condren Storefront
The Erin Condren site had many issues that resulted in a sub-par user experience. New customers didn't get a good sense of what the brand sells or what their story was. Returning customers had a hard time finding what products were new, what was on sale and just navigating the site as a whole. I made a list of the issues I had to solve for the Erin Condren storefront to solve these issues.​​​​​​​
Problems to Solve
The Erin Condren site had many issues that resulted in a sub-par user experience. New customers didn't get a good sense of what the brand sells or what their story was. Returning customers had a hard time finding what products were new, what was on sale and just navigating the site as a whole. I made a list of the issues I had to solve for the Erin Condren storefront to solve these issues.

• Too Confusing: The homepage lacked a sense of hierarchy. When users landed on the page, how could they tell what was important? Everything was a similar size, with different colors and typefaces that made it hard to focus on any one thing.
• No Cohesive Style: The different designers at Erin Condren didn't follow one style guide so multiple competing fonts, colors and photographic styles were used that resulting in a chaotic style. 
• Poor Navigation: The navigation featured multiple, tiny icons in various colors with no sense of what actions were important. The navigation categories were hidden away in a push menu, so new users were unable to see what products Erin Condren carried at a glance. This also meant an extra click before any customer could start shopping. 
• Poor SEO & Mobile Experience: The promotions on the homepage were flattened, unoptimized images that provided no SEO value and became illegible on mobile screens. ​​​​​​​
The Old Storefront
Goals
Overall the storefront needed to be more concise, modernized and refreshed. The typography and spacing were mismatched and uneven. There was a lack of a focal point and on first visit, it was hard to get a sense of what Erin Condren sold. Even finding simple things like the notebook category or where to create and account were unnecessary hidden. Though the use of white space, multi-sized responsive blocks and an established style guide, the goal was to make everything much easier for our customers.

• Clear Hierarchy: The main goal of the home page is to have clear hierarchy. New product releases, promotions, and secondary products will be seen in that order. Type size, image size and placement on the page will smoothly guide users from most important news to lesser ones. 
• A Refreshed & Cohesive Style: Establishing a style guide for the home page with header, paragraph, link and button styles that all designers must follow will elevate the storefront to match the quality of the products Erin Condren sells. 
• Easy Navigation: The navigation would be a traditional horizontal navigation, with all top categories visible on load. Hover menus with subcategories with supporting images will result in a quick and easy navigation experience.
• Mobile Friendly Experience: With a high percentage of users visiting the Erin Condren site from mobile devices, the new storefront needed to be responsive. ​​​​​​​
Full Storefront Design
Navigation
The new navigation featured all of the main categories at the top of the site. This gives new customers a solid understanding of what products Erin Condren carries. On hover, subcategories appear in easily scanned columns. To the right are image blocks that allow specific products to be featured and gives customers a visual understanding of what this category contains.​​​​​​​
Horizontal Navigation Bar + Columned Subcategories
Responsive Block Layout
For a layout that works from desktop to mobile, the new storefront featured rectangular blocks. The main focus is the large hero at the top that is used to promote new products and important promotions. Lesser promotions are right underneath the main hero to drive users to our sales. Underneath these are more informational blocks, with large blocks of imagery to showcase new or featured products and to give users a break down of what products are available. ​​​​​​​
Featured Product Scroller to Promote Old & New Products
Mobile Friendly
The mobile sites now featured live text so that headlines and descriptions are readable on even the smallest devices. To showcase the large product line up, a push menu is used for navigation on devices smaller than a tablet. For easy access, the main categories are promoted on mobile devices separately from the push menu.
Summary
The new site is more modern and easier to navigate. New customers have a clear understanding of what the brand sells and returning customers are able to see what's new and on sale quickly. Rather than a plethora of sales right from the get go, the new storefront features beautiful imagery to sell products instead. This results in a better first impression that showcases the heart behind the products instead of the price cuts. 
Lessons Learned
The old storefront was cluttered and out dated. While staying true to the established brand style, the new design brought simplicity and ease of use to the forefront. 
Modern UI can be brought to an established brand: The large photographs allow the brand style to shine, while simpler typography and navigation results in an easy to use eCommerce experience. This allows the established brand style to still be the focus and the simple UI to be clean and concise.
Photography is the best tool to sell product: Our visitors are highly visual, and details written out in paragraphs are often missed. The new storefront gives our customers the information they need with photography more than anything else.

Back to Top