shopify ux case study

• UX Research

How to use mixed method research to drive product decisions

A research framework for using data and….

Best of Inside Shopify UX Season 2

Highlights and takeaways from the second season of our podcast.

Shifting to product research and strategic foresight

Chris nicholson and heather mcgaw share the how….

In-depth: the long-term research behind Shopify Inbox

Why the future of business chat is still human ….

How to test for accessibility with users at every design stage

A research template to test solutions….

A map for uncovering your assumptions

How i use journey mapping to align teams before they begin.

Retail research during COVID-19 and beyond

4 remote research methods i used to replace “in-person” ….

Just enough context

Six steps to smoothly start a new ux job when joining remotely.

How to build empathy using virtual LEGO bricks

A step-by-step guide to creating an analogous….

A guide to approaching a career change

What i learned moving from design to research at shopify.

Bloom Robbins

Complete online store redesign with a custom-designed layout running on Shopify Plus. The new design includes a shift to a fully editable template.

Theme upgrade

Saint Bernard

Advanced customization

Migration & redesign

Custom design

Dej mi pokojovku

Migration & optimalization

Why Shopify

Discover 6 reasons why we and millions of merchants around the world love the Shopify platform. We just know you’ll love it, too!

Sales Channels

Design & UX

24/7 Support

Global Platform

Shopify news

Shopify News

Top 10+1 Shopify must-know new features and updates for 2024

Feb 17, 2024

6 Shopify plan & pricing changes in 2024 you should know about

Feb 9, 2024

Shopify merchants can now select a one-page or three-page checkout: which should you choose?

Mar 10, 2024

Shopify one-page checkout is finally here

Mar 16, 2024

Let’s kickstart your Shopify business together

All our stores are beautifully designed (#eyecandy). More importantly, though, they’re optimized to sell. Customer love, guaranteed. Just don't tell the competition.

11 Tips For US Retailers Selling Online to Customers in Europe

Case study: migrating catit’s multiple international online stores from woocommerce to shopify plus, loyalty program strategy: how to build the ultimate ecommerce loyalty program, case study: the dtc subscription growth strategy that delivered an 8-figure additional revenue opportunity for yumove, case studies, eden project: creating a scalable ecommerce store, daysoft: award-winning site & digital transformation, migrating from the shopify plus wholesale channel to b2b on shopify: what you need to know, subscription retention strategies: how to reduce churn & increase ltv, composable & headless commerce.

A comprehensive resource for technical ecommerce leaders exploring composability on Shopify.

Ecommerce Internationalisation

The ultimate guide to going global on Shopify Plus.

• 31 Jul 2023 · 10 min read

Case Study: Upgrading Naturalmat’s Ecommerce UX to Reflect the Brand’s In-Store Customer Experience

This project with sustainable mattress brand Naturalmat combined Swanky’s expertise in UX design, replatforming and Shopify development. Find out why Naturalmat wanted to migrate from Magento to Shopify and how we leveraged customer insights to design a stylish and intuitive ecommerce site – one that reflects the inviting, calm and supportive in-store experience of the brand’s brick-and-mortar showrooms.

Catherine Lambert

• B Corp mattress and bed brand Naturalmat was struggling with a slow and unreliable Magento website.
• Swanky was tasked with migrating the site to Shopify Plus and revamping Naturalmat’s online presence to better reflect the brand’s in-store experience.
• We designed an ecommerce UX that prioritises product information and supports product differentiation – helping shoppers to make an informed purchasing decision.
• The site also uses design techniques to mirror the ambience of a Naturalmat showroom.
• Six months after launching on Shopify, website revenue increased by over 56.4% and conversion rate improved by 37.5%.

Naturalmat: A pioneering brand with customer experience at its heart

When Naturalmat began making mattresses in 1999, the brand wanted to take a different approach to the rest of the trade. As the first B Corp certified bed and mattress company in the UK, Naturalmat has pioneered the use of organic and natural materials across its product range. All of its mattresses are made by hand in a solar-powered workshop in Devon, with materials sourced sustainably and, wherever possible, locally.

Naturalmat sells direct to consumers on its own website or in its showrooms , where customers can go to try out the brand’s beds in a calm, quiet environment that replicates a natural bedroom experience. Naturalmat’s expert team is on hand to support customers with the decision-making process during a showroom visit, providing advice and guidance to help find the perfect mattress.

Alternatively, customers can try out Naturalmat mattresses in one of the many luxury hotels supplied by the brand.

This is a company clearly passionate about giving its customers the best possible experience – and the best night’s sleep. This is demonstrated through its exquisite products carefully crafted from the finest materials, as well as the brand’s thoughtful approach to product discovery and customer support .

The challenge: A website that didn’t match the in-store experience

The Naturalmat team approached Swanky looking to revamp the brand’s online presence. At the time, they were struggling with server issues, down time and long page load on their Magento store, and they wanted a fresh new start on Shopify Plus . Their previous website was not designed to be mobile-first, with many features proving difficult to navigate on small screens.

The brief for Swanky’s New Builds team was to create a first-class customer experience that offers detailed information about Naturalmat’s products, as well as building trust and communicating the brand’s USPs clearly.

Whilst Naturalmat was keen to increase online sales, it also recognised that the decision-making period for its customers can be particularly lengthy. The brand wanted to help customers make informed and supported buying decisions, and avoid pushing customers to make rushed purchases that could result in costly and un-environmentally-friendly returns.

One particular issue the brand faced was customers having difficulty differentiating between its products online . On a website, all mattresses look very similar. How can you help a customer choose a mattress when they can’t sit on them and test them out in-person? In its brick-and-mortar stores, Naturalmat has a ‘mattress wall’ with cut throughs showing the interior structure of each product – helping customers understand the differences between mattresses at a glance. It was proving challenging to replicate this online.

Another important element of the build was to create separate storefronts for Naturalmat’s two product ranges – one for adult beds and mattresses, the second for nursery mattresses and furniture. This required two different brand styles and user journeys within the same site, but administered from one place.

Finally, having honed such an exceptional in-store experience for customers visiting their showrooms, the Naturalmat team wanted the brand’s online store to recreate that brick-and-mortar experience as closely as possible – both in terms of ambience and product support .

The solution: An informed approach to ecommerce UX

A thorough discovery process.

Every Swanky website build begins with a detailed discovery process. This is where Swanky deep dives into brand and customer requirements to understand the fabric of our client’s business.

The outcome is a data-led and concept-proven set of functionality and UX look and feel concepts which significantly reduces risk in the main design and build phases . Since Naturalmat wanted to ensure its new online experience aligned with its in-store customer experience, the team agreed to an enhanced customer research process.

As part of this process, members of the Swanky team visited Naturalmat’s showrooms to interview customers , to understand how they typically interact with the brand and website.

We also set up a prototype of our proposed on-site navigation – a pain point of Naturalmat’s existing ecommerce store – and asked customers in-store to search for the product of their choice, observing what they clicked on to navigate towards certain products.

We discussed with customers what language they would expect to find around certain products, to make the on-site navigation as intuitive as possible. This provided confidence that our suggested navigation overhaul was the right direction for Naturalmat and that it would improve the customer experience in terms of helping shoppers find the right product.

Finally, we interviewed staff members to understand the sort of questions they would typically ask customers when they arrived in store, so we could reflect this consultative approach online.

Migration from Magento to Shopify Plus

We migrated Naturalmat’s store from Magento to Shopify Plus , keeping in mind the brand’s functional and business requirements throughout the process.

Shopify represents a faster, more reliable and scalable ecommerce solution for Naturalmat, with better uptime and enhanced user experience. Using a robust platform that can keep up with the business’ evolving needs will be vital as Naturalmat looks to grow, allowing the team to invest more time and money into revenue-driving activities such as bespoke functionality and strategic optimisation campaigns.

We talk more about the differences between these two popular ecommerce solutions in our Magento vs Shopify platform comparison .

Distinct storefronts and user journeys for adult vs nursery

Using Shopify Store 2.0 , we designed two different UX/UI experiences within the same website, with separate storefronts for Naturalmat’s two product ranges – adult and nursery. Each storefront has its own look and feel to appeal to slightly different audiences, and the customer journey is personalised for each storefront .

Users are given the choice between which store they wish to browse when they first arrive on the site. For future visits, the website remembers whether a customer has visited the adult or nursery store and directs them to the relevant version of the homepage.  

Discussing some of the differences between each storefront’s UX and how they are set up behind the scenes for maximum flexibility, Mark Halliwell, Lead UX/UI Designer at Swanky, commented:

“Since the price point of nursery products is lower, the buying process is generally faster, so there are fewer steps to purchase. The checkout for the nursery experience is simplified to reflect this. Adult mattresses, on the other hand, require a more detailed customer journey to help the customer make an informed decision on their purchase.

“For every page template that we created, we built in flexibility so they could be repurposed for either of the storefronts. In the nursery store, for example, we added a multi-column section allowing for more products to be viewed at once, as well as carousels for scrolling through products. Each section has its own colours and styles coded in so, depending on which storefront it is used on, the correct style is automatically shown – code free.

“This allows Naturalmat’s in-house team to easily select whichever sections they want when creating a new page for each of the brands, to correspond with the different user journeys.”

Supporting informed decision making

An intuitive mega menu to support product differentiation.

User behaviour research from our discovery phase showed that shoppers would often use the top menu to locate information, rather than always scrolling down the page. Therefore, we wanted to make sure we displayed key information in as many places as possible, including in the menu.

For collections with lots of products, we designed an innovative menu section that visually highlights differences between each product as the user hovers over items in the menu. In the example below, customers can easily see the difference between cross-sections of The Cashmere, The Lambswool and The Mohair mattresses.

This reduces clicks and speeds up decision making , as customers no longer need to visit the individual mattress pages to understand the difference. A further text excerpt helps customers differentiate between products more effectively by providing supplementary information (e.g. “the ultimate in natural fibre luxury”).

Swanky often recommends the use of icons within menus to help customers navigate more easily. However, with products that are as complex as Naturalmat’s mattresses, it was important to display a larger image that contextualised the product for the customer, as well as allowing for upsells. By using imagery here, we can reduce cognitive load and help the customer choose based on a picture instead of an unfamiliar product name.

And we haven’t forgotten mobile either. Hover states are not available on mobile, but with more innovative design and development we translated the usefulness of hover on desktop, by giving Naturalmat the option to display these product images and cross-sections above each product in the mobile navigation drawer. With the ability to understand different products literally at the customer’s fingertips, they can make easier decisions faster, and with less cognitive overload.

Communicating key information on product pages

When designing Naturalmat’s product pages, our aims were to:

• simplify the existing user journey;
• reduce cognitive load; and
• avoid overwhelming customers with too much information.

In doing this, we still needed to provide customers with the right information to give them confidence in making a purchase.

Mark explains how we achieved this balance:

“Where whole sentences had previously been used to describe USPs, we reduced these to a few key words that would be easier for customers to digest. Where additional product information is needed, we added popouts and accordions, with links so customers know where to go for further information.

“Meanwhile, a simple bar displays brand USPs, using illustrations and single words to keep the message clear and eye-catching.  

“In addition, our customer research found that online shoppers didn’t always understand the difference between the various types of mattresses available. To resolve this, we added badges to the collection page to highlight each product’s main USP (e.g. ‘most affordable’, ‘top of the range’).”

Reflecting an in-store interaction on product pages

Similarly to how customers can view cross-sections of mattresses on display in a Naturalmat showroom, we echoed this with product imagery on the brand’s Shopify store.  

We broke the customer ordering journey down into multiple steps – following the logical steps of a customer interaction in-store . For example, in a showroom, the first question a new customer is asked is about the tension they prefer in a mattress. Next, they would be asked about size. These same steps are followed in the product page user journey, as you can see in the website snapshot above.

To account for different product types, flexibility was built into the page design, allowing for between one and four steps per product. This presented Swanky with an interesting technical challenge, as natively in Shopify you can only have a maximum of three steps. Custom development by the experienced Swanky team ensured this in-store user journey could still be translated online and with minimal effort for Naturalmat’s ecommerce team to manage .

Finally, once the main product – the mattress – has been purchased, users are presented with an opportunity to add on complimentary items such as sheets and pillows, just like they would be during a showroom visit. These suggestions are kept till the next step in the online checkout process, to avoid distracting from the primary purchase.

Facilitating online showroom consultations

Further demonstrating Naturalmat’s commitment to supporting customers and guiding them through the decision making process, the brand offers online showroom consultations in which customers can virtually meet with a member of the sales team to discuss their needs.

To facilitate this, the site has an inbuilt scheduling feature , powered by Calendly.

This allows for a more personalised and consultative approach to sales via the online site, which is in-keeping with the preferred sales style of the brand.

Leveraging UI design to mirror the in-store ambience

The UI design of the store is inspired by the soft, calm ambience of Naturalmat’s showrooms, with dimmed lights to recreate a bedroom setting.

“Naturalmat’s previous site design used a lot of pure white and high contrast. By softening this colour slightly and muting the black text to a charcoal black, we have reduced the contrast to create a softer palette. We also pulled in the soft green from Naturalmat’s other branding materials to create a more calming experience,” explains Lead Designer, Mark.

“We designed images and text to fade in subtly as you navigate the site, which gives it a soft feel, and built-in animations and transitions to draw customers into the site.

“As you scroll down the page, sections change from 0 to 100% opacity, mimicking the effect of dimming lights. They also move upwards slightly, to reflect the feeling of lying on a comfortable mattress.”

The results

Not only does Naturalmat now have a more reliable and scalable ecommerce solution to power its digital growth , it has a website that recreates the exceptional showroom experience that the brand is known for – both in terms of ‘look and feel’ and product support.

By leveraging our expertise in ecommerce UX design, migration and Shopify development, we have created an online store that encapsulates the essence of Naturalmat whilst delivering on the brand’s promise to provide the best possible experience.

Since the launch of Naturalmat’s new Shopify Plus store , the site saw a 56.4% increase in revenue across six months, with conversion rate improving by 37.5% .

The customer segment that saw the biggest change was those already familiar with the brand, coming to the site via direct searches. The conversion rate for these customers increased by 112%, perhaps due to the more clearly defined USPs and product details.

Following migration and launch of its new website, Naturalmat has been working with Swanky’s Growth Accelerator team to continue improving its online performance. Our Growth Accelerator program is a ‘made to measure’ service that helps brands optimise the digital experience for their customers and boost key metrics, through on-site optimisation and experimentation, personalisation, paid advertising, social media management and more.

Improve your ecommerce UX with Swanky

If you’d like to know more about any of Swanky’s services, including how we can migrate your store to Shopify and help upgrade your ecommerce UX, get in touch with our team and we’d be happy to chat about your business goals.

case study magento Migration naturalmat UX

About the author.

Catherine lives in Montpellier and is a Marketing and Solutions Manager at Swanky. Catherine joined Swanky in 2020 as part of the marketing department, working to help Swanky share our expertise via our online channels. She also oversees Swanky's work in the French market from our office in the South of France.

Talk ecommerce with us

Ready to grow your ecommerce business? Let’s talk.

Join the Swanky Community

Want to receive regular updates and inspiration to help your business stay ahead of the game? Subscribe to our newsletter and join the community of ecommerce leaders successfully navigating the world of online retail.

What are the Benefits

Be at the forefront of industry trends.

We develop and implement ecommerce tactics for industry-leading brands on a daily basis. Be the first to hear exclusive insights and learnings.

Get a monthly dose of inspiration

Receive our newsletter straight to your inbox, packed full of useful marketing tips and growth strategies for your online store.

Join a community of fellow leaders

Get to know like-minded entrepreneurs in the digital transformation space. Share experiences and learnings from your ecommerce journey.

Related Articles

• 8 Feb 2024 · 8 min read

Case Study: Creating a Scalable Ecommerce Store for the Eden Project

This case study explores how Swanky migrated the Eden Project’s online shop from Drupal to Shopify, opening up exciting growth opportunities for this iconic charity. …Read More

• 1 Jun 2023 · 11 min read

How to Get the Most Out of Your Ecommerce Photography

Join Ollie Endicott, Digital Designer at Swanky, as he discusses the impact your ecommerce photography can have on your online store’s performance, before sharing some top tips on how to make your imagery best-in-class. …Read More

• 21 Dec 2022 · 6 min read

Web Design for Ecommerce: Using Micro-Interactions Successfully

Web design for ecommerce is all in the details. This is exemplified by micro-interactions. These are small moments of design that give feedback to a user when navigating your ecommerce store. If you get this design wrong, you can overwhelm and confuse customers. But get it right, and your conversion rate will increase. Matt Giles, Swanky’s Chief Creative Officer, explains more below. …Read More

Subscribe to the Newsletter

Want to keep on top of what’s happening in the industry sign up to our monthly newsletter and let the updates come to you., just checking….

You’re leaving the English site to go to our French site, are you sure?

• Carson Shold
• May 6, 2021

Improving The Performance Of Shopify Themes (Case Study)

• 13 min read
• Workflow , JavaScript , Performance , Case Studies
• Share on Twitter ,  LinkedIn

About The Author

Carson is the co-founder of Archetype Themes and focuses on building the best user experience in e-commerce. More about Carson ↬

Email Newsletter

Weekly tips on front-end & UX . Trusted by 200,000+ folks.

The dreaded refactor of old code can be challenging. Code evolves over time with more features, new or changing dependencies, or maybe a goal of performance improvements. When tackling a big refactor, what are the things you should focus on and what performance improvements can you expect?

I’ve been building Shopify themes for the better part of a decade. When I worked in-house at Shopify in 2013, themes were fairly simple in terms of code complexity. The hardest part was that Shopify required themes to support IE8, and up until late 2020, IE11. That meant there was a lot of modern JavaScript we couldn’t utilize without sometimes sizable polyfills.

Eight years later, in 2021, themes are infinitely more complex because Shopify has released a ton of new features (to go along with our in-house ideas at Archetype Themes ). The problem is that building new performant features will only go so far when some of your codebase is so old that it has old IE polyfills or IE10 CSS hacks. Our themes had pretty good speed scores for how much they offered, but they were undoubtedly bloated.

Our Goal Was Simple

Better performance across the board. Faster time to first paint. Less blocking JS. Less code complexity.

Getting there was the hard part. It included:

• Remove jQuery and rewrite ~6k lines of JS per theme in Vanilla JS
• Remove Handlebars.js, as our templating needs were way too small for such a large package
• Standardizing code shared between themes (remove duplication)

Moving away from jQuery was a blessing, but a long process. Thankfully, Tobias Ahlin has a fantastic guide on some of the quick conversions away from jQuery . While going through these changes, it was the perfect time to rethink some more basic issues like how my JS was structured and how elements were initialized.

Remove jQuery

Writing Vanilla JS always seemed like a pipe dream. We had to support old IE, so it was just so easy to ignore any attempt at removing it. Then IE 11 support was dropped by Shopify and the clouds parted — it was our time.

Why remove jQuery anyway? I’ve heard lots of arguments about this, such as its package size isn’t that bad compared to a framework like React. Well, jQuery isn’t a framework like React so it’s a bit of a non-starter comparison. jQuery is a way of using CSS-like selectors and developer-friendly syntax for things like animations and Ajax requests. Most of all, it helped with cross-browser differences so developers didn’t have to think about it.

We wanted to remove it for a few reasons:

• Less JS is good for performance;
• It isn’t needed in modern browsers;
• Shopify’s CEO made a push for pure JS in themes .

I’m one of those developers who were stuck in the past. I knew jQuery inside and out and could make it pull off nearly anything I tried. Was it perfect? No, of course not. But when you look at the lifecycle of some JS frameworks that flamed out , jQuery has always been steady and that was familiar and safe to me. Removing our reliance on it and untangling it from ~6k lines of code (for each theme) felt insurmountable — especially when I couldn’t know for sure my performance scores would benefit or by how much.

Our approach was to comment out each module we had, remove jQuery, and slowly add in each module or function one at a time while it was rewritten. We started with the simplest file, one with a few functions and a few selectors. Nice and easy, no errors in dev tools, time to move on.

We did this one by one, remembering the easy fixes from the early files when we got to the complex ones like refactoring all of the potential features associated with a product and its add-to-cart form (I counted, it’s 24 unique things). In the end, we got the product JS from 1600 lines of code to 1000. Along the way, we found better ways to do some things and would go back and refactor as needed.

We realized Vanilla JS isn’t scary, it’s just a bit more of an intentional way of writing code than jQuery. We also realized some ancient code was a mess — we needed to organize the JS to be more modular and remove duplicate code (more on that below). But before that, we wanted to play with some of the fun JS we’d only used in other projects.

Intersection Observer API

Shopify themes are powerful in that they let merchants move elements around the page however they want. That means, as the developer, you don’t know where the element is, whether it exists, or how many exist.

To initialize these elements, we had been using scroll events that continuously checked if an element was visible on the page with this function:

Even though these scroll events were throttled, there was a lot of math being done by the browser all the time. It never really felt too sluggish, but it did take up a spot in the call stack which impacted other JS competing for priority. I wish we had done more performance research on this update specifically because I think it’s responsible for many of the improvements in Time to interactive and Total blocking time that you’ll see below.

In comes the Intersection Observer API . Now that IE11 support wasn’t required, I was so happy to be able to fully utilize this. In short, it’s an asynchronous way of knowing when an element is visible in the window. No more sluggish measurements and scroll events.

To initialize an element when it’s visible, we use something as simple as this:

All of the JS required for the element will be handled inside myCallback , preventing it from doing anything until it’s visible.

This sets up an observer for that element, and then removes the observer once it’s visible. It’s always good to clean up after yourself even if you think there might not be much impact without it. If there’s a callback, we run it and our module is ready to go.

You can pass a threshold to initialize the element before it’s on the screen too, which can be handy if you want to preload something like Google’s Map API slightly before the element is visible so it’s ready when it is.

Layzloading Images And object-fit

We use lazysizes for lazy-loading our images. It has some helpful plugins for also loading background images, but requires a lot more markup on your element. While the plugins are quite small, it’s one more thing that’s easily removed with pure CSS.

Using object-fit in CSS meant that we could position an image just like a background image, but as an <img> element and get all the benefits of normal lazy-loading without extra JS. The real benefit in this is we’re one step closer to using native browser lazy-loading (which doesn’t support background images). We’ll still have to load in lazysizes as a fallback when the native approach isn’t supported , but it means removing an entire dependency.

MatchMedia API

In the past, we used enquire.js to know when breakpoints changed. This is used when resizing elements, changing a module’s arguments for desktop vs mobile, or simply to show/hide elements that you can’t with CSS.

Instead of relying on another package, once again we can go with a native solution in matchMedia .

With just a few lines of code, we can listen for breakpoint changes and change a helpful variable that’s used elsewhere and trigger a custom event that specific modules can listen for.

Hunting down duplicate code

As I mentioned at the beginning, we had slowly built features into our themes for years. It didn’t take long for some elements to be built out that were kind of like others, like a full-width homepage video and later videos on your product listing or a popup video modal.

YouTube’s API, for example, initialized differently three times and had nearly identical callbacks and accessibility features built out per-module. It was a bit embarrassing we didn’t build it smarter in the first place, but that’s how you know you’re growing as a developer.

We took this time to consolidate many of our modules to be standalone helpers. YouTube became its own method that all sections from all of our themes could use. It meant refactoring by breaking it down into the most basic parts:

• Default API arguments (overridable by the initializing module)
• A div ID to initialize the video onto
• ID of the YouTube video to load
• Events (API is ready, video state changed, etc)
• Play/pause when not in view
• Handle iOS low power mode when autoplay not supported

My approach was to do this all on paper before coding, which is something that always helps me sort out what’s integral to the module I’m building vs what’s custom by the parent that’s initializing it — a division of labor if you will.

Now our three themes that initialize YouTube videos a total of nine different ways use a single file. That’s a big code complexity win for us, and makes any future updates much easier for me and other developers that might touch the code. By using this same approach for other modules while converting to Vanilla JS, it allowed us to move nearly half of each theme’s JS to a single shared module across them all.

This is something that was invaluable to our team and our multi-project setup and might not be useful to your projects exactly, but I believe the process is. Thinking about simplicity and avoiding duplication will always benefit your project.

We did the same for slideshow modules (image slideshows, testimonials, product page images, announcement bars), drawers and modals (mobile menus, cart drawers, newsletter popups), and many more. One module has one purpose and will share back to the parent only what is required. This meant less code shipped, and cleaner code to develop with.

Performance Stats

Finally, the good stuff. Was this all worth it? Most of this was done blindly with the assumption that less JS, smarter initializing, and more modern approaches would result in faster themes. We weren’t disappointed.

We started all of this work with Motion , our first theme. It had the most bloated JS and the biggest room for improvement.

• 52% less JS shipped
• Desktop home page speeds (with heavy elements like multiple videos, featured products, slideshows with large images)
• Mobile product pages

Then we moved on to Impulse , our second and most feature-heavy theme.

• 40% less JS shipped
• 28% faster mobile home page speeds
• 30% faster mobile home page and product page speeds

While you may notice these numbers got a lot better, they’re still not great. Shopify themes are handcuffed by the platform so our starting point is already challenging. That could be an entirely separate article, but here’s the overview:

• Shopify has a lot of overhead : feature detection, tracking, and payment buttons (Apple Pay, Google Pay, ShopPay). If you’re on a product page with dynamic payment buttons you can be looking at about 187kb of Shopify scripts vs. 24.5kb theme files. Most sites will have Google Analytics, and maybe a Facebook Pixel or other tracking scripts loaded on top of all this.

The good news is that these scripts are loaded fairly efficiently and most don’t block the page rendering much. The bad news is that there’s still a lot of JavaScript loading on those pages that are out of the theme’s control and cause some flags on Lighthouse scores.

• Apps are a huge bottleneck and store owners, generally, have no idea. We routinely see shops with 20+ apps installed, and even a simple app can drop your Shopify speed score by 10+ points. Here’s the breakdown of our Impulse theme with three apps installed.

Note : Here’s a great case study on apps and their effect on performance .

We’re still in the process of finishing these updates to our third theme, Streamline . Streamline also has some other performance features built in that we’re exploring adding to our other themes, such as loadCSS by Filament Group to prevent the CSS from being a render-blocking resource.

These numbers aren’t insignificant. It’s widely reported that speed matters and even small changes can make big impacts . So while we are happy with all of this progress, it’s not the end. Performance will continue to be a dominant part of our builds and we won’t stop looking for more ways to simplify code.

What’s Next?

Performance is an ongoing challenge, one we’re excited to keep pushing on. A few things on our list are:

• Use resize observer instead of window events
• Move fully to native browser image lazy-loading (with lazysizes fallback for Safari)
• Only load JS that’s used on the current page so we don’t ship a huge file the time (a big challenge on Shopify right now)
• Boost our performance knowledge with Smashing’s 2021 performance checklist
• Setup Lighthouse in GitHub actions to see performance impacts as we develop

Resources For Shopify Developers

If you’re building on Shopify, or want to get started, here are some helpful resources for you:

• Set up a local theme development workflow
• Theme Inspector Chrome extension to debug bottlenecks in Liquid
• Shopify cheat sheet What liquid is available to you
• Liquid templating language docs A few years ago these were painful to get through, but they’ve since become gold for Shopify developers

Smashing Newsletter

Tips on front-end & UX, delivered weekly in your inbox. Just the things you can actually use.

Front-End & UX Workshops, Online

With practical takeaways, live sessions, video recordings and a friendly Q&A.

TypeScript in 50 Lessons

Everything TypeScript, with code walkthroughs and examples. And other printed books.

Get a free custom homepage design for your new website.

Design, UI, UX , Inspiration

15 excellent ux case studies every creative should read.

• By Sandra Boicheva
• October 21st, 2021

In a previous article, we talked about UX portfolios and how they carefully craft a story of how designers work. Interestingly enough, recruiters decide if a UX freelance designer or an agency is a good match within 5 minutes into the portfolio . In order to persuade these recruiters, the portfolio needs to present an appealing story that showcases the skill, the thought process, and the choices taken for key parts of the designs. With this in mind, today we’ll talk about UX case studies and give 15 excellent examples of case studies with compelling stories.

The Storytelling Approach in UX Case Studies

An essential part of the portfolio of a UX designer is the case studies that pack a showcase of the designer’s skills, way of thinking, insights in the form of compelling stories. These case studies are often the selling point as recruiters look for freelancers and agencies who can communicate their ideas through design and explain themselves in a clear and appealing way. So how does this work?

Photography by Alvaro Reyes

Just like with every other story, UX case studies also start with an introduction, have a middle, and end with a conclusion .

• Introduction: This UX case study example starts with a design brief and presents the main challenges and requirements. In short, the UX designer presents the problem, their solution, and their role.
• Middle: The actual story of the case study example explains the design process and the techniques used. This usually starts with obstacles, design thinking, research, and unexpected challenges. All these elements lead to the best part of the story: the action part. It is where the story unveils the designer’s insights, ideas, choices, testing, and decisions.
• Conclusion: The final reveal shows the results and gives space for reflection where the designer explains what they’ve learned, and what they’ve achieved.

Now as we gave you the introduction, let’s get to the main storyline and enjoy 15 UX case studies that tell a compelling story.

1. Car Dealer Website for Mercedes-Benz Ukraine by Fulcrum

This case study is a pure pleasure to read. It’s well-structured, easy to read, and still features all the relevant information one needs to understand the project. As the previous client’s website was based on the official Mercedes Benz template, Fulcrum had to develop an appealing and functional website that would require less time to maintain, be more user-friendly, and increase user trust.

• Intro: Starts with a summary of the task.
• Problem: Lists the reasons why the website needs a redesign.
• Project Goals: Lists the 4 main goals with quick summaries.
• Project: Showcases different elements of the website with desktop and mobile comparison.
• Functionality: Explains how the website functionality helps clients to find, and order spare parts within minutes.
• Admin Panel: Lists how the new admin panel helps the client customize without external help.
• Elements: Grid, fonts, colors.
• Tech Stack: Shows the tools used for the backend, mobile, admin panel, and cloud.
• Client review: The case study ends with a 5-star review by the marketing director of Mercedes Benz Ukraine, Olga Belova.

This case study is an example of a detailed but easy to scan and read story from top to bottom, featuring all relevant information and ending on the highest note: the client’s review.

Advertisement

2. Galaxy Z Flips 5G Website by DFY

This is a big project that covers every aspect of the website, including the UX strategy. The creative studio aimed to fully illustrate and demonstrate the significant upgrades over previous models and to enable two-way communication with the customers through an interactive experience.

• Intro: Summary of the project and roles.
• Interactive Experience: The main project goal.
• Demonstration: Explains the decision to feature 360-degree views and hands-on videos instead of technical terms.
• Screens: Includes high-quality screenshots of significant pages and features.
• Ecosystem: Highlight a page with easy navigation across different products as a marketing decision that makes cross-selling seamless.
• Essentials: Showcases a slider of all products with key features that provide ample information.
• Showroom: Interactive experience that helps the user “play around” with the product.
• Credits: As a conclusion, DFY features the stakeholders involved.

A strong presentation of a very ambitious project. It keeps the case study visual while still providing enough insight into the thought process and the most important decisions.

3. Jambb Social Platform by Finna Wang

Here we have a beautiful case study for a platform that aims to help creators grow their communities by recognizing and rewarding their base of supporters. It tackles a curious problem that 99% of fans who contribute in non-monetary ways don’t get the same content, access, and recognition they deserve. This means the creators need a way to identify their fans across all social platforms to grow their business and give recognition. To get a clear picture of what the design has to accomplish, Finna Wang conducted stakeholder interviews with the majority of the client’s team.

• Intro: Listing roles, dates, team, and used tools.
• Project Overview: The main concept and the reasons behind it.
• Exploration: What problem will the platform solve, preliminary research, and conclusions from the research.  The section includes the project scope and problem statement.
• Design Process: A thorough explanation of the discoveries and the exact steps.
• User Flows:  3 user flows based on common tasks that the target user/fan would do on the site.
• Design Studio: Visualization process with wireframes, sitemap, prototypes.
• Design Iterations: The designer highlights the iterations they were primary behind.
• Style Guide: Typography, colors, visual elements breakdown.
• Usability Testing: Beta site vs Figma prototype; usertesting.com, revised problem statement.
• Prototype: Features an accessible high fidelity prototype in Figma you can view.
• Takeaways: Conclusions.

An extremely detailed professionally made and well-structured UX case study. It goes a step further by listing specific conclusions from the conducted research and featuring an accessible Figma prototype.

4. Memento Media by Masha Keyhani

This case study is dedicated to a very interesting project for saving family stories. It aims to help users capture and record memories from their past. To do so, the design team performed user research and competitive analysis. The entire project took a 6-week sprint.

• Overview: Introducing the client and the purpose of the app.
• My Role: Explaining the roles of the designer and their team.
• Design Process: A brief introduction of the design process and the design toolkit
• Home: The purpose of the Homepage and the thought process behind it.
• Question Selection: The decision behind this screen.
• Recording Process: Building the recording feature and the decisions behind it.
• User research: a thorough guide with the main focuses, strategies, and competitor analysts, including interviews.
• Research Objectives: The designer gives the intent of their research, the demographics, synthesis, and usability testing insights.
• Propositions: Challenges and solutions
• User Flow: Altering the user flow based on testing and feedback.
• Wireframes: Sketches, Lo-Fi wireframing.
• Design System: Typography, colors, iconography, design elements.
• The Prototype: It shows a preview of the final screens.

This UX study case is very valuable for the insights it presents. The design features a detailed explanation of the thinking process, the research phase, analysts, and testing which could help other creatives take some good advice from it for their future research.

5. Perfect Recipes App by Tubik

Here we have a UX case study for designing a simple mobile app for cooking, recipes, and food shopping. It aims to step away from traditional recipe apps by creating something more universal for users who love cooking with extended functionality. The best idea behind it is finding recipes based on what supplies the user currently has at home.

• Intro: Introducing the concept and the team behind it.
•  Project: What they wanted to make and what features would make the app different than the competitors.
• UI design: The decisions behind the design.
• Personalization: Explaining how the app gives the user room for personalization and customizing the features according to their personal preferences.
• Recipe Cards and Engaging Photos: The decisions behind the visuals.
• Cook Now feature: Explaining the feature.
• Shopping List: Explaining the feature.
• Pantry feature:  The idea to sync up the app with AmazonGo services. This case study section features a video.
• Bottom Line: What the team learned.

This UX case study is a good example of how to present your concept if you have your own idea for an app. You could also check the interactive preview of the app here .

6. SAM App by Mike Wilson

The client is the Seattle Art Museum while the challenge is to provide engaging multimedia content for users as well as self-guided tours. Mile Wilson has to create an experience that will encourage repeat visits and increase events and exhibition attendance.

• Intro: Listing time for the project, team members, and roles.
• The Client: A brief introduction of Seattle Art Museum
• The Challenge: What the app needs to accomplish.
• Research and Planning: Explaining the process for gathering insights, distributing surveys, interviews, and identifying specific ways to streamline the museum experience.
• Sloane: Creating the primary persona. This includes age, bio, goals, skills, and frustrations.
• Designing the Solution: Here the case study features the results of their research, information architecture, user flows, early sketching, paper prototypes, and wireframes.
• Conclusion: Explaining the outcome, what the team would have done differently, what’s next, and the key takeaways.

What we can take as a valuable insight aside from the detailed research analysis, is the structure of the conclusion. Usually, most case studies give the outcome and preview screens. However, here we have a showcase of what the designer has learned from the project, what they would do differently, and how they can improve from the experience.

7. Elmenus Case Study

This is a case study by UX designers Marwa Kamaleldin, Mario Maged, Nehal Nehad, and Abanoub Yacoub for redesigning a platform with over 6K restaurants. It aims to help users on the territory of Egypt to find delivery and dine-out restaurants.

• Overview: What is the platform, why the platform is getting redesigned, what is the target audience. This section also includes the 6 steps of the team’s design process.
• User Journey Map: A scheme of user scenarios and expectations with all phases and actions.
• Heuristic Evaluation: Principles, issues, recommendations, and severity of the issues of the old design.
• First Usability Testing: Goals, audience, and tasks with new user scenarios and actions based on the heuristic evaluation. It features a smaller section that lists the most severe issues from usability for the old design.
• Business Strategy: A comprehensive scheme that links problems, objectives, customer segment, measurements of success, and KPIs.
• Solutions: Ideas to solve all 4 issues.
• Wireframes: 4 directions of wireframes.
• Styleguide: Colors, fonts, typeface, components, iconography, spacing method.
• Design: Screens of the different screens and interactions.
• Second Usability Testing: Updated personas, scenarios, and goals. The section also features before-and-after screenshots.
• Outcome: Did the team solve the problem or not.

A highly visual and perfectly structured plan and process for redesigning a website. The case study shows how the team discovers the issues with the old design and what decisions they made to fix these issues.

8. LinkedIn Recruiter Tool by Evelynma

A fresh weekend project exploring the recruiting space of LinkedIn to find a way to help make it easier for recruiters to connect with ideal candidates.

• Background Info: What made the designer do the project.
• Problem and Solution: A good analysis of the problem followed by the designer’s solution.
• Process: This section includes an analysis of interviewing 7 passive candidates, 1 active candidate, 3 recruiters, and 1 hiring manager. The designer also includes their journey map of the recruiting experience, a sketch of creating personas, and the final 3 personas.
• Storyboard and User Flow Diagrams: The winning scenario for Laura’s persona and user flow diagram.
• Sketches and Paper Prototypes: Sticky notes for paper prototypes for the mobile experience.
• Visual Design: Web and mobile final design following the original LinkedIn pattern.
• Outcome: Explaining the opportunity.

This is an excellent UX case study when it comes to personal UX design projects. creating a solution to a client’s problem aside, personal project concepts is definitely something future recruiters would love to see as it showcases the creativity of the designers even further.

9. Turbofan Engine Diagnostics by Havana Nguyen

The UX designer and their team had to redesign some legacy diagnostics software to modernize the software, facilitate data transfers from new hardware, and improve usability. They built the desktop and mobile app for iOS and Android.

• Problem: The case study explain the main problem and what the team had to do to solve it.
• My Role: As a lead UX designer on a complicated 18-month project, Havana Nguyen had a lot of work to do, summarized in a list of 5 main tasks.
• Unique Challenges: This section includes 4 main challenges that made the project so complex. ( Btw, there’s a photo of sketched wireframes literally written on the wall.)
• My Process: The section includes a description of the UX design process highlighted into 5 comprehensive points.
• Final Thoughts: What the designer has learned for 18 months.

The most impressive thing about this case study is that it manages to summarize and explain well an extremely complex project. There are no prototypes and app screens since it’s an exclusive app for the clients to use.

10. Databox by FireArt

A very interesting project for Firearts’s team to solve the real AL & ML challenges across a variety of different industries. The Databox project is about building scalable data pipeline infrastructure & deploy machine learning and artificial intelligence models.

• Overview: The introduction of the case study narrows down the project goal, the great challenge ahead, and the solution.
• How We Start: The necessary phases of the design process to get an understanding of a product.
• User Flow: The entire scheme from the entry point through a set of steps towards the final action of the product.
• Wireframes: A small selection of wireframe previews after testing different scenarios.
• Styleguide: Typography, colors, components.
• Visual Design: Screenshots in light and dark mode.

A short visual case study that summarizes the huge amount of work into a few sections.

11. Travel and Training by Nikitin Team

Here’s another short and sweet case study for an app with a complete and up-to-date directory of fitness organizations in detailed maps of world cities.

• Overview: Explaining the project.
• Map Screen : Outlining the search feature by categories.
• Profiles: Profile customization section.
• Fitness Clubs: Explaining the feature.
• Icons: A preview of the icons for the app.
• App in Action: A video of the user experience.

This case study has fewer sections, however, it’s very easy to read and comprehend.

12. Carna by Ozmo

Ozmo provides a highly visual case study for a mobile application and passing various complexities of courses. The main goal for the UX designer is to develop a design and recognizable visual corporate identity with elaborate illustrations.

• Intro: A visual project preview with a brief description of the goal and role.
• Identity: Colors, fonts, and logo.
• Wireframes: The thinking process.
• Interactions: Showcase of the main interactions with animated visuals.
• Conclusion: Preview of the final screens.

The case study is short and highly visual, easy to scan and comprehend. Even without enough insight and text copy, we can clearly understand the thought process behind and what the designer was working to accomplish.

13. An Approach to Digitization in Education by Moritz Oesterlau

This case study is for an online platform for challenge-based learning. The designer’s role was to create an entire product design from research to conception, visualization, and testing. It’s a very in-depth UX case study extremely valuable for creatives in terms of how to structure the works in their portfolio.

• Intro: Introducing the client, project time, sector, and the designer’s role.
• Competitive Analysis: the case study starts off with the process of creating competitive profiles. It explains the opportunities and challenges of e-learning that were taken into consideration.
• Interviews and Surveys: Listing the goals of these surveys as well as the valuable insights they found.
• Building Empathy: The process and defining the three target profiles and how will the project cater to their needs. This section includes a PDF of the user personas.
• Structure of the Course Curriculum: Again with the attached PDF files, you can see the schemes of the task model and customer experience map.
• Information Architecture: The defined and evaluated sitemap for TINIA
• Wireframing, Prototyping, and Usability Testing :  An exploration of the work process with paper and clickable prototypes.
• Visual Design: Styleguide preview and detailed PDF.
• A/B and Click Tests: Reviewing the usability assumptions.
• Conclusion: A detailed reflection about the importance of the project, what the designer learned, and what the outcome was.

This is a very important case study and there’s a lot to take from it. First, the project was too ambitious and the goal was too big and vague. Although the result is rather an approximation and, above all, at the conceptual level requires further work, the case study is incredibly insightful, informative, and insightful.

14. In-class Review Game by Elizabeth Lin

This project was never realized but the case study remains and it’s worth checking out. Elizabeth Lin takes on how to create an engaging in-class review game with a lot of research, brainstorming, and a well-structured detailed process.

• Intro: What makes the project special.
• Research: Explaining how they approached the research and what they’ve learned.
• Brainstorming: the process and narrowing all How Might We questions to one final question: How might we create an engaging in-class math review game.
• Game Loop and Storyboarding: Sketch of the core game loop and the general flow of the game.
• Prototyping: Outlining basic game mechanics and rounds in detail.
• Future Explorations: The case study goes further with explorations showing how the product could look if we expanded upon the idea even further.
• What Happened?:  The outcome of the project.

This case study tells the story of the project in detail and expands on it with great ideas for future development.

15. Virtual Makeup Studio by Zara Dei

And for our last example, this is a case study that tells the story of an app-free shippable makeover experience integrated with the Covergirl website. The team has to find a way to improve conversion by supporting customers in their purchase decisions as well as to increase basket size by encouraging them to buy complementary products.

• Intro: Introducing the project and the main challenges.
• Discovery and Research: Using existing product information on the website to improve the experience.
• Onboarding and Perceived Performance: Avoiding compatibility issues and the barrier of a user having to download an app. The section explains the ideas for features that will keep users engaged, such as a camera with face scan animation.
• Fallback Experience and Error States: Providing clear error messaging along with troubleshooting instructions.
• Interactions: explaining the main interactions and the decisions behind them.
• Shared Design Language: Explaining the decision to provide links on each product page so users could be directed to their preferred retailer to place their order. Including recommended products to provide users with alternatives.
• Outcome and Learning: The good ending.
• Project Information: Listing all stakeholders, the UX designer’s role in a bullet list, and design tools.

In Conclusion

These were the 15 UX case studies we wanted to share with you as they all tell their story differently. If we can take something valuable about what are the best practices for making an outstanding case study, it will be something like this.

Just like with literature, storytelling isn’t a blueprint: you can write short stories, long in-depth analyses, or create a visual novel to show your story rather than tell. The detailed in-depth UX case studies with lots of insights aren’t superior to the shorter visual ones or vice versa. What’s important is for a case study to give a comprehensive view of the process, challenges, decisions, and design thinking behind the completed project .

In conclusion, a UX case study should always include a summary; the challenges; the personas; roles and responsibilities; the process; as well as the outcomes, and lessons learned.

Video Recap

Take a look at the special video we’ve made to visualize and discuss the most interesting and creative ideas implemented in the case studies.

In the meantime, why not browse through some more related insights on web development and web design?

• The 30 Best UX Books Every Creative Should Read in 2022
• Great UI Animation Examples to Make Your Jaw Drop [+Tips and Freebies]
• 60 Superb App Design Inspiration Examples

Popular Posts

• 20 UI/UX Design Trends that will Rock 2023 [Updated]
• Best 15 UI Color Palette & Scheme Generators for the Perfect Interface Design
• 10 Golden UI Design Principles and How To Use Them
• GET A QUICK QUOTE

Subscribe for our newsletter

We hate boring. Our newsletters are relevant and on point.  Excited? Let’s do this!

• Google Analytics

Shopify application - UX research case study

In this project, my role was mainly UX research, marketing, and customer support. I delivered my user flow to BSS design team to visualize it. Pl Read More

Creative fields.

Advertising

No use is allowed without explicit permission from owner