I’M Inter Motors

Design and implementation of I'M Inter Motors – an award-winning e-commerce platform

Automotive E-commerce Magento 2

Business background

Imready.eu is the ecommerce platform launched in March 2018 by I’M Inter Motors, the company focused on wear and motorcycle parts and accessories sales. “This is the first and the largest chain of stores in this industry, previously known as Inter Motors” - as can be read on the company’s website – imready.eu.

Challenge

Our goal was creating sales platform to represent I’M Inter Motors after going through rebranding. We wanted to extend imready.eu (domain of the new website) not only to have sales functionality, but also to give it means to become a place to meet and exchange experience in the motorcycle community.

The key factor was time: the project and it’s implementation had to be released publicly within 3 months. This rush had been the result of motorcycle season which was to begin shortly after, something that I’M didn’t want to miss.

“It was rough time and enormous effort from our team, however we’ve managed to meet the deadlines. This project is our personal record when it comes to implementation time, what’s more, it’s one of the fastest implementations in Europe.” - Borys Skraba, Strix CEO

We’ve launched this project only because of the trust from client side, who willingly made the decision to launch MVP version, giving us freedom to decide which functions we’re able to deliver. As result the site had launched before motorcycle season has begun. As for now we’re steadily adding additional functionality.

Sample functions:

  • product gallery is always visible, even during scrolling. It mimics user experience from physical shop, scenario in which the client never loses the sight of the product from point of view,
  • the information how much can be saved on given discount, shows directly the benefit of ordering a product, can impact the purchase decision,
  • easier searching – achieved by suggestions of phrases, categories, technical details, mini-search boxes in filtered results and ability to manage filter order for each category,
  • implemented click & collect – where the customer can personally pick up ordered products in physical store,
  • the customer can check product availability in given store,
  • shipping cost is visible on cart view, giving the customer overall order cost before entering checkout page,
  • the customer will receive SMS message when the order is shipped or ready to pick up,
  • all receipts in one place – client account, it’s the way to merge online and offline shopping, as well as one of the steps towards omnichannel,
  • driving styles page – takes into account preference differences among customers, who may prefer various motorcycle types. We’ve accommodated those expectations.
  • one click payment – can be used by newcomers, who have no experience in fitting different pieces of wear as well as experienced users, that want to customize their wear,
  • blog – being source of new trends and novelties,
  • menu designed not to disappear, even when the mouse pointer is in different point of the page.

Personas

To prepare the designing process, we've created “Personas” (every customer segment has been assigned to different person with their unique name, last name and story). That’s how Adam was created (low income beginner), Lucas (high income beginner) as well as Mariusz and Kuba (experienced with similar income).

“Time limit made it impossible to perform sophisticated research. Fortunately I’M already had well developed UX wing and provided us with usefull information architecture different customer segments.” - Jarosław Groń, UX Designer

Personas are very important, they allow us to “become” certain person. They allowed us to know exactly who are we designing the platform for.

Functions and their priority

We’ve created website function list for our “personas”. We’ve wondered what is their interest while navigating? What are their expectations? What can help them with their user experience? Product Information Canvas tool helped us to systematize our knowledge and ideas in that matter. We also had to decide which of those function to include in MVP. After discussing it further with our developers we’ve made our final decision.

Information Architecture and Google Design Sprint Elements

Creating information architecture flowchart (flowchart AI) helped us to pinpoint all subpages, that had to be designed, their content and relations among them.

"Many companies skips the whole pre-project processing. I’s huge misstep in my opinion. Even in a very short time we’re capable of solid preparations, giving us insight about our target users, what should we focus on while designing, what we want to achieve and letting us to minimize risk of encountering various problems in the future.” - Marcin Piwowarczyk, Commerce Design Director, VP

We’ve got our pencils and sketched all the subpages individually. All those ideas were confronted during overall meeting and merged into one coherent pattern volume. Even when you don’t have time to complete whole Google Design Sprint, it’s worth to take even single elements out of it. Collective sketching is one of them. It’s a huge payoff to you, as designer as well as client, who receives this sketch.

Design and copywriting 

We’ve started graphic design by familiarizing ourselves with brandbook. Everything had to be coherent both online and offline – with huge physical store network.

“Consistent visual identification is something natural, especially when the client has omnichanel in mind. It was one of the goals we were presented.” - says Kamil Popławski, Project Manager

I’M Inter Motors is bold and open to new experience, that’s why we’ve decided to take a bold move and introduce copywritng in different language, which goes well with modern brand style as well as being part of wider community.

Slants and color palette emphasize dynamic character of the brand, which has been properly used in design. Every designed part eventually went through design review, meaning evaluation by whole UX team. We’ve made some changes / alteration when needed and continued with our work.

Prototype

Whole design was presented to the clinet as prototype using inVision tool, enabling remote review and additional feedback. What’s more, all the changes applied to the project could be reviewed and displayed up to date. Designing in Sketch tool solves the issue when parts of the project are ready, however the client has to wait for the newest version to be available for review.

Graphic design documentation

“Our ecommerce systems are usually very complex and can be challenging during implementation. We wanted to make sure that the designed look was the same as the version that the client will see on the live version. It’s the standard that we’re recently implemented in every of our projects, withiout exceptions.” - Marcin Piwowarczyk, Commerce Design Director, VP

The documentation describes all of the designed pages, their RWD versions as well as all the elements  displayed. Microinteractions, animations, principles of operation, exceptions, developers’ comments – all is there. Thanks to that approach, fornt-end developer knows exactly, how given element is supposed to work. It shortens the time needed to consult and implement.

"One more thing when it comes to documentation – as designer I have to make sure that given element won’t interfere with others, I learn to tighten my cooperation with developers even more, this kind of synergy gives great results.” Jarek – UX Designer

    Users’ opinion:

    Some time after launching imready.eu we’ve made survey asking users about their experience.

    Here are the results:

    • 94% users like new site look
    • 83% finds the site intuitive 
    • 83% would recommend the site to their friends

    I’M community gave positive feedback about:

    • site clarity and intuitiveness
    • legible menu and icons
    • category layout
    • driving styles sections
    • site performance

    Implementation

    Project implemented using Magento 2 Commerce (previously Magento 2 Enterprise Edition).

    Technologies: Magento 2 Commerce, PHP, MySQL, Postgresql, Symfony, HTML5, JavaScript, Gatling, Ansible.

    • Cloudinary – we’ve integrated with external media resources and created the option to switch between native Magento gallery and media from eternal sources.
    • GDPR- we’ve integrated with external service provided by the client with GDPR agreements
    • Receipts – we’ve created module module capable of creatting graphical receipt object and saving it in database with text data. When uploaded as .pdf, it’s automatically converted to .jpg 
    • Importer – we’ve implemented uploading spreadsheet (ex. csv file) with products, which are sent to Magento in next step. It also creates configurable product based on simple ones with possibility to update them by the client. Periodically Magento stocks and prices are updated based upon database view shared by the client.
    • Cache management – we’ve created functionality to queue full page cache flushing  – we collect all the flush requests and launch them simultaneously.
    • SMS service- we’ve integrated with infobip sms via REST API
    • Smile Elastic Search – we’ve implemented plugin extended searching and filtering mechanisms
    • Przelewy24 – integration with payment service
    • Ansible deployment – we’ve created procedure using ansible technology, allowing us to simplify deployment process
    • Gatling – we’ve wrote different scenarios and created load and performance tests

    Winner of the E-commerce Polska Awards 2018

    I'm Inter Motors (with the imready.eu platform) is the winner of the E-commerce Polska Awards 2018 in the category of Design & Usability and Best in Omnichannel!

    Let’s talk about your e-commerce and omnichannel project



    Check out more of

    I’M Inter Motors

    Automotive

    Super-Pharm

    Cosmetics & Personal Care

    Castorama

    DIY

    Stay updated

    Check Strixletter

    Digital commerce, omnichannel and shopping experience.
    Real knowledge. No spam.