UX Analysis of Missha: A Missed Opportunity in Responsive Design

This is Kim Chung’s UX analysis of a popular online store. Want to see more UX analyses or have a request to see one in a future newsletter? Let us know in the comments below and give us some inspiration!

Lunar New Year, Valentine’s Day, and President’s Day. At least three excuses to bait new and loyal shoppers alike into eCommerce “deals” this past weekend. I fell for one: Missha.

Friday night

Friend: Missha having a pretty good sale for skincare for V-day rn if y’all want to check it out 😃

Me: *facepalm* their site isn’t responsive

Saturday morning — I redo my Google search for Missha because I was still shocked that a popular Korean beauty site was not responsive.

My findings — 2 different sites, a US-specific site, and a global site:

• www.misshaus.com (US-specific site)
• www.missha.com (global site)

The global Missha site is the one that is not responsive. WHAT?!

Recorded on Safari and iPhoneX

Well, it kind of works so what’s the big deal?

According to Mobile eCommerce Stats in 2021, 79% of smartphone users have made a purchase online using their mobile device in the last 6 months. Meaning that ideally, a successful shopping experience on the web mobile or mobile app should be similar to that of the web desktop experience. In Missha’s example, it’s not that the website is completely broken — by default the website is zoomed in and images require right-scrolling to see the full content. If zoomed out, the links and text become ants on the screen. Ok, so how do we solve this? Responsive design.

What is Responsive Design?

Responsive design is adjusting the graphic user interface (GUI) design according to the environment or device the user is navigating with — phone, tablet, desktop, orientation, screen size, etc. In other words, at the core of responsive design is a flexible layout, and to achieve that, images, text, and design elements need to be designed to look good on any screen.

“Web design is responsive design. Responsive web design is web design, done right.”

— Andy Clarke, creative director, product & website designer

Designs should look great on three types of devices: mobile, tablet, and desktop. A design best practice is to include at least 3 breakpoints where content will adjust for these 3 device types.

Responsive design breakpoints. Image by Pragmatic Responsive Design (Stephanie Rieger)

How to create responsive designs

Use a mobile-first approach

1. Because mobile has the least amount of screen real estate, it poses more usability concerns. Starting with the mobile design will narrow down what can be visible in a given screen view.
2. Visual and functional necessity — design mobile-first focuses on accomplishing user tasks. For example, if the user’s task is to search for their item, a search bar or icon should be available in the navigation as opposed to being tucked away in the hamburger menu.
3. It’s easy to scale up than to scale down because when you scale up, you have more space to add in “nice to have” features as opposed to deciding which feature is more important.

Pay attention to font sizes

1. When choosing a typeface, double-check that fonts translate well to both large and small displays.
2. Use real text as opposed to text within graphics because text can be enlarged without the loss of quality whereas text within images can become pixelated and fuzzy.
3. Avoid dummy content (like “Insert Header Here”) and “Lorem Ipsum” when designing text because these are not accurate representations of the actual words that will appear on the screen. A design is suddenly not cute when the words don’t fit in their designated space.

Optimizing images

1. Try using Scalar Vector Graphics (SVG) rather than raster graphics because SVGs alter their resolution based on images (not pixels), so they will look the same at any size!
2. Optimize images for smaller screens — this could mean that instead of scaling an image down to 50%, a cropped image is prepared so that they retain their focus and impact.
3. Avoid using heavy visuals assets because a browser will resize the image to fit the viewport which causes the loading speed to be much slower than desired.

Check visual hierarchy

1. Ensure the navigation works well on all types of devices by always displaying top-priority options. Other options can be placed in a dropdown or revealed based on their importance.
2. Some content should be viewed first, some second, some third, etc. While scrolling is inevitable on a mobile screen, they should need to scroll through all of the content to find something.
3. Use column drop to scale a multi-column layout down to a single-column layout based on screen size. This helps make content more legible and gives more space to images on a smaller device.

Conclusion

Despite being baited by the deals on Missha, I didn’t follow through with my Hallmark holiday purchase because I was distracted by the lack of website responsiveness the global site offered (and wrote this article instead). First impressions are everything. Responsive web design enables designers to be able to maintain a consistent look and feel across various devices. Specific to eCommerce, I think this experience is so important because many people are shopping on the go or while lounging around with their (smaller) devices that we want to ensure an equitable experience. A silly note that I’d also like to add from my experience with Missha is that a global site that points to regional sites should probably have a responsive design that speaks to the company’s main brand and mission.

Want to practice creating responsive web designs? Check out our 5 Hidden Sources of UX Portfolio Projects to find inspiration and tips on where to look for redesign projects!