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 collaborated with the e-commerce, marketing, and development teams to design dynamic landing pages for product, category, and content sections.
My role
Worked within the e-commerce team to ensure a functional and cohesive design.
Designed wireframes and mockups to increase customer engagement, working across Adobe Creative Cloud, Magento, and Hotjar
Build and publish pages through the CMS, while the development team handled global template updates.
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 and Constraints
Collaboration was crucial to the success of this project. I worked closely with the marketing team, e-commerce team, developers, and other stakeholders to design dynamic landing pages for product, category, and content pages, all with the goal of enhancing the user shopping experience.
Brand Consistency: Ensured the redesign adhered to the brand’s style guide and aligned with company offerings.
CMS Limitations: Worked within the technical constraints of the existing Content Management System (CMS).
Responsive Design: Developed a design that was fully responsive across desktop, tablet, and mobile for optimized user experience.
Final mockup of the megamenu's top category landing page.
Design Solution
The original Salt Life site didn’t fully showcase the brand’s vibrant community or product range. The redesign aimed to create a sleek, engaging site that highlighted community connections and made it easy for users to find products and content.
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 both mobile and desktop experiences (except for navigation bar and footer)
High-fidelity mockups with visual elements
CMS-based landing pages, created with HTML/CSS where needed
I used Adobe Photoshop and XD to design wireframes and mockups and collaborated with the development team on global template updates, including the blog article page layout. I also created a functional specification document detailing the features of each page.
Final mockup of the About Us landing page
Conclusion
After the redesign launched, 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.