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
- 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.
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.
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.
Stores & 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.
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.
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