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 platform do you go to? Shopee or Lazada?
Many elements come into play when considering the reasonings behind respective preferences. However, as a UI/UX design company, our conclusion boils down to the UI and UX design of their mobile apps. This detailed review will look into both Shopee and Lazada’s UI and UX to confirm our hypothesis.
So, let’s get analyzing!
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: mediocre) UI style, Shopee compensated 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 memorable notification alert and its addictive Shopee pi pi jingle to its consistent 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 establishing its identity. As a result, when users see the mascot, they’ll immediately associate 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 utilizes 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 overlaying other aspects, users might feel slightly cluttered even though the ads don’t necessarily disrupt user flow.
Even so, Shopee has better discoverability when it comes to its functions. Shortcuts to frequently used functions like your wallet, QR scanner, and vouchers are easily noticeable and made available immediately on the homepage.
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 prominently displaying full-screen ads.
Thus, easing readability and strategically directing undivided focus to promotional content. By employing this approach, Lazada solidifies an impactful and focused interaction with users; an element that enriches 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 overshadow vital functionalities like your Wallet, QR scan, and the search bar. This disrupts user engagement and discoverability since these features are frequently 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 separation between functions contributes to a seamless and intuitive experience.
Whereas the user-first arrangement of information hierarchy, with the pivotal information placed at the utmost top, effectively directs users toward the intended interactions.
With its functions segmented 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 fostering visual coherence.
In terms of information hierarchy, Lazada is falling short on the allocation of space between essential and non-essential functions. The non-essential information commands the space on the page way more than its counterpart, disrupting user navigation.
On a positive note, the page’s UI design is a notable feat that distinguishes it from Shopee’s. The fusion of icons, subtle gradients, and white background perfectly encapsulates the more modern aesthetics of current users. Further contributing to this finesse is the subtle integration of branding elements in the background, a testament to Lazada’s dedication to 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 attribute this plus point to the simpler and straightforward grouping of elements, synonymous with UI design best practices. For example, Shopee’s menu bar houses functions that are essential for a user’s shopping experience such as the homepage, notifications, and profile page.
Additionally, the separation of chats and notifications enhances the 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 straightforward arrangement of information that avoids overcluttering. This design choice nurtures 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 characterized 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 additional 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 incorporation of curated trend searches, Lazada’s search page functions as an efficient 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 obtained with the aforementioned features, certain shortcomings warrant consideration. 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 which is a paramount concern.
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 reflected 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 misleading product pages.
Furthermore, the structured 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 heightens 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 comprehensive information while also simplifying the checkout 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 differentiate 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 noteworthy feature is the “Shop Vouchers” element, which becomes visible only upon selecting a product. This strategy creates an enticing perception 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; encouraging 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 facilitates 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 prominently 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 minimize excessive 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 transitioning 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 stemming from the live streams itself, the explore page is rather harmonious and pleasing to the eye. This minimalist approach creates a visually appealing and less cluttered 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, determining a definitive winner depends on individual preferences and priorities. Both platforms 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 seamless 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.