Salt Life E-commerce Redesign
Project Context
When COVID-19 accelerated the shift to e-commerce, Delta Apparel prioritized redesigning its websites, including Salt Life. I designed and built dynamic landing pages for product, category, and content sections.
My role
As Web Content Specialist, I was the only person designing on-site pages, collaborating with merchandising, SEO, and email marketing, where a separate designer handled email creative.
Designed wireframes and mockups across Adobe Creative Cloud, Magento, and Hotjar.
Built and published pages through the CMS, while the development team handled global template updates.
Built custom sections in HTML and CSS where the CMS’s predefined blocks couldn't support the layout a page needed.
Prioritized accessibility by incorporating WCAG-compliant color contrast, adding descriptive alt text, and ensuring clear, intuitive labeling and language.
Final mockup of The Daily Salt blog, from recipes to workouts, customers can catch up on the latest ways to keep livin' the Salt life. Additionally, I mocked up the internal blog pages (not shown).
Scope & Contraints
The redesign had to work within existing brand and technical requirements, which shaped how the page system was built.
Pages had to be fully responsive across desktop, tablet, and mobile.
The design had to adhere to the existing brand style guide and align with company offerings.
The CMS restricted layout flexibility, requiring pages to be assembled from a fixed set of predefined blocks.
Final mockup of the megamenu's top category landing page.
Design Solution
The existing navigation dropped users directly into product listing pages, with no intermediate step between “Mens” and a wall of products. I designed new mega menu main category landing pages, so users could land on a page that oriented them first, a hero, curated sub-category tiles, and product carousels, before committing to a grid. On mobile, the mega menu was a full list to scroll through and replaced it with a collapsing accordion to let users expand only the category they wanted.
Within those layouts, I placed conversion paths inside the browsing experience rather than isolating them at the end of the page, product carousels and the rewards program signup sit between category tiles, where users encounter them mid-scroll.
Working with merchandising, marketing, and SEO, I redesigned the About Us page with stronger visual content to increase time on page, and added internal links to related product pages to support search visibility and move readers toward products.
For accessibility, I checked layouts against WCAG contrast standards using accessibility validation tools, wrote descriptive alt text for images, and used clear, intuitive labeling throughout.
I designed each layout as wireframes and then high-fidelity mockups, with review cycles involving the e-commerce team and the VP.
Wireframes & Mockups
I collaborated with the team to design wireframes for the following pages:
About Us Page
Above and Below: A Salt Life Podcast Page
Category Page
Product Landing Page
Wireframes
Final mockup of the Above and Below: A Salt Life Podcast landing page.
The Tools & Platforms
Deliverables
Wireframes for mobile and desktop experiences (excluding navigation bar and footer)
High-fidelity mockups with visual elements
CMS-based landing pages, built with custom HTML/CSS where needed
Functional specification documents detailing the features of each page
Blog article page layout, delivered to the development team as a global template update
Tools and Platforms
Design: Adobe Photoshop, Adobe XD
Platform: Magento (CMS)
Analytics: Hotjar
Development: HTML, CSS
Final mockup of the About Us landing page
Conclusion
The redesigned pages improved engagement and click-through rates, and templatizing several of the layouts made recurring page types faster to produce as new campaigns came up. After launch, I continued supporting the e-commerce team by maintaining content, building responsive landing pages for site improvements and email campaigns, and monitoring user behavior to recommend future improvements.
Final Mockup of the Product Description page.