UIUX Case Studies: Unpacking Singapore’s Most Popular Apps from the Pandemic (Part 2: To Improve)

This is the final article in a three-part series on the design of online applications. If you’re interested, learn how you can identify good UI/UX online, and what good UI/UX looks like in some of the most widely used apps in Singapore.

Case Study 1: Teleparty

Formerly known as “Netflix Party”, Teleparty is a novel way to watch shows with friends online.  It exists as an extension on Google Chrome, and can be connected to SVoD services we know and love, namely Netflix, Disney+, Hulu and HBO. Though Teleparty has its perks, some downsides prevent it from being even better.

The main selling point is watching a show alongside others, while being able to communicate during the show. This comes through a chat bar on the right, which unfortunately, reduces the size of the video. It can be hidden, but the option to do so is badly located. And if you do conceal it, you don’t get notifications for new messages.

‍

This effectively hinders the desired purpose of watching shows as a group. Why? Because there’s no other way to communicate with other viewers. You can only talk through text, as Teleparty has neither video nor voice call functions.

Sure, you can use emojis, but users have to copy and paste them from elsewhere on their computer. On smartphones and tablets – where emojis are easily accessible – Chrome does not support extensions, so you can’t use them to view Teleparty.

Further, if one user pauses the show, it does the same for the others without any confirmation, or a pre-emptive notice.

These seem like minor issues; but when added up, you can get really frustrated, which affects your overall experience as a Teleparty user.

Suggestions to improve Teleparty's UIUX

1. Incorporate a voice chat function. Minimally, users should be able to chat quickly and effectively. This is of even greater importance during a show. Turning points in scenes come unexpectedly, and people communicate best through speaking. There’s no time to waste on typing during the climax, which affects one’s viewing experience even further.
2. Improve chat bar interactions. The option to hide or reveal the chat bar should be more noticeable, and notifications for messages should appear when the chat is hidden. Like Netflix, where the progress and options bar fades away, Teleparty can work on including an icon for the chat to that bar. Clicking it expands or minimizes it, and it fades along with the bar when the show plays.
3. Include pop-ups when pausing. Understandably, users can get confused when shows are paused; having a pop-up showing who pauses helps explain things to all the viewers. This can work well together with voice chat too, as users can inform the rest in advance.

Case Study 2: E-Commerce Apps

‍

Compared to shopping in person, doing it online has become increasingly easy and convenient. Just by pressing a few buttons, items can be delivered right to your doorstep. The coronavirus has also given more people another compelling reason to stay at home. Many Singaporeans hence opt to shop through e-commerce platforms such as Shopee and Lazada. Because of that, most big names – Shopee, Lazada, Qoo10, Amazon and Ezbuy – enjoyed substantial growth in web visits from the first quarter of 2020 to the second. Shopee almost doubled in web visits monthly, from 5.9 million to 10.8 million.

Currently, the e-commerce market in Singapore is already worth S$4.9billion, and is expected to continue growing. Yet with such impressive prospects, the interface on these e-commerce sites and apps seem slightly lacklustre.

Pages are visually cluttered, with lots of information all over. These comprise time-limited deals or promotions of all sorts, as e-commerce companies try to cater to all types of shoppers. But that also means that for many users, a huge chunk is deemed as unnecessary. There is no proper visual hierarchy either, with everything trying to stand out. On the interface, icons and fonts used are small, making it harder to see and interact with.

‍

Additionally, as you scroll through their apps, new information constantly pops up. The intended effect is to entice users to consider products beyond what they came for. Instead, what might potentially happen is that users are crippled by decision paralysis, having too many options to make a good decision.

With all the clutter, e-commerce apps tend to get unresponsive. Clicking on icons or making a search takes a while. For interacting with the interface, there is visible feedback, but only after a short delay. Loading a new page also requires some time. Furthermore, pop-ups appear frequently, making users feel less in control when using the app. All these issues frustrate users, and they might steer clear from e-commerce apps in future.

Suggestions to improve E-commerce apps' UIUX

1. Reduce information on the main page. As simple as this sounds, it might not be easy to tackle. What can be done should be to reduce the number of icons on the app’s home screen. Icons can be enlarged and spaced better, improving the user experience. This improves the amount of white space on your screen, an important element in design that improves readability and balance.
2. Allow for customization. Shoppers are all visiting the site for their own needs; being able to customize their page gets them faster results. Allow users to edit their page, such that they can add and remove product categories for their own liking. This puts users in charge, and they can now use the app more easily. Companies can still recommend new or promotional items from users’ preferred categories, since they are likely to see it. A separate section can be considered for broader searches, and to place popular items not under users’ radars.
3. Reduce pop-up frequency. Pop-ups appear frequently with no consistent pattern, which can get annoying. Constant disruptions give customers less incentive to use these apps. It may be an unintended effect, but this significantly affects user impressions, of both the apps and the companies behind them. Mitigate the use of pop-ups such that users can build momentum while shopping, instead of meeting persistent obstructions along the way. Pop-ups could be saved solely for purchases and cancellations – bigger decisions that affect outcomes. This could serve as error prevention and confirmation as well.

Case Study 3: Food Delivery Apps

‍

In the last five years, the rates of ordering food online and home delivery has grown by over 20%. Many do this for convenience and to save time. With the pandemic, food delivery has remained popular as people stay home to work, and because it is safer as well.

As it gets used more frequently, food delivery apps will continue to be a significant part of Singaporeans’ lives. But there are still concerns with some delivery services.

Like e-commerce apps, the main pages of Foodpanda and Deliveroo come off as really long. Tons of options begin to appear as you scroll. Overwhelming customers with choices then becomes a concern, especially when they don’t know what to eat. Relatively less halal-friendly options are available: this makes the services not as accessible to Muslim customers, which should not be the case.

On Foodpanda, clicking a la carte food items adds them to cart instantly. Many click on items expecting to see extra information about the dish, but none is provided. Without more details, it gets harder to make informed decisions. Customers with allergies might be at risk if they buy food they’re allergic to. There is also no confirmation prompt upon clicking, making removing items a hassle.

For modifying a la carte orders, adding or removing things (e.g. ingredients or condiments) can only be done at the cart. Yet, food bundles or sets can be modified or customized before adding to cart. Additionally, customers cannot buy from different shops in the same cart order.

Suggestions to improve Food Delivery apps' UIUX

1. Reduce options at the get go. This does not imply reducing the variety of food offered. Rather, promote lesser food choices on the front page. Categorizing food more broadly also reduces the user’s cognitive load.
2. Be more inclusive. The design should consider the needs of users with specific dietary requirements who have to scroll endlessly just to find a suitable restaurant. The interface design can include sorting options into dietary preferences such as Halal-certified, vegan and vegetarian restaurants.
3. Improve description of ingredients involved. Food delivery services can request for restaurants to reflect ingredients used clearly. This helps avoid situations where allergies or food restrictions are concerned.
4. Improve navigation. Companies can do this by adding a “Back to Top” button on the interface while scrolling through. They could also experiment with side-scrolling, hovering over choices (website) or long pressing (smartphones and tablets). This lets customers look further into specific choices without leaving their initial position.

Closing Points

When you start thinking about it, you’ll realise that UI/UX is everywhere. The terms sound technical, but what goes behind them are considerations that are within our grasps. At its core lies the need to prioritize the user. Through a good interface, we can ensure it is usable, and you’ll have seamless interactions with the digital product. This consequently contributes to a good experience for the user as well.

Oftentimes, poor UI/UX is an unintended result of insufficient knowledge. By increasing our understanding and research, we can combat the problems that arise when users interact with online apps and products. If you’re seeking a career in UI/UX, it’s important to keep in mind that empathy and open-mindedness are key traits to help you grow as a designer. Perhaps one day, your work could be referenced as an example of good UI/UX too.

This is the final article in a three-part series on the design of online applications. If you’re interested, learn how you can identify good UI/UX online, and what good UI/UX looks like in some of the most widely used apps in Singapore.

‍