MJ Park

RE.UNIQLO X FIT

Responsive UI Design

Designing a live RE.UNIQLO X FIT landing page

Duration

12 weeks

Tools

Figma, Miro

My team

MJ Park (Designer), Joseph Staluppi (Creative Director), Andrew Grechko (Art Director), Jean Shein (Uniqlo Marketing Manager), Puriya Mirzamohammadi (Uniqlo Developer), Tomohiro Yabe (Uniqlo Developer)

My role

Wireframing, UI Design, Design System, Prototyping

Overview

Objective

  • With the RE.UNIQLO initiative, UNIQLO aimed to engage Gen Z by focusing on waste reduction and sustainable fashion practices, shifting their image away from fast-fashion toward a more eco-conscious brand identity through a compelling campaign.

Opportunity

Task & solution

  • Design and prototype a user - friendly landing page for RE.UNIQLO X FIT DTech Lab collaboration, focusing on attracting potential customers. Develop a design system that ensures consistency, clarity, and efficiency across the entire page helping users quickly understand and navigate the site without confusion.

Responsive design

We paid special attention to breakpoints and screen resizing throughout the design and development process, optimizing the website for every screen. Given that most users will access the site via QR code from posters at the 5th Avenue flagship store, we ensured seamless mobile accessibility and a responsive design.

Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1
Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1Image 1

Hero section

The hero section offers a concise snapshot of the project, with a 'Learn More' button inviting users to explore additional details if they're interested.

RE.UNIQLO X FIT

  • Dive into the RE.UNIQLO X FIT collaboration between FIT students and UNIQLO. Scroll through a dynamic carousel that highlights each stage of the project for a detailed look at our initiative.

Designers & Collections

  • Explore the unique collections by FIT student designers, each reflecting their creative vision and distinct approach for this project.

How to style

  • Discover how to pair our collection pieces with your UNIQLO wardrobe. Simply click the + modal for detailed information on each item.

Design system

We aim to create a clear and simple design system that ensures all content is easily accessible and understandable for users.

    Impact

    • The landing page was published and a QR code for access was prominently displayed for a week at UNIQLO’s flagship store on Fifth Avenue in New York, attracting over 10,000 visitors daily.

    Reflection

    • Through this project, I learned how to work with various stakeholders, including PM, developer, director of global corporate social responsibility, and social media manager. I continuously presented design iterations and received feedback, which improved my communication skills. I particularly focused on responsive design and created a centralized, comprehensive design system. This allowed us to maintain a consistent design across various sections and screen sizes, ultimately enhancing the user experience.