Joyce

Revamping the online identity of Hong Kong's most famous and respected fashion retailer.

  • Responsibilities: Creative lead, frontend & backend development
  • Technologies: WordPress, ACF, jQuery
  • Timeframe: April 2014 – February 2015

Highlights

  • Multi-language responsive website
  • Compatible with IE6 and above
  • Custom WordPress plugin for unique grid design
  • Relational and inter-connected stores and brands directory

For this project I was responsible for creative direction, all design work, and all frontend development.


Joyce is one of Hong Kong's most famous and respected luxury retailers, and they needed a new online identity. The task was to redesign their website from the ground-up for the modern internet. At the time of development up to 30% of users in China still used Internet Explorer 8; ensuring cross browser compatibility while maintaining a pixel-perfect design appropriate for such a prestigious brand was a fundamental and challenging goal of the project.

I designed the website with Joyce's brand in mind: simple yet striking. The colour palette consists entirely of blacks and whites, acting simply as the monochrome canvas for the world of colour stemming from the evocative photographs and vibrant illustrations featured prominently throughout each page. Exclusive use of uppercase sans-serif typefaces mixed with simple shapes and hairline borders frame the website with a chic contemporary look.

Screenshot of the front-page of the website.

The majority of fashion websites developed at the time featured simple front-page designs comprised of a full-screen video with basic text and links to the rest of the site. Joyce wanted theirs to be different and unique, while still being able feature large images or videos.

I developed a responsive grid design where each cell or a range of cells feature an image or video as well as hyperlinks. A custom WordPress plugin was also developed that allowed for images, videos, and hyperlinks to be uploaded and placed in single grid cells or across multiple cells, allowing the client to easily decorate and manage the grid sections.

Screenshot of a section landing page, showing the header grid.
Each sub-section of the website features its own small grid layout, unique to that section.

Sub-sections of the site – fashion, beauty, and art – feature their own unique page designs, focusing on what's important for that section. Fashion pages feature large paragraphs and full-width images, beauty pages feature links to product pages and information, and art pages feature interactive image galleries.

Screenshot of a feature article.
Videos on the website use the HTML5 video API, with a lightweight Flash video player fall-back.

Stores and Brands

The stores and brands page contains a searchable and filterable directory of relationally-connected list of stores and brands, displaying what brands are stocked in which stores and where each store is located in each country.

Screenshot of brands being filtered in the stores and brands directory page.
A grid of letters fades in and out as brands are filtered in real-time.
Screenshot of a store page.
The stores directory contains information such as opening times, contact numbers, and store address.

e-Shop development

Several mock-ups and proof-of-concepts were designed and developed for a second phase of development. The aim was to implement an e-commerce platform with Magento and integrate various features across the site.

Features included a site-wide shopping basket, real-time tracking of online and physical store stock and inventory, membership and loyalty program management, native iOS and Android store-app development, and more.

Image showing the design mock-up for the e-Shop front-page. Image showing the design mock-up for the site-wide e-Shop shopping basket.

Careers Site

The careers website had to also be re-designed. However, the website was hosted by a third-party vendor, which allowed only a single stylesheet to be uploaded without any modification to the HTML or JavaScript. Simiarly to the main website, cross-browser support had to be provided for IE6 and above.

For the main website we used JavaScript libraries such as Respond and Selectivizr as polyfills for CSS3 features such as media queries, calc sizes, and integer/operator/pseudo selectors. Without support of custom JavaScript, ensuring a cross-browser compatibility responsive design with only a single stylesheet for pre-determined HMTL was a huge challenge.

We overcame this by extensive use of perctange size units, display: table, and table-layout: fixed to enable a responsive design, with a mixture of both fluid and fixed-sizes elements (with the added bonus of easy vertical alignment using vertical-align: middle).