Macmerise E-commerce website redesign — UX/UI Case Study.

6 min readAug 1, 2020

About Macmerise

Macmerise is an e-commerce website to buy funky & licensed superhero, cartoon, movie-themed mobile back covers & cases, MacBook skins, headphones, phone chargers, car mounts etc.

Design Brief

I and my friend were trying to find covers for our phones and we came across macmerise, however, we did not buy anything from this site because we doubted the quality of their products, my friend felt that the site is pretty cheap and I could see some usability issue right on the landing page. I decided to go on do some research and give a redesign to this website as my personal project.

Problems Found by Research

I went through each and every page of the website and other competitors’ websites to find all the shortcomings and observed 5 users interacting with the website while performing some tasks that I gave them, then I went through many articles by Nielsen Norman Group, World Leaders in Research-Based User Experience, UX Collective Blog posts, Baymard Institute UX research articles and UX Planet blogs to find the best practices for e-commerce websites.

Pain points discovered -

Landing page does not educate the user about all the products available on the website.

2. I asked the users to buy laptop stickers and selfie lens, they couldn’t find them because of poor navigation links.

3. Checkout section was confusing regarding the delivery charges.

4. Users were not sure about the quality of the products.

5. Users had to go back and forth while browsing for phone covers.

Though there were many small issues too but I focused on the main ones first because as stated by Pareto’s Principle “80% of the major effect come from 20% of the necessary changes.”

As we are aware of the problems now, let’s dive into solving them!

Here’s the figma file if you want to see the before and after, feel free to zoom -

Educating the user about the available products

The first thing you want to do with the users in the first few folds of the landing page is to educate the user about your main products and offers and not just start selling your stuff right away.

In the Old design, the user is made to focus on buying a phone cover, however, they don't deal in phone covers only. There is no visual hierarchy in the texts and overall feel of the website is pretty outdated.
In the New design, there’s a clear separation between the product range section and offer section, it educates the user well about all the products macmerise deal in.
New design feels more premium and aesthetic usability effects comes in play, people tend to believe that things that look better will work better.

Improving navigation

When users don’t find what they want where they expect to find it, they assume the site doesn’t offer what they need. Users must be able to quickly understand each category, and how it differs from the others in order to decide where to click.

In the Old design, the accessories section actually had 12 different products under it and only 5 of them were visible on hover state, while 3 of them were not even present anywhere on the landing while which could let the user think that they’re not being sold.
The grouping of products was wrong in the Old design, laptop skins and laptop stickers were placed in different sections, charges and cables were placed in different sections.
The New design, had all the products listed where the user expects them, all products related to laptop together, all type of cases and covers together etc.

Gaining User’s Trust

If you’re providing some value to the user then be vocal about it don’t force users to find what's best for them, tell them why are you the best option for your users and how their money is safe with you.

You can see how the Old design force user to read about their best policy, but we must respect the time of our users, users don't usually read they scan the webpages.
However the New design clearly tells the user about it’s best policies, now the user don't have to find about exchanges, COD, warranty of prints through Footer sections they can see the reasons to trust macmerise with their money.

Checkout Section

There was high drop off rate at check out, value your users’ money, they won’t buy from you if they don't know where and why they’re spending their money.

You can clearly notice the uncertainty regarding the payment and COD charges in the Old design, there’s no way user can add or remove the items from the cart.

The New design gives the flexibility to the user to add/remove items from the cart and even add new products from suggestions.
In the order summary, I made the given discount pop so that the user feels that he/she is saving a nice amount of money.
I placed the benefits of shopping with macmerise again on the checkout pages to keep encouraging the user to shop with macmerise.
The option to choose from COD and Online payment in the New design is placed at the last step of checkout and COD charges were set to 50 Rupees.

New user flow

5 out of 5 users said that they want to see all the covers available then choose which cover to buy, therefore making them go back and forth to compare covers from different category style will frustrate them.

In the Old design, users had to go back and forth to compare cases from different category styles and the category page was clumsy itself there was no white space between elements.
The New design allowed users to look at all the cases available at once and filter them through category if they want to look at only one category only.
In the New design, there’s even an option to like and save a product to view later.
I removed the ratings because there were zero ratings leading to negative impact about the product, I would propose that Macmerise can send few samples to potential customers and record their ratings to put them on website.

Results

I tested the new design again with those 5 users and got these points :

Drop off rates reduced by 10 %.
Users were now able to explore all the products easily.
They felt the site got a new and fresh look which felt pleasing to them.
They were happy to get offers like “infinity print warranty and COD” which encouraged them to shop with macmerise.
Users were now able to compare all the cases available together without going back and forth.
Save later option was used by all the user to save the items they liked and purchase later which was not possible before.

And… we’re done!

Thank you for taking the time out and reading this case study, feel free to give your suggestions and feedback, also don't forget to drop some claps if you liked my work, more case studies on their way!