Redesign the craft supply brand’s mobile and desktop interface with a user-centered focus on navigation, inspiration, and brand personality. Designed as a final project for FIT's User Interface Design certificate program.
UI Designer
• Project Brief: Challenges & Objectives
• Competitor Analysis, UX Research, Wireframes
• Mood Board
• UI Design: Prototypes & Interactions
• Design System
Figma, Photoshop
Joann's mission is to carry on the tradition of creating things and to inspire makers to find their happy place through superior assortments, presentation and service. The current site hosts a large array of products, tutorials and inspiration, but its cluttered interface, dated style and lack of focus is less than inspirational.
Highlight inspiration without clutter
Streamline content blocks and strip down imagery
Make the site feel like an in-store shopping experience
Reorganize navigation to create a clear path to products
Celebrate the recent rebrand
Infuse personality without losing practicality
After a taskflow study of the current site that included competitive research and user interviews, I reworked the pages from homepage to product search to cart to help users find what they need through direct search and filtering. To align with the brand's mission of inspiration and learning, I integrated tutorials and project ideas throughout the flow.
With cues from Joann's recent rebrand focused on expression, authenticity, and boldness, I overhauled the site styling with my moodboard as my guide. With new type, color and visuals, the site is going for confident, juicy, geometric and artful.
My design solutions fell into 3 buckets that addressed the project's challenges and objectives:
Reorganize hamburger menu: add a Shop by Activity path to mimic in-store product layout:
Add more robust filter and sort options:
Include sections for personalized product recommendations:
Condense sale and deals content blocks into one section; highlight internal ads and brand spotlights in a horizontal scroll; and distinguish products vs. tutorials with You Can Do It cards:
Add playful interactions to headers with color, stickers and shapes:
Show off brand identity with a photo edit that respects new lifestyle tone and color direction:
Turn product info copy into a visual guide with conversational UX copywriting and how to tips:
Friendly typefaces, a modern color palette and custom icons and shapes make up the reference library for the brand's new visual identity.
