Blog

Rapid design ideation with Balsamiq Wireframes

We have been a huge fan of Balsamiq Wireframes and have been using it in tons of scenarios from explaining ideas during a client meeting to quick low fidelity ideation to quickly visualise whats on our mind.

You might wonder, Balsa.. what?!

Yes, you 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 suppose to use the likes of Figma, Sketch, Axure, UX Pin, Invision, Marvel and 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 great tools out there:

1. Speed of ideation

It’s no doubt that the fastest way to put an interface together for visualisation is by sketching it out on paper or whiteboard. Balsamiq is almost as fast all thanks to one quick shortcut, the “/” key.

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

Instead of selecting a component such as a button or image placeholder, simply press / and type a keyword eg. image. This will trigger the search and show you the most relevant component. Simply hit Enter and the component is on the screen.

While many tools provide a whole library of components to select, navigating through them is like going through a maze.

2. Easy to pick up by anyone

Because of its simplicity and focus, Balsamiq can be easily picked up by anyone. A Product Manager or your stakeholder who doesn’t have a design background, Balsamiq is one simple tool that they can roll up their sleeves and get their hands dirty putting down ideas in their head.

Would you prefer to get something from the left or right?

Of course, don’t expect those screens to be production ready, thats not the purpose. The idea is to get them to put their thoughts down into tangible forms that can be understood. This works perfectly if your stakeholder is remote and you can’t understand their whiteboard sketch photo.

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

One of the intangible benefit that many don’t know is how the sketchy look of Balsamiq Wireframes actually affects designing solutions.

You might have heard of quantity over quality especially at the ideation stage, Balsamiq gives you the impression that the designs are cheap and easy to put together, and this means you can throw it away without feeling hurt that you spent tons of hours on it.

That’s really the sweet spot of Balsamiq Wireframes. It makes you iterate as much as you’d like to and try many design ideas so you can identify the better ones to elaborate over a higher fidelity.


Caveats…

Balsamiq Wireframes is not without its issues. We recently used it to build an elaborated set of wireframes on Balsamiq Cloud and the whole app just slows like nuts. While Balsamiq Cloud allows multiple users to edit the same wireframes like Figma, do not try it with a page with full of components as it can take up lots 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 of using it?

Concept testing through paper prototypes

We recently completed an interesting concept testing for a client in the travel industry. The entire test was made up of printed wireframes which we designed and cut into small components where we ask users to piece up the page based on their needs.

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

Participants were asked to go through a series of tasks that helped us understand their mental models when thinking about a travel destination.

Top view of what was captured.

Overall fun learning experience introducing some analog components into the testing process over the usual digital prototypes.

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 Challenger for S$8 ($6 for Value club members) and it’s actually a TRRS splitter itself so that saves us the SC4 cable.

With this setup, we can record what our test participant 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!

Update 4 Nov 2019: With the upcoming 11:11 sale, you can get your Rode Wireless Go at a discount from Lazada. Check this link out!

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! 🥳

Collection of Dark UX Patterns

This post documents a collection of dark UX patterns used by various products and services. Design is a powerful skill that either improves the world we live in or makes us miserable. Dark UX patterns are designs that focus on commercial benefits at the expense of users, using persuasive or, at times, unethical methods to make us do things we don’t want.


UXPin cancellation

I subscribed to UXPin recently to test out the features and see if it was of any good to projects. Turned out I didn’t really need it and I was looking high and low for the cancellation option until I found it hidden as a fine print, in super light grey text that no one can see. I wonder how ethical it is to make it so difficult for people to cancel their subscription. Well, I cancelled anyway.


oBike – Cancellation Refund

oBike cancellation refund

Saw this on Linkedin some time back. Once again, hidden refund text no one can see. Compared to UXPin, oBike made it worse by adding a huge call-to-action (CTA) button to “Be an oBike VIP”.

If you managed to spot the first “Continue to refund” link, how about the second “Confirm” button that’s again styled in light grey text?

Seriously, if people want to leave, they will. No matter how hard you try to stop them, they’ll leave. Leveraging on behavioural psychology to cheat users into pressing the wrong button, shame on you.


Learn more about Dark UX and see the Hall of Shamehttps://darkpatterns.org/

The Dashboard for Bus Drivers

I’ve been taking buses more frequently now that I’ve sold my car and I can’t help but observe how bus drivers have been using this complex-looking two-piece screen device that’s in front of them.

On closer look, the top screen seems to be “touch screen” enabled where the driver can tap on the various icons such as the microphone to make an announcement and also view information about the trip like what is the next stop.

The bottom screen however looks non-touch screen, where existing buttons on the sides are configured for a particular purpose as shown on the screen. E.g. button “0” is meant for “End Trip”.

I wonder how long bus drivers took to master the usage of this two-piece dashboard and how often mistakes were made when using it.

Which also leads me to wonder, how can we simplify the design to make it user friendly?