Blog

Setting up Multi-language on Webflow using Weglot

With the popularity of low-code and no-code movement, Webflow has become one of the most popular website builders among designers who want to build responsive websites but not wanting to deal with the nitty-gritty in CSS. It’s also a popular choice for entrepreneurs who wants to create a website fast to test its product offering without having to pay tons of money to build a website.

We recently built one our client’s website entirely on Webflow and because the product aims at users across multiple geographical regions, we needed a multi-language solution. Webflow by itself doesn’t come with a multi-language feature so we had to explore various options to achieve it.

Many of the solutions that work with Webflow are Javascript based. You simply insert a line of code in your Webflow website, a widget appears and users select their preferred language. All the contents are then overridden by the translated text. Simple.

After all the comparison, we came down to 3 choices: Weglot, Localisejs and Bablic. Knowing how many languages that you want to support is crucial here as their plans primarily charge by the translated languages and number of translated words.

We ended up with Weglot as we only needed to support up to 5 languages (on top of our default English language) and it was the most value for money option. Weglot also had a free tier which allows us to test everything out before committing, so that was really nice.

Setting up Weglot on Webflow

Setting up was fairly straightforward. Once you sign up for an account, Weglot gives you a JS code which you simply copy and paste it in your Webflow’s Custom Code settings and publish your site.

Add the languages you need on Weglot.

Weglot will detect all the words in your website and show you a list to be translated. You simply enter the translated version of those words.

When a user visits your website, they’ll see the translated version once they switch the language with the widget.

We’re really surprised at how simple it was to generate a multi-language website with Weglot and Webflow.

Automated translations on Weglot

One of the great feature, which can also be a double edge sword of Weglot is Automatic translation. You don’t need to start from scratch with the first layer of the automatic translation provided by Weglot’s machine learning but you do need to check through all the words to ensure everything is well translated and insert in the human translation where necessary.

Caveat:

Choosing a solution like Webflow and Weglot (and probably all the other low-code/no-code solution) has its woes: you basically have to keep paying the subscription fees of both platforms which can easily amount to US$100/month!

Check out Weglot’s pricing

3 ways to spice up Remote Workshops

Ever since this pandemic started, there’s been a lot of coverage on how to run remote workshops and remote facilitation. For me, it’s a new experience. Here are 3 things I’ve tried to close the distance of remote workshops.

1. Add some background music to liven things up

When facilitating in-person workshops, facilitators may play some background music during ideation activities to break the silence and stimulate creativity. How do you do that online?

Sure, you can play songs on your phone and put it close to your microphone but what participants hear from their end isn’t going to be great.

The folks at Rogue Amoeba (Strange name. Great software.) created this amazing app, Loopback, which I’ve been using for a while now.

Rogue Amoeba's Loopback
No alt text provided for this image

It allows you to route sounds from any sources into a virtual audio input channel which you can then select on the audio settings of the conferencing apps you use such as Zoom, Google Meet, MS Teams and etc.

For example, if you add Spotify as your source, then any sounds from Spotify will be heard by the folks on the other side. This allows you to play your favourite Workshop Playlist during those minutes of brainstorming.

“These elevator music makes me feel like I’m back in office having a workshop” – participant

2. Add Sound Effects

Once you discover the wonders of background music, try sound effects 😏. Virtual crowd cheers and drum roll are easily found on Youtube, and again, by combining this source with Loopback you can introduce sound effects to your workshop.

No alt text provided for this image

Personally, I found another of their app Farrago perfect for this. Farrago is a software-based soundboard that fires up sound bites or effects using keyboard shortcuts. Option-R for a clock ticking sound to let participants know time is running out or Option-T for some crowd cheer to celebrate the participant’s effort.

While sound effects can never replace the real applause and cheer, it can add some fun to your remote workshops. But remember! Use them sparingly and don’t annoy others, it can get addictive firing Laser or Bike Bell sounds.

3. Make any of your microphones noise cancelling

Not everyone works in a quiet environment. You may have kids shouting, dogs barking, or even cats meowing. The worst, a fan blowing in your direction! 

As a facilitator, ensuring you sound clear and audible to participants is important as that’s the only ‘cue’ participants have.  In fact, whether you are a facilitator or a participant, I’d encourage you to make sure you sound clear and audible so that everyone gets the most out of the session.

To do this, I use Krisp to remove noise in my background and also to remove the background noise from the others.

No alt text provided for this image

I’ve also written an article on how to use Krisp. Give Krisp a try and if you’d like, here’s 1 month of free Pro for you 🙂

Disclaimer: I’m sharing Rogue Amoeba’s app because I really like their products and benefited from using them. They don’t have an affiliate programme so this isn’t a sponsored post. If you know of any other free or cheaper solutions, leave it in the comments for the benefit of everyone!

Good luck with your next online workshop!

Looking for Noise Cancelling Headphones with Microphone? Why not make any microphone noise cancelling?

With everyone #WFH during this COVID-19 period, the number of online meetings we attend every day is ridiculous. Zoom calls, MS Teams call, Google Meet calls, you name it.

I’ve been eyeing the Logitech Zone Wireless Headset and Jabra Evolve 75 ever since I’d to WFH for their superior microphone noise cancellation capabilities but I just couldn’t bear to shell out more than half of the $600 that the Singapore Government gave to Singaporeans to tide us over this period.

Introducing Krisp

Krisp is a software that “automagically” mutes background noise in any communication app so that your voice is krisp-y clear to the receiving party. Basically, you can use any microphone you have, whether it’s a default earpiece that comes with your phone or your laptop’s microphone.

It also works with over 800 online conferencing apps. Any of these allows you to change your Audio Input settings.

How it works?

After you download and install Krisp, you’ll see a new audio input in your Sound preference.

Now that Krisp exists on the menubar, you can easily select and change the microphone you wish to cancel noise from. In this case, I chose the built-in microphone of my laptop.

You’ll also find Krisp on your menu bar where you can easily change the microphone for noise cancellation.

What blew my mind was this “Test Noise Cancellation” feature. All you need to do is simply to record any voice in a noisy environment and Krisp will let you hear the difference between the original recording (with background noise) and with Krisp enabled (without background noise). Impressive!

Using Krisp in Zoom

In your next Zoom meeting, simply select the krisp microphone and voila! Did you notice you can also select krisp speaker? This allows you to reduce the background noise from other participants so you can hear them clearly!

Don’t take my word for it, hear the difference

 

Krisp is free to use but it comes with limited minutes. Use this link to get a FREE month of Krisp Pro instead!

Rapid design ideation with Balsamiq Wireframes

We’ve been a huge fan of Balsamiq Wireframes and have used it in tons of scenarios from explaining ideas to clients during meetings to low fidelity ideations to quickly visualise what’s on our minds.

You might be wondering, Balsa.. what?!

Yes, you’ve heard it right. Balsamiq Wireframes.

Quick and Easy Wireframes that gets everyone on the same page! Really?

Who uses that these days? Aren’t we supposed to use the likes of Figma, Sketch, Axure, UX Pin, Invision, Marvel and blah blah blah?

For those who aren’t familiar with Balsamiq Wireframes:

It is a rapid low-fidelity UI wireframing tool that reproduces the experience of sketching on a notepad or whiteboard, but using a computer.

It really forces you to focus on structure and content, avoiding lengthy discussions about colors and details that should come later in the process.

Wireframes is FAST: you will generate more ideas, so you can throw out the bad ones and discover the best solutions.

From the Balsamiq Wireframes website.

Here are 3 reasons why we kept going back to Balsamiq Wireframes despite all the other great tools out there:

1. Speed of ideation

It’s no doubt the fastest way to put together an interface for visualisation is by sketching it out on paper or on the whiteboard. Balsamiq comes close thanks to one quick shortcut, the ‘/’ key.

Screen Recording 2020-01-12 at 11.43 PM.gif

Instead of scrolling through the UI library and selecting a component such as a ‘button’ or an ‘image placeholder,’ simply press ‘/’ and type in the keyword (e.g. image). This triggers the search to show you relevant components. Simply hit ‘enter’ and voila! The component appears on your canvas.

While many tools come with a whole UI library of components to select from, navigating through them to find what you need can be like going through a maze.

2. Easily picked up by anyone

Because of its simplicity and focus, Balsamiq can be easily picked up by anyone. It’s time to get your UX Researchers, Product Managers, stakeholders and others you need input from but who don’t have a design background to roll up their sleeves and give this simple tool a go. 

Would you prefer to receive whiteboard sketches or simple wireframes?

Of course, don’t expect the screens to be production-ready. That’s not the purpose of Balsamiq Wireframes. The idea here is to get people, with or without a design background, to put their ideas down into tangible forms that can be understood.

This tool works perfectly if your stakeholder is remote and you can’t make sense of their whiteboard sketch photos. 

3. Cheap enough to throw away, iterate as much as you like until you find the sweet spot

One of the intangible benefits many don’t know about is how the ‘sketchy’ look of Balsamiq Wireframes actually encourages design iterations. 

You might have heard of the importance of ‘quantity over quality’ at the ideation stage. Balsamiq gives the impression the designs are cheap and easy to put together and this means you are likely to be able to discard them without feeling hurt that you’ve spent tons of hours on it. It makes you iterate and try many different design ideas before identifying the better ones to elaborate in greater fidelity.

That’s really the sweet spot of Balsamiq Wireframes.


Caveats…

Balsamiq Wireframes is not without its issues. Recently, we built an elaborate set of wireframes on Balsamiq Cloud and the whole app just slows like nuts. Although Balsamiq Cloud allows multiple users to edit the same wireframes like Figma, do not try it with a page full of components as it can take up a lot of resources.

We also had an issue with the Desktop version where the max canvas size is limited to 5000 pixels. This is especially limiting if you’re working on a landing page or a mobile screen that can exceed 5000 pixels height at times.


Do you enjoy using Balsamiq Wireframes like we do? What are some of your favourite tips?

Concept testing using paper prototypes

We’ve recently completed an interesting concept testing for a client in the travel industry. The entire test was made up of printed wireframes which we’ve designed and cut into small components. 

The test setup with a make-shift microphone holder + IPEVO document camera hacked together with GoPro mounts.

During the test, participants were asked to go through a series of tasks to help us understand their mental models when thinking about a travel destination and to piece up pages based on their travel needs. 

Top view of what was captured during the card sorting exercise.

Overall, we had fun and learned a lot from the experience of introducing analog components into our (otherwise, digital prototype) testing process. 

Do you travel for leisure? Get S$50 when you join our travel research study

We are recruiting English-speaking travelers to participate in a research study taking place next week.

Selected participants will take part in a 30 – 45 minutes, in-person research study of a mobile travel app. The study will be held at a central location near City Hall MRT station.

Participants will be rewarded SGD 50 cash at the end of the session.

This study is conducted on behalf of a travel company that aims to improve the travel planning experience.

To participate, please fill in this questionnaire and we will contact you if you are shortlisted. 

IxDA Singapore presents World Interaction Design Day 2019

On 24 Sep 2019, the community at IxDA Singapore celebrated the World Interaction Design Day at Visa Innovation Centre. The event was attended by over 150 attendees and our speakers shared their unique perspectives on this year’s theme “Trust & Responsibility.

See all photos

Big thanks to:
Visa Innovation Centre for being such a great host to the venue,
Adobe and IxDA global for sponsoring and coming up with the theme,
Speakers Preethi Mariappan (Visa), Liu Zenan (StashAway), Wei Kong (Researcher/Designer) and Mario Van der Meulen (Foolproof) for all their thoughtful sharing.

This event wouldn’t been possible without the help of our lovely team mates: Angeline Chng, Michelle Koo, Kate Lim, Dominic Ong, Giang Hoang and Yvonne Chia.

See you next year!

Sharing my product design journey with the IxDA Taiwan community

Earlier in Jan 2019, I made a trip to Taipei to visit the IxDA Taiwan local group which was one of the oldest IxDA local group in Asia, established in 2010. Next year, they’ll be celebrating their 10th year anniversary and it’s awesome to see how they’ve grown over the years.

I did a sharing of my design journey over the last 15 years and gave some insights to the UX landscape here in Singapore. It was heartening to see such a group of passionate and engaging audience that evening asking many thought provoking questions around Startups in Asia, working in Singapore, advice for those who wish to work here etc.

Lovely folks from IxDA Taipei and thoughtful space for the event 👏🏻

They wrote a Medium article about what I shared and you can view it right here. Heads up, it’s in Traditional Chinese 😬.

Will the Rode Wireless Go become the perfect field user testing microphone?

If you’ve ever tried recording audio out in a noisy environment, you know it’s pretty challenging to record what the participant is saying.

We recently conducted a user testing with car insurance buyers over at Vicom, a vehicle inspection centre where car owners bring their cars for inspection in order to renew their road tax. We chose the location as majority of our test participants who fit the criteria are going to be there.

Michelle happily posing like a sales representative

Without a proper space for testing and noisy background, participants were given an ear piece with mic that’s plugged into our laptop so we can record what they say.

Here comes the challenge:

  • Participants were uncomfortable in using / sharing an earphone
  • When the earphone is put on, they can’t hear our prompts clearly and have to take out one side of the ear piece fo hear what we’re saying
  • Length of the earphone also restricts the participant from moving freely.

Introducing the Rode Wireless Go

Extract from Rode’s website: “The Wireless GO is the world’s smallest, most versatile wireless microphone system. The transmitter works as both a clip-on mic or as the world’s smallest beltpack for a RØDE lavalier, sending crystal clear broadcast-grade audio via 2.4GHz digital transmission to the ultra-compact on-camera receiver.”

The idea seems feasible:

  • Participant wears the transmitter on their shirt or clip on near the top half of their body
  • Receiver connects to either a laptop or phone
  • Fire up the voice recording app and record away!

But reality is far from simple. The Rode Wireless Go typically works well with a camera with a microphone port but our laptops (Macbook Pro) and phones don’t have a dedicated port. What we have is a port that connects 3.5mm TRRS pins.

For the Wireless Go to work, we need to get an additional adaptor call SC4 to convert TRS pin from Wireless Go to TRSS for our phones/laptops. Of course, we would also need our Apple lightning to 3.5mm jack adaptor.

After a whole bunch of cabling and plugging around, we finally have a working setup that connects to our laptop.

Rode Wireless Go on Laptop

The red and green splitter cable can be bought from Lazada for S$4.90 or even Amazon.sg for $8.99 and it’s actually a TRRS splitter itself so that saves us the SC4 cable.

With this setup, we can record what our test participants say super clearly and they are not bounded by any cables or discomfort using someone’s earphones. The only downside is we aren’t able to monitor the sound of the recording until we complete the test so we had to do some test record to make sure all audio is being captured before passing it to the participant.

What do you think? Do you have a field testing setup that you swear by? Leave us a comment!

Get your Rode Wireless Go at a discount from Lazada!

Happy Mid-Autumn Festival

It’s the Mooncake period of the year again aka Mid-Autumn festival. Aside from the usual mooncakes and tea, the team had some fun with decorating our studio with lanterns and lighting sparklers.

Glad we did not burn down the studio. 😅 Wishing you and your family a Happy Mid Autumn Festival! 🥳