How CHRONEXT Built a Brand New Mobile App with Storyblok

Over the past 10 years, CHRONEXT has dedicated itself to selling, trading, and buying luxury watches worldwide as an eCommerce storefront. CHRONEXT makes it easy for watch enthusiasts to handle their transactions in the most secure, relaxed, and transparent way possible. With its success on its eCommerce website, CHRONEXT used Storyblok to help redefine the brand’s customer experience in developing an iOS mobile application from scratch, enabling their marketers and developers to create customized user journeys.

A headless CMS made for mobile applications 

While considering developing an iOS mobile application, CHRONEXT had only ever used their website’s system, Frontastic, a B2C eCommerce platform. Despite it still servicing their website, the team quickly realized that the system was purely web-based. This triggered the search for a headless CMS that could configure a non-web application in an extensible and flexible manner. 

Requirements for building a mobile app from scratch

CHRONEXT sought a headless CMS for their development and content marketing teams that could handle non-web content management - built for the omnichannel user experience and customized user journeys they had in mind. They also needed the CMS to act as a configuration system for their application without needing to redeploy it to the App Store with each refresh or update. Because of this, a few requirements were top of mind:

• Ease of use for developers and marketers: As they intended to use the CMS as a configuration management system, they needed a simple format for their teams to be able to view and manage content 
• User Management: To mitigate any risk of unforeseen mistakes or changes to the application, having a user management feature was essential to designate roles for each user on where they can access content 
• Everything, everywhere, all in one place: CHRONEXT were looking to have a centralized hub for their application assets that could be controlled and managed in one place for teams to access

Storyblok’s omnichannel and personalization capabilities for mobile 

With these requirements in mind, CHRONEXT researched the leading options in the CMS market. While they knew they wanted a headless CMS, they narrowed it down to systems that could adapt to building a mobile application from the ground up. 

Using Storyblok, CHRONEXT built and developed their mobile application prototype in just 7 weeks. Today, CHRONEXT is able to: 

• Use Storyblok’s dynamic form layout to manage the application through a drag-and-drop format to create customizable and personalized user journeys depending on the user login state or the shipping country they have selected
• Organize user management roles to control and configure internally, making it foolproof for any mistakes 
• Adapt and update content easily without constantly redeploying the application to the App Store with each content addition
• Allow the marketing team to work directly in the application, see the mobile application in the live preview, and adapt to different campaigns and markets 
• Deploy reusable content blocks that can be used anywhere throughout the application, promotions, or campaigns
• Use custom component creation (in the form of interstitial product listing components) to present custom configurations for any product list or search list, driving the customer’s purchasing or browsing experience toward more relevant products
• Handle micro-animations that were meticulously implemented in the application’s UX and UI as a standout experience
• Create a custom plug-in to fit with their commercetools backend for any product listing and sales screen of the products, customer login forms, and push notifications

How does CHRONEXT use Storyblok as a mobile application for iOS? 

Using Storyblok, CHRONEXT aims to create a seamless customer experience linked to a robust and receptive user mobile experience. This also translates internally amongst their team as they continue to grow as a company into new markets. Since their launch, app session times have tripled from 2 minutes on their website to 5 minutes dedicated to their mobile application. 

Building product pages from dynamic forms

Form layouts for a mobile application setup 

Starting from their setup, CHRONEXT created product listing and sales screens from products (in commercetools) using a custom plug-in to Storyblok’s form layout. Using filters, the team is able to select from different categories to present products from their commercetools backend catalog and product list (such as ‘All Rolex Models’). 

Marketers can simply select specific products based on their search query (product filters), create a page or campaign, preview, and launch to the app at the click of a button. Storyblok provides the level of customization and detail that CHRONEXT requires to showcase their products. 

Customizing the navigation and tab layouts for personalized user journeys 

Using Storyblok as an app configuration lets CHRONEXT customize their content layout easily. CHRONEXT can change the order and navigation of how the application functions in their UI to create custom user journeys for users to follow and experience. For example, this is even used by showing specifically targeted content to sell to different particular markets. 

Display targeted content based on user location and login status 

Similarly, they can use such a format to hide specific items and blocks depending on the market. Promotions can also be shown for logged-in or logged-out users in the same layout. 

Update the labels and display order of search filters 

Marketers can configure and reorder all filters and data sources users use to search for products (brand, model, price, condition, etc.). This means that business and marketing owners can decide which order they want items in and independently update how the content is presented. 

Change highlighted landing screens in the search overlay

Marketers can change the highlighted landing screens in the search overlay when a user accesses the application. Most of the application is intuitively built around the search bar intentionally, being an eCommerce storefront. This makes the search bar a key landing point for users. Upon clicking on the search bar, a slider was created for marketing teams to create tiles and listing pages for specific campaigns and link to that specific product listing page. 

The CHRONEXT team can easily change the order of the layout and add content within Storyblok through simple drag-and-drop. This was essential for CHRONEXT as other eCommerce applications and CMSs offered only ready-to-use templates. A significant factor is customizability; the marketing team could easily adapt content for product pages, preview before updating, and publish. 

Set popular brands/models with watchmaker authentication

Marketers can easily showcase specific brands linked to the brand’s product listings. This is especially useful for specific campaigns, promotions, and bestseller showcases. 

Interstitial components were created for custom configuration to any product or search list. The idea is to drive the customer’s purchasing or browsing experience, showing relevant content for their search. For example, if a user is scrolling through 100 items, likely, they haven’t found what they are looking for. Interstitial blocks act as ‘stories’ to engage users throughout their search with relevant material such as ‘Most Loved Brands,’ ‘Chronograph list,’ ‘Vintage watches,’ etc. 

This was a major requirement for marketers. In today’s purchasing experience, if someone cannot find what they were looking for after 40 to 50 items, users are presented with multiple options to help filter their search based on exactly what they were looking for.

Finally, each watch passes an authentication process, showcasing the craftsmanship and care that goes into each watch before being sold. CHRONEXT configured a layout that presents the watchmaker’s name and signature, customizable for each watchmaker and product. 

Localization into new markets 

Currently available in German and English, CHRONEXT’s content editors can easily add a new language for new markets by simply configuring the form, filling in the translated content, and publishing. Users can simply select in the application which language version they prefer. 

Checkout capabilities using Storyblok

Changing the layout and checkout order

The marketing team can also change and add steps in the checkout process should they want to in order to streamline the process. 

Changing payment methods available and setting defaults at checkout

Similarly, in Storyblok’s form layout, CHRONEXT can change payment methods, hide particular payment methods if needed, and set payment methods as a default. 

Working with Storyblok: A CMS made for mobile applications

CHRONEXT built brand new components using Storyblok’s dynamic form layout to provide a stunning customer experience, capable of handling high-quality graphics of each product tailored to each individual’s interest for different markets and languages. 

Storyblok provided the flexibility of reusable content components to quickly adapt content without deploying the application to the App Store with each change. CHRONEXT has built its brand as the most secure and transparent luxury watch storefront for international customers to enjoy at the touch of their fingertips.