mishmash. E-commerce design for the ultimate product experience.

mishmash was founded upon a profound love for all things office-related, with a core focus on perfectionism and design. After the introduction of new products along with the ambitious goals for conversion, sales and scaling, there came a need to redesign the online store, making it contemporary, sales-focused and uniquely mishmash. That's where we stepped in once again.

Mishmash chapter 2. Creating the base for a bright future.

In just a couple of months, we revamped, redesigned, and implemented mishmash's e-commerce platform, both commercially and operationally. The results have been really promising: a 34% increase in conversion rates, a 148% jump in sales compared to the previous year, and a 51% rise in returning customers, along with many other positive indicators.

“You can throw anything at them, their team will make the best out of it.”

Beatriz Barros, CEO at mishmash

New goals, new challenges.

When the mishmash team approached us, the objective was crystal clear: re-iterate the current e-commerce website, making it more capable and tailored to mishmash's present and future needs. As we began analysing the current issues and potential enhancements, we identified three key areas for improvement: design and overall store experience, commercial and conversion (which were almost non-existent), and operational efficiency.

Design.

Bringing a unique mishmash feel throughout the website.

At mishmash, design isn't just a feature – it's the heart and soul of every carefully crafted product they offer. We felt the store should embody this level of detail, elegance, and simplicity, reflecting the mishmash's unique identity. We did that by drawing inspiration from the actual mishmash product details – colours, shapes, layouts, typography – and translating this rich visual language into the website, keeping it simple but making it unique.

Defining standards that support growth.

We revamped and redesigned all UI elements, from buttons to card sections, sections to pages and even the micro-interactions – which were almost nonexistent previously – elevating the level of detail and emotion in every interaction available. This solid foundation supports growth while maintaining coherence without compromising quality.

Block-based design. Providing freedom and autonomy to create.

At Significa, we follow the concept of block page design because it's the most effective approach for scaling products while granting autonomy to those who create pages without compromising quality. Mishmash's e-commerce content pages are now highly flexible and modular, incorporating a block-based design concept. We've collaborated closely with the mishmash team to design these blocks, which serve as the foundation for every page, seamlessly adapting to each specific use case or content requirement.

Rethinking user experience details for better.

Clear user flows and information architecture are just as crucial as visual appeal. We meticulously detected and addressed all the pain points causing friction and frustration, such as unclear CTAs, redundant flows, pages and components hierarchy and organisation, simplifying interactions and creating a user-friendly environment where every click feels intuitive, and every piece of information is valuable. The results speak for themselves, with a 61% increase in total orders, validating the significance of these decisions.

The product page has been completely redesigned and reorganized. All product-related information, including specifications, product variants, quality details, delivery times, and the add-to-cart button, were moved to the top of the page.

Not all mishmash products are standardized, with variations found in format, colour, layout, and sometimes all these in the same product. According to user feedback, these nuances were causing significant frustration. We rethought, tested, and implemented this logic and experience. Even with a product's wide range of variants, the selections communicate effectively, enhancing the overall experience.

We also implemented an immersive and enhanced search feature, considering various use cases and user feedback, especially from returning customers. They can now quickly search and find items based on specific criteria or even locate that particular notebook refill without having to navigate through the website extensively. The results speak for themselves: an impressive 43% increase in returning users and a remarkable 63% jump in total orders, validating the impact of this feature on user experience and business goals.

Commercial and Marketing.

In e-commerce, the combination of clever marketing and commercial strategies, exceptional design, and operational efficiency is paramount for success. Given mishmash's business goals of increasing sales and reaching new heights, it becomes imperative to implement a smart marketing plan and strategy to attract new customers and drive conversion.

Swipeable thumbnails that boost conversion.

Showcasing product content media-on-demand is crucial for sparking interest and curiosity. Clicking through a product thumbnail to dive into a product detail is a very expensive click that can be prevented. That's why we implemented swipeable thumbnail images on product cards, eliminating the need for customers to navigate back and forth.

Cross and upsell to boost order value.

We strategically implemented cross-selling not only within content pages but also throughout various elements such as the navigation menu, promoting items like "Bestsellers" or "You may also like." showcasing complementary or related items that customers may not have initially considered, making the user journey feel more personalised and enjoyable, rising the Average Order Value in 9%.

Along with cross-selling, we've implemented upselling strategies using automatic recommendations inside the cart view. Things like "often brought together," “buy six or more and get 6% off," or “buy 2 more products for free shipping” not only improve the chances of upselling by offering relevant suggestions but also simplify the purchasing process for the customer, making it more convenient, driving up the total amount spent per order.

So far, the numbers say it all: The 9% increase in average order value illustrates the promising business impact of these additions.

Operational.

Operating an e-commerce platform extends beyond merely showcasing an exceptional storefront design and delivering a delightful user experience. Many online stores are operated by a small team, dedicating countless hours to manual, repetitive tasks.

Mishmash sought our expertise to enhance its operational efficiency and autonomy in updating its website's content, processing and shipping orders and streamlining its invoicing process.

Leveraging a block-based design framework integrated with Storyblok and Shopify, we empowered them to manage their websites independently without relying on developers or designers.

This approach maximized the CMS's capabilities:

Offering real-time previews and in-place editing – eliminating the need for frequent republishing;
It enabled swift adaptations to test new options or even run A/B quickly, improving conversion rates.
Facilitated the creation of new products and campaign pages.
Created a search, filtering and suggestion system that leverages Shopify product options.
Simplified the management of discounts.

We implemented an automated invoicing system that removes all the manual burden from their team, allowing the mishmash team to allocate their resources to more strategic initiatives.

Mobile.

Needless to say there's a mobile version for mishmash e-commerce, providing the same or even better user experience compared to other versions available. Since the launch of the new mishmash, there has been a 114% increase in user sessions, clearly demonstrating the importance of the mobile experience nowadays.