Do you look at the prices in physical stores and immediately think, “It’s much cheaper online.” (It’s most probably a yes.)
If yes, which site do you go to? Shopee or Lazada?
Many elements come into play when considering the logic behind individual preferences. However, as a UI/UX design company, our conclusion boils down to the UI and UX design of their mobile apps. This in-depth review will look into both Shopee and Lazada’s UI and UX to confirm our conclusion.
So, let’s get evaluating!
Phase 1: Brand Identity and UI Design
Shopee
Shopee! Shopee! Shopee!
If you can hear these as you’re reading — we get you. Despite its generic (read: average) UI style, Shopee made up for it through its branding efforts.
If we were to compare both Shopee’s and Lazada’s brand impressions, it’s clear that Shopee takes the cake. With its catchy alerts and its addictive Shopee pi pi jingle to its regular use of its brand colors throughout its marketing efforts and app, Shopee certainly knows how to leave a lasting impression.
Lazada
Although Lazada has a less impressionable brand identity, it is not far behind Shopee. To make Lazada more distinguished, its usage of a cute lion mascot certainly helps in creating its identity. As a result, when users see the mascot, they’ll immediately relate it with the e-commerce platform.
As for its UI style, Lazada has a more brand-personalized, cleaner, and modernized UI style with its usage of gradients and geometric shapes in its app. It also applies color, whitespace, and typography better, which is something that Shopee lacks.
Winner — Tie
Phase 2: Homepage and First Impressions
Shopee
Once you launch the app, a bright and glaring orange greets you on the app’s homepage. For the most part, this is a good use of brand color as it immediately draws attention; however, as your eyes wander around the screen, it may start to feel excessive on certain elements.
Combining this with pop-up ads covering other aspects, users might feel slightly crowded even though the ads don’t necessarily disrupt user flow.
Even so, Shopee has better discoverability when it comes to its functions. Shortcuts to commonly used functions like your wallet, QR scanner, and vouchers are easily noticeable and made available immediately on the main page.
Lazada
Lazada has a more polished and simplistic approach when it comes to its homepage. Overall, we can see that careful usage of white space allows for better ad contrast when displaying full-screen ads.
Thus, easing readability and strategically guiding complete focus to promotional content. By using this approach, Lazada forms an impactful and focused interaction with users; an element that improves the user experience.
Although Lazada’s use of white space is commendable, it’s also a cause of demerit. Too much white space may result in users overlooking important information when they engage in extended scrolling. To improve this drawback, a good balance between space and content would do the trick.
As for icon hierarchy, Lazada faces a disadvantage as less essential functions slightly cloud vital functionalities like your Wallet, QR scan, and the search bar. This interrupts user engagement and discoverability since these features are often used.
Winner — Shopee
Phase 3: Profile Page
Shopee
In assessing Shopee’s user profile page, a blend of user-focused and functionality emerges in its interface design. The clear and clean split between functions supports a seamless and intuitive experience.
Whereas the user-first arrangement of information hierarchy, with the pivotal information placed at the utmost top, is useful in directing users toward the intended actions.
With its functions separated to match the user’s shopping journey, the “Buy Again” section adds to page efficacy as it simplifies the user’s shopping experience by guiding quick access to previous purchases. This user-centric approach further assists in streamlining interactions and nurturing customer satisfaction.
Lazada
With Lazada’s user profile page, one immediate observation stood out — the color palette. Both the homepage and profile page share the same limited color palette, which aids in promoting visual coherence.
In terms of information hierarchy, Lazada is falling short on the distribution of space between essential and non-essential functions. The less important information commands the space on the page way more than its equivalent, disrupting user navigation.
On a positive note, the page’s UI design is a notable feat that differentiates it from Shopee’s. The fusion of icons, subtle gradients, and white background perfectly represents the more modern aesthetics of current users. Further contributing to this finesse is the subtle fusion of branding elements in the background, evidence of Lazada’s drive of a comprehensive and seamless brand experience.
Winner — Shopee
Phase 4: Menu Bar
Shopee
A glance at Shopee’s menu bar makes it clear that Shopee succeeds in user experience. Not only does it grant access to more practical functions such as ShopeeLive and ShopeeMall, but it also homes a familiar UX pattern with the cart icon at the top of the page — where it adheres to users’ natural expectations.
We connect this plus point to the simpler and straightforward grouping of elements, common with UI design best practices. For example, Shopee’s menu bar houses functions that are important for a user’s shopping experience such as the homepage, notifications, and profile page.
Additionally, the separation of chats and notifications improvesthe user experience by streamlining interactions and differentiating between communication and updates.
Lazada
Lazada, in contrast, approaches its menu bar design quite differently. Alongside easy access to conventional functions such as the homepage and profile page, Lazada’s menu bar includes a messages tab, a cart tab, and a feed tab. The addition of the feed tab is a good strategy on Lazada’s part to retain users on the app longer as it might instigate more purchases by encouraging users to browse more.
However, both the feed explore page and the homepage share similar functions so it is rather redundant to have both tabs on the menu bar. Moreover, the placing of a cart tab on the menu bar is rather unconventional which might slightly confuse users who are used to a different placement.
This change in UI might discourage users from using the app as it requires more mental energy to relearn a new shopping flow.
Another distinctive feature worth noting is the combination of notifications and the inbox under the messages tab. Although a bit unorthodox, it is a clever strategy for ensuring users are alert to their notifications.
Winner — Shopee
Phase 5: Search
Shopee
Once again, Shopee has UI and UX design to the tee. The app’s good grasp of white space results in a clear and direct structure of information that avoids overcluttering. This design choice creates an interface that’s not only visually appealing but also acts to improve users’ understanding of the available options.
Although the search functionalities might be defined as fairly basic, they’re not lacking in catering to users’ needs. The inclusion of a search history list, suggestion list, and search by image establishes Shopee’s commitment to facilitating an efficient search experience.
Lazada
Lazada has yet again chosen a slightly different route than Shopee. Apart from the regular functions such as search history, search suggestion, and image search, Lazada includes an added voice dictation feature to further cater to users’ search preferences.
The app also stands out in terms of its search suggestions pre-input. Through its curated trend searches, Lazada’s search page functions as an effective discovery tool for users to have a more engaging and enriching experience. For instance, the app prompts users to browse the latest fashion trends with its curated “TikTok fashion trends.”
Despite the merits Lazada has with the aforementioned features, certain shortcomings warrant concern. For starters, even though the “Deals” section brings potential value, it can divert users from the original task; to search. This particular feature may be detrimental to maintaining users’ focus.
Its decision to opt for a smaller font size is also a questionable choice since small fonts can give the illusion of too much information. Information overload adds to clutter on the screen and eventually leads to a less comfortable user experience.
Winner — Shopee
Phase 6: Product Listing Page
Shopee
One trait that we’ve noticed with Shopee’s UIUX design is their simplistic and direct approach, which is repeated in most areas including the product listing page. With this approach, Shopee displays its ads in an organized way that offers both clarity and reduces frustration from false product pages.
Furthermore, the organized grid-based product listing enhances the user experience by displaying essential information to prompt buyers clearly. It clearly states initial information such as product images, product name, costs, reviews, and seller location to attract interest in the product.
Lazada
Similarly to Shopee, Lazada’s approach to its product listing page is clean and orderly. On top of its cleaner product search filter’s UI, Lazada’s product listing page has a better visual hierarchy, contrast, grouping, and iconography; aiding in efficient navigation and retaining interaction on the app.
However, one demerit to note for Lazada is its ad listings. On the product listing page, the ad listings are obscure which is misleading in our opinion. Imagine the frustration that you’d feel when you’re tricked into clicking a product only to find it to be an advertisement.
Ads on product listing pages are frustrating simply because they’re intrusive and, most of the time, don’t reflect the intended search well. Disguising it as regular product pages only adds to the negative feelings users have towards advertisements.
Winner — Shopee
Phase 7: Individual Product Page
Shopee
When it comes to product pages, the focus should be on providing complete information while also simplifying the buying process. With Shopee, a few of these requirements are incorporated. Components such as ease of choosing variations and product sharing to full-width images are only some of the features that enhance its product page.
Not shy about sharing information, Shopee’s product page is thorough. Bearing crucial product information such as product variations, reviews, and product specifications — to name a few, the page provides users the ability to thoroughly inspect the product; thus, enriching the shopping experience. Its eye-catching call to action button is also worth mentioning as it immediately encourages users to take the desired action.
Despite the abundance of information, the app has many unutilized spaces and a less defined information hierarchy. It’s a bit of a hassle to discern which information is essential when everything is arranged and appears almost similar to each other.
Not to mention, setting the sizing of the price and discounts to small, even with Shopee’s brand color, doesn’t instantly grasp users’ attention. And we can all agree that pricing is important
Lazada
In comparison to Shopee, Lazada seems to have a better grasp of its product pages’ UI/UX design. It checks off many excellent user experience elements. Firstly, the page is clear. Product prices and discounts are visible from the get-go mostly due to it being bolded and highlighted. It also has clearer and more organized information and visual hierarchy, allowing users to focus on the information that matters most.
With clarity comes ease. When information is organized systematically, it improves the user’s shopping journey by making it easy to navigate. With Lazada, users can directly search for products, visit stores, and share their findings just from the product page. Centralizing all of these tasks just on the product page streamlines users’ shopping experience, making it easier for them to complete their purchases — which is the ultimate goal.
Winner — Lazada
Phase 8: “Added to Cart” Popup
Shopee
Keeping to their simple design strategy, Shopee’s “added to cart” indicator is clear and concise. Users are presented with a pop-up that has a flexible modal height that adapts to the amount of content presently displayed to the user.
This particular quality in the popup not only lessens unnecessary visual clutter but also doesn’t distract or frustrate users into abandoning their current intention: to add an item. The inclusion of a popup further smoothens the user experience as it provides reassurance of their purchases.
Lazada
Once again, on an unorthodox route, Lazada opted for a no-popup overlay for its “add to cart” indicator. We hypothesize that Lazada is taking a less intrusive approach with this particular feature using a promo indicator at the bottom of the screen as a substitute. This promo indicator is similar to the “added to cart” popup of Shopee’s, the only difference is that Lazada uses a fixed height modal.
Fixed height models can be tricky when it comes to popups. On one end, it serves benefits that are tempting such as predictability, consistency, and speed. On the other hand, it limits content on the screen and is less user-friendly. And when it comes to applications, user-centric designs are a must. Hence, it becomes a bit of a disadvantage for Lazada.
Winner — Shopee
Phase 9: Shopping Cart Page
Shopee
In terms of UI design, Shopee practically excels in delivering a clear information hierarchy. Although Lazada has a similar design, Shopee’s CTA is more prominent with its consistent use of brand colors. However, the requirement of manually checking the box can pose a nuisance simply because it requires an extra step and mental labor from users.
Nevertheless, a significant feature is the “Shop Vouchers” element, which becomes visible upon selecting a product. This strategy creates the impression of potential savings, enticing users to explore further. This does require an extra step, which users need to take to access these potential savings — adding more steps to the user journey.
Lazada
Clear and concise information hierarchy may be Shopee’s merits, but Lazada’s shopping cart nails UX efficiency. The strategic placement of the “Collect Voucher” option at the top makes it more noticeable, motivating users to explore more and maintaining them on the app longer.
The inclusion of a “Buy Again” option is another beneficial touch that not only aids the reordering process but also promotes engagement and customer loyalty in the app. On top of that, the pre-checked boxes within the cart further aid in streamlining the checkout process. This design choice reduces the extra step and mental effort of having users manually select items for purchase.
Winner — Lazada
Phase 10: Wallet
Shopee
Shopee clearly positions its eWallet function, ShopeePay (SPay), making it directly accessible from the homepage. The wallet’s key functions are also strategically placed at the top of the wallet’s interface, facilitating swift and convenient access to important financial actions.
Apart from that, the presentation of transaction history within the wallet is notably well-organized. Users can easily trace their financial activities, fostering transparency and trust in the platform. Besides an occasional promotional banner, Shopee avoids overcrowding its wallet function to reduce distractions and overwhelming users.
Lazada
Lazada’s wallet, on the other hand, is lacking in many ways. First and foremost, the wallet icon on the homepage lacks visibility. The less-than-visible positioning of the wallet hinders users from accessing it when urgency calls for it. Further complicating the user experience.
Although the blue color choice blends seamlessly on the page’s first half, it gradually becomes visual clutter. The combination of the color and the many promotional banners becomes distracting as users scroll downward. Adding more to the hassle is the transaction history. Its availability can only be seen after scrolling past the promotional section, making it a rather inconvenience.
Winner — Shopee
Phase 11: Live Broadcast Page
Shopee
Positioned on the bottom homepage navigation bar, Shopee’s live broadcast page has the advantage of being directly accessible. Further simplifying user navigation, the live broadcasts are categorized by applicable deals, allowing users to easily filter them according to different categories.
Another strength of Shopee’s lies in its interactivity. Equipped with elements such as pre-proposed comments, voucher claims, likes, rewards, and interactions with streamers, encourages engagement and enhances the overall viewing experience.
Moreover, the live streams allow viewers to visit the product page whilst live streaming. Seamlessly switching from live video to product page is a valuable addition as it doesn’t interrupt user flow and encourages users to explore and make purchases without losing track of the live stream.
Lazada
Starting with the positives, Lazada adopted a cleaner explore page for its live broadcast. With the color palette mostly sourced from the live streams itself, the explore page is rather harmonious and pleasing to the eye. This minimalist approach creates a visually appealing and organized viewing experience. Its use of brand colors in the live stream view displays its use of color consistency in its branding efforts.
Nonetheless, in comparison to Shopee, Lazada’s page still lacks the organizational element that improves user experience. Not only is it hard to find the page — requires extra scrolling through a carousel of icons, but it also doesn’t offer proper categorization of filtering functions. Further complicating the experience and possibly wasting users’ time.
Winner — Shopee
Phase 12: Chats
Shopee
Staying true to its user-centered approach, Shopee’s chat function is straightforward. With just one click, users are led directly to their chat inbox. Users can distinguish different sellers easily as more prominent profile icons are utilized in the chat inbox; making it visibly easier for them to locate the intended sellers at a glance.
Upon accessing the chats, users are presented with template messages — simplifying communication and saving users time and effort with common queries. Shopee makes it clear that user interaction is the main focus when it comes to their chats. In addition to the message template, other functions like seller profile are hidden ensuring the platform prioritizes the core activity of messaging,
In terms of functionality, Shopee’s chats cover a wide range of features, including sending and receiving messages with sellers, sharing photos, videos, products, and orders, and even sending coins. A home redirect button is also a practical feature added, allowing users to return to the main interface for a seamless navigation experience.
Lazada
Right off the bat, we question Lazada’s approach to its chat function. It’s hidden from users. To reach the individual chat interface, users have to venture into the messages section on the navigation bar, pass through the chats icon, and access the chat inbox.
From our perspective, these steps are unnecessary and only frustrate users, especially when they still have to spend time carefully scrolling through the inbox due to small profile icons that hinder quick scanning. However, the seller profile icons are more visible which makes them suitable for quick scanning.
Despite having a more appealing chat layout, we are quick to notice that the focus of the chat is catered to sellers more than users. Besides the regular functions of sending and receiving messages, sending photos, videos, products, and orders, shortcuts for rating and following the seller as well as a store icon that redirects users to the seller page are also included on the interface.
Although the addition of these shortcuts and icons assists in gaining additional information about the seller, it kind of beats the purpose of a chatbox — which is to message. A chat function is supposed to help communication between sellers and buyers in clarifying or confirming information, not to add more confusion, which might happen if users are presented with new information.
Winner — Shopee
Who’s on Top?
Phew — that was quite a ride. Now, who takes the crown?
With a momentous win of 9 out of 12 marks, Shopee runs supreme in this UI/UX audit against Lazada. The app’s user-centered and efficiency-focused design makes it the top choice for e-commerce in Southeast Asia.
However, Lazada is also not too far behind Shopee. Throughout this analysis, Lazada has time and time again impressed us with its innovative approaches to its design. Some proved to be effective, while others not so much. Yet, it still establishes Lazada as a force to be reckoned with when it comes to design originality.
Ultimately, deciding a clear-cut winner depends on individual preferences and priorities. Both sites have areas for refinement that align with their unique user bases and brand identities.
Want Your Own App?
Consider partnering with us!
With a proven track record of creating intuitive and visually stunning designs, we can elevate your applications (or websites). We’ll ensure your users enjoy a smooth and engaging journey with your app. That’s a guarantee.
Your users deserve nothing less than an exceptional experience, and Snappymob is here to help you achieve it! Contact us today to unlock the full potential of your UI/UX design.