UI Redesign: Joann.com

joann homepage desktop and mobile mocks


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

How can we make Joann.com into a destination for the next generation of makers?

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.

joann current site homepage



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

arrow down

Reorganizing page content to help the user navigate

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.

desktop wireframes
arrow down

Taking the visual language in a new direction

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.

moodboard with modern imagery
arrow down

Solving problems with design

My design solutions fell into 3 buckets that addressed the project's challenges and objectives:

1. Create clear paths to products

Reorganize hamburger menu: add a Shop by Activity path to mimic in-store product layout:

mobile hamburger menu

Add more robust filter and sort options:

filter menushop by yard weight slider

Include sections for personalized product recommendations:

just for you and shop by activity sections

2. Focus content blocks

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:

joann mobile wireframes

3. Infuse personality

Add playful interactions to headers with color, stickers and shapes:

homepage menuservices animation

Show off brand identity with a photo edit that respects new lifestyle tone and color direction:

joann redesign UI

Turn product info copy into a visual guide with conversational UX copywriting and how to tips:

what to know slider
arrow down

A design system that reflects a new brand direction

Friendly typefaces, a modern color palette and custom icons and shapes make up the reference library for the brand's new visual identity.


joann typography

Mobile Typescale

joann mobile typescale

Desktop Typescale

joann desktop typescale

Color Palette

turquoies navy purple orange peach lilac white grey color palette


joann gradients


joann buttons


site icons vectors stickers

Mobile Cards

joann components

Desktop Cards

joann components

Grid System

joann grid