Soffe

Project Objective

In response to the escalating impact of COVID-19, Delta Apparel saw an opportunity to optimize and redesign its websites, including Soffe.

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.

To view the mockups, please click on the images below:

The Strategy

Collaborated with a cross-functional team—including SEO experts, email marketers, a product manager, and developers—to create dynamic landing pages for product, category, and content sections, aimed at improving site navigation and enhancing user shopping experience.

Key Responsibilities and Challenges:

Team Collaboration: Partnered with e-commerce, marketing and development teams to ensure cohesive updates across the site.
Brand Consistency and CMS Constraints: Ensured consistency with the brand style guide and adapted redesign to fit within existing CMS limitations, including aligning category pages with the CMS's architecture.
SEO and Performance Focus: Preserved SEO performance while optimizing page-load times for better user retention.
Responsive Design: Designed mockups for a fully responsive design across all devices.

The Design Solution

The existing site was difficult to navigate, the goal was to highlight Soffe’s products while improving the shopping experience. I began with a detailed website audit to analyze user interactions, focusing on metrics like browse depth, page views per session, and user demographics to understand the target audience better.

Based on these insights, I sketched wireframes and created mockups that reorganized information into clear, digestible sections. For desktop and mobile layouts, I used a 12-grid and 6-grid system, respectively, to maintain balance and consistency. The design featured image-centered banners, eye-catching headers, and interactive elements (e.g., dropdowns, tabs, icons) to enhance usability and guide users towards driving sales.

The Technology

Adobe Photoshop, XD, and Illustrator

I pot together a range of deliverables for the redesign, including:

Hotjar heatmaps to analyze user interactions.
User personas to ensure the design met the needs of the target audience.
Wireframes to define the structure and functionality for both mobile and desktop experiences. The navigation bar and the footer were provided by the marketing team.
High-fidelity mockups to visualize the final designs with typography, color schemes, and responsive layouts.
A technical specification document detailing the functionality and image requirements for developers, ensuring that the designs were both feasible and aligned with the CMS limitations.

I also supported the e-commerce and development teams with UI testing, working with the development team to ensure the final site met usability standards, visual design goals, and WCAG 2 accessibility compliance.

Final Thoughts

Being part of Soffe’s website redesign was both a challenging and rewarding experience. I enjoyed collaborating with the cross-functional team to create a sleek, modern, and user-friendly e-commerce website. The opportunity to support the product manager with UI testing deepened my understanding of cross-team workflows and reinforced the importance of responsive, accessible design in modern web development.