ColorSpace

Concept · UX/UI · FramerJS

2016

tl;dr

ColorSpace is a side project that went from an experimental game in FramerJS to a pubished app in the App Store. Swipe and use force touch on a rectangle to match that color to the background color. There are 10 levels and every level gets more difficult. A quite hard to master game as I only finished it once myself.


Introduction

Designing static screens and mockups just doesn’t cut it anymore today. As a digital designer it’s my responsibility to define all states and transitions of a product.

I see that prototyping is the ideal way to accomplish this and therefore I set out to challenge myself getting better at the most powerful and flexible tool out there right now.

Goals

  • Learning how to design high fidelity interactive user interfaces that work for real users in real contexts.
  • Creating a fun game that is easy to understand yet hard to master using the 3D touch capabilities of the latest iPhones (at the time)

Process

There were a couple of challenges in making this a successful side project.

  1. Define the game mechanics in Framer
  2. Make it a fun game
  3. Adapt the design to handle different screen sizes
  4. Get it into the hands of users

1. Framer

Creating a complex app in Framer was quite a challenge. I needed to create the app flow, the game mechanics and the interface design. Big projects in Framer tend to get complex pretty quickly.

2. Fun

Once the game mechanics worked, the UX of the game was horrendous. As a new user you had no clue what happened on the screen. It was even difficult to figure out what the goal was. Two things needed to change:

It's too darn difficult…

At the time of the proof of concept there were 27.000 options to match the color on a surface smaller than a business card. Why not add levels? This was a good decision, as most new users were now able to easily get past the first two or three levels.

Onboarding is super important

Muddling through the first couple of levels, it seemed that users still didn’t yet understand how to adapt their strategy to complete a level. It just wasn’t immediately clear how to get to the right color. Also, pressing harder on the screen and seeing a different output, was a new experience for most people. It was hard to discover this without being implicitly instructed what the hardware could do.

3. Adaptive interface

The game worked, but only for my iPhone 6. By testing it on the bigger iPhone 6s Plus and a smaller iPhone 5s, I discovered it didn’t look any good. However, I prepared the code and design in such a way that it was easy to adapt it to multiple screen sizes. Even though the 5s didn’t support 3D Touch, I also wanted to make it fit on that smaller screen. Why? Because you never know what the future hold. And then, the smaller iPhone SE was released. It didn’t support 3D Touch. But.. it could’ve… right?

4. Distribution

A Framer project is just a set of HTML, CSS and JavaScript files, so it’s easy to publish it online. Therefore I put it up on my website. To attract some attention, I wrote a Medium article and posted it to the Framer Slack. However, it didn’t feel quite right yet. And so I asked the mobile development team of Label A if they could create a wrapper for it. 10 minutes later I got the question to provide screenshots. A week later it was approved by Apple and my game was live in the iOS App Store!

Evaluation

I love doing side projects and this is one of the bigger ones. It took me quite some evenings and it was worth every second. I’ve learned a lot through failing but feel much more confident starting out building an advanced Framer prototype now. Also, after the first confusion, people seemed to like the game. It’s cool this project is still a conversation starter at several occasions.

Play it yourself

You can download ColorSpace from the App Store. Keep in mind, it only works on 3D Touch enabled devices. It’s also possible to play the game with a Force Touch trackpad via rvroo.nl/colorspace.

Let me know what you think!

Resources