This time we visited the city of Kortijk, recently elected as a creative city of design by Unesco and home to many talented students attending one of the multitude of design programmes in the city.

Our meetup took place in the brand new co-working & co-creation hub “Hangar K” which also acts as our second office in this amazing city.

Speaker #1: Pieter Decabooter

Pieter graduated as an industrial designer, but has been working as a digital product designer at Little Miss Robot for over 4 years now.

And this is no accident: he quickly realised that there are a lot of similarities between building physical & digital products and in order to become a more complete designer he decided to focus on the digital aspect of product design.

Using 2 very different projects he worked on ( 1 during his time as a physical designer and 1 while working at Little Miss Robot) he demonstrates what UX designers can learn from industrial designers & vice-versa.

https://www.slideshare.net/ProductDesignMeetup/pieter-decabooter-blending-the-digital-physical-pdm-12-118138370

Speaker #2: Steffie Garcia

Steffie is an expert Games UI and UX designer. She is Lead Artist at Big Pixel Studios on the mobile game Pocket Mortys and previously worked as Senior UI Artist at NaturalMotion on the mobile games Dawn of Titans and CSR2 Racing.

In her talk Steffie explored the changing gamescape, evolving team structures, and the need to constantly improve games’ user experience. She explained how game companies should focus on creating an awesome UX for their games and why.

https://www.slideshare.net/ProductDesignMeetup/steffie-garcia-designing-fun-games-user-experience-pdm-12

Speaker #3: Jenny Theolin

Jenny is an experienced designer & educator from Stockholm. She runs her own design studio called ’Studio Theolin’ and collaborates with Hyper Island amongst other schools.

In her talk “how to make less choices” she challenged designers & organisations to keep ethics in mind when designing new products and services. After all, it’s our moral duty to make this world a better place, and what better way to do it then through design?

So start designing, thinking, creating, building and acting like you give a damn.

https://www.slideshare.net/ProductDesignMeetup/jenny-theolin-how-to-make-less-shit-choices-pdm-12

Next up: PDM 2018 — Ghent #3

On December 6th we’ll organise another Product Design Meetup in our hometown. Don’t miss out on this event by signing up fro free!

https://www.meetup.com/ProductDesignMeetup/events/255362872

✌️

Product Design Meetup #12— Kortrijk 2018 was originally published in Little Miss Robot on Medium, where people are continuing the conversation by highlighting and responding to this story.

This time we ventured to the beautiful Oude Vismijn, smack in the middle of the most beautiful city in the world: Ghent, where we welcomed 3 amazing speakers and a whole lot of product designers & developers. With almost 300 attendees this was by far our biggest edition yet.

For those who couldn’t make it this time, we’ll be sharing a few insights & take-aways:

Speaker #1: Arne Van Kauter

As a student at Devine, Arne started his internship at creative agency HelloMonday and ended up working full-time in their offices in New York, Aarhus & Copenhagen. He shared his insights about how it is to work with a team spread across the globe & how they tackle their projects.

“We are on a mission to turn the worst day of the week into the best one.”

Youtube Kids

Together with the Youtube team HelloMonday created a safe video environment for kids. By creating a “growuptive” interface, sprinkling it with animations and adding a kid-friendly sidekick they managed to do just that.

Residente

For the release of his new album, Puerto Rican rap-legend Residente teamed up with HelloMonday to create a web-experience that visualised his “everyone is connected” philosophy.

The challenge for the designers & developers was to find a visual metaphor that represent this idea and create a visual style that works across the globe. By using old maps & passport stamps as inspiration they managed to create a unique experience that connects people all over the world.

“Find inspiration from the real world and convert it to digital.”

Speaker #2: Nick Budden

With Sketch, Figma, Principle and the soon to be launched Invision Studio the Digital Design tool world is heading towards exciting times. One would wonder why we need another design tool, so we invited Nick Budden to tell us about the brand new Digital Design Tool he and his team is working on.

Launching in the summer of 2018, Phase aims to solve all the issues with today’s design tools and offering a full set of features that allow designers to work in the same tool from start to finish. Design, Interaction, Prototyping & even code-exporting. Phase plans to have it all.

The basics

Phase will see the light of day within a few weeks and has a laundry-list of innovative features they will launch with:

• responsive artboards
• flexible layouts
• libraries
• interactive elements. ( form elements, media elements, etc )
• states & styles

Interactions

Phase also focuses heavily on interactions & animations: they completely rethought animations & interactions in digital product design and added granular control, property-based animations and even hover effects.

Prototyping build in

Just like the most recent version of Sketch & Invision Studio, Phase aims to be an all-in-one solution and will allow users to create & share interactive prototypes from within the app — but with a very different approach.

Code-export done right

Let’s face it, creating useable exported code from a design tool that ends up in production is hard. In fact, as far as we know nobody managed to get it right... so far.

By allowing developers to run Phase’s code export function through their own custom build scripts Phase is hoping to solve the holy grail of designer-developer collaboration: production-ready code straight from the design-tool.

Phase definitely got the challenges for a design tool right and if they manage to solve these, we might just have the next big Lion on the savannah.

Speaker #3: David Bailey

After a successful career as a graphic designer, art director and founder of his own creative agency, David Bailey joined the BBC as Creative Director of User Experience & Design.

At the BBC he spearheads a team of 200 UX-designers, and is helping establish more design-thinking into this massive cooperation, spread across numerous locations in the UK. As the BBC continues to transform from a TV & Radio broadcaster into a fully-fledged online media platform, the UX&D department stands before a mighty task.

They’re aiming to tackle this mountain of work in a few ways:

Integrate

To shape the strategy within a giant organisation, you have to slowly but steadily influence its internal culture. By embedding UX teams into the different BBC services, UX&D is educating colleagues to work with a user-cantered approach.

To make sure the UX-team doesn’t lose sight of the bigger picture, their team members are rotated into different products and services each year.

Inspire

To further spread the word about best practices in design thinking, the UX&D department launched a series of inspirational, and quite hilarious, movies that explain their practice.

Educate

To combine & communicate all the knowledge generated throughout the UX&D department, they launched GEL, their Global Experience Language.

https://www.bbc.co.uk/gel/

GEL provides everything you need to know when building a digital product or service for the BBC. It covers all aspects from the grid, iconography & typography to fully developed components & design patterns.

But to simply call GEL an online styleguide wouldn’t do it justice, it goes much further. The UX&D team also uses it to share articles, show how they work & explain why they do it. It’s the first step in shifting the entire BBC’s mindset to a more user-centered approach. We for one are curious to see what’s next to come.

Thanks

We were truly happy with these three diverse and interesting speakers, and with all of you who came out to be inspired and made the night perfect. We had a lot of fun organising this event and are looking forward to see you all again on the next meetup.

Next up: PDM #12

Our next meetup will take place somewhere in June at our brand new second office in Kortrijk. Make sure you don’t miss it by joining our community our signing up to our mailing-list.

More info: http://productdesignmeetup.com/

Product Design Meetup #11 — Ghent 2018 was originally published in Little Miss Robot on Medium, where people are continuing the conversation by highlighting and responding to this story.

FLOW, short for Flexible Library for Optimised Wireframing, is our own internal library which allows us to easily create detailed wireframes, without being too restrictive. We use this as a starting point to keep everything efficient & consistent, but they still encourage creativity and some custom work. No pre-made templates!

What will you find in this library?

The name kind of says it all, FLOW is a library of components that you can use and share throughout your team and use as a base to build your wireframes on. It only contains high-level components with a few basic options like changing colours, label, sizes…

You can build flowcharts in no time

Since wireframing is more than just screen layouts we’ve included a few components that may come in handy, such as a flowchart system. You can easily customise every element by using the override panel.

An extensive yet easy to use icon library

At Little Miss Robot we work for very diverse clients that range from transportation and education to banking, batteries, ice creams and insurance… It’s always a hassle to find icons that can fit those specific categories. You don’t want to be losing time in finding icons sets and then tweaking them to be “sketch-proof”. In the wireframe phase you want to have clear icons that get the message across and are easy to fetch and use. That’s why we also combined FLOW with FLOW-icons. You can easily search for specific as well as common icons and they’re all “sketch-friendly” with easily switchable colors. We used the awesome Material design library from Google, it’s a pretty neutral set and it’s responsive.

Why did we build it?

We wireframe for almost every project and it became quite clear at some point that we need a systematic approach to wireframing. We don’t want to reinvent the wheel on each project and we want to maintain consistency across different team members and projects.. So the idea started to grow that we should have a template, which was/is quite handy. Then sketch integrated the shared library system and that’s when FLOW really took off.

“Now we could have one source of truth for all the designers in the company and have a branded wireframe library.”

Most importantly we could focus on what really matters and what is specific to each client; details, animations, storytelling, complex components…

It was also a great opportunity for us to stop a moment and think about what we were doing. Why should we use wireframes? How detailed should they be? Are they useful for a visual designer, a user test, a developer?

The challenge was to come up with a system that allows us to be creative without spending too much time on an early prototype but still having a clear concept that we could navigate, test and quickly change and present to clients.

How does it work? How to optimise it?

Optimisation 1: Use it as a shared library 🔗

We meant for FLOW to be used as a library, as we are fervent defenders of having one source of truth for efficiency and consistency. Using a shared library, will allow you to update all your files at once and keep your working file free from symbols, so lighter. But you can surely use FLOW as a template file to start your project. Then you’ll have access to all the components in your symbol page.

Optimisation 2: Combine it with Sketch runner for light speed 🏃🏃‍

Sketch runner’s plugin will really make the FLOW fly. It allows you to search through your symbols or shared library, amongst other really practical things.

Optimisation 3: Combine it with Paddy for that silky smooth sensation of automated button resizing 🍭

Yes, FLOW is compatible with the plugin Paddy which allows you to define padding for elements and then when you override the symbol, the element automatically resizes… Pretty neat!

Get creative! Stay flexible!

Make it your own or brand it with your company’s style. Simply tweak the symbols, save it and it’ll be updated in all your files.

Nested symbols allow you to change everything, so play around! An inputfield can easily become a search field, a checkbox option can become a link…

👉 Download FLOW.sketch and FLOW-icons.sketch here

👉 We’d love to hear from you, how you put FLOW to use and how you added to it. Let us know!

Take your wireframes to the next level with FLOW was originally published in Little Miss Robot on Medium, where people are continuing the conversation by highlighting and responding to this story.

As you may have noticed, a few things have changed at Little Miss Robot…

When we first started our studio in 2009 the world was an entirely different place. Flash was still cool, the mobile revolution had only just begun and Steve Jobs was about to announce the iPad.

Today we‘re surrounded by screens and interfaces that constantly interact with us in our everyday life. Information is flowing from all kinds of sources and everything is connected in increasingly interesting ways.

Over the course of our history we have taken on challenges in mobile, smart TV, VR and of course, the ever evolving web. Our mission has always been two-fold: we want to engage and amaze our users, and we want to be inspired by the possibilities of new technology.

Hence our slightly unusual, but totally fitting company name — Little Miss Robot — that combines this need for curiosity and creativity (the little miss) with our more geeky, technology-craving side (the robot).

Building on the strengths of this foundation we developed a set of design methods to create innovative digital experiences with our customers. We became more and more invested in UX, interaction design and digital styleguides. We partnered with over a 100 companies in industries such as publishing, radio, news, finance, education, human resources, healthcare & recycling to shape their digital futures and are very proud to look back on all the stories and people that crossed our paths over the last years.

Today we see new change ahead of us.

Technology has become so omnipresent in our world, that we will soon see the effect of completely new kinds of interfaces and product systems on our society, from brain-controlled interfaces over AI to Smart Cities & VR.

The challenge doesn’t just lie in designing the product, but also in making it work together with its surroundings in an increasingly complex set of possibilities. It’s about getting more and more stakeholders on board and diversifying the experience to individual needs. This evolution will require partnerships and solid collaborations, so we felt the need for change in our own story as well.

The branding & logo we had no longer matched with who we are and what we’re aiming for. So it was time to say goodbye to our beloved little miss and go for something that fits us better. Our new logo & branding are the result of an extensive branding workshop & collaborative design track, which we’ll explore further in an upcoming blogpost.

On top of that, we joined ranks with Knight Moves and Once in a new design and innovation initiative, the Leap Forward Group. By working closely together with these design studios from a brand new office in Ghent, we‘re able to invest in becoming an even better strategic partner for our customers.

Our goal as a company however remains crystal-clear. We’re highly invested in Digital Product Design and want to craft meaningful experiences that make a true difference to the people using them.

Thanks to the talent, passion and commitment of our people and the support of our new partners we‘re more confident than ever to succeed in our mission of bringing these new products and experiences to life. This same mission made us launch a new website, so check it out at www.littlemissrobot.com !

Yup, we‘re hungry for more work. Yeah, we’re committed to build more kick-ass digital products. Hell yeah, we will go the extra mile for our customers.

Here’s to another decade of design & innovation.

Stay tuned!

Designing the digital products of tomorrow. was originally published in Little Miss Robot on Medium, where people are continuing the conversation by highlighting and responding to this story.

An open letter to Little Miss Robot

Dear Team,

All good things come to an end, even Christmas dinners and New Year’s Celebrations. I hope you enjoyed quality time with the people who matter most and (re)charged your batteries. Maybe you have reviewed 2014 and dreamed about the future, just like I have. If that’s the case I truly hope you are proud of what you achieved and have set some exciting new goals.

I’m writing this email because I wanted to share how I feel about our year in review.

Teamwork Wins Championships.

2014 immediately introduced a few changes in our team. We kicked off with saying goodbye to some colleagues who bravely started their own businesses. Letting them go was hard, but when we see their great work we can only be proud. Maybe, if you look closely, you’ll find some Little Miss Robot flavour in portfolio work of Wonderland, Next Apps & Going Public. Guess they learned from the best, I secretly whisper. I’d like to thank them all for being part of our story and wish them the best of luck in 2015.

At that same time in January we rejoined forces with our co-founder Wim Vanhenden, who had spent a year exploring the boundaries of interaction design at his own startup No Computer. A deeper understanding of technology and interaction design was exactly what we needed to push our work forward and turn dreams into reality. Welcome back, partner. Let’s kick some ass, ok?

Our team also welcomed many other talented people this year. During summer Alex decided to help us build a better company, instead of taking time off to work out his own game (which he announced a few months earlier). For me this was a surprising turnout, a relief actually, and a very big highlight. We also welcomed our product manager Kristof and decided to hire Wouter after a very successful development internship. This must have inspired Pieter, who volunteered for a UX internship in November and turns out to be a great fit. Welcome on board, all of you.

In 2015 I hope to find the right talent to help us grow further. We have started early conversations with product managers, UX and visual designers and will keep you posted. Whoever finds his way to our team, I’m sure he or she will enjoy the great interactions I experience myself on a daily base.

Designing Better Products.

I have to admit, it took us a while to figure out who we are and what we want to do exactly. We have always believed in the opportunity and responsibility to improve people’s lives through innovation and design. This year I feel we have finally grasped that momentum, we have found the sweet spot let’s say.

It has never been so easy for product & service providers to target customers directly and contextually. Product differentiation is shifting from functionality to convenience. From technology to user experience. We help pioneering companies design meaningful products & services. By creating an environment where small teams bring new ideas to market and where design culture is included throughout the entire development process. I feel that Eric Schmidt points it out very clearly in How Google Works:

Today, great products win.

While we have years of experience in the digital creative industry, moving away from marketing and advertising to product innovation is a big step. It requires a more sustainable mindset and a totally different creative approach. Many companies struggle with this and our Product Design Meetup takes a leading role in inspiring and educating product teams. I’m super proud we are building this community and look forward to the next meetup in our very hometown. I hope our entire team can attend, just like it did last time. It’s a truly remarkable statement that we care about what we do every day.

The Network Always Wins.

As I mentioned earlier we found our market fit. It doesn’t take a genius to understand that we will try to maximize it’s potential. In 2015 we will take our first steps in becoming a network organisation. This means we are going to invest in (our own) bright people, coach them and help their own initiatives thrive. This type of company growth is one of the reasons why our shareholders Cronos and Heaven Can Wait are so sustainable and successful in an industry that is constantly changing and reinventing itself. Wim and myself feel ready to start putting that same vision into practice.

As of 2015 we will support our colleague Dave in starting his own service design studio Knight Moves. It’s amazing how much Dave has grown in the 2,5 years he has worked with us. He has been of a vital importance for our company to succeed, survive even, and I’m grateful for all of the loyal energy he has put into our team and our vision. I’m looking forward to, in his own words that is, more disco.

2015.

Over the past few years we have made many innovative products & services happen here at Little Miss Robot. We helped clients respond to aggressive disruption in industries such as radio, finance, education, HR & healthcare. As a strategic design partner we’ve teamed up with over 100 passionate product teams, Making The Right Product Happen Fast.

In 2015 we will focus heavily on improving our creative process and finding the right people to strengthen our multidisciplinary team. I’m going to keep exploring and discussing everyone’s ambitions and desires and do my very best to match them with our purpose. Whether it’s finding the right projects, providing challenging tasks and responsibilities or support any initiative of which you truly believe it extends our vision.

I’m sure these projects and initiatives will proudly represent the great amount of energy we spend together, our desire to challenge the status quo and carry out a higher standard. I am proud to be part of what I believe is an exceptional group of talented people, sharing one thing in common beyond great skills and expertise: positive energy.

I consider myself very lucky to be surrounded by it. Every single day.

…transfer completed
Thomas

Year In Review was originally published in Little Miss Robot on Medium, where people are continuing the conversation by highlighting and responding to this story.

A social experiment

Robot stories is a social experiment, celebrating people and their stories!
Every 6 hours we honour a trending topic by visually merging people’s tweets.

https://twitter.com/robot_stories/

History

Yes, we asked ourselves the million dollar question: “How can we visualize the interaction with our twitter account?”

In the spirit of Kyle McDonalds Twitter experiment one of our first idea’s was to change the profile picture of our Twitter account with the profile picture from someone who retweeted our tweets.
http://upstart.bizjournals.com/news/technology/2013/11/13/entrepreneurs-christians-nazis-tweet.html?page=all

But because of the constant changing of the profile picture we realised that the reward for someone retweeting would be too low. It just didn’t make sense to people… Another restriction was that Twitter blocked us for making too many requests on their server.

In the meantime at Little Miss Robot we were working on a project that involved Twitter integration where we needed to combine trending topics and tweets with pictures.

From that point on it became clear where this project was heading.

We were going to create a new Twitter profile that visualises a combination of trending topics and then sends them out as new tweets. We call it Robot Stories.

It’s a train, it’s plane?

Robot Stories is an artwork, a social experiment and a reason for us to learn.

So far we have the Twitter page, a website and an iOS app made with Swift.

We learned much more about working with the Twitter stream api , how to handle back-end technology’s, services, queuing and automatisation, the Swift programming language, how to incorporate our own HTML/CSS framework (FLOW) into these types of projects and much more.

Ayo Technology

So what is really going on here?

We capture three tweets that include an image within the context of a trending topic. Then we blend these 3 images together and post a new tweet containing the image and a message “including the trending topics and the users involved”. All of this is done automatically.

It’s a bundle of ‘components’ doing all the heavy lifting on a server in France somewhere. And oh yeah. It’s all done in Node.js

It was harder than expected to create a stable system.
Especially for something that at first sight seemed to be so trivial…

To try and point out what could go wrong with this ‘simple’ concept here are some parameters to which a tweet must validate against before it can be accepted in our system.

• it needs to contain an image
• the containing image must be ‘usable’

converting from RGB to HSV color space and checking brightness

• it can not be a retweet
• it can not be a tweet generated by Robot Stories
• the trending topic of the tweet may not already be in our queue
• the user may not already be in our queue

We decided to go for a queuing system to make sure that when something goes wrong, we still have enough data waiting in line to be processed and tweets can continue to be generated and send out.

The complete process looks something like this:

ENJOY THE CELEBRATION!

It will take us probably at least a year from now before we can start to check for social relevance. Once we have enough data we’ll have to take a good look under the hood and see if what we have gathered can be relevant in other domains.

We could even make a yearbook. A real analog one!

We invite you to become a part of the story!

http://www.twitter.com/robot_stories
http://demo.littlemissrobot.com/robot_stories

Robot Stories was originally published in Little Miss Robot on Medium, where people are continuing the conversation by highlighting and responding to this story.

Fighting for a real-recycling society

Have you ever noticed that almost all products we buy in the supermarket are already packaged for us? Every week we carry out bottles of water, packs of milk, cans filled with vegetables, bottles of shampoo, …

When these products reach the end of their useful life, we collect and recycle them. And while that’s a good thing, only metal can be recycled forever, with no loss of quality and properties. In the packaging industry this is known as real recycling.

In order to grow a real-recycling society, Empac (European Metal Packaging) educates and promotes metal packaging to more than 200 manufacturers, suppliers and national associations.

By helping Empac reaching out to it’s community, Little Miss Robot became a proud partner contributing to a more social, environmental and economic supply chain.

Learn & Explore

We started this project with hosting several workshops, learning all about Empac, the packaging industry and the benefits of metal.

We facilitated the process of moving away from tons of messages and statements to a very focussed and well thought-out key topic. We learned that Empac was informing and educating members, while their actual target was convincing decision makers.

We did not create anything tangible during the first workshops with Little Miss Robot. But what I finally saw was truly amazing.
— Ellen Wauters, Manager Communications

We decided to change the communication strategy from informing the what to explaining the why. It became the very core of the platform we are building together: WhyMetalPackaging.com.

Design & Build

After the Exploration Phase we started sketching and prioritizing user stories, made a production roadmap and aligned a team of 1 Product Manager, 1 Product Designer and 2 Product Developers.

Designing The Message

We ran several iterations visualizing and fine tuning the core message for WhyMetalPackaging. You no longer have to be a packaging expert to understand why metal is a material worth considering. Let us walk you through it.

Building The Platform

Given the diversity of our target audience (going from single users to large associations), we felt the need to support both modern and legacy browsers. We have put a lot of effort in making the site perform great on Chrome, Safari, Firefox and Internet Explorer (back to IE6!).

We used the Graceful Degradation design principle to ensure that the message was always primary to anything fancy that could break the experience on legacy browsers.

We wanted to enrich the experience on modern browsers by using UI animations revealing the message gradually as you scroll along. We used http://scrollrevealjs.org as a backbone for all of our creative desires.

This open-source library by @JulianLloyd allows to define animations in human language, we loved it from the second it was published to Github. We even modified the source code here and there, adding extra animation possibilities on top.

Interpack 2014

After 4 months of design, development and user testing we were ready to ship WhyMetalPackaging.com’s first version. And what better opportunity to launch than being part of world’s biggest packaging conference: Interpack.

We worked closely together with Empac and their booth supplier to design interactive experiences in and around the stand, pushing our core message forward. With several touch tables we guided visitors through the benefits of metal packaging.

On top of that we created interactive artwork to boost the stand’s entry, inviting people to take a look around.

Disclaimer: At the moment of writing, we are designing a Phase 2 roadmap for WhyMetalPackaging. We are facilitating strategic meetings and inspiration workshops with stakeholders to become further and even better aligned globally. We are looking forward to keeping you posted.

WhyMetalPackaging.com was originally published in Little Miss Robot on Medium, where people are continuing the conversation by highlighting and responding to this story.

Experimenting with WebRTC and Canvas

Slowly but surely WebRTC (real-time communication) is finding it’s way to the web. It’s one of those new javascript API’s which allows the browser access to your webcam & microphone and share that data via peer-to-peer, making it possible to run skype-like applications in the browser.

Although final specifications are not fully implemented yet and browser support is still somewhat experimental, we can already start playing with it. And so we did …

See the demo
Get the source-files

Motion detection

Motion detection is really a brute-force operation, where we compare pixels from our webcam-feed to those of a reference image (or previous frame). In places where pixel colors aren’t the same, we can assume something is moving.

Although implementation is rather straightforward, there are some things to keep in mind. Using small frame sizes improves performance, as bigger frames have more pixels — taking up more time to traverse.

Environmental lighting has a huge impact on the output and is rather hard to control. Best results are achieved with a clear contrast between fore- and background. Since (natural) lighting conditions are changing every second, you might want to throw in some sliders to adjust parameters as you play.

Implementation

Navigator.getUserMedia() is the magical keyword here, this allows us to fetch the output from our webcam and draw it to the canvas frame-by-frame. From here we can access pixel data of the image via canvas.getImageData(), which provides us with a nice array of pixels to work with.

We then create the reference image to compare our live feed against by copying the pixel array every frame — or by pressing a key, clicking a button, … Next we traverse all pixels, convert them to grayscale and subtract them from each other based on a deviation threshold (remember those sliders?).

In places were the outcome of this subtraction (which is a number) is below our threshold, we color that pixel black. If that’s not the case, we color the pixel white. We then draw our pixel array back onto the canvas with the canvas.putImageData() method. This will output a nice black & white image, clearly showing us what’s moving and what’s not.

Doing something with the output now, is just a matter of traversing the array again and look up the white pixels. Enjoy!

Motion tracking in the browser was originally published in Little Miss Robot on Medium, where people are continuing the conversation by highlighting and responding to this story.

Transforming innovative business vision into meaningful digital experiences.

We live in a world where digital is no longer an extra virtual layer on top of our lives. Smartphones, Tablets, Laptops, Computers, Cars, Televisions, Watches, Glasses, … Everything around us is turning into access points, gateways to interactive services, making our lives just a little easier.

Never has it been so easy to reach out to people directly. We are able to automatically personalize & contextualize experiences for every single user. Worldwide. It sounds like utopia for product & service providers across industries. But this revolution comes with a heavy price to pay.

Our connected world is constantly evolving, changing and reinventing itself rapidly. Aggressively.

At Little Miss Robot, we believe that innovation & design are key to adapt, learn and respond to tomorrow’s opportunities. This goes for both big corporations trying to move forward, as well as for tech startups looking for product & market fit.

While both types of organisation are extreme opposites — structure, culture, workflow, people and expertise — we believe they have a very similar goal:
Making The Right Product Happen Fast.

We facilitate this process by working together as a product design partner, making the right products and services happen. By transforming innovative business vision into meaningful digital experiences, we create future-proof relevance for our clients and their customers.

Design Is Not An Afterthought

Many organisations and tech startups are managed by business people and technical experts, lacking design expertise. Too often, design is an afterthought, a visual layer added on top in the end of the process.

But design is not just a visual layer, it’s not just about aesthetics either. Design is about behavior. It’s not about how your product looks, it’s about how your product behaves. This means that if it behaves like an asshole, people will start to see it like an asshole. And that’s a big problem.

The world doesn’t need more assholes, there are plenty already. We believe that the world needs products that are a joy to interact with, easy and fun to use. Products that empower us, products that inspire us.

We believe that, through innovation & design, we have the opportunity & responsibility to improve people’s life. If we want to create these meaningful experiences, design has to be included throughout the entire development process. We have to facilitate business, design and technology to collaborate in an involved relationship.

A relationship that is focussed on finding the right product or service and make it happen. Together.

If you want to know more about how we involve people in our creative workflow, check out this article we wrote about it for Smashing Magazine.

Exploration & Discovery

Finding the right product is an important part of our creative approach. During this Exploration & Discovery Phase we use collaborative design techniques to discover & address specific problems and innovative opportunities that match both business vision and customer needs or requirements.

With a core team of at least 4 experts —Process Facilitation, Product Design, Technology & Business Strategy — it takes 4 to 12 weeks to deliver a creative vision and roadmap for future product development.

Learning. We start with learning more about our client’s industry and user segmentation. We talk about value propositions, how the business works, opportunities and threats, …

Visualizing. Next thing we do is moving away from abstract conversation and make our communication tangible. We brainstorm user stories, discuss strategy, sketch & prototype solutions, involve early adopters & stakeholders, discuss technical opportunities, …

Defining. This iterative approach leads to a clear focus on what the product or platform should offer, how it should work and why it is relevant and future proof for both the brand and its customers.

We wrote down an entire article about how we guide teams trough exploration and discovery. Check out Finding The Right Product if you want to learn more!

The Product Lifecycle

Next on our list is creating a Product Lifecycle, based on our agile approach to grow innovative products. The Lifecycle describes a sustainable & flexible collaboration between product and marketing teams.

Team. We map out important responsibilities within production, marketing and stakeholders and carefully bring together a core team of experts. With a clear focus and accountability they take the lead during the entire Lifecycle of the project.

Roadmap. We help creating a long-term roadmap. Depending on the type of project we visualize a 6 tot 18 month timeline with all important actions and milestones. From wireframing, interface design & user testing to frontend development, beta versions and live deployment.

Priorities. One of the many advantages of involved Exploration & Discovery is that we speed up our learning curve of understanding business vision, internal struggles and opportunities along the road. Truly understanding the entire context, we help prioritizing production and marketing related to do’s. Both long-term and short-term.

Building. It generally takes 2 to 5 weeks to fine tune the Product Lifecycle and get approval from the board, stakeholders and other decision makers. Once we are good to go we do what we do best: making innovative products & services happen.

This involved collaboration has resulted in many sustainable, successful and inspiring digital products & services. Check out our case studies and get an exclusive behind the screens of our work.

Making the Right Product Happen Fast. was originally published in Little Miss Robot on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Product Innovation Sprint. 

Finding the right product is an important part of our product design approach at Little Miss Robot. During this Exploration & Discovery Phase we use collaborative design techniques to solve a problem or adapt to a certain need for our client’s customers.

With a core team of 4 people —Process Facilitation, Product Design, Technology & Business Strategy — it usually takes 4 to 12 weeks to deliver a creative vision and address next steps in product development. And while this 3-month track helped many organisations & startups move forward, I started looking for an even faster approach.

For those teams out there who are on real speed, trying aggressively to change the world. Disruptive Innovators.

The Product Innovation Sprint

Over the past few months I’ve been researching articles on innovation workshops and product management. They all described similar techniques to our exploration approach. But then I bumped into an impressive article by Joanna Beltowska, sharing her insights on running an experimental workshop format called The Product Innovation Sprint.

This 5 day workshop—inspired by Google Ventures’ Design Sprint—takes a product team from idea generation to customer & stakeholder validated prototyping in 5 days. Besides solving a problem using design techniques, it also creates momentum to discuss and challenge product strategy.

This up to speed combination of involved design & strategic thinking felt like a great approach to find the right product fast. So I decided to start running.

Harder, Better, Faster Stronger

Here are some learnings and behind the scenes of our sprint with Arguslabs, a tech startup on a mission to make software emotional and empathic. The next level in artificial intelligence, brewed in Belgium.

A Room With A View.
Being out of your comfort zone stimulates creative thinking. To get clients out of their daily routine, we often invite them to our studio for workshops. This works great for half a day, but running a five day track at our place is hard to facilitate properly.

We looked for an inspiring location to host the sprint and ended up at the 21st floor of the KBC Tower in Antwerp. The incredible view makes it a unique place to work.

The Team.
Our team was small and allocated full-time during workshop week. It consisted of a Little Miss Robot strategist, designer and developer, and a business expert, tech architect and designer on the client side.

Involvement.
We believe the best digital products happen in an involved relationship. We stimulated working and sitting together by providing an open desk in the centre of the room.

Dinner & Drinks On The House.
Great minds need great fuel, so we provided breakfast, coffee, lunch and snacks for everybody. We hired a great catering company to provide healthy food and drinks. On the house.

Stand up.
We did a standup meeting at the beginning of each day. I made sure everybody understood Today’s Focus and knew exactly what to do next. I also asked each team member how they were feeling about the progress and where I could help to address next steps.

Speak up.
We started every meeting with sharing our individual thoughts and vision publicly. I encouraged people to speak up and listen to each other, before discussing things further or jump to conclusions. Taking a minute to truly hear what others are saying speeds up the conversation enormously.

Break up.
Working so closely together is very intense. I made sure we took a 15 minute break at least every 2 hours. Having time to talk about other things is a great way to blow off some steam and keep a high and positive energy level.

Visual Communication.
During the week I stimulated the team to communicate visually. We sketched strategic diagrams, prioritized features on post-its and illustrated UI concepts using pen & paper. Having something tangible helps to understand what people are really trying to say. It speeds up the conversation and leads to more positive and constructive feedback.

Open Feedback Sessions
We hosted 2 Open Feedback Sessions for early adopters and stakeholders. We presented our progress and learnings and listened to their feedback carefully. We have learned a lot during these sessions and they were a key driver for strategic decisions later on.

Value Proposition Canvas.
At a certain point you need to make important decisions on strategy and design in order to proceed properly. A great way to stimulate this often abstract discussion, is to fill in a value proposition canvas. It took us almost 4 hours, but after an intense afternoon we were exactly on the same level.

After 3 days our entire product strategy shifted into a scalable vision for the next few years. How’s that for speed? — Filip Maertens, CEO Arguslabs.

Deliverables
On the last day of the sprint we presented a review of the week, summarizing the business goals and KPI’s, creative turning points, strategic decisions (Value Proposition Canvas) and UX learnings.

We walked through a clickable prototype that explained the UI concept and addressed a few important recommendations on further product development. The week after the sprint we pushed the project further by making a inspiring concept video for the client’s team and stakeholders.

Disclaimer: Shortly after the sprint, Arguslabs finished a 1,5M$ seed round and is looking for great talent to join forces. At the moment of writing, we are designing a future roadmap and partnership. The Next Web has nominated them for Fastest Growing Tech Company in Belgium.

Thanks to Elke De Vilder, Wim Vanhenden & Bert Van Wassenhove for reading drafts.