From Paper to Pixels: Developing the Chris GUI (Graphical User Interface)

Here’s how we designed the Chris GUI — and what we learned along the way.

5 min readMay 23, 2018

Chris is nearly finished. The hardware is finalized, and the team are getting close to completing the first version of the software.

With this in mind, we’re starting one of our last testing phases with real users. Chris already has a user interface, but now that the applications are approaching final readiness, we have an accurate idea of how we’ll structure the Chris user experience. With this in mind, it’s time to complete the GUI (Graphical User Interface). It’s crucial our GUI has a clear and cohesive aesthetic throughout, so that users can interact with Chris as easily as possible, so this is something we’ll keep in mind.

Chris, on paper

Although we could have done everything with our design software, we found it useful to move from pixels to paper. We wanted to move things around with our hands, and understand the various steps required in terms of physical stages.

So we created a board of post-it notes, each with a different user concern or potential interaction on them. We arranged them by the stage at which the user would encounter each problem or interaction, such as ‘going to work’, and put them in categories such as ‘pains’, ‘questions’ and ‘tasks’. We also had different colored post-it notes for emotions, such as ‘confused’, ‘disappointed’ and ‘surprised’. The aim was to structure the GUI around demands and emotions to mitigate pains, and make using Chris as easy and satisfying as possible at every stage. By visualizing the entire journey and considering the interaction at every stage, we were able to keep in mind the user’s interaction points throughout and avoid blind spots.

Our Head of Design, Remi, adds to the user journey board

We then looked at the current Chris GUI, and uncovered interfaces that were outdated or were no longer necessary (which we discovered after conducting user research). After we’d done this, we began to create paper prototypes of screens, so each could be easily modified. In order to keep things simple, we also decided to limit the gesture sensor commands to left, right and high-5, removing the up and down gestures. So screens referencing these 5 gestures needed to be updated.

Then, we explored different representations of certain screens in Sketch, a design toolkit for iOS and looked at different interaction modi, which we discussed with the designer and product manager. If we identified transitions that needed refurbishing, we visualised these in Framer, an interactive design and prototyping tool.

We also identified points in the interaction journey where we could make use of earcons, brief, distinctive sound bursts used to represent a specific event or convey other information. This would ease the visual burden on users.

Finally, we tested out the novel explorations on the real device so that we could get a feel for how a user would actually experience the GUI — it’s all very well and useful for us to look at paper prototypes, but we need to be sure that these look good once rendered on to the actual device.

Testing the new screens on the Chris device

Finalizing the GUI

There’s still more work to be done on the GUI, and we’ll keep iterating and adding more steps as we add more functions and applications. But after user feedback, we’re satisfied with how the Chris GUI is shaping up, and we’re excited to share it with you.

What we learned

Paper prototyping is great method for quickly developing, communicating, and visualizing ideas.
Using paper also continually reminded us to reduce screen elements and therefore complexity, and also helped us keep in mind that interaction with Chris should be voice-first.
It’s incredibly important to consider every format that will be used, such as Chris’s speech synthesis, the GUI, sound, and user input.
We learned the importance of thinking about the whole process while perfecting each individual step.

Tools we used