Role
UX/UI Interaction Designer
Timeline
2014
TOOLS
Call it Spring has always thrived to stay ahead of the curve with its innovative products, marketing strategies, brand development, and design. The creative direction is distinctively bold and beautiful, and the SS14 collection was no different.
Understanding our target users—young, trend-conscious individuals looking for affordable, stylish footwear—was foundational to our redesign. Our goal was to create an intuitive, visually appealing experience. Leveraging CMS data, user feedback, and click analytics helped us pinpoint strengths, gaps, and improvement areas to boost engagement and sales.
Conducted extensive surveys and questionnaires, click-pattern analysis (including heatmaps and click-through rate), and data evaluation to assess the effectiveness of newsletters and website campaigns and competitive analysis highlighted key market trends. Used insights to inform iterative design improvements.
• Collaborated closely with the design director to ensure the designs aligned with the brand’s bold, vibrant aesthetic.
• Added interactive carousels and expanded product listings on the accessories page to showcase a broader range of items, boosting engagement.
• Another goal was to have a layout that would feature more products, be flexible, and still look good when certain sections were hidden.
• Explored wireframes and repositioned elements to ensure flexibility.
• Below are some initial wireframes created in Axure as a study to help us visualize our solution until deciding on a final direction.
Created Axure wireframes and high-fidelity mockups, exploring a 3D, animated button style that brought the Call It Spring website to life. Designed animated transitions so that buttons and elements would smoothly "pop" or rise on page load, adding a playful, on-brand touch that resonated with our audience. Integrated a clean layout with 3D outlines on CTAs and price tags, complementing the SS14 theme with 8-bit and pastel visual cues. Ensured flexibility in the layout so it maintained visual appeal even when specific sections were hidden. Included updatable banners, a product carousel, and feature images to accommodate sold-out items.
• Visual Hierarchy: Created a clear visual hierarchy to guide users’ attention to key elements such as CTAs and featured products. This principle ensures that users can easily navigate the site and find what they’re looking for.
• Consistency: Ensured a consistent design language throughout the site, aligning with the brand's bold, vibrant identity. This approach helps users feel familiar and comfortable while exploring.
• Accessibility: Designed with accessibility in mind, ensuring that the website is usable for all individuals, including those with disabilities. This principle is essential for expanding the user base and enhancing overall user satisfaction.
• Feedback and Animation: Incorporated animated transitions for buttons and interactive elements to provide visual feedback, making the experience more engaging. For instance, buttons smoothly “pop” or rise upon page load, capturing attention and enhancing usability.
Below are some other examples of the final UI. Since the mock-ups were high-fidelity and made the real size of the website display it allowed the front-ends to integrate at a quicker pace which in turn gave us time to do some fine tuning and edits to the animations on the UI.
Have a project
Let my expertise as a seasoned product designer transform your ideas into standout designs. I specialize in bringing innovation and functionality to the table, ensuring your project surpasses expectations.