Multiple factors can affect website traffic, cart abandonment rates, and conversion. Some of the elements at play are the e-commerce site’s UI appeal and visual connection with the users. If the design does not tell a story, your site might not stand out as original and convincing even if you sell best-rated products.
Another factor is ease of use. If users have a hard time finding what they’re looking for in the first 20 seconds, it is time for a redesign.
To be ahead of the curve, Mattress King, a popular mattress retailer in Oklahoma, wanted a design that speaks to the viewer and makes their experience unique. They came to Flexy requesting a UI/UX redesign and development to enhance the site's usability and increase user engagement.
Over four months, Flexy worked closely with the Mattress King team to design an enjoyable shopping experience and seamlessly integrate the site with Shopify.
Let’s see how we tackled this project, starting with an introduction to our client, Mattress King.
Who is Mattress King?
Founded in 2005 by Ryan Ferris, a former Mathis Brothers Furniture professional, Mattress King is an Oklahoma-based company offering quality sleep solutions exclusively within the state.
On a mission to make every customer feel like royalty in their own home, Mattress King operates 6 retail stores and offers a variety of mattress options, bed frames, bedding, and more.
Our challenge
The client had an issue with their site’s adaptability. Most of their users access the site via mobile devices and the existing site design needed to be better adapted to mobile screens for a comfortable user experience.
Aside from that, crucial information seemed to be hard to find on the landing page. Many customers mistakenly believed the company offered nationwide delivery and the product categories weren’t clearly displayed on the home page. Unfortunately, this led to confusion, cart abandonment, and low conversion rates. On the other hand, the Mattress King website also serves as the first touchpoint for potential customers to visit their brick-and-mortar stores.
We had our work cut out, starting with our main task — communicating Mattress King deliverables and making them easy to navigate.
Our designer focused on improving the UI while making small UX changes to improve the site's usability and make products easy to find.
Our team did thorough competitor research and worked closely with the client to finalize the design vision before proceeding with the project. The result was a redesigned site with over 170 web and mobile screen designs that make navigating easy and cut the time-to-cart!
The project scope involved: A webpage redesign, mobile adaptability, banners, email templates, a quiz, icons, Shopify development, and a UI kit.
Homepage
When redesigning the homepage, we focused on improving the user experience (UX) and driving higher conversion rates.
The goal was to make it easier for users to search for and find products and view special deals. At the same time, the landing page needed to feel trustworthy and credible.
Our designer started by making the structure less cluttered by prioritizing the most important information and features, e.g. product categories, price ranges, Mattress Finder Quiz, and Company statistics.
To help with the product search, we created filters and custom icons that users can use to refine their search.
The freshly redesigned site now has strategically placed priority information and consistent social proofing.
Social proofing is a psychological phenomenon where people tend to copy the behavior of others. So, for example, when users see that Mattress King has top-rated best-seller products, they are more likely to consider purchasing those items.
The redesign was made with conversion optimization in mind. We reduced friction points and built a user journey that is engaging and more effective at driving sales. The new structure creates a smooth path to purchase and reduces drop-offs.
Interactive Product Search Feature
The newly designed Mattress Finder Quiz sets the brand apart from its competitors by offering a personalized UX.
While many competitors provide on-site quizzes, Flexy took it a step further by developing a step-by-step guide that focuses on the user’s unique sleeping habits, body size, common sleeping issues such as back pain, and budget.
This process gathers all relevant information before making tailored recommendations.
At the end of the quiz, the user is presented with mattress options perfectly suited to their preferences, allowing for an informed and confident decision before converting online or visiting one of Mattress King’s stores.
Shopify Development
Flexy also handled the Shopify development of the brand-new redesign, which brought new challenges.
Shopify’s restrictive templates and tile-based structure pushed us to adapt our custom design carefully to fit these limitations without sacrificing the visual and practical appeal.
In the end, we ensured that our design elements and user flows translated into Shopify’s framework, preserving the designed shopping experience.
UI Kit
The UI design kicked off with the foundation of a concept.
Our designer created two mood boards for the client to choose from. The chosen concept tells a visual story about the cycle of night transitioning to morning and then to daylight.
Storytelling is the best way to connect with users since people tend to process visuals quicker than text. The chosen design style is symbolic of what Mattress King stands for; a company that improves the quality of sleep with their products. Our design represents the shift from dark mode into light, similar to dreaming and waking up.
The palette Mattress King had before our redesign was pastel, lacking visual accent pieces. Together with our client, we created a design that is more attuned to the company’s goals: creating the feeling of sleeping like royalty.
Working with Mattress King was a great experience. It is rewarding to collaborate closely with a client who is so involved in the design process and has a clear vision of what they want to achieve. We’re happy to say that we wrapped up after four months of design development and everyone was happy with how it turned out!
Impressed with MattressKing's website? Contact us at friends@flexy.global and let's discuss our next success!
