Jurlique

6 minute read

jurlique-home-square.jpg
 
 
"Our dream was to connect people back to nature. That connection...that's the really important thing for us as human beings." – Ulrike Klein, co-founder of Jurlique

 

Jurlique is a skin care company based in Australia. Their vision is to create pure and natural skin care based on the ancient arts of alchemy, herbal medicine and homeopathy. The founders left their Germany home in search of the purest place on Earth, and found footing in the Adelaide Hills in South Australia. Jurlique products are being sold in more than 19 countries today.

Note: Jurlique was a client of Oomph's, a technology platform that specializes in iPad and digital publishing.

 

The Brief

As Jurlique's skin care range and shop numbers grew, they wanted a digital experience (in the form of an iPad kiosk) that would:

  • Extend on their already great in-store customer experiences.
  • Allow customers to browse the entire range of their products (each with extensive descriptions and product ingredients) to help them make more educated choices.
  • Allow customers to do a skin quiz that will determine what kind of products they need based on the condition of their skin.
  • Be able to work offline.
  • Display relevant product ranges and language based on location. (e.g. If the kiosk were to be installed at a Jurlique store in Hong Kong, it needs to display English and Chinese.)

 

Quick Overview of My Roles

  • Responsible for designing the overall structure of the app (for display in the Oomph platform as well as comply with Apple's App Store).
  • Crafted dynamic design templates based on content. e.g. catalog, product page, skin quiz.
  • Write the codes for the skin quiz section, using HTML, CSS, and Javascript. 
  • Worked closely with the developer to identify the proper workflow of collecting data from Jurlique's products database, and translating said data to the correct format for the templates.
  • In addition to my duties above, I also was able to propose a cleaner and simpler execution to a challenge that arose, and was able to save the company two weeks of budget.

 

The Challenge

Jurlique has hundreds of products, scattered across over 20 product categories which are also organized based on skin type and needs. This meant that aside from the flat design pages — pages or sections that are static and does not contain dynamic elements, so they are hand-crafted by designers using InDesign — we also needed hundreds of individual product pages.

Each of these products feature their own descriptions, SKUs & pricing, ingredients, and user reviews. It was nigh-impossible to design and manage hundreds of pages and thousands of elements individually. It was also highly impractical as the product ranges and the products themselves can change at any given time.

On top of that, all of these products needed to be connected to the skin quiz, named 'Skin Consultation' in the app. When a user has completed the quiz, it analyzes the results and curates a list of relevant products for the users, who can then visit each product's page or send the list to their personal emails. 

Originally this proved difficult as the back-end structure of the app didn't really allow for any type of databases that the front-end could draw content from. The developer originally suggested creating an online database (separate from Jurlique's database as to avoid any potential clashes) and have the app download the data on Wi-Fi. This proposal however, estimated to push the project over budget, and didn't meet one for the soft criterias: the kiosk being able to work offline in the event that the store has no internet connection.

 

The Solution

I had my fair share of experience of working on structural based apps, thanks to working so closely with developers on Myfoodbook (another project/client of Oomph) and having learnt basic abilities to think in code and write in code.

I examined all of the scope and requirements closely, and found that there were easier ways to approach the project. The most time and resource-consuming part of the project would've been the database that the app would draw its content from.

Using the knowledge and experience I had gained from creating Myfoodbook, I proposed using a similar structure for the individual products. This meant that the product pages would be dynamically generated only once at the start of each version, and would then be placed into their respective directories using pre-designed structure and front-end templates. 

This may sound rather straight forward from someone's who has never used the Oomph platform. Consider this, the only other alternative at the time (other than dedicating months of time of coding a bespoke app) was Adobe Digital Publishing Suite. Adobe DPS didn't support auto-catalogs, nor dynamic templates based on data input. If Jurlique had chosen an agency with Adobe DPS, their designers would have to design the 200+ pages by hand, manually type the metadata in, and do the whole thing again for every single language supported.

So I created a concept demo and proposed the new solution to the team. We decided that it would be much faster to go with my method, but didn't know how much time it would save. When I collaborated with the developer and pushed out the first draft, everything had worked the way we thought it would, and to our surprise this solution had saved the company two weeks worth of budget. 

 

The Final Product

The final product was delivered with all of the initial requirements met. Jurlique was able to push their kiosks out in time, and Oomph was able to save two weeks of budget. The Jurlique app was a great success in creating a better walk-in experience, and had been released in not only English, but Japanese, Traditional Chinese (Hong Kong, Taiwan), Simplified Chinese (China), and more. Since the initial release, we've also produced kiosks for Jurlique based on seasonal content and updates.

 

My Roles

  • Responsible for designing the overall structure of the app (for display in the Oomph platform as well as comply with Apple's App Store).
  • Crafted dynamic design templates based on content. e.g. catalog, product page, skin quiz.
  • Write the codes for the skin quiz section, using HTML, CSS, and Javascript. 
  • Worked closely with the developer to identify the proper workflow of collecting data from Jurlique's products database, and translating said data to the correct format for the templates.
  • In addition to my duties above, I also was able to propose a cleaner and simpler execution to a challenge that arose, and was able to save the company two weeks of budget.