Sanbron Liong
@sanbronliong
Followers
1K
Following
2K
Media
326
Statuses
2K
Draw ⧈ rectangles at @chip_asia ✦ Cooking design system
Malaysia
Joined June 2022
3 months ago, 🇲🇾 Malaysia’s new open-data portal, was released to the public. Since then, many have built projects using API and datasets from the site. In this thread, I’ll walk through the top 5 design upgrades that went into creating this portal. 👇
9
313
666
I'm back with my second UX analysis, this time I’ll be comparing cinema apps: @GSCinemas vs @TGVCinemas. While I always prefer GSC (due to its close proximity), I'm curious to see how their online booking systems compare. So, I’ll break it down in this thread 👇 (11 tweets)
13
275
648
Comparison between TimedotCom and TM's Unifi rebrand: Both companies underwent their rebranding exercises almost simultaneously, with a gap of just over two months.
12
105
382
A sneak peek into a mini project that I've been working on since last week: Redraw Klang Valley Integrated Transit Map.
10
57
320
@hannahyeoh @olympicmas @KBSMalaysia @MSNMALAYSIA Trust me, it’s not the design that looks ugly, it’s the way these photos are taken. Colour is off. Could have hire real athletes as the model. 🥹.
24
20
279
Food ordering UI/UX analysis for @Foodpanda vs @GrabMY as requested. 😄. In this thread, I'll be using a credit card to place a food order for a fair comparison with FoodPanda, as their wallet feature is unavailable in 🇲🇾 Malaysia. Curious? Read on👇 (7 tweets)
3
71
193
I saw the new Galaxy S23 Ultra and thought, why not bring it to life in Figma?. So I drew the lenses and half-way through, I found a cool way to make an “ultra” realistic dynamic lighting that changes the vibe in real-time. Almost 3D-like! #WIP #Figma #GalaxyS23Ultra
7
23
191
@olympicmas I am still not sure if this will be the official redesign because @IAMABSTRAX was teasing something different. At least the 🇲🇾 Malaysian flag colour is right this time.
3
11
185
Comparing food ordering UX between GrabFood & ShopeeFood. I can’t help but noticing the differences between the two hence, I am writing this thread. I use both apps for specific reasons and as a Malaysian, I think you’ll agree with my points at the end of this thread. Read on👇
7
62
147
@edwinmasripan Nice design btw. I was reluctant to share my take on it. Feel like an insult to the PADU team if I do so. Give them chance, still have room for improvement.
3
2
118
While waiting for "Daftar Online" page to load, allow me to comment on the MyDigital ID app home screen.
7
39
100
@sara_nikka I went there last week and was surprised they renovated the entire place! It looks so lively and new. The parking space in front is convenient and reasonably priced. Last time I’ve been there in 2017, that place feels old and empty.
0
5
96
A sneak peek at a mini project I'm working on—something related to transportation. 😉
6
14
89
Earlier this year, I was tasked with redesigning EZ Qurban website. They specialize in providing Qurban + Aqiqah services, allowing Muslims to register online for a variety of packages, whether for implementation in Malaysia or abroad. A before & after thread 👇 (8 posts)
1
23
86
@thegrxyvibe Not a fan of working at agency. No sense of ownership to the design work. Kena ikut request client instead of customer. Sama je macam freelancing. They want employee to treat office like home. Tapi boleh ke kerja bila ada katil nearby? 🤣.
1
9
76
@NewsBFM Ok, so we can pretend this app never existed. Very buggy, slow and lackluster UI. I tried to register 10 times, and failed all attempts.
0
3
68
myASNB, a.k.a ASNB, the largest unit trust management company in Malaysia, has updated their logo!. The colour palette is more vibrant, and they've used an even bolder font type. What do you think of @ASNBmy_official new logo?
15
15
61
1/ A Govt website that looks pretty and (hopefully) useful to the public? 🔗 #opendata. 🧵 In this thread I'll reveal the 4 key #design elements that went into creating #OpenDOSM NextGen by @StatsMalaysia
1
25
50
@faridaffy I lalui pengalaman yang sama dalam 5 tahun, company offer naik gaji sampai ke 5 digit, tapi dapat jump sekali je to 2nd company. Syukur. 🙏.
0
0
49
So KWSP launched a new website. It's really nice (love that border-radius is everywhere) but the navbar transition is too slow when scrolled down. Here's how it looks like from 0.6s → 0.2s
3
13
47
My role as the only designer in a startup:. • Design graphics for marketing (digital, print).• Edit videos for SocMed.• UX Research + Proposal.• Produce UI + mockups.• Assist engineer to fix CSS issues.• Maintain repo for Home, API and Blog. What else did I missed? 😆.
1
3
41
@fazlihalimmedia Sony Xperia Z1 saya yang ada shutter button dari 11 tahun yang lepas (2013). 😂
0
0
44
Figma is more than just a tool for designers to prototype website or apps. Here’s my recap of learning to draw & animate using Figma for the past one week. #figma #design #animation #uiuxdesign
5
3
38
Linking all pages navigation was a bad idea. Had to remind myself, I’m not building a system in Figma!. Yes, it feels real during demo but it’s not the purpose of designing. Anyway, it was a good experience. Lesson learnt: Only link them for demo a flow, not an entire system!
6
4
39
My process of creating an infinite sliding icons using Webflow and ChatGPT. Took me whole day to figure it out. I achieve it without using third party plugins. This is a reminder that I am bad at programming. 🤣. #chatgpt #webflow #uiux #design #websitedesign
1
4
37
I created this infographic to illustrate the evolution of Malaysia's telco logo colours over time. Here are 6 interesting things I discovered while working on this #InfographicSeries – a thread 👇
1
13
34
Over the past months, my country 🇲🇾 has launched 2 open-data dashboard: KKMNOW & OpenDOSM. Both dashboards display the country's data like never before in pretty visualisation & easy to understand charts. Happy to be part of the team. #MalaysiaBoleh #opendosm #opendata.
1
20
34
@AzzahraaAzni Selagi team xda effort utk convince boss, sampai bila2 pun website govt xkan berubah. Some still see design as subjective, when it should be objective for the rakyat's benefit, not the boss's preferences.
2
3
33
Fun things I do at CHIP beside doing UI/UX stuffs. Sticker pack is available for Whatsapp, Telegram & iMessage:
Guess what? We just launched the CHIP Sticker Pack for WhatsApp, Telegram, and iMessage! Now you can make your business chats more fun with our adorable Chippy stickers. 💬✨. Grab them now:
7
8
32
@IkhwanPK2022 I’ve made a bet 7 years ago to buy a house at half mil price when my salary was below RM5k. Best decision ever! I improved my skills, then gaji ada naik ke tahap yang setimpal.
2
1
31
@syahmi1brahim To me this design style feels like it's for buku teks cover. Can't unsee it already.😅.
0
4
31
What kind of sorcery is this? 🤨 I was shopping using my MacBook and require to enter MSOS code sent to my iPhone to complete the payment. Feature is available on iPhone, but this totally took me by surprise. I still need to key in manually before!. Apple ecosystem at best.
4
8
29
@thegrxyvibe Another way to think about it. At 27 not getting hired:. Is there a higher standard above my own?. Email them on why they reject you. Move on. Keep learning & improving. Point is, never settle. There could be new tool or skill out there that is on demand.
2
1
30
Saw these beautiful illustrations in @MyTouchnGo app today. Neat experience for Malaysian who go oversea & use TNG for spending. Just click on the country name (above balance) to switch. BUT! What does Malaysia's look like? Can anyone from overseas share screenshot?
1
4
28
This tweet was suppose to be posted months ago. Anyhoo, it’s not design related but it’s about my first 6 years of working in Klang Valley. Inside, I’ve included tips to save money, rent a room & find extra income while keeping your rental low as a fresh grad. Let's dive in 🧵
3
9
28
TIL Modenas, a Malaysian motorcycle brand founded in Gurun, Kedah, in 1995. The original 'M' logo symbolized Gunung Jerai, a mountain in Kedah. Today, they updated their logo after 29 years to reflect their move into the international market. What do you think?
6
5
29
Is it just me that Paris 2024 Olympic sports pictogram is confusing and less memorable? I get that it's a new concept but it's complicated than it needs to be. Comparing them to previous olympics pictogram, at least they are easy to recognised. Just sayin'🤷♂️. Source:
6
9
28
Logo design process for @CHIP_asia I did back in 2022. This video is fully animated on Figma.
3
3
27
Back then, building a site larger than Kawasanku, KKMNOW, or OpenDOSM wasn't on our radar. We focus on creating what worked best at the time and kept improving with each project. Steve Jobs wisely said, "You can't connect the dots looking forward; you can only connect them
1
5
22
Make clickable element obvious on hover state with micro-interaction. Plus, it's making the whole site feels interactive and "alive". 🥹
0
3
23
Biasanya, bayar guna QR di cashier kan? Kini, CHIP sudah menyediakan pembayaran digital melalui DuitNow QR Online. Pelanggan hanya perlu menggunakan phone dan mengimbas QR digital pada skrin semasa checkout. Ini sesuai bagi yang menjalankan perniagaan online untuk collect.
Redefine checkout convenience with DuitNow QR Online via CHIP!. Quick. Secure. Convenient. Elevate your customer’s payment experience.
1
8
21
That’s it. Thank you for reading! 😇. If you like this, follow me at @sanbronliong for more UI/UX stuffs. Repost this thread and let me know your thoughts so I can write more content like this in the future. PS. A big shoutout to my teammates who developed and brought this.
1
1
21
Many may not care, but there are those like a UI/UX designer, who will notice even the smallest details. - Tap to close unnecessary pop-up window.- Tap on same checkbox TWICE on separate screens.- Premature use of "Pay" button on multiple occasions . Bad UX, please don’t do it.
1
3
22
Instead of asking 6 digits code sent via SMS, Telegram came up with a unique way to verify phone number. 🤯. I accepted the call expecting to listen to the code, but it was drop immediately. Then, I saw this. Definitely a new UX for me. 🙂↕️
1
4
20
Digital designers fall into 2 categories: Marketing (Agency) & Product (Tech). IMO, the latter earns more. If you can do both, you'll get paid even more!. Focus on ONE first and be very good at it then expand to another later in your career. #designcareer #careeradvice #UIUX.
2
3
20
Each dashboard's data is sourced from respective govt. agencies. "Wouldn't it be fun if each govt. agency has its own tiny little icon?". Yes it is!. For instance:.JPN = ID card.LHDN = Money.MCMC = Globe.DOSM = Magnifying glass + Chart .MoT = Train. Icons are effective at
2
4
18
@fazleyff Totally agreed. Also I found a really old BNM brand documentation here while doing my research: Pretty cool and detailed design process.
0
2
18
OK, I am finished showcasing this phone. Does anyone want it as a phone wallpaper? I want to give it away for FREE. Like and Retweet then I’ll DM you the download link. (must follow). #wallpaper #free #GalaxyS23Ultra #samsung #figma #graphics #design #iPhoneWallpaper #giveaway
1
1
19
Early this year, I decided to try a new way to redesign dashboard: Using Atomic Design method, which involves building UI components first. Turns out, it was the best move ever. Although it takes time to prepare, it speeds up the entire design process!. Here’s 5 takeaways👇
1
4
17
@CelcomDigi unveils their new logo design after successful merger late 2022. #AWorldInspiredByYou #CelcomDigi
0
0
19
@KWSPMalaysia @ongmalimali Boleh maintain above 5% interest ke when everyone can withdraw from acc 3 anytime? I have doubts.
3
2
19
“How to let anyone in the country to learn about data?”. By creating “Explorer” page!. It’s a tool for everyone, not just data enthusiasts can learn more about themself in a fun way. I'm sure some eager Malaysians have tried the Birthday Explorer. Like me, I've discovered that
1
4
17
@thegrxyvibe It's normal to work outside of 9-5 working hours especially if you are programmer. You can't help it, when you are in the mood of solving a problem. It's a choice to work on weekend. For me I have passion projects, so I work on any day during the week. Sometime until 2-3am.
0
2
18
Have you ever struggled to find the right design tools?. As a designer, I've been asked countless times by friends & co-workers to "work my magic". That's why I've curated a list of my top 12 tools that I've tested over the years. Ready to make some magic?
1
3
17
@Aximoris Love the detail! The noise texture makes it so satisfying to look at. Btw! Now that you’re drawn this, might as well add “dynamic lighting” to achieve ultra realism.
I saw the new Galaxy S23 Ultra and thought, why not bring it to life in Figma?. So I drew the lenses and half-way through, I found a cool way to make an “ultra” realistic dynamic lighting that changes the vibe in real-time. Almost 3D-like! #WIP #Figma #GalaxyS23Ultra
1
0
14
Don't underestimate a simple design tool like Canva. For the 2023 holiday wishes, I exclusively used Canva to create them all for @chip_asia without relying on templates, and I'm proud of it. 😇. Enjoy the last few days of 2023 and look forward to a bright and hopeful 2024!
1
6
16
Can @CIMBMalaysia stop putting pop-up ads after making QR payment? It's so absurd, I end up showing cashier the ads instead of receipt. What a waste of screen real estate. Angkat tangan if you've seen it, because I hit the close button immediately. 😂.
2
3
16
🙏 A big thank you to my teammates and @StatsMalaysia for making the #OpenDOSM NextGen dashboard a reality. Your dedication in crunching data, translating design and ensuring the site is always up is amazing! 🤩.
0
4
16
“There will be a LOT of pages.”. “Current design workflow isn’t effective.”. “We need something systematic.”. Those were the thoughts swirling in my mind at the time. Solution? Design System!. It’s a faster way to design AND maintain pages with ready to use components in place.
1
4
15
My attempt to design @CHIP_asia's latest product landing page, CHIP Send. Tools I use:.– Figma for mockup.– Webflow for website.– AOS for animation.- Google Material Symbols for icons.- ChatGPT for navbar that changes colour. Link to page →
2
4
16
Here's my quick take on the 3 key differences between Webflow and Framer visual editor. 1/ Framer's drag-n-drop component editor is much more efficient than Webflow's. I can quickly create component variants without worrying about whether a combo class exists. A thread.👇
I've been playing with Framer today, and what I found is fascinating—a big shift in the web design industry. Back then, we had to write CSS styles manually until drag-and-drop web builders like Webflow came along. It has never been easier for designers to build websites fast.
1
3
15
TLDR/ Here’s the final scorecard!. GSC: 20 taps.TGV: 15 taps. To summarise, GSC have better UI interaction early on while TGV have smoother payment experience. But I can’t deny that it took TGV only 2 taps to submit payment compare to GSC’s 7 taps.
1
2
15
I guess it's about time I abandoned using Google Material Icons and started drawing icons on my own. Didn't realise it's important to provide flexibility for the frontend engineer to adjust the stroke width, colour, and so on.
2
0
15
Are you still using Canva to design? You might wanna hear about Visme, an all-in-one content creation tool that dubbed to be more powerful than Canva & more intuitive than Powerpoint. How does it stack up against Canva? Here are the 7 things I love when using Visme. 👇
2
4
15
9 Malaysia's Homegrown Brands & the Fonts They Use in Their Logos. Of course, there are many more, but I scrap most of them cuz I can't find the font. 🤣 🇲🇾 #malaysiabrands #logodesign #logo #brands
1
6
15
Here are some of the stills export directly from Figma with different light placement. My goal is to make the lenses as realistic as possible so it look like it was professionally photoshoot for #samsung ad. 🥹 #figma #camera #photography #design #industrialdesign
1
0
14
Made each of these skeuomorphic toggle as component. So, that both can animate independently. As always, no plugins needed. Shall I share it in Figma community?
4
0
14
👋 Goodbye, old TGV app. Ticket purchases effectively discontinued today to make way for their new app. The UX thread I wrote about a year ago on the old TGV app is here to stay. Check out how it compares to the GSC app.
I'm back with my second UX analysis, this time I’ll be comparing cinema apps: @GSCinemas vs @TGVCinemas. While I always prefer GSC (due to its close proximity), I'm curious to see how their online booking systems compare. So, I’ll break it down in this thread 👇 (11 tweets)
0
6
14
@NevFlynn So sleek! Love the aesthetic! I created a couple of switches in the past with sound fx!. What do you think? It’s not practical, but who wouldn’t click them? 🤓
Figma is more than just a tool for designers to prototype website or apps. Here’s my recap of learning to draw & animate using Figma for the past one week. #figma #design #animation #uiuxdesign
1
1
14
Introducing Dark mode!. It all started when a team member asked “Should we do dark mode?”. It’s easier to say “Maybe not this time”. But, as the team grew, this became more of an excuse. Anyway the team has done it! 🔥. People are gonna spend a long period of time exploring the
1
1
13
Improvements made from Kawasanku V1 dashboard. Blend in map in hero section that changes on state selection. Horizontal dropdown menu. Change pie to bar chart. New colour palette. Replace Google Map with OpenStreetMap. Containerless dashboard. #kawasanku #dosm #UX #opendosm
0
7
13
Layer-by-layer process of drawing #GalaxyS23Ultra lenses. Enjoy! #figma #skeuomorphism #drawing #tutorial
2
1
14
1 year ago today, was released to the wild.
3 months ago, 🇲🇾 Malaysia’s new open-data portal, was released to the public. Since then, many have built projects using API and datasets from the site. In this thread, I’ll walk through the top 5 design upgrades that went into creating this portal. 👇
3
1
13
For 8 years in the IT industry, this is the first time my colleagues at @chip_asia asked for a backdrop design to be used in video call. So, I designed 3 different variations for them to choose from. You can check them out here →
2
4
13
Drop the 'Darby,' it’s cleaner – kinda vibe. What do you think of Sime Darby's new logo?
4
7
13
Micro-interaction in s module section😌.– Each module has its own icon.– onHover to reveal link for Learn more or Product
3
1
12
Last night, I scheduled an Airasia Ride for my family to airport at 6:30AM (next day). Context: My experience was great w/ Airasia. Saved my day TWICE during rainy days & early morning pickup when no driver from GRAB could. Do I still have luck this time? Read thread below 👇
1
5
13
website in Sep 2022 (Before Rebrand) vs Today (After Rebrand)
1
1
13
Airasia Superapp rebranded to @Airasia Move. Here are the onboarding pages for their new app. It’s half-baked, but can be better. Spacing is inconsistent. Text is not centered, and best of all, people are having hard time finding the new green app. (previously red) 😂
1
4
13
0
1
13
Overdoing your work is a sign of hyper-learner. I remember back in college, one class project was to write a simple application using PHP. I go ahead and wrote a working puzzle game and got an A for it. I didn’t do it to impress my teacher, but I was curious if it’s possible.
2
2
12
2 years ago, I use Figma to plan my house’s renovation. 🤣. It was an empty unit, so I had to think of type of lights I wanna put in, furnitures, new plug points, fitted wardrobe, kitchen cabinet & so on. It came out perfectly. Contractors were good & followed the plan. No fuss.
1
0
12
@Levidjones @figma Valid points! One more thing, Boolean operations are hidden too. One extra click for designers who do masking often, drawing icons and illustrations.
0
0
10