Sofa Shop with Sofa Builder

Made in Italy, customizable and affordable sofas by Resident.

Client: Resident
Services: IA, Wireframe

In short

Resident, about to launch a new brand for Europe, required to craft an information architecture they could express with their existing design system (React components library designed in Figma). The client expected a classy modular structure that would address the key customer questions in the correct touchpoints, staying comfy and digestible regardless the needed informationality and interactive features.

Note: Figma project with desktop, tablet and mobile breakpoints. In this presentation I’m focusing on desktop and mobile, but here is a screen with all the artboards:

Product targeting

The Traditional

25-50 yo male/females (single/married) with >60k income, looking for a quick and hassle-free sofa buying experience.

The Italian

35-50 yo male/females (single/married) with >90k income, looking for an iconic Italian design.

The Scandi

35-50 yo females (single/married) with >90k income, looking for a unique Scandinavian minimal design.

The SofaBed

25-50 yo male/females (single/married) with >75k income, looking for a specific function to host guests.

Wireframe

Homepage

The Home is basically an inspirational page leveraging on the brand’s unique selling points: Made in Italy, affordable prices, quick delivery, better return policy, features like “removable and washable covers”, transparency of the manufacturing process (hero video). The structure, in its powerful simplicity, can be extended or truncated in almost any part (e.g., removing accordions or other components and blocks), translates 1:1 into each breakpoint and the main CTA is always above the fold for maximum affordance.

The page unfolds from generic to specific, addressing key customer questions like “is this brand reliable?”, or “are these products worth the money?”. Beyond the features section I instead address “final” customer doubts with features like the the Size Checker (“will it fit into my space?”), the free swatches (“how will it look/feel?”). The last chance CTA is the same as the first “Shop Now”, but here the copy invites the user to customize their own, enticing them to give it a shot.

The structure, in its powerful simplicity, can be extended or truncated in any part (e.g., removing accordions or other components and blocks) and translates 1:1 into each breakpoint.

Wireframe

Listing

For the listing I made room for everything Resident could need: a short prominent descriptive text, independent filters for size, material, color and price range, of course sorting, a lifestyle image of the sofa on hover, color swatches under each product, traditional pagination for better SEO and products limited to 6 per page, so that the size checker section stays very reachable. Most of my UX strategy in this project comes from benchmarking competitor websites (like campaignliving.com) and applying CXL’s ecommerce best practices.

Here is the listing in mobile version, with fixed sorting and filters.

Here is a basic example of the filtering process in mobile: each filter stays independent, colors have their preview and the user ends up with a clear overview of what they just selected. The view products button will display the results, updating the number of matching products (6 results) inside the filter button.

Wireframe

Product Page

The product page shares the same IA philosophy applied to the homepage: modular sections addressing the key customer questions in a more in-depth way and rearranging certain sections based on the priority they have in the current touchpoint. For example we have, right below the prominent Sofa Builder section, a video presentation with a button to jump to “size & specs” and a link to request free swatches. Right after that we have an inspirational section with already customized presets for that specific sofa (quicker/easier alternative to customization). Worth mentioning here the very compact “product specs” section (thanks to the accordion layout) and the penultimate block “see it in your space” (augmented reality).

Representation of sticky elements in desktop/tablet and mobile. A sticky bar with reviews and Add to cart button (little conversion booster):

Wireframe

Sofa Builder

I presented the builder in 5 variants: the final one is the most compact, considering the unobtrusive integration of the preview render as the first slide and anything else (including 360° view and a texture close-up shot) in other slides. The needed information goes top to bottom: from reviews and shipping information to custom parts, carousel dots (big enough to be clicked in desktop mode) final price and add to cart. The level of contrast and scannability is kept high considering the complexity the needed features in this WYSIWYG customizer interface.

Sofa Builder translation in tablet and mobile:

Wireframe

Newsletter popup

A simple marketing popup template with optional secondary CTA. Provides place for an image and is really focused on good contrast, white space, a short title for the claim and no body text requiring more attention than needed. In other words I avoided adding to the cognitive load for what usually turns out as a binary decision: the customer is being called to quickly say “yes”/”no” to the popup in the first place.

Wireframe

Megamenu

Detail with all the megamenu interactions.