Stories: A Christie’s Editorial Redesign

Research and discovery (empathise): I worked to understand our current users’ pain points with our legacy experience. How could I use design thinking to improve the look and feel of editorial content? I also needed to consider stakeholder concerns and requirements.

How might we (define): My team needed to work within constraints to deliver a successful solution. I needed to prioritize what features, UI improvements, and user flows would make the most impact for a first MVP release.

Wireframing the solution (ideate): Using the insights from user research sessions and focusing on the most important features for phase 1 of the product, I started to sketch out ideas. From simple drawings and crazy 8 sessions to more detailed low fidelity layouts in Figma, the design was starting to take shape.

High – fidelity designs (prototype): After getting input on the sketches and low fidelity designs, it was time to move into more structured layouts to test again with users and present to stakeholders for approval before moving into development.

Iterate and deliver (validate): I then implemented changes based on feedback as well as scope. Some of the desired features didn’t make it into phase 1, but the overall MVP solved all of the initial requirements and was usable within the CMS.

Our users

The research process started with identifying key users of our current website using Usertesting.com. We’re designing for users who….

• Are a little older than and a bit less tech-savvy than what is defined as the average web user at an age range of 30-70+ (according to Statista.com);
• Have a higher salary than average in their location, as Christie’s is a luxury brand that focuses on high value art and objects;
• Are interested in editorial content from the brand but are not used to long form content.

Top pain points

During the user interview process, 8 users were asked to walk through the legacy editorial experience, which included articles and ‘latest stories’ which is a hub for all content, and speak aloud about their experience. Some of the main issues users mentioned about what they saw:

• The legacy articles had a side navigation that made the header and intro seemed cramped
• Article categories were confusing and hard to find
• Header images were not attention grabbing because of their size
• Many articles presented a ‘dead end’ journey for users because there was no way to transact or learn more about the works of art discussed in the aforementioned content
• On the ‘latest stories’ pages, there were only two options to filter by – story type and category – which didn’t present the full breadth of options available

Stakeholder requirements

I also had to consider features that the business wanted to implement in the design solution:

• A way for users to interact with the artwork featured in the article, which would eventually lead to transactions
• The ability to relate art departments (e.g., Impressionist Art, Pop Art, etc) and marquee sales to an article to improve engagement for this content
• A way for content editors and web producers to build these articles using Sitecore CMS

Based on the user interviews and the pain points I uncovered, I was able to narrow down the scope of work. Knowing the audience and what their goals were on a high level allowed me to create key HMW statements:

• How might we enhance the engagement level of readers on our articles?
• How might we inspire users to transact based on the content we provide?
• How might we improve the discoverability of articles on search/filter pages?\
  How might we categorize articles effectively to aid users in finding relevant content?
• How might we design for readability and style alignment with the rest of the website?
  
  

Time to put pen to paper – and marker to whiteboard. The next phase of my process included starting to sketch out ideas: first, I wanted to quickly layout how the article flow should work – users mostly wanted a clean layout without a lot of header-area clutter, more ways to continue their journey with related content or transaction options, and desired a more robust search and filtering option for all articles available. I utilized the crazy-8s sketching method to quickly experiment with varying styles and elements, as well as explore user flows and hierarchy. kee

During this process, I included stakeholders and my larger team in order to get feedback ‘quick and early’ to make sure that we were aligned. Sketched layouts that got a good response were mocked up into low fidelity wireframes to get a clearer sense of space and user flow.

After reviewing feedback on my sketching/wireframes while revisiting the initial requirements, it was time to work though each scenario in more detail. For this part of the process, I used Figma to work though each user flow and translated them into screens. This would be helpful to gather feedback from product management, developers as well as users on the overall layout and structure.

Feedback and iteration on designs

I presented these designs to C-suite stakeholders for final buy-in. The overall response was generally positive, but I was given feedback that I needed to reduce the amount of exit gates at the end of articles. How could I condense this and reduce cognitive load for users, saving users from decision fatigue?

At this stage, it was also decided that we wanted users to click through the artwork lot pages themselves instead of having popups on the article page that allowed users to see additional info or enquire. This was to help SEO for lot pages and to reduce the complexity of the MVP design.

Development also sized the effort to add high level category tags at the top of the search/filter page, but this was too large and now considered out of scope for the MVP.

Going live! Part one

Before pushing forward with a full launch, we did a soft launch to test Sitecore CMS functionality and visuals with key stakeholders. We also tested the design across several devices and browsers to make sure layouts stayed consistent and responsive. Additionally, final feedback was provided and some final changes were made – column width was reduced from 8 to 6, certain form fields became optional and not required, and filters on the search page were collapsed on load, instead of expanded. To increase accessibility, the font size was increased from 14pt to 20pt.

Going live! Part two

After making these final adjustments, I led design user acceptance testing alongside the product manager and head of web production. After testing and ironing out a few bugs, we made a full launch in October 2023!

Success metrics and next steps

The release was well received by our users. Our initial metrics defined success with a 5% increase of users YoY with a 10% decrease in loading time, and as of December, we had a 22% daily increase of users! Loading times were also improved, since we migrated to a newer version of Sitecore as part of the redesign.

In the future the product will continue to evolve, with the addition of a stories hub – a curated content center for all articles that can be customized based on sale season and the market – and article recommendation based on personalization and preferences of logged-in users.