Project: IBM Cloud Functions

Learning by doing: onboarding developers

Getting started to a new technology and concept can be overwhelming, even for experts. By creating an in-browser experience requiring no setup, we made it easy for users to learn by doing and maintaing high scores on NPS.




Visual design
User Research


Design Lead // Tomas Ortelt
UX/Visual Design // Morgana D'Almeida
UX Design // Thomas Grikschas

The challenge πŸ€”

Understanding the problem

We were ask to design a new product called IBM Cloud Functions. It’s a serverless platform and it helps developers by essentially running their apps when needed, scaling automatically and charging only for how much it's used.

Although the UI is not the place where most people will seriously use Functions, one of our tasks was to make sure the UI made a great job on onboarding those future expert users.

Part of the challenge was that the product uses a new technology a lot of people din't know about yet (including me! hehe).

So we started by talking to everyone we could, understand the problem that this new platform was trying to solve and for who.

The people πŸ‘©β€πŸ’»

Developers & their needs


Developing for the cloud

Developer is an umbrella term, the first thing we needed to do was to narrow our scope. Learning more about the use-cases of Serverless, we decided to focus on cloud-ready developers creating application for the web for the first round.


"I rather focus on the code!"

During research we learned that developers would rather spend most of their time coding business logic, but in reality, great part of their time was dedicated to managing things around the code in order to bring their applications to life. Things like security, configurations, availability, pager-duty, etc.


"I just try things on my own first"

In general, developers love try things out first β€” they do appreaciate well written documentations β€” but their first instinct is to play with the tool and see if they "get it" quikcly. Their daily work tools of choice are a good IDE (integrated development environment) and terminal, so... how to bring that experience to the browser?


Explorations 🎨

How might we help them to learn by doing?

The first success a few minutes away!

During exploration, our team focus was on finding a balance between explaining the concepts of Functions and guiding the user to their first success as quick as possible. We tested various different approaches for our user-flows. Some flows had more guidance, such as steps and drag and drop for connecting things, while others were more productive.

The faster and more productive approach resonated with our users and also gave us the idea to further develop the Functions UI experience to complement their developer experience.


The solution πŸ™Œ

Introducing Functions getting started experience


Learning concepts

As we learned during research, it was important to offer a quick and frictionless way for developers to get "their hands dirty" immediately.

During their first interaction with the product they are presented with some of Functions values and its main concept by creating their first instance in a few seconds, in browser.


First hello world

Starting with a hello world takes a few seconds and they are able to see it responding to a message and inspect the results immediately.

Continuing the journey

After users are familiar with the basics, they can even try connecting actions for more complex cenarios, add triggers for automation or monitor the activities of their actions.



We were super happy to see a very positive user feedback! Several people pointed out Functions web experience was easy of use and quick to understand. During the time I was involved with the product, we were able to maintain a high NPS score on 7.2 average.

7.2 avg

β€” Net Promoter Score

"Easy to use"
"Fast to get started"

β€” Promoters comments in NPS

 "From new account to running code in five minutes @IBMcloud functions passes the test."

β€” Kelsey Hightower

πŸ₯‘πŸ₯‘πŸ₯‘Thanks! πŸ₯‘πŸ₯‘

Morgana D'Almeida
Twitter & LinkedIn