Sampo Karjalainen

Building Gem – search engine for vintage. Co-founder of Moves, Habbo Hotel, and Hel Looks. Secondhand shopping guide, including Gem from Apple.

[sampokarjalainen]

Gem – Search All Online Vintage

After leaving Facebook in 2018, I’ve worked with Liisa on Gem, a search engine for vintage and pre-owned clothing. We launched the website and apps in late May 2019, and it has found a small dedicated group of users. We built Gem to make it easier to find a specific vintage item, and encourage reuse over buying new.

Gem has been a good challenge to build a small service myself. Here’s a summary of how it works:

Indexing

Gem adds products to its search index in two ways: by using APIs, and crawling websites. Gem crawls included websites once a day and updates the index with new, changed and removed products. Getting the product details and images correctly requires a bit of custom rules for most sites, but it’s manageable. Sites that render pages with JavaScript are fetched with headless Chrome and Puppeteer.

Backend

The core search relies on Elasticsearch. It’s quite a complex piece of software built on top of another piece of software, Lucene. It’s easy to get started, but mastering it is a bit of a dark art, especially when it comes to scaling and performance tuning. The backend is a GraphQL service, written in Node.js, and running on Elastic Container Services on AWS.

Website

The website is React, with a server-side rendering setup. Server rendering is there for fast initial loading and share previews for messaging and social media. Routing is a custom set up built on top of History module to support both clean urls and a session-persisted stack of views. For Gem Stories, we use Slate.js to have a rich text editor that supports a limited pre-defined set of styles.

Apps

Gem app is available for iOS and Android and it’s built with React Native. React Native has been a mixed experience: If you know React, it’s really fun to build apps with the same declarative model, and run it immediately on both iOS and Android. But, it’s a bit like writing for two different browsers that support different things and have their own quirks. Rich interactions and animations with good performance can require lots of trial, error and optimization.

That’s it in a nutshell. Try out Gem, send feedback, and find something unique to wear!

[sampokarjalainen]

NYC Vintage Map

Here’s a small website I did some time after I left Facebook. It’s a map of all New York City vintage and second hand stores. After we moved to NYC, Liisa wanted to get to know the vintage stores over here, and started putting them on a map.

This was a good project to learn some more React and static site generation. It’s using React Static, and Netlify for hosting. The map is Mapbox, which lets you do all kinds of nice things.

It works OK on the phone, too. If you want to go vintage hunting in NYC, just tap the ‘locate me’ icon to see yourself on the map.

nycvintagemap.com

[sampokarjalainen]

Moves – Lessons Learnt

It has been a busy 2½ years with Moves. And now Moves has joined Facebook! It's not the end of the Moves story, but a good milestone to look back and see what we did and learnt.

I’m quite proud of what we built: A pioneering software activity diary, the first tool to track activities and places all day long with an iPhone or Android phone. Dubbed as a “surprise hit” by Apple, Moves has been downloaded over 4 million times to date for iPhone and Android.

What did I learn from these years? What could have been done differently? Here are a couple of top items:

Lessons Learnt

1. The pre-launch iteration worked

The usual “release early” wisdom is to get the first version out fast, and then improve based on user feedback. We kind of did that: Instead of a public release, we iterated the product with small groups of users for over a year before the launch, starting with mockups, prototypes and competing products. This helped us to focus fully on customer and product development. After the launch, things got more reactive: We became a bit “distracted" by business inquiries, PR work, investor discussions, scalability problems, user support and traveling. A pre-launch iteration is a great way to focus on the product, ask the interesting questions, build experiments and take the time to build a valuable and good product – if you think you can get reliable data from a small group.

2. Battery life is still an issue

We knew from the beginning that smartphone battery life is a challenge. We worked hard to keep the battery usage low, while collecting enough data to show each day’s activities, places and routes. Our goal was to hit the “right phase of the wave” with battery and power efficiency improvements in mobile platforms. While we have achieved battery usage that is good enough for many people, battery usage is still the biggest reason why others stop using Moves. Battery technology hasn’t improved, or if it has, the new processors have eaten up all the improvements. Interestingly Apple and Google have now introduced custom hardware for the use case: Apple’s M7 co-processor is great for battery-efficient activity recognition. However, it doesn’t help in battery-efficient location tracking and it doesn’t recognize bicycling, like our own algorithms do.

3. Open API had a limited impact

While working on Moves, we came up with all kinds of interesting use cases for the data. We realized that we would not be able to develop everything ourselves, so we published an open API in the summer of 2013. Moves has now over 50 Connected Apps: mobile and web services developed by third parties, using data from Moves with users’ permission. This is great, but it seems that the impact on the acquisition and retention of Moves users hasn’t been very significant. We tried to make the authentication flows as easy as possible, but trying out additional features is still bit of a hassle for many casual users.

Things We Could Have Done Differently

1. Focus on the post-launch iteration

As a small startup, it could have been good to focus more tightly on core product and customer development also after the launch. We were quite excited by our initial launch success and attention we got. The Android version, open API, business development, PR and investor discussions took a lot of our attention and slowed down the core product iteration. In particular, the Android version turned out to be a much bigger project than initially expected. 

2. Be more of a solution

Our goal was to build a great tool for people to monitor their physical activity. We built a target design persona based on tens of interviews early in the project. However, I think we could have tried an even more solution-oriented approach. I personally like the idea of a tool that doesn’t force people to do things. But it also seems to mean that the tool is nice to have, but not super-valuable for many. Being super-valuable gets important when building an end-user revenue model. We could have worked harder to be an effective solution for people who want to become more physically active, built a subscription revenue model, and found ways to reach those people. It would have been a different kind of a product and business, though.

3. Fewer hats

Personally, it was fun to do a lot of things. I was CEO, product and project manager, interaction and visual designer, web developer and fundraiser all the while talking to the press, finding partners, etc. Luckily I got to work with Aleksi on many of them. But frankly it’s hard to do them all well at the same time. Product design requires a focused proactive mindset, and it’s hard when there are lots of inbound things going on. It would have, maybe, worked better if there had been two people focusing on different areas: one on the product and the other on business development, marketing, etc. Also, focusing on building the company, culture and setting clear goals, and do less myself, could have paid off.

All that said, it has been a great ride. Now, with Facebook, their scale, assets and talented people, it’s time to take this to the next level!

[sampokarjalainen]

Moves for iPhone

It's time to break the long silence in my blog. The reason for no posts is that I've been busy building something new. And today it's being launched.

The new thing is Moves. It's an activity-tracking app for iPhone. It's a bit like Nike+ Fuelband or Fitbit, but in your phone: no need to charge and carry another gadget. It's also an automatic diary of your life. It shows where and how you move and the places you visit.

The project has kept me busy for the past year. We founded the company in January 2012 and now there are of eight of us working on it. It's a fascinating project with interesting technology and design challenges, and if we're successful, it will have a positive effect on people's well-being.

Moves is a free app and it's now available from the App Store. Learn more about it at moves-app.com.

Update: TechCrunch, The Next Web, AllThingsD, Pandodaily and The Verge write about Moves.

[sampokarjalainen]

Game Show

Imagine a TV show like Project Runway (Muodin huipulle in Finland), but with game development. In each episode the contestants, let's say programmer–designer pairs, design and develop a simple mobile or web game, in a limited time, based on a given brief. After each episode the created games would be played immediately by the audience. The audience would decide which games get the most plays and best ratings.

It could be good entertainment, and even better education. It would be most interesting to focus on game design: the mysterious art and craft of creating and tuning game ideas and mechanics. It'd be fun to show the different approaches and talk about some best practices, for example along the lines of Jesse Schell's great book The Art of Game Design with clarifying infographics. The production could be executed in the context of a game design education programme. The more reputable the coaches and judges, the better. 

I came up with the idea together with Mikko Köykkä earlier this year, and we've been talking to some TV production companies and games business people here in Finland. However, right now we are quite busy with other projects. So we decided to blog about this to see if someone else could do it, because we'd like to watch the show. :) Take the idea and run! Or let’s discuss it in comments or face-to-face.

Would you watch this show?

[sampokarjalainen]

Framing Games as Tools

I gave a short talk at Slush 2011 startup conference. It's about one way of looking at games and their value to people.

Here are the slides, with subtitles. (Full screen view recommended)

[sampokarjalainen]

10 Favourite IxD Books

Interaction design (or user experience design) is a craft. I learnt it by doing, without proper mentors: creating multimedia presentations, CD-ROMs, websites and games by observing other products, using common sense and trusting my gut. Back in those days, interaction design wasn’t really a specific job; it was something a concept designer or graphic designer did as a part of their job. As a result, the products sometimes lacked understanding of user motivations, or performed poorly in usability tests (if there were any).

While working on Habbo, I decided to check if anything useful was written about this topic. Over the years I have found some books really useful. I wish I had read them earlier.

Here’s my top 10 IxD books:

Designing for the Digital Age

How to Create Human-Centered Products and Services by Kim Goodwin

The number one. It contains a comprehensive explanation of Cooper’s goal-directed design process with material on design principles, research, personas and scenarios. With 768 pages it’s not an easy read, but for me it built the big picture of how to think about the design process.

About Face 3

The Essentials of Interaction Design by Alan Cooper, Robert Reimann and David Cronin

This book comes from the same school of thought as the previous, but focuses more on design principles. Solid stuff, but it gets a bit random towards the end. There are some fun things, like Mac OS X Lion’s auto-save feature described some 10+ years earlier.

The Inmates Are Running the Asylum

Why High-Tech Products Drive Us Crazy and How to Restore the Sanity, by Alan Cooper

The third book of “Cooper-school” to complete the trio. This book is aimed at business and technical people. It paints a picture of why it’s valuable for products and services to be designed for people. The book was originally published in 1998, and luckily the situation has improved a bit since then.

Don’t Make Me Think

A Common Sense Approach to Web Usability by Steve Krug

A really easy and entertaining to read from Steve Krug. It’s a great book for anyone who has something to do with developing a website. The best effort vs benefit ratio!

Rocket Surgery Made Easy

The Do-It-Yourself Guide to Finding and Fixing Usability Problems by Steve Krug

Another Steve Krug book, this time explaining a simple process for running usability tests yourself. Usability tests are seen as slow and difficult, but here’s a model that makes them quite easy. Being involved in testing yourself helps you make better decisions next time.

Paper Prototyping

The Fast and Easy Way to Design and Refine User Interfaces by Carolyn Snyder

A bit old but, as far I remember, a really useful book. It explains how to build and test rough paper prototypes on users by role-playing a computer yourself.

Sketching User Experiences

Getting the Design Right and the Right Design by Bill Buxton

How can we sketch interactions – something that happens over time? A bit of a rambling book, but with plenty of interesting ideas, techniques and historical perspective on interaction design.

The Design of Everyday Things

by Donald A. Norman

The usability classic.

I have to say, it’s been a while since I read it, but I remember it as an eye-opening experience. Door handles won’t look the same after you read this.

Web Form Design

Filling in the Blanks by Luke Wroblewski

Good best practice for web form design. A surprisingly large amount of our interaction with websites is done with forms. Luke Wroblewski has distilled plenty of experience and research results into a concise book.

Designing for the Social Web

by Joshua Porter

A bit uneven as a whole, but outlines good methods and patterns for designing social software. The book contains a light description of activity-centred design as an alternative to Cooper’s goal-directed design.

For some more, see books tagged ‘design’ in my LibraryThing catalogue.

Do you have a personal favourite that is not on the list? Please let me know in the comments.

[sampokarjalainen]

Attentive Light – Prototype 1

Attentive Light is another slow project that I've been working on together with Mikko Köykkä. It started from a personal need within my home: I struggled to find attractive light fixtures, so why not make your own – and make it interactive.

Home appliances are getting connected and "smarter". The first Internet fridges were a flop in the dot com era, but this year there's a new wave of WiFi-enabled fridges, washers, ovens and vacuum cleaners being introduced to the market. However, while they offer fancy technology, most of them don’t seem to make much sense for people (who wants to control an oven with a smart phone?). But maybe there's something valuable to be found.

Attentive Light is a playground for exploring the possibilities and problems of automated lighting. The idea is to make it energy-efficient, highly functional and aesthetically pleasing, even poetic in everyday life. 

The first prototype is a simple light fixture which turns itself on and off according to a pre-defined schedule and adapts its hue in line with the current weather, providing warm or cold light depending on the weather outside.

The prototype has a RGB-LED and a halogen lamp connected to a PC via an mbed NXP microcontroller. The PC runs a homegrown Python application that can be in automatic or manual mode. In automatic mode, the app gets the current weather information every hour from Yahoo and compares the current temperature to the average of past days.

The application sends control commands to mbed, which controls the power to lamps with pulse-width modulation. The RGB components and the halogen lamp can be controlled independently and there's support for colour profiles for getting the right shade of white. No matter how you tweak the white point, LED light is still quite different from incandescent light. I would like to use LEDs for their energy-efficiency, but the quality of the light needs to be pleasing, too.

The next step is to add a movement sensor and a photosensor to give the system eyes.

[sampokarjalainen]

The Audience – The Technical Bits

Here’s a technical summary of how my interactive installation was built.

The store window had three black and white TVs, two Vectrex games consoles and a TI-1200 calculator. Behind the scenes I had a video camera and some modern computers doing the magic. I did the “modern programming” myself, while Mikko Köykkä (the #1 independent electronics guy in Helsinki) built the custom hardware and did the microprocessor programming.

A hidden DV video camera with a fish-eye lens was connected to a Mac mini, which ran a custom-made Mac OS X application. The Mac app used the OpenCV computer vision library to track moving blobs (i.e. people) in the camera view. The camera was placed high up, looking down to the pavement to avoid seeing cars passing by.

The Mac OS X application ran a behaviour model for every creature. According to a set of rules, it decided what they should do, and then streamed behaviour messages (e.g. look left, smile, sleep, talk, etc.) to other machines. The PCs got their messages over WebSocket connections and the Arduino and AVR processor got theirs as serial communications over USB connections.

The PC laptops ran the Google Chrome browser and a web page that animated the face on an HTML5 canvas according to the instructions received over the WebSocket. The PC display image was turned into an RF-antenna signal that the old TVs tuned into.

The Arduino and related electronics on a breadboard converted the behaviour messages into analogue signals for the Vectrexes, which ran custom-made software programmed by Mikko. The software animated the faces on the Vectrexes’ vector screens like the HTML5 app on the PCs. The hidden AVR processor inside the TI-1200 animated the calculator screen.

All audio came from the Mac application. The audio acting was performed by Liisa Jokinen and me.

Thanks to the indispensable help from Niko Nyman (who is not only a great web designer and developer, but also a woodwork craftsman), the installation got a robust backdrop that made the screens stand out and provided a place to hide the camera.

All in all, the setup ran surprisingly smoothly, 24/7. The weakest spot was the tuners of the old TVs: they drifted around, and we had to perform minor surgery on the Luxor TV right after the vernissage. The Mac port of OpenCV also had an annoying memory leak in the camera view window, but it was avoided by not using it live.

[sampokarjalainen]

Creating Believable Creatures

The Audience – Interactive installation, August, 2010

In my installation, I tried to turn old TVs and game consoles into lifelike creatures. As you walked by the window, the screens followed you with their eyes, raised their eyebrows, and commented in their own, unique language. However, as you stopped to watch them and tried to communicate with them, you became suspicious of their intelligence. Do they really see me? Why don't they react to my gestures or expressions?

The first step to building an illusion of a believable creature is easy. Just add eyes, and anything can be turned into a creature. This can be more than enough in many cases. Consider Henry Hoover:

Eyes and mouth – Instant playfulness

The next step is to animate creatures. The creature needs to move and behave in believable ways--not necessarily realistically, but in believable or fun ways.

Step three: interactivity further increases expectations. People tend to use other people (and animals) as benchmarks for believable interactivity. This raises the bar quite high. 

Think of Clippy, Microsoft's infamous Office assistant. If a software feature looks like a living creature, (just add eyes to an animated paperclip!), and is bold enough to interrupt the user, the scene is set for trouble. But, even Clippy can be made likable if it exhibits some empathy and has a scapegoat. Professor Clifford Nass, at Stanford University, ran an experiment in which the software was otherwise the same, but in problem situations, Clippy teamed up with the user and put the blame on Microsoft. People fell in love with the new, empathic Clippy.

Habbo Hotel uses robot characters to act as hotel staff. Their purpose is to build a believable setting, serve drinks, and entertain users until they find "real" people to chat with. We couldn't make the bots smart, so we made them quirky—a tactic to manage expectations. The bots’ flat jokes and weird comments evoke curiosity, and people soon figure out they are bots. As people accept them as simple bots, they lower their expectations and occasionally find the bots’ quirky comments fun.

Giving up can be a good tactic, too: Jesse Schell's “The Art of Game Design” provides a lens (a design perspective) for this:

Only detail what you can do well. People have rich, detailed imaginations. If there is something you need to present that is of lower quality than your players will be able to imagine, don't do it – let the imagination do the heavy lifting!

So, if meeting or exceeding people's expectations is too difficult, some options for creating believable creatures are:

Side-step expectations with psychological tactics (like a scapegoat)

Find ways to lower expectations

Let imagination do the trick

Sketch of The Audience

Luckily, with my installation piece, people don't expect a great deal from old TVs and game consoles. The faces that appear and follow people serve as an initial surprise that works well. This autumn, I will likely get to show the piece again and improve the creatures’ behavior — or find ways to further lower the viewers’ expectations :).

[sampokarjalainen]

Holy theme

When I was a little kid I hid under the kitchen table with scissors and cut my Marimekko shirt full of holes. The visual theme of this blog is a tribute to that artistic performance.

The "holes" are HTML5 canvas elements that do their best to build illusion of another layer behind the main surface. As you scroll the page, the background layer scrolls slower, creating the classic parallax effect.

To cut your own holes, hold down alt-key and click around!

Technical lessons learned with canvas:

The parallax scrolling effect works best when scrolling is smooth (e.g. inertial scrolling on Mac) and page scroll redraws and canvas redraws are in sync. That depends on browser: Mac Safari works best, Firefox ok, Chrome stutters. On PC most browsers seem to twitch a bit.

Internet Explorer: Version 9 and up only. You could make a subset of canvas drawing work with older IEs with excanvas, but it lacks things like compositing modes.

On iOS, scroll event fires only when scrolling stops, so the effect doesn't really work there.

I drew most of the shapes in Adobe Illustrator and used Microsoft MIX Online's Ai to Canvas Plug-in to turn them into JavaScript.

I'm using Quasimondo's fast StackBlur algorithm for the inner shadows. There might be a way to use the native canvas shadows but this was easier. To speed up redraws, the blurred shadows are drawn just once and stored in off-screen images. I do the same for the actual shapes, too.

You can use patterns as fill style, but you can't control the offset. I'm drawing the background pattern manually in a nested loop.

Composite operations, especially with alpha bitmaps, work differently in different browsers. Basically you're limited to a selected few that work consistently.

If you draw images from other domains (or subdomains) to a canvas, it gets "dirty" and you can't access the raw pixels anymore. Security measure.

Hover and click checks on images are done in code. Tedious and inaccessible.

[sampokarjalainen]

Slow blogging

Google Classic: Please Allow 30 Days for your Search Results. Image: dullhunk

As Habbo Hotel turned 10 years and is doing better than ever, I have taken some time of my own for the search of new ideas, inspiration and skills. This blog is for documenting things that I tinker with. It will be a slow blog. Instead of frequent, current posts, I'll focus on occasional summaries of projects and ideas.

If you want to follow me, Twitter (sampok) is probably the easiest way. You can also grab the RSS feed, or follow on Tumblr.