Salt Life
Project Objective
In response to the escalating impact of COVID-19, Delta Apparel saw an opportunity to optimizing and redesigning its websites, including Salt Life.
My role:
Worked alongside the e-commerce team to ensure a functional and cohesive design.
Aimed to enhance the website’s content by creating wireframes and mock-ups to increase customer engagement utilizing Adobe CC.
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).
The Strategy
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.
Scope & Constraints:
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
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 Technology
Adobe CC Photoshop, XD, and Illustrator
Deliverables included:
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
Final Thoughts
This project was a fun and exciting challenge. After the redesign, I continued to support the e-commerce team by maintaining content and building responsive landing pages for site improvements and email campaigns. I also monitored user behavior and provided recommendations for future improvements to the website.
Final Mockup of the Product Description page.