Erin Condren Storefront

UI/UX, Web Design, Branding

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 sold or what their story was. Returning customers had a hard time finding what products were new, what was on sale and navigating the site as a whole.
Problems to Solve
• 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 icons in various colors with no clear hierarchy. 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
The storefront needed to be more concise, modernized and refreshed. The typography and spacing were mismatched and uneven. 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 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. 
• 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 sales. Underneath these are informational blocks, with large images to showcase new or featured products.
Featured Product Scroller to Promote Old & New Products
Mobile FrIENDLY
The mobile site now featured live text so that headlines and descriptions are readable on 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 a lifestyle 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