Portfoilo Website

MIVI
Case Story

You’re probably wondering what the deal is with MIVI, right ?

Mivi is one of the leading audio products brands making Bluetooth earphones, TWS earbuds, speakers, soundbars. Founded in 2015, Mivi is the pioneer in manufacturing and marketing Indian-made products designed to suit Indian needs. It’s a electronic gadgets startup with the goal of making Quality with Affordable price.

Duration: 1 Week • Tools: Figma, FigJam, Notion

Heuristic Markup

As a designer without immediate access to usability experts, I took matters into my own hands by conducting a Heuristic Markup—a method introduced by Leah Buley. It's an informal yet effective approach to evaluating a website’s usability. I dedicated several hours to navigating the site, stepping into the shoes of the user. Using personas or envisioning a user’s journey, I explored the site from start to finish, focusing on how real users would accomplish key tasks. Along the way, I captured screenshots and made detailed notes, all while thinking like the user. This hands-on approach allowed me to uncover usability insights and make impactful design improvements.

Problem

I noticed right away that the logo was blurry.

The details of the mega monsoon sale offer are already stated in the header, so there is no need to display them in the top bar.

The search icon is not aligned with the top bar text and icons.

The symbol on the reward button does not represent the actual reward icon.

Using the same font without specific guidelines leads to inconsistency in display, body, function, and other areas.

The color of the top bar does not look professional."

There is no spacing between the header and sentence.

The dark shadows are old trend

The color of the review stars doesn't align with the design principles.

The reviews in some message cards from the company don't feel like genuine customer testimonials that match the "Our Customers Love Us" heading.

The background color is overlapping the text.

Using the same font without specific guidelines leads to inconsistency in display, body, function, and other areas.

A Complete Rewamp

Design

After refining the information architecture through multiple iterations,

I have transitioned to wireframing. High-fidelity wireframes laid the foundation for the visual design, ensuring alignment with key insights and user needs.

After refining the information architecture through multiple iterations,

I have transitioned to wireframing. High-fidelity wireframes laid the foundation for the visual design, ensuring alignment with key insights and user needs.