We decided on a mobile-first approach for the design, not only because of web usage trends but also because we think it’s the best way to design a user experience for web applications and sites such as this one. It tends to sharpen the focus and weed out unnecessary complications early on in the process, prioritizing user needs every step of the way.

The look and feel is based on Kringlan’s newly updated brand, using shades of the main blue color for structure and bright red for accents, icons and the like. Their marketing material features lush photography and we use it to set the tone on the main page, giving ample space on larger screens to the detailed and highly polished studio scenes.

Although the website has other roles to fulfill, the products are the main focus and our core design choices reflect this. The product search box and categories are given priority over the main menu, so that the primary use case we cater to is searching for or browsing products. The products themselves are introduced right below the main header in a featured collection, curated by Kringlan’s editorial team. Product collections can also be featured in news, blog posts and other editorial content on the site.

After selecting a category to browse or entering a search term, we land on the mainstay of the whole site: the product overview. Designed to be robust and easy to scan for information, we paid close attention to typographical hierarchy and contrast. The top slots in each category overview are selected by the editorial team in order to present an attractive variety of products and improve user experience, and as the products themselves are in focus we decided to place the sub-navigation and filters to the right. The filters are based on a highly scalable tag system that we designed to meet the challenge of organizing thousands of products without the costs and hassle of maintaining multi-level categories.

Each item is tagged with a brand name, the name of the store, and any number of relevant tags that describe the product. The shopkeepers tag their products themselves and the most popular tags float to the top of the list, so that for browsing purposes the most relevant tags are easily accessible. Having an extensive tag system in place also greatly improves search results.

The mobile app is an important part of Kringlan’s long-term digital strategy and was designed to be steadily improved upon and expanded over time. In the initial release you can search for stores, locate them on an interactive map and access detailed information about each one. The app also offers a selection of up-to-the-minute special offers from the mall’s shops and restaurants. Future plans include making the product inventory available from within the app with an added layer of user-tailored features like wish lists, location-based services, arcade games and much more. We built the app with React Native, enabling us to use a single codebase for both Android and iOS, and the app shares a CMS with the website to make it easier for Kringlan to maintain their content going forward.