This is an article about co-creation. It is co-written with my friend and colleague Marius Hauken . My name is Eivind and we both work at Stacc as user experience designers in the fintech space. The inspiration for this post came from a project we are working on together.
The tool we’re using at the moment — Figma — is an online collaborative design-tool. It means we are both working in the same document, at the same time. The whole team can follow cursors in real-time and see what everyone is doing, inspect design or export assets they need.We can copy, iterate and discuss our project in a way that was impossible a short time ago. The design document, the prototype, and developer handoff is all the same thing. Always.
Sometimes we even chat in Figma, drawing text-boxes and typing right in the document. Because we can see everyone‘s cursors, we know when we are looking at the same thing.
Co-creation is so powerful, that it has totally changed our view on how design-teams are set up and how much our clients are gaining by hiring not just one, but two (or even more) UX-designers on one project.
I cannot see how we ever managed to create good stuff before Figma , and we will never, ever, ever go back to working offline!
I don’t think the new bank ( www.bulderbank.no ) we’re designing would be half as good without a truly collaborative design process. One of us will come up with a new idea. The other one will argument against or refine it even more. One can sketch out new stuff while the other may clean up the design to make it more consistent. We can work remotely and speak about the design as if we were sitting right next to each other.
I will leave this here for now, and let Marius take over for a bit — and when we are finished the end result will be better than what we would do on our own. I don’t even have a real plan for this article, but I know we will end up with something. Probably something good.
In writing, pair-writing has been a thing for a long time. Same for programming. Developers have seen the value of pair programming for years. It’s useful for learning, it makes cleaner code, the code is finished faster and the end-result is more maintainable. I would argue that the same holds true for pair-designing. It’s great for learning, for developing multiple ideas, to sharpen the design process and for tidier and more maintainable design systems.
Two designers is ten times better than one, and this dual approach is something we recommend our clients consider, especially on projects of scale.
Tools like Figma makes the design process even smoother. You can remotely pair-design and discuss issues, while simultaneously easily involve the whole team in the discussion without interrupting everyone’s work day. The real time collaboration and openness these tools enables really makes a difference. The team feels more like… a team, and our clients are included and gets faster and better results.
Good design needs to be challenged. It needs friction. It needs to be refined and tested. Only then can it become great.
We’ve all been there: You’re paying a bill. Typing in what feels like hundreds of numbers. Checking to see if the numbers are correct. Checking. Again and again.
Vipps, the Norwegian mobile payment application, fixes this problem elegantly. You either type in the mobile-number or the name to the reciever, and you get to see their profile-image. This way you never need to double check if the number is correct. Hello, microinteraction!
What is a microinteraction?
Microinteractions are moments of delightful experiences or useful feedbacks helping the user accomplishing their task. These micro-moments are what guides the users through a flow in an effective and intuitive way. They are an underutilized but powerful instrument for designers.
Another simple example is fiverr, a freelance service which shows a few of your key numbers on their logged in page. When you hover the key-numbers it shows an explanation of your account balance when you hover the figures.
A microinteraction consist of 3 (or 4) elements:
A trigger - Something that releases the interaction. That could be typing in an account-number.
Rules - Rules that describe what the interaction is and when it should happen.
Feedback - The interaction is initiated and the user get a moment of delight or a feeling that this was useful.
Loops and modes - How the interaction changes if it is used again and again.
The role of microinteractions in banking
Trust is what enables banks to exist. Microinteractions can play a small, although important, role in enabling this trust and security now that we don’t meet a person when we’re handling our money.
The best cases for microinteractions are moments where the user feel insecure. This is the moment where we as designers must step up the game and help the users. One of my favorite examples of this is a feature we implemented while I worked as a consultant in Skandia:banken (now Sbanken). When you’re paying a bill and typing in an account-number, they show when and how much you last paid the same account. This way you can easily confirm that you don’t pay the same invoice again, or that the amount is the same as previous transactions.
The details are not the details. They make the product.
Charles Eames
Guiding the user
Consider one of the most prominent microinteractions in online banking: the thousand-separator in input-fields. It’s a feature you don’t think about, but you sure do notice when it’s gone. It is an interaction that a developer has used hours to add, just to make your bank-experience a tiny bit better.
The thousand-separator has:
a trigger - typing a number more than three digits.
rules - when the number is above 999 there should be a gap between the first number and the three next (and a lot of other rules).
feedback - the interaction is initiated and it’s easier for the user to understand how much they have actually typed in.
Some microinteractions also need loops or modes to work: Say you are transferring money and type in a higher number than what’s on the account. If the input-field then subtly shakes when you are leaving it, it indicates that there are not enough money. If you don’t understand the shaking the first time, delete the number and type it in again the user should probably get a message explaining why the input is saying no. If not our delightful little interaction suddenly is becoming an annoying experience.
An example of shaking input from the Wordpress login page
Imprisoned by our design tools
Microinteractions are unfortunately an underutilized tool in designers toolkit. They are easily forgotten. We’re imprisoned by our design tools. Whether you use Figma, Sketch, Framer, Adobe XD or Illustrator (++), they all have the restriction that they are static sketches (maybe except Framer).
You can’t easily prototype what happens when it is time- or trigger-based, for example if you type in a number outside coverage. If you can’t easily prototype it it’s easily forgotten. This is where an actual prototype in code shines and why it’s a foundation for our projects to jump into code rather early.
A few helpful questions before designing a microinteraction
Do I need to add a new element? Microinteractions are often best when they seamlessly flow into your existing design.
Does the interaction feel the same the 1st and 5th time? Make the interaction adapt to the context and the user. It’s fun if it rains confetti the first time you log into the bank, but can become tiresome and ironic if it happens every time you log in.
Do I understand my users? Talk to them! Test your interface regularly! If you don’t know their motivations or how they use your bank you could be fixing problems that don’t exist.
Am I using the right tools for sketching and designing our product?
I’ve previously written about how to easily create a pdf from images, but when you need to merge multiple pdfs to one it’s another ballgame1. Usually I’ve resorted to Adobe Acrobat (Hello trial and paywall) or Preview. But preview is rather cumbersome. Luckily it seems like there is an easy terminal-based automator-script for this already included in OSX. Here is a quick guide to get you up and running.
Merge pdf pages
The script itself runs like this. So you could just copy this into your terminal and modify stuff.
"/System/Library/Automator/Combine PDF Pages.action/Contents/Resources/join.py" -o PATH/TO/YOUR/MERGED/FILE.pdf /PATH/TO/ORIGINAL/1.pdf /PATH/TO/ANOTHER/2.pdf /PATH/TO/A/WHOLE/DIR/*.pdf
I however found it easier to create an alias so that I can run a shorter command.
How to set up an alias for pdfMerge
Open your ~/.bash_profile file in a text-editor
Add a new line with the text:
alias pdfMerge='"/System/Library/Automator/Combine PDF Pages.action/Contents/Resources/join.py" -o'
Save the file.
Quit the editor. Your new alias pdfMerge will be set for the next terminal you open.
Open a new Terminal window and try it out:
Type in pdfMerge output.pdf *.pdf which means use Automator to convert all pdf-files in this folder and combine them to a pdf called output.pdf.
You now have one pdf-file with all your pdfs combined!
ProTip: Decide order
If you want the file in a specific order I recommend naming your files with numbers. F.ex: 1-onboarding.pdf, 2-signing.pdf. You can also type your files directly out like convert output.pdf onboarding.pdf signing.pdfSource
PS
Yeah. I know that the output-file is at the end on the imagemagick solution, and first on the pdfMerge-solution. A bit annoying.
You can hack around this by still using imagemagic, but it doesn’t just combine them, it changes resolution etc.↩
I have sweared to a RSS-reader for following blogs and interesting webpages for over a decade now. I love that I once a week can sit down with a cup of coffee and read all the blogs/websites I follow without switching context and webpages all the time.
RSS solves a problem for people who regularly use the web. It allows you to easily stay informed by retrieving the latest content from the sites you are interested in. You save time by not needing to visit each site individually. You ensure your privacy, by not needing to join each site’s email newsletter.
My RSS-reader history
I got introduced to RSS-readers with Google Reader, and became quickly addicted. When Google shut it down in 2013 I needed to find an alternative. My choice fell on Shaun Inmans Fever. It was a self hosted solution, which meant a bit of work, but on the other hand I owned my own data and it would still work the day support for it stopped.
I loved how it worked and that I had control over all the files – especially the CSS. I even made my own theme people could use. Sadly Shaun Inman stopped supporting fever two years ago. I’ve been using it until now, but it’s time to admit that it’s just running on fumes now. We had a good run.
Therefore one of my weekend activities became finding a new RSS-reader. On my iPad I’ve been using Reeder 3 for reading the content on Fever. I therefore started with the list of RSS-readers Reeder supports. I checked out more or less everyone of the competitors, but there was one clear winner:
Feedbin is a small company with two persons running on a subscription-based model (5$ month). Good news: a sustainable business-model unlike Google Reader and Fever.
Subscribe to emails
The one killer-feature which made the choice to switch to Feedbin easy was the ability to subscribe to newsletters and have them appear as a feed together with your other subscriptions. The last years it has, understandably, become very popular to make newsletters. There is a lot of great newsletters out there that just excist as newsletters and the only way to access them is by getting mail. I personally hate to get newsletters mixed with other mail and things I actually have to respond to. Mentally it’s better for me to read those email-subscriptions while I read the other RSS-feeds thereby seperating work from reading / getting updated. Therefore this feature in Feedbin really struck home, and I’ve been transferring each newsletter as I get mail in my inbox.
Clean up old feeds
Luckily it is usually easy to switch RSS-reader since there is an open standard for consuming and exporting them, OPML, which almost everyone use. I used that when switching from Google reader to Fever, as well as now from Fever to Feedbin. That meant there were lot of feeds that needed to be cleaned up - some feeds hadn’t been updated since 2012. Luckily Feedbin has a simple solution for seing how frequently blogs are updated and when they last were updated which made the cleaning job rather easy.
A lot of great features
Feedbin got itself a new fan this weekend. I recommend trying it out. It also has a bunch of other great features like:
Nice typography. Hello Hoefler & co!
An impressive webapp which makes me forget Reeder 3 exists. (Seriously: the only thing to complain about is if your are switching to another app and back and it forgets it’s state)
It can fetch full text from article for feeds that only offer partial content
Now and then I find myself in the situation where I need to create a pdf from some images. I often resort to Preview, but it can be quite cumbersome at times. There is however an easier and faster option, but it requires that you use the Terminal.
Images to pdf step by step
First you need Homebrew, which is basically the app store for Terminal. If you don’t have it installed open up your terminal and paste in /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" and press enter. Then follow the instructions in Terminal.
Once done close your terminal and open it up again (to make sure that Homebrew works)
Then type in brew install imagemagick. This installs imagemagic which is the program that will help us create the pdf-files.
When finished close and open up your Terminal again.
Next step is to find the folder where we have the source images we want converted. The easiest way to do that is to find the folder in Finder. Then in your Terminal type in cd and then drag your folder into your Terminal window. Now it will read cd Downloads/images or something similar. Then press enter. Now we have navigated to a new folder in Terminal!
Type in convert *.jpg output.pdf which means use imagemagick to convert all jpg-files in this folder and combine them to a pdf called output.pdf. You can adjust this if you f.ex. have png-files, or create your own name on the pdf: convert *.png myAwesomeFile.pdf.
You now have a pdf-file with all your images combined!
ProTip 1
If you want the file in a specific order I recommend naming your files with numbers. F.ex: 1-onboarding.png, 2-signing.png. You can also type your files directly out like convert onboarding.png signing.png output.pdf
ProTip 2
If the resulting pdf is too big in size you can try: convert -quality 60 *.jpg output.pdf
