Migration and bespoke Magento 2 theme development for Mageworx
As part of a long-term partnership, Staylime delivers bespoke Magento 2 theme development to Mageworx, implementing a signature identity and UI/UX design in-line with the new business positioning of the Magento extension and Shopify app vendor.
Our customer, Mageworx, is one of the leading Magento extension and Shopify app vendors worldwide. Well-known for such products as Advanced Product Options Suite, SEO Suite Ultimate, and Shipping Suite, the company aims at providing superior solutions to transform the way ecommerce businesses operate.
Started as a Magento extension vendor over a decade ago, Mageworx has been growing rapidly, introducing top-selling extensions to the market. As the business evolved, the team has diversified their expertise and stepped into a new direction, Shopify app development, to assist the growing Shopify market with reliable solutions as well.
Though the company’s business strategy changed significantly, their legacy ecommerce website remained the same, being laser-focused on Magento extensions and services. User experience and interface design were dated too, which could not but affect Mageworx’ online presence and overall customer perception.
The Magento-based website desperately required a new look and feel, thus, the company decided to take on a huge redevelopment project aiming to:
Reflect new business vision and positioning in accordance with the company’s strategic objectives;
Enable well-thought-out and fresh UI/UX to provide a better, customer-centric shopping experience to buyers;
Stand out from competitors and expand the market reach through an unconventional, distinctive design approach.
Being our partner for several years now, Mageworx turned to Staylime to bring the new website to life.
New identity & branding
Understanding the new positioning and target audience of our customer, Staylime started the project off with the development of a new brand identity for Mageworx.
The idea was to bring a unique signature style that would capture the company’s values and ethos best, shaping a powerful image of a mature and reliable ecommerce solution provider.
We rolled out an in-depth market research to study industry leaders and close competitors and cherry-pick some references to base the new concept on only to find out that most businesses out there kept their identity and branding low-key. They focused on technical aspects and features of their solutions, leaving no room for actual product presentation and a customer-friendly approach to content.
To help Mageworx gain the upper hand, we put our bets on a complete rebranding, having introduced a next-gen identity for their business — we created a new minimalistic logo and corporate style that clearly translate the wide spectrum of expertise and solutions Mageworx offers.
Our team also paid particular attention to the design of Mageworx’s Magento extension and Shopify app icons.
To better understand how they are perceived by viewers, we conducted a focus group research, displaying various icon styles to participants.
Thanks to this analysis, we discovered that icons that reflect the essence of the product with a corresponding image and those that feature the product name work best.
Based on this logic, our designers created a set of illustrations associated with each extension in the portfolio and used text where graphics were not applicable.
A miniature of the Mageworx logo was added to every icon too to further set Mageworx’s solutions apart from competitors.
UI/UX Design
Working on the new design, we kept in mind the following key requirements our customer had:
Large fonts and lots of white space
Contrasting colors with a dominant one
Minimalistic, geometric graphics
We wanted to get away from the default layouts offered by Magento and create a one-of-a-kind design that is driven by both UI/UX trends and company’s business objectives.
The final concept is noted for the near absence of patterns: black, white, and grey colors act as backgrounds for front-line design elements. Though the overall design is minimalistic, there is still a place for color in it. Orange, a signature Magento hue, is balanced by vivid green and transitional colors to highlight the idea that Mageworx is the ultimate source for Magento and Shopify solutions alike.
To further adhere to the minimalistic concept, we opted for a distinctive contemporary font, Agrandir, as a corporate typeface.
For this project, our team also developed custom 3D visualizations and animations from scratch to enable a more immersive user experience.
Enjoy a well-designed product
Feel the care
Experience painless customization
Get software that’s always growing better
And, finally, this is how the homepage looks in real life with interactions.
Providing fast and responsive mobile design was crucial to ensure enjoyable browsing to any buyer regardless of the device they use.
So, we reproduced the interface in six resolutions, from desktop to mobile.
Leveraging Figma and its flexible component-based design system, Staylime created 38 unique mockups...
...and a comprehensive UI kit for the new website
Catalog
Apart from bespoke Magento 2 theme development, Staylime transformed the product catalog in a way so that it stands apart from hundreds of plain, unremarkable catalogs on the market.
The legacy catalog featured extensions for two versions of the platform — Magento 1 and Magento 2. Since the first version of the platform was discontinued, Magento 1 extensions became irrelevant. Instead, Shopify solutions should have been highlighted on the website as another area of Mageworx’ expertise.
We reworked the catalog structure and replaced Magento 1 offering with Shopify, bringing in a simple layout to the catalog. Large fonts and clean geometry of content blocks made it look modern and fresh, also facilitating navigation and browsing.
However, understanding that some of the merchants would continue to use the first version of Magento for a while, we decided to keep the Magento 1 section hidden in the menu. In case a potential buyer is interested in Magento 1 extensions, they will be able to find them on the website too.
Product page
A cornerstone of any ecommerce website, the product page requires particular attention during redesign.
Our research showed that none of the existing approaches to the Product page design corresponded with the vision and requirements the customer and our team had. Loaded with disparate information pieces like screenshots, banners, switches, and toggles, the majority of existing product pages are cluttered and unclear.
To build an eye-catching, intuitive, and clean product page that converts, Staylime opted for a hierarchical approach to information display.
Our engineers segmented product info into key groups — Description, Icon, Heading, Features, and Technical details — which are now visually graded according to their priority. This way, customers can easily slide through the page, first exploring the product’s unique selling points and then diving into more details, if interested.
One of the Product page highlights is its distinctive purchase feature
When clicking on the Buy button, a drop-down menu appears so that customers can choose the required option and send the product to cart.
Mini-cart
Quick access to the mini-cart is enabled via a side menu, where all the information is logically structured and available for review.
The checkout is based on the newest Mageworx Checkout extension that was earlier designed by Staylime as part of our partnership.
Thus, just like that, with literally a couple of clicks, buyers can fill in their carts and proceed to checkout with no page reload. Thanks to this approach, the customer journey is easy and fast, which makes for faster purchase decision-making and sales conversion growth.
My account
To optimize the development effort, we agreed to create a new dashboard, the key component of a personal account, from scratch, whilst neatly refining the rest of the section in accordance with the new style.
Designed for two types of users — individuals and corporate users (partners, agencies, and bloggers), the new account dashboard unites all the customer-related information in a simple and visible form. Any user can subscribe and unsubscribe from the newsletter via a custom-build switch.
Affiliate center
Corporate users also have access to the Affiliate center, where they can view their balance, rewards, payments, and other data.
Backend development
Not only did we enable a new frontend design, but also revamped the backend of the legacy solution, having either built up some of the features from scratch or customized ready-made solutions.
Menu
We wanted to go beyond a standard customization of heavy-loaded menu extensions to enable a lightweight and easy menu that works seamlessly on web and mobile browsers alike. Thus, the menu was developed from scratch on CSS with no JavaScript involved.
Search
Our engineers took Elasticsearch as a base and enhanced it with the Mageworx Search Autocomplete extension to allow users to quickly search through the site thanks to Quick links and a search suggest drop-down list.
Product page layout
To avoid the constraints of the default Magento product page layout, we built a custom one from the ground up.
Product options
Stylized product options for extensions are available in a popup, which was enabled on top of the Advanced Product Options extension.
Mini-cart
The standard Magento functionality was customized in-line with the new design concept.
Customer reviews
Having analyzed a number of out-of-the-box solutions, we decided to go for a fully custom extension that would allow collecting feedback from buyers more effectively.
Customer rewards
Our team used Mageworx Reward Points to enable a loyalty program for individuals and Mirasvit Affiliate Center — for corporate users. Though the extensions remained as is, we customized the balance dashboards in the user account.
Extension infobox
Depending on the extensions purchased, the information on composer keys and installation is displayed to a buyer in a separate custom-built section. It also serves as a cross-sell/up-sell tool, showcasing relevant products that the buyer might find interesting.
Knowledge base, wiki, and blog
Initially, these items were hosted on third-party platforms. Their move to Magento did not seem reasonable due to the large amount of content, and thus we opted for the redesign of each of the third-party solutions to make them correspond to the new style of the store.
Results
When creating the new website for Mageworx, we wanted to push the boundaries of how ecommerce-focused IT businesses build and run their online presence, and it all has turned out a success. Our team went beyond common industry standards and ordinary approaches, having introduced a boutique-like experience to buyers of Magento and Shopify solutions.
Apart from the technical implementation, we acted as an ecommerce business consultant and helped the customer reshape the way they market their products and services. Together with Mageworx, our team elaborated on existing offerings and prepared the content for a set of six new service pages, which were deployed on the website too.
