Arnotts is a high-end department store that has been a fixture of central Dublin since 1843. I was the sole UX/UI Designer on the newly formed Product Team charged with the responsibility of improving the user experience of the site.

One of the first large initiatives I worked on was a redesign of the Furniture section, specifically the Product Display Pages or "PDPs".

As a department store Arnotts sells a wide range of products and the furniture division is one of the higher value segments of the business but unfortunately, the ecommerce element of it had been long-neglected.

The current iteration of the furniture Product Detail Pages (PDPs) was sadly a hodgepodge of half-hearted initiatives, muddled intentions and technical debt with undocumented and half-forgotten post-runtime script injections heavily modifying the layout and functionality.

In addition to some broken functionality and unsustainable maintenance procedures, this implementation leads to an unsightly 'flash' on page load of the regular layout before the script has time to kick in.

But an upcoming reorganisation of our back-end Salesforce Commerce Cloud technology provided an ideal opportunity to revisit the furniture section and show it the love it deserved.

This project came from business stakeholders who had long complained about the furniture PDPs and so the first step in our proposed redesign was a series of meetings with those same stakeholders to gather both background information on the furniture section, their hopes and aims that they feel were not being satisfied and finally to learn of any potential traps or technical limitations that led to the current structure.

This initial stakeholder engagement was very well-received and while I stressed to them that this was merely an investigation exercise and that not all their issues would be tackled, having them being heard by the Product Team certainly helped to generate buy-in down the line.

It became clear from these sessions that there was a lot of meat on this particular bone, and there were 3 tasks before us.

Thankfully we already had a whole host of salient data on our customers, so it wasn't too difficult to cobble together an idea of who our users were - with the caveat that we would maybe have to twist it a little to apply it to the furniture section.

Your 'typical Arnotts customer tends to skew a little older, a little wealthier and a little less technically savvy, per se, than the average Irish consumer. And when it comes to furniture, our users were even a little older and wealthier than the garden-variety Arnotts customer and crucially for us, they were even more distrusting of paying money online.

The online furniture purchasing journey for this segment is also a very different prospect than buying a shirt or a coat. People are naturally warier of spending £3,000 on a 3sqm couch than spending 50 on a shirt they can easily sell or throw away if they don't like it. The online sales volume for furniture in Arnotts was very low but we were still able to determine that the average order value that did contain a piece of furniture was between three to five times larger than the average clothing or beauty item order.

Coupled with our users' lack of technical acumen, this high price, high uncertainty environment fosters a very low-trust relationship between Arnotts and it's users; They're wary of spending all this money when they don't know the size, weight or sometimes even the colour of what they're buying. Cornflower Blue can look very different on a suede couch versus on a side table. Which, again, can be a big deal when you're talking about spending several thousand euros.

In addition, from engaging with our in-store colleagues it became clear that, as with many other items, many shoppers browse online first for items they may like and then convert their purchase in-store after being able to see them in person. became apparent that this was much more commonplace for furniture shoppers.

Common complaints that came back from the customers via our in-store colleagues were an inability to judge the size of the furniture, difficulty gauging what the colour would actually look like, limited data on fabric and materials used etc.

From our discovery sessions with stakeholders, we had a number of features they were pushing hard to include, but we didn't have a lot of input from the users yet. So, together with our crm team I formulated a short survey to ask users that have visited the furniture section to rank features or information in terms of importance to them. This helped me to validate the points raised by internal stakeholders and reorganise our development goals. Some of our internal priorities did not match up with our user's expectations but rather were articles of faith discussed internally and incorrectly thought of as 'killer' features. That's not to say that the desired changes weren't valuable, just that their utility to our user base was likely overstated.

Armed with our survey data we went back to our primary stakeholders and slimmed down the requirements and requested features. Our team projected a rough timeline of when we might be able to deliver on them as the back-end re-platforming happening in the background may have made organisational sense for us to sort out the front-end too, the knock-on consequence was that already scarce development resources, became even scarcer.

A comprehensive PDP redesign for the whole Arnotts site was also on our roadmap for the coming year so in the interest of development efficiency, I looked for where we could find commonalities between the future PDP project and the current Furniture project. Common features or improvements were given a degree of priority over the more niche ones. (Sorry, 3D Augmented Reality Furniture projection system… maybe next year?…).

We now were on much firmer ground with a clearer vision of what we were working towards. This didn't happen by accident of course but was the result of concerted efforts to clarify requirements and manage stakeholders while also being pragmatic about what is realistic to deliver in a handful of sprints. All this is part of the design process of course, but it was only now that we were at the point where I could start 'designing' because we had achieved a few things;

1. Built Trust

   Stakeholders had been involved in our process at almost every step of the way. Clear lines of communication and transparency had built trust allowing us, the product team to advise and provide input that was better listened to than it might have been at the outset

2. Defined The Problem

   We had a clearer idea of what the central brief, 'Make it better' meant. We now had something to hang our hats on. A marker to aim for and clear areas where we felt we could substantially improve the user experience.

3. Knew what 'good' looked like

   Through the series of sessions, we had with stakeholders a multitude of competitors were mentioned as well as several other points of reference that would serve as inspiration for us. Like most UX projects this was a mix of solving problems, removing points of friction and executing on a brand's vision of itself to elevate the user's experience. Not all of these comparisons could be drawn from directly, but it helped to cement a shorthand between the product team and our client, the managers.

4. Established a process

   The product team also set a regular cadence of check-in meetings with our primary point of contact to clarify outstanding questions and also sense-check to ensure we're still on track to deliver on their desires. Setting regular check-ins might seem like the simplest step, but looking back it was crucial to deliver on this project and had we not done that and operated in a silo, I think it would've been too easy for aims to diverge. The regular rhythm allowed us, the development team and the business, to hold each other accountable.

With all of these resource limitations, stakeholder preferences, audience data and knowledge of best-practices to hand I set out by taking a proverbial large red pen to the current PDP.

Primary Imagery

Taking into account user concerns, clearly larger imagery would need to be implemented natively onto furniture PDPs. Thankfully, our image server already provided the option for sufficiently large imagery. , I implemented a larger container for a 1080px wide image as standard on any viewport larger than 1600px.

I also implemented a subtle thumbnail indicator or counter beneath the primary image to give the user context as to how many pictures they can slide through. A very small change relatively speaking, but an important one I feel that demonstrated respect for the user's time rather than letting them unknowingly loop back through already-seen images.

Some new 'sticky-scroll' behaviour was also applied to the primary image container. We had already uncovered an insight that large high-quality imagery was high on our customer's list of needs and also uncovered a problem with the right-hand side of our PDPs. Namely, the content was making that side very long and a host of white space was being created beneath the image.

It was for this reason that we also implemented a behaviour where the main image gallery would stick to the top of the user's viewport as they scroll down the page until the product attributes beneath came into view where the image would revert to normal behaviour.

This might appear to be a remedial and simple change but stakeholders were initially resistant to have images moving or sticking and un-sticking so I put together a (rough) working prototype webpage to engender the buy-in we needed.

Product Attributes

Products on any ecommerce platform of course come with a range of metadata, size, colour, price, material, manufacturer's blurb etc. And on a product catalogue as diverse as Arnotts that can lead to a lot of irrelevant, to the customer, metadata making it through to the front-end. Or even if the data is relevant to a customer it comes at them in a huge data dump and paralyses the user and the most relevant information just becomes noise. Furniture was an especially dense segment, in terms of product metadata or attributes. There is also uneven coverage as some products have a full set of attributes and others very little.

So I grouped related attributes together and bucketed them together and ranked them in order of relevance. This allowed PDPs to 'gracefully degrade' so if a certain product didn't have colour data, or material care instructions attached instead of leaving awkward blank spaces on the page, the respective expandable panel would simply not appear on the page.

Expandable Panels

The furniture component of the Arnotts catalogue comes with a number of financing options depending on the brand involved, time of year etc. Low or zero percent financing is another lever we can exercise to engender trust in a user and lessen the anxiety around paying so much money. However, the existing implementation was rigid and at times irrelevant as there was no mechanism to display correct information on the correct products. Instead, we were introducing a point of friction as users will click on something offering interest-free finance, only to find out the offer wasn't applicable to their chosen product.

As such, we re-formatted the bottom panels on the backend to be tied to specific products and also reconfigured on the front-end for these panels to be firstly displayed in full width as tabs and also for this content to be editable by the content teams. This afforded a degree of flexibility to change the copy, imagery or layout if a delivery or finance offer changes or for seasonal promotions.

Promotion functionality

Promotions were flagged early on by stakeholders as key drivers for our audience but the current implementation was quite poor and often broken with hard-coded links directing users to error pages and broken images. These 'promo panels' as they are called were used on a variety of pages across arnotts.ie

In consultation with these stakeholders I gathered their requirements for the promotion panels to set about improving their functionality.

In the new version, the image has been stripped out entirely. The placement is a very small space and in context, an image was not adding much. Any imagery can be placed onto a separate promo page that might perhaps provide more detail to any promotion.

A configurable blue dotted border was added to the panel to a) differentiate it from other elements on the pdp and b) allow some promotion-specific branding to be applied. If for example a Christmas promotion is being run, this border can be a festive red. This same colour can also be applied to the header text inside the promotion also.

A height limit has been imposed on the panel to prevent the right-hand side of the PDP from becoming too long. Once the character limit is exceeded, the text is truncated and hidden behind a 'click to read more' link. This allows any interested users to still view more promotion detail on the page. This was a direct response to stakeholder feedback that promotions often had specific terms and conditions that needed to be communicated to the audience.

The CTA was also made optional. If the CTA is included in a promo the maximum height limit was extended slightly to accommodate.

The promotion functionality was one of the key components that affected all PDPs site-wide across Arnotts.ie, it was crucial that it be robust, but flexible enough to satisfy a broad range of stakeholder wishes and yet not impact the viability of the PDP pages themselves. You may view a prototype of the promo behaviour below.

With the wide range of changes being implemented a regular sequence of meetings between the Product Team and stakeholders was called for to ensure all the relevant parties are kept up to speed and the updates being developed are on-track with the requirements.

So one of the measures I took together with our Product Manager, was to develop a constantly updating feature 'one sheet' to walk stakeholders through the updates, whether they're technically minded or not. This also provided us with a document that we could point to when other departments or more senior managers came to ask questions, or our immediate point of contact - the furniture brand manager - was able to take the sheet to present it herself.