Reno: sliding doors online shop & configurator

Reno is the Polish turnkey manufacturer of sliding doors and wall-mounted sliding door systems that have been on the market since 2014.

Reno provides clients with a service of individual projects adapted to the interior’s space restrictions and functional requirements, including a wide range of styles, materials, and color options.

The design challenge was establishing the relevance between the product and the website quality by total rethinking and redesigning the existing online store. We also aimed to create new visual language emphasizing and reflecting Reno’s advantages that meet the audience’s vision and expectations.

At the very start, we had: the current website, the website structure, a prototype from another contractor, and the client’s insights with a general vision due to the project update idea. To get a completely new website look and mechanics, we divided the design process into sprints correlated with the programming process.

Scope of work

Data collection & Research

Client briefing / Website and Competitive analysis / Customer feedback analytics

Identity Conception Update

New brand identity / UI direction / Graphics and animations

UI/UX Phase

UI Concept / UI Design / User Testing feedback / Template Improving

Developing Stage

Creating and launching the Website, Account and Configurator

Technology

Our development team chose an open-source e-commerce platform Saleor, which delivers ultra-fast, dynamic, and personalized shopping experiences.

As a pre-design step, we conducted competitive research and crystallized the most relevant ideas for building the visual language of colors, shapes, animations, and the concept itself. After the visual direction approval, we developed a new branding concept and UI elements system to expand it all over the website.

Logo

You can see a sign similar to a door fastener we offered as the main brand element in a small part of the logo. It symbolizes reliability and trust. This element shows that difficult technical things can be simple and clear. The primary element is easy to use, recognizable and creative.

Design system

We developed an expandable and flexible high-quality design system of UI elements for use through the website: from decorative details to interactive components.

We chose Atomic Design System structure as the main direction: scaling via combining simple elements into complex and functional interface structures.

Iconography

We created a scalable system of icons that includes four types of graphic elements depending on image detailing and meaning. All icons are used in different website sections to improve user experience and make the user flow more transparent and engaging.

The next step was working on website pages, following user flow, and making the shopping experience comfortable and smooth.

Product page

The product page has a configurator on its first screen as an initial step for interaction. Next, users can learn about Reno’s features and additional services or get inspiration — we covered all types of target audiences’ needs.

Configurator

Configurator is one of the most important website features, which allows customers to reach the maximum realistic results. Users can customize the sliding door system in real-time, using three inspecting modes: Styling, 3D view, and Dimension mode.

Set style and color for the door and handle, apply sizes and roller system parameters, and then explore your doors with scaling and changing view angles! Shop, save, or share your results just in a few clicks.

As usual, we made website sections convenient for small screens and thumb-friendly: from the home page to the configurator.

Inspiration

This section is a visual, engaging tool that represents actual results reached with Reno. It helps customers inspect door system details and find something very heart.

Social proof

To help customers gain confidence in their choice, Reno reaches high social proof by sharing door designs via social channels. Also, there is a ‘Reviews’ section with customers’ feedback and sliding door photos.

Color samples

Reno provides color samples available to order for customers. This service allows one to enjoy a real preview experience and pick the optimal individual solution.

Partner page

This website section tells us about key benefits and features of collaboration and lets users join the architect program in just a few clicks. Here users can find showrooms and partners’ locations, fast links to assembly instructions, 3D models, and order samples.

Architect box

Similar to the Color samples for customers, the website offers an Architect box service. In creating beautiful interior designs, any professional can try some door design options for the best results.

We created an Account for two types of users: personal and business, to let them easily manage all door-related processes. For example, using features like saving addresses and fast order actions: instructions or invoice download and leaving a review.

Following the most progressive solutions for Reno, we’ve implemented a trending linear checkout flow: large and intuitive shopping cart preview, guest-friendly checkout divided into three steps, upsell and promo code sections, and, finally, an engaging success page.

New visual language works for awareness, reflecting brand advantages more accurately and "talking” to the audience through details.

The well-thought-out user paths form the basis for a good client relationship because they meet customer needs by presenting product features and a range of services at the right time and place. While a super-fast e-commerce platform and adaptive design provide a smooth and enjoyable shopping experience, helping increase customer loyalty.

We can't wait to get Reno's feedback on user statistics changes and aiming company's KPIs after the redesign.