The Translation Tool + Word Puzzle
Target users:
Singaporean Malay readers both Male/Female, 16 - 35 years old.
The Team:
1 designer + 1 developer + 1 product manager + editors and paper stakeholders
Development cycle & time:
3 months total starting with defining strategy and prototyping, followed by development, A/B tests, and iterations.
Justification of features through research:
Our research insights showed that the young Malay generation(age 16-35) in Singapore are less proficient in the Malay language due to the increase in English usage. However, they were strongly interested in learning and preserving the Malay culture according to user tests and surveys we conducted through The Straits Times and Berita Harian in early 2021.
The Translation Tool:
The Strategy:
We created the Translation Tool to cater to Singaporean Malays wanting to learn Malay through Berita Harian paper articles.
Interaction Design:
A fixed animated button in the bottom right corner was placed for 3 months to advertise and educate readers about the feature.
Users need to simply highlight words they want to translate in the article and a box will appear that shows the Malay section (words highlighted) and the English translation below it.
Available for both desktop and mobile
The Word Puzzle:
The Strategy:
We wanted to make learning Malay fun by creating short set of puzzles, and use emojis to attract the targeted younger user base.
Interaction Design:
Set of 3 words are given for every set, users are given an English word and 3 Malay words to choose from that matches the English word given.
Feature positioning and design variation A/B tests:
For mobile, we tried positioning the puzzle at the top of the screen(as shown top left). The usage was much lower than when it was at the bottom, however the feedback was that the top positioning was less intrusive and visually less interfering while reading articles.
Design variations using different icons, words, and positioning were tested via desktop articles, and we found correlation that darker blue, emoji-based designed performed better - potentially due to it being more eye-catching to users.
We further A/B tested with few versions of the quiz, and we increased the feature usage by 15% by placing the quiz at the bottom of the screen, with reduced overall height of the interaction box/area so that it does not interfere with the overall reading experience.
The final version was published in BH dark blue with emojis and with refined icons.
Halal Food Map
Target users:
Malay, Muslim majority Singaporeans wanting to discover certified Halal food options.
The Team:
1 designer + 1 developer + 1 product manager + editors and paper stakeholders
Development cycle & time:
6 months total starting with defining strategy and prototyping, followed by development, A/B tests, and iterations.
Justification of features through research:
Through the same user research done for the Translation Tool/Word Puzzle with a group of Malay Singaporeans, we found that the sense of pride in the Malay culture and heritage were very strong amongst the community. The team wanted to build features that support the Malay community and Malay owned businesses. We decided to build the Halal Food Map within the browser site first as a testing ground, planned to incorporate it later into the BH mobile app.
The project was initiated after we realised that the Malay Muslim community in Singapore wanted a product to search for halal restaurants near them.
After a round of user interviews, we found that they used:
Google (to search for restaurants)
The MUIS(the Islamic Religious Council of Singapore)’s website (to validate) whether a restaurant/business is halal or not.
While they used Google to search for halal food, they didn’t entirely trust the “halal tag”, hence they used the MUIS site to validate whether the eatery is truly halal. By creating our own Halal Food Map, we wanted to reduce this two step verification process to one. We also leveraged on the trust that the community has on Berita Harian as a historical Malay entity.
The High-level User Flow
1: User allows Berita Harian use the current location(an additional flow if the user doesn’t allow the location to be known)
2: If there is no featured restaurant within 1KM distance from the user, the map will list restaurants in the order of closest to furthest away.
3: If there IS a featured restaurant within 1KM distance from the user, the map will prioritise those restaurants within the list.
4: When users tap on “See all” button within the featured restaurant section, a complete list of featured restaurants with discounts and promotion is available. This section is to have a filter(discounts, reviews, videos, etc) in the next phase.
5: From screen 6, when user taps on the non-featured restaurant.
7: From screen 6, when user taps on the featured restaurant, the page has an orange box to display a discount code if applicable.
8 to 9: Users need to sign in to Berita Harian to redeem the discount code
10: Information such as distance from user, address, website and phone numbers of the restaurant are displayed when users scroll down, along with pictures and videos created by SPH in partnership
11: When users scroll down further, they come across a restaurant review by one of our editors, which will add credibility to the restaurant, as well as the food map itself.
12: By tapping on the pictures/videos section of the restaurant page, users enable a lightbox view.
13 &14: Users can swipe right/left, or tap on individual pictures/videos.
15&16: Users can redeem the discount code through the Get the Code button.
17: Before the code is sent, a pre-filled email address is to be verified by the user(email info from the MySPH account information).
18 to 19: users can only redeem one discount code per restaurant, therefore after a redemption is made for a particular place, “Get the Code” button will change to “Resend(discount code).”