Revamping the online identity of Hong Kong's most famous and respected fashion retailer from the ground-up. View Site »
- Responsibilities: Visual & System Design, Frontend & Backend Development, UAT, eShop Mockups
- Timeframe: 4th April 2014 - 12th February 2015
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, using a unique responsive design and extensive cross-browser compatibility, all driven by a powerful backend.
Most modern fashion websites feature full-screen videos or carousels on their home page. While the result can be eye-catching, it can also suffer from various problems. Full-screen home pages are usually limited to displaying only one piece of content at a time, particularly with carousels where additional content is hidden behind user-input. Full-screen videos have also become more popular, and while they can be very engaging they can also have a significant impact on network and CPU/GPU performance, making viewing and using the website an unpleasant experience.
Joyce is made up of three primary departments; fashion, beauty, and art. Each of these department’s content are equally as important as each other, meaning that using a full-screen home page design would hinder all three departments from being shown together. Figuring out a way to feature content from each of these departments evenly, while presenting it in a graceful and interesting manner without hindering user experience was a significant design challenge. Furthermore, content from each department all have a unique focus (e.g. content from Beauty would focus on beauty products, whereas Art content would focus on exhibitions), therefore different styles for each department would have to be developed while keeping them consistent with the design language of the overall website.
Another challenge was the approach to creating an easy-to-use system for searching through the many stores and brands that Joyce manages. For users, the system had to be intuitive and fast, making it easy to search and filter through a long list of stores and brands without much effort. For the CMS, managing the stores and brands, as well as their connections, had to be simple and easy to manage.
Lastly but equally as important, support for cross-browser compatibility was vital to the project. Although Joyce's influence spans the world, its roots come from Hong Kong. Up to 30% of users in China still use Internet Explorer 8, therefore solid cross-browser support was a fundamental goal of the project.
In order to overcome the problem of featuring content from the different departments of Joyce evenly, the front page features a large grid. Each grid cell can feature its own image or video or a single image stretched across multiple cells. Each cell can also include its own hyperlink, and cells that include the same hyperlink all darken at the same time when hovering over any one of them.
Allowing each cell to be customised individually can result in some very engaging and eye-catching images, particularly thanks to Joyce's talented photographers and illustrators. The black bars in-between each cell gives the illusion of peering through a window, as well as giving a consistent, coherent visual structure to the entire grid; it holds the users' attention for long enough without creating too much visual noise or confusion.
The use of a grid-based layout allows the home page to highlight a variety of different content without creating a chaotic and confusing visual hierarchy. Furthermore, being able to contain a number of different images and videos in one single structure overcomes the problems faced by carousel and full-screen designs.
The landing pages for the Fashion, Beauty, and Art sections feature their own fully customisable header grids, similar to that on the home page. Each department can contain different types of stories, such as news and guestbooks, features for Fashion and Beauty, and exhibition locations for Art, all of which can be filtered and searched through. "Infinite scrolling" is used to dynamically load in new stories as the user nears the bottom of the page.
Each different type of story uses a unique design depending on the department that it originates from. This is done in order to emphasise particular content that is important to each department, while staying within the design language of the website. For instance, Fashion stories use full-width images, videos, and wide paragraphs to present content in an editorial fashion. Beauty stories use large carousels to highlight multiple beauty products. Art stories feature interactive image galleries to preview exhibitions.
To tackle the stores and brands part of the website, we developed a WordPress plugin that creates global relationships between defined stores and brands. Users can click on a brand to reveal which stores it is currently stocked in, and clicking on a store will take the user to the store’s individual page. Alternatively, users can also browse stores by their locations and type.
The directory page also includes live searching by using some simple client-side
regex testing. As the user types, results from the list become hidden in real-time, and when a letter's row has no results to show, the row hides automatically. At the same time, letters in the the letter grid on the sidebar (which when clicked scroll the user to the letter's respective row) fade out, showing the user which rows are currently being hidden. We found this incredibly useful in improving the user experience, showing users which rows were still visible beyond the view of the current viewport.
Individual store pages contain important information such as telephone numbers, addresses, opening/closing times, and coordinates for the Google Maps API-powered map. Brands that have been defined in the CMS can be linked with any of the created stores, and these links will persist throughout the entire website and are automatically managed across the different website languages.
Cross-browser compatibility was handled in two ways. First was handling the responsiveness of the website; most users who use older browsers, such as Internet Explorer 8, also tend to use smaller display resolutions, meaning that the responsive design of the website would not function correctly as older browsers do not support CSS media queries or
nth-child selectors. Second was making sure older browsers had graceful fallback, such as making sure all SVG icons were replaced with other image files, and that
calc sizes were replaced with either fixed or fluid-width sizes.