Todd Shelton: Tailoring E-Commerce for Custom Menswear
- The Brief
- Redesigned e-commerce website to update brand vision and improve user experience.
- My Role
- UX/UI Design
Overview:
Todd Shelton is a men's clothing manufacturer selling exclusively through their website. They offer jeans, pants, shirts, and T-shirts in standard and custom sizes. As the UX/UI designer, I was tasked with redesigning their e-commerce website to align with their updated brand concept.
Problem:
The client's existing website didn't reflect their updated brand vision or effectively showcase their emphasis on individualized clothing options. They needed a redesign that would streamline the user experience, highlight custom sizing options, and simplify the purchasing process.
Solution:
I created a comprehensive redesign of the website, incorporating new functionality such as user accounts and an enhanced product page featuring new sizing and shipping options. The design focused on balancing the client's brand vision with user-friendly content presentation.
Design Process:
-
Research and Analysis:
I began by conducting competitor research, analyzing site structures, page layouts, and features of similar e-commerce platforms. I also collected design references from both global and local clothing brands to inform my approach. This research was crucial in conceptualizing the implementation of new features like user accounts.
-
Prototyping:
I created a site map to establish the overall structure and hierarchy of pages. I then developed wireframes (low-fidelity prototypes) for each page, focusing on user flow from the main page through product selection, customization, and checkout.
-
UI Design:
Based on the approved wireframes, I created high-fidelity prototypes of each page. I selected a restrained color palette, primarily using shades of gray with bright colors reserved for warnings, to appeal to the male target audience. The design was crafted to complement the client's high-quality product photography.
-
Design System and Developer Handoff:
I created a comprehensive design system for the site, ensuring consistency across all pages. Next I developed interactive prototypes and animation references to guide the development team. I also prepared responsive layouts using a grid system to facilitate a smooth development process.
-
Collaboration and Refinement:
Throughout the development phase, I consulted with developers and testers, addressing any issues that arose. I conducted regular design reviews to ensure the developed pages aligned with the intended structure and functionality.
Challenges:
- Balancing the client's brand vision with user-friendly design principles
- Optimizing the product page to guide users effectively towards purchase
- Designing an intuitive interface for custom sizing options without overwhelming users
- Working within technical limitations to prioritize functionality over complex animations
Result:
The redesigned website successfully aligned with Todd Shelton's updated brand vision while significantly improving user experience.
Key improvements included:
- Streamlined user flow from product discovery to purchase
- Intuitive presentation of custom sizing options
- New user account functionality for improved customer engagement
- Enhanced product pages showcasing clothing details and delivery options
The new design effectively conveyed Todd Shelton's emphasis on individualized clothing without overcomplicating the interface. By prioritizing clean, clear design and familiar interface elements, we created an e-commerce platform that not only met the client's expectations but also provided a seamless shopping experience for their customers.
Tools
- Figma
- Illustrator
- Photoshop