Client Background

Sirloin is a Shanghai-based fashion label, designing underwear and other women’s wear with a philosophy of “stupid elegance”.

The Brief

  1. Build out page layouts in cooperation with Sirloin’s graphic designer and creative directors.
  2. Advise on screen-related design issues such as image sizing, fluid layout, and mobile versions.
  3. Provide input for navigation, transitions, animations, and related UI/UX issues.
  4. Integrate an existing ecommerce backend with new custom frontend designs to be provided by Sirloin.
  5. Provide ongoing China-based hosting, maintenance, and support.
  6. Provide content updates (mainly new collections and news) on a quarterly basis.

The Brand

Existing brand guidelines were provided by the Client, along with page mockups in .ai format.

Strategy + Key Directives

Design

From Client’s original mockups, bring a highly stylized graphic design concept to life on the screen.

Development

Create a custom backend for page content, and integrate an existing platform for ecommerce.

Support

Guide Client through the process of ecommerce product management and order fulfillment.

Scroll-Triggered Scene Animation

Each scene consists of 3-4 elements, each animated in and out of the screen in up to four steps, all controlled by the user’s downward scrolling.

“Scatter” Page Transition Animation

Upon navigating to another website section, all elements instantly “scatter” out, with their trajectory and speed calculated based on their relation to the screen’s center. Elements also “scatter” in based on their starting position in relation to the screen’s center.

Collection Photos + Videos

One slideshow and video for each season, animated in and out in sequence.

Custom Online Shop

Custom designed and animated shop listing page, and individual item page with custom options, product info, related products, and more.

Integrated Checkout + Ecommerce Platform

Inventory management and the checkout process are API-integrated with Shopify, a leading ecommerce platform. Once an order is placed, the client can manage the payment and fulfillment process through Shopify’s backend.

Services Provided

Design + Frontend

  • UI/UX Component Design
  • Responsive Web Design
  • Frontend Development
  • Illustration + Photo Editing
  • Custom Animation

APIs, Data + Backend

  • Custom Backend Development
  • Embedded Videos (Wistia)
  • Ecommerce Integration (Shopify)

Support

  • Website Hosting (China)
  • Ongoing Maintenance + Support
  • Technical SEO
  • Google Analytics Installation
  • Cross-Browser Testing
  • ICP License Application