I am Juan Real.

An User Experience Lead
from Malaga (Spain)
based in London since 2012.

Bio & passions

I am passionate about
designing user experiences
and interfaces...

...crafting vector illustrations sometimes...

...building products
with the user at the core...

...and enabling and facilitating
relationships and
conversations

I enjoy
solving problems
hacking
the solution...

How to create an engaging
presentation in a few days?

This site was built in a week using reveal.js which I haven't heard of before

How can you know
if the toilets are
occupied in ustwo?

By combining
an Arduino board,
Wi-fi connection,
3 Phillips HUE Lights...

...and a Mac OSX
Menu Bar App

How to do user testing
on a navigation mobile app
using geo-location
with no access to app code?

Combining in a Framer prototype
MapBox API to draw maps and
What3Words API to retrieve location data

Link to prototype

How can you recreate BLACK
(analog b&w emulator mobile app)
as a Photoshop plugin?

By opening your favourite
Photoshop plugins
and reverse engineering.

How can you enjoy
your favourite bands
playing live in your hometown?

Creating a fancy dress music festival
called Canelaparty for 1,000 people
happening yearly since 2006.

snapcraft.io

Helping publishers to
build and publish
software on the App
Store for Linux

Growing snaps installed from
5 million (2017) to 17.5 million (2018)

Doubling publisher base in 1 year

Lead UX Designer (Apr 2018 - Today)
  • open source
  • linux
  • app store
  • data-driven

Canonical & snaps

In 2018, I joined Canonical, the company behind ubuntu – the biggest Linux distribution that runs on everywhere from fridges to drones, laptops, servers…

Installing and packaging software in Linux has always been cumbersome. To solve this, Canonical created snaps, a packaging system to distribute software that works across all major Linux distributions and perform auto-updates.

Useful terminology:

  • snapd allows to install snaps in any Linux distro
  • snapcraft is used to package software as a snap
  • snapcraft.io is the store to find and/or manage snaps

Exit through the Snap Store

snapcraft.io is the app store for Linux where users can find and install snaps and publishers can manage and release their software to millions of Linux users.

Microsoft, Slack, Spotify and other software teams quickly adopted snaps and snapcraft.io to publish software in Linux. But more independent publishers were not adopting the technology at a similar pace. The team challenge was to increase awareness and adoption of snaps.

The snapcraft.io team:

  • 1x UX Lead 👋
  • 1x Back-end developer
  • 2x Front-end developers
  • 1x UX Designer
  • 1x Visual designer

My main responsibilities:

  • Roadmap & backlog management
  • Stakeholder management
  • Team resourcing & planning
  • Design wireframes, UI & prototypes
  • Conduct & plan usability testing

First-hand research

Python developers are one of the biggest dev communities publishing software in Linux. I joined a team from Canonical promoting snaps at Europython 2018 to understand their needs and wants. Over 4 days, I met nearly 150 Pythonistas in our booth (number tracked by stickers given away).

Most frequent topics discussed:

  • Getting started with snaps and the effort required
  • Why snaps instead of other packaging systems
  • Dependency management when releasing python applications
  • Inconsistent software behaviour across Linux distributions
  • Management and version release, more specifically handling failed updates

Gathering insights

I shared insights from Europython 2018 and the competitor analysis with the team. For the competitor analysis we looked at Heroku, Visual Studio App Centre and Google Play Developer Console to understand best practices.

snapcraft.io compared to other competitors:

  • Unclear guides for "getting started"
  • Lack of contextual help & support
  • No hand holding available during task completion
  • Neutral tone of voice when completing tasks

Let's ideate!

We listed all our assumptions from the insights, generated new ideas around the themes we identified and filtered them to one hypothesis which we called the First Snap Flow:

"Publishers are more likely to publish software in Linux using snaps if they are guided to publish a sample project on their preferred programming language".

To reduce complexity for publishers, we used open source projects as a sample to guide them in each programming language. Also, to help them focus on learning how to package snaps.

Crafting the First Snap Flow

1. Quick content iteration

Used a spreadsheet to prototype the First Snap flow, creating a feedback loop with python devs to iterate the content.

2. User flow & wireframes

Defined the user flow and started wireframing the spreadsheet content. This led to further iterations on the content.

3. Finalising designs

We used Vanilla (the design system from Canonical) for UI designs. We created new patterns that were incorporated to Vanilla.

4. Testing with publishers

Presented the latest designs in a summit with snap publishers to get feedback on the First Snap Flow.

First outcomes

During the code implementation, we designed a data dashboard to measure effectiveness and ways to improve the First Snap Flow with metrics like: step progression, programming language trends, traffic, time spent, bounce per step…

We released Python as the first language from the First Snap Flow. This new journey had a 10% organic traffic visit after the release without any marketing activity even growing up to 20% organic traffic in April 2019. This suggests an explicit interest from Python developers on learning how to package Python software as snaps.

Other languages were redirected to their relevant technical documentation until its implementation. The dashboard helped us prioritise new languages to develop and informed on journey improvements.

Key learnings

  • Design metrics early when implementing a feature to focus on user & product goals and inform future iterations
  • Find experts in the content (e.g. Python devs) to create a feedback loop for regular content iterations
  • Any tool, even spreadsheets, can be used to prototype an experience
  • All available opportunities to connect with users will be rewarding and eye-opening (e.g. presenting at a conference booth...)

NOISE & ROLI PLAY Apps | ROLI.com

Helping creators
get started using
Blocks out of the box

Reducing customer returns of BLOCKS (20% to ~0%)

BLOCKS experience in Apple Stores worldwide

Senior UX Designer (Oct 2016 - Mar 2018)
  • music hardware
  • mobile & desktop
  • unboxing experience

Joining the band

ROLI is famous for the Seaboard, an award-winning reimagination of the keyboard using Bluetooth MIDI and a multi-expressive surface.

In October 2016 ROLI released BLOCKS (portable multi-expressive Bluetooth MIDI devices), NOISE (iOS music making app with BLOCKS support) and NOISE.fm (a platform for sharing your NOISE creations).

I joined the team as Senior UX Designer in 2016 to work primarily on BLOCKS, NOISE, ROLI PLAY and updates to ROLI.com.

Key team members:

  • 1x Senior UX Designer 👋
  • 1x Product Owner
  • 3x iOS Software engineers
  • 2x UX Designers (2 months)
  • 2x Visual designers (2 months)

My main responsibilities:

  • Roadmap & backlog management
  • Stakeholder management
  • Lead external team (2 months)
  • Design wireframes, UI & prototypes
  • Conduct & plan usability testing

Understanding unboxing

After launching BLOCKS, 20% customers returned Lightpad Blocks mainly referring to unclear first steps using the product for the first time and difficult initial setup.

I organised a design sprint focused on improving the unboxing experience. We started by observing how 5 persons unboxed the Lightpad Block. 3 out of 5 participants required assistance during the session.

Key findings from the testing:

  • Unclear instructions during unboxing
  • No clear relationship between BLOCKS, NOISE and NOISE.fm
  • Bluetooth & connection issues during setup
  • NOISE app was difficult to use because participants had no previous knowledge making music

Looking for solutions

From the insights, we divided in two pairs (Visual Designer and UX Designer) to solve these problems: unclear physical instructions and better onboarding in NOISE.

We generated 20+ ideas which we prioritised to have one solution per problem. We would test after with 5 potential users at the end of the week. In these new sessions participants completed their tasks without assistance unlike in the previous session.

Bringing the unboxing forward

We presented the learnings to ROLI senior stakeholders and the updates became part of the upcoming product roadmap.

By updating the content of the "quickstart guide" and its placement within the Lightpad Block box, we reduced 20% customer returns to nearly 0% in weeks.

NOISE included onboarding and better navigation, increasing its average rating in the Apple Store from 1.5 to 3.3.

Selling BLOCKS in Apple Stores

BLOCKS is available to purchase on ROLI.com, apple.com or physical Apple Stores worldwide. In Winter 2017 ROLI launched a revised BLOCKS product, the Lightpad Block M (LPM). With this new release, we wanted to build an exclusive experience for Apple Stores.

We developed a point of sale app for iOS devices to teach users how to operate the LPM by creating a short musical loop.

I was responsible for the delivery of UX and UI and managing the product with stakeholders: presenting updates, prioritising features, conducting usability testing...

Enter ROLI PLAY

After the positive result of the point of sale experience, ROLI decided to scale the concept to a standalone iOS app bespoke for the Lightpad Block M: ROLI PLAY.

From our previous sessions testing BLOCKS with users, it was clear that having limited musical knowledge could be a barrier to understand the possibilities BLOCKS has to offer.

In ROLI PLAY we combined the most expressive sounds from the ROLI sound palette with quick lessons on all key aspects of the BLOCKS expressive surface. You could create a shareable short musical piece in minutes after unboxing the Lightpad Block M.

Outcomes

ROLI PLAY was developed for iOS devices using React Native which posed a challenge with Bluetooth MIDI.

We moved quickly from sketches to wireframes to designs to code. The permanent point of sale station at our offices helped us for regular improptu user testing on new features.

After 2 months there was almost a 1:1 correlation between Lightpad Block M owners and ROLI PLAY downloads, with an average 80% of users completing the journey and sharing their creations. Also, almost a 30% of users downloaded NOISE linkning from the ROLI PLAY for more advanced music creation.

Key learnings

  • Working on physical and online products requires creativity and continuous iteration
  • Operational costs are key when developing hardware: translation, material costs, customer service...
  • Bluetooth implementation vary per platform and assume zero knowledge on it from consumers
  • Hardware and software can have completely different time scales and processes but can be coordinated with effort

Tfl Accelerate Android App

Enabling a 2-way relationship
between TfL and passengers
using their active and
passive data

Innovation project funded by InnovateUK

Product Lead (Oct 2015 - Aug 2016)
  • data privacy & governance
  • transport APIs
  • android

Working with TfL

TfL Innovation asked ustwo to help with their idea for a customer reporting app which lead to TfL Accelerate. This project was granted from Innovate UK and included as well TransportAPI as data governance experts.

With TfL Accelerate, users could report events to TfL and be updated on its progress. The location data generated by users, aggregated and anonymised, became an additional data stream for TfL to analyse.

The TfL Accelerate team:

  • 1x Product Lead 👋
  • 1x Product Owner
  • 1x Android developer
  • 1x Visual designer

Main responsibilities:

  • Wireframes, UI and prototypes
  • Manage product backlog
  • Conduct usability testing
  • Report updates to InnovateUK

The process in a nutshell

Our assumptions from performing customer interviews, reading TfL documentation and mapping the current reporting journey consolidated into one hypothesis:

Customers are willing to provide their data, actively or passively, if it improves TfL's network and services.

This hypothesis informed a prototype validated with 10 participants which led to develop TfL Accelerate over the coming 12 months. TfL Accelerate was developed as an Android app. A platform providing TfL easier consumption and analysis of the data generated.

During the Product Development, we had regular user testing sessions every 2 weeks with 3-5 participants. Additionally to this, we also organised two focus groups to understand users' perception of TfL Accelerate.

Outcomes

TfL Accelerate concluded with a 2-week trial with 200 TfL employees which generated around 500 unique customer reports. Trial participants kept using the app to generate reports to TfL after the trial finished.

The anonymised location data helped to identify TfL assets and infrastructure for further analysis. TfL Accelerate gave absolute control to users of their location data generated.

Key learnings

  • Be conscious about how user data is manipulated by establishing a clear data governance
  • Perform user testing on-the-go for more contextual outcomes on navigation / transportation apps
  • Think holistically on all implications a digital product might have in a big service like TfL
  • Experience leading and manage a government grant-funded project with explicit deadlines and milestones

Child Safety App & Browser

Providing parents
and their children
a safe experience
using the hudl.2

1.5 million units in 6 months

Average ⭐⭐⭐⭐ rating

Senior Interaction Designer (Jun 2014 - Oct 2014)

  • parental control app
  • bespoke browser
  • android
  • children user testing

Making parental controls work

I joined the ustwo team working with Tesco to deliver the hudl2, an Android Tablet from Tesco with bespoke OS and exclusive software.

Child Safety App and Browser is a parental control solution to manage the usage of hudl2 by children. Parents could also decide which web content and apps children could acces on the hudl2.

The Child Safety team:

  • 1x Senior Interaction Designer 👋
  • 1x Product Owner
  • 3x Android developers
  • 2x QA Tester

Key responsibilities:

  • Wireframes, UI and prototypes
  • Workshop facilitation
  • Conduct usability testing
  • Create hudl2 design patterns

Learning from the first hudl

The first hudl sold 750.000 units in 2013. A popular tablet among young families due to its affordable price with half of its users being children.

We learned from extensive user research and data, ahead of releasing the next version. The Tesco team generated 200+ product ideas which crystalised into four different products:

hudl2 product propositions:

  • Get Started – To teach how to set up and use the hudl2
  • Top Apps – A curated app store experience for hudl2 users
  • Child Safety App – To help parents control and monitor how children use the hudl2
  • Child Safety Browser – A browser for children managed by the Child Safety App based in Mozilla Firefox

Some process highlights

When I joined the Child Safety team, we built the product backlog by story mapping the product. All teams had user testing sessions every month to guide us through the Product Development. Other highlights:

1. Experience principles

Established across all hudl2 products for a cohesive experience and guide the team during the product development.

2. User flows & wireframes

We created user flows to cover the different use cases and scenarios. This informed wireframes afterwards.

3. Content creation

We collaborated with Parent Zone (experts in digital parenting) to create the content and tone of voice.

4. App map & Sprite sheet

Each product shared their own to build consistent branding & end-user experience.

Sharing is caring

We used a Photoshop plug-in called Ink to share design specifications with developers (This was 2012 long before Zeplin was available). Only supported Pixel units and transforming to DP units added some time on top of sharing the spec.

I decided to reverse-engineer the plug-in (inside is a zipped folder) and alter the code to use DP units. Saving a few hours every week to all hudl2 designers and developers.

I shared the code with the Ink plug-in developer. A few months later the plug-in included support for DP units.

Outcomes

Tesco launched the hudl2 in Q3 2014 selling more than 1.5 million units in less than 1 year doubling numbers from its predecessor.

The hudl2 was received with acclaimed reviews from The Guardian, Engadget or Trusted Reviews which highlighted the hudl2 parental controls for being simple, accessible and safe to use.

Key learnings

  • Sketching with the team to achieve shared understanding
  • Validate every single interface control with the core audience
  • Always look for improvements on the process regardless of size
  • The importance of onboarding and signposting users
  • Adapt the user testing session to its participants (e.g. children, families...)

W3W mobile experience

Helping people
communicate a location
in just three words

4-week design and development programme

Product Lead (Aug 2016 - Sep 2016)

  • geoencoding
  • iOS & android
  • rapid delivery

Uplifting what3words mobile app

What3words has divided the entire world in a grid of 3x3 meter squares. Each square is coded with a unique combination of three words. A coding system for location more human-friendly compared to GPS coordinates or any other alternative coding systems.

What3words engaged with ustwo to improve the mobile experience on their iOS & Android apps. This project expanded for 4 weeks.

I worked as Product Lead with another Visual Designer. Responsible for engaging with stakholders, workshop facilitation, UX/UI design, prototyping and conduct user testing sessions.

How we did it

We started with alignment workshops with key stakeholders, user testing sessions with what3words' mobile app (5 participants) and a what3words app heuristic evaluation.

Findings:

  • Lack of connection between 3 words and location pin
  • Strong similarity with Google Maps
  • Unnecessary map controls not relevant for the interface
  • Hard to share location

Our recommendation

A couple of iterations later we iterated on the branding, reduced controls on screen and streamlined the sharing journey. I prototyped this new version in Framer, using What3Words API and Mapbox API to mimic the real experience.

We tested this prototype with the original version of the mobile app with 5 participants. These concepts were highlighted by participants as more distinctive, functional and easier to use than the current mobile version of what3words.

We handed over our work to another agency for the development of the what3words mobile app currently available in the Apple Store and Google Play Store.

Barclaycard Tablet App

Prototype and visualise
the existing mobile app
experience for tablets

Senior Interaction Designer (Dec 2014)

  • fintech
  • concepting
  • ipad only

Translating mobile to tablet

I joined the ustwo Barclaycard team as Senior Interaction Designer. Responsible for UX/UI design, prototyping, user testing analysis and workshop facilitation.

Barclays wanted to conceptualise how to translate their current mobile app experience to Tablet, understand the appetite from users for a tablet experience and identify the features expected for this new form factor.

The team:

  • 1x Lead UX Designer
  • 1x Senior Interaction Designer 👋
  • 2x Visual Designers
  • 1x UI developer

Analysing the mobile experience

We started the project by performing the following activities:

  • Experience map of the Barclaycard mobile app experience
  • Analysis of Barclays research documentation on mobile use cases
  • Survey on credit card users needs and expectactions for mobile and tablet offerings

Defining key journeys

We compiled all our assumptions, defined the key user journeys for the tablet experience and filtered assumptions to two different hypotheses. Each one translated to a concept to test against credit card users.

Performing guerrilla user testing with 5 ustwo employees around the two concepts, we choose one to develop further. This concept was based on giving control to users around their finances by setting budgets, goals and notifying them.

Our recommendation

To validate the concept at the end of the project, we ran an user testing session (10 participants) with Barclays' official user testing partner: Seren. With the insights from the testing and our learnings from the project, we produced a document outlining our recommendation to Barclays:

The cost & effort to deliver a bespoke tablet app might not generate an immediate benefit for either users or Barclays.

Key reasons against a bespoke tablet app:

  • Tablet sales and market was slowing down
  • Banking was not a popular activity on tablet
  • Expected feature parity from users between mobile & tablet apps

As of today, the tablet app for Barclaycard is a scaled up version of the mobile version for iOS & Android.

EXPLORE EOS INTERACTIVE IPAD MAGAZINE

Teaching digitally
how to use the
Canon EOS system
in a simple manner

1st Canon iOS app launched in Apple Store

UX Designer (Oct 2013 - Dec 2013)
  • ipad magazine
  • photography learning

Teaching photography basics

Whilst working at POSSIBLE, I joined the team for Canon EOS Explore, the 1st official Canon app on Apple and Google Play stores. An interactive magazine iPad app teaching photography concepts and how to use the Canon DSLR system: EOS.

Over 2 months we worked on interactive ways to teach basic photography concepts and relevant content about Canon and the EOS system. I performed guerrilla user testing sessions with POSSIBLE employees to guide the team during the product development.

Canon EOS Explore team:

  • 1x Senior UX Consultant 👋
  • 1x Product Owner
  • 1x Visual Designer
  • 1x Copywriter

Key responsibilities:

  • Wireframes, UI and prototypes
  • Conduct user testing
  • Workshop facilitation
  • Stakeholder management

RESPONSIVE GAMING HTML5 TEMPLATES

Building a responsive
experience for
mobile, tablet and
desktop gaming

1st responsive web solution for this market

UX Designer (Aug 2012 - Aug 2013)
  • responsive web
  • html5

Moving popular titles to mobile

Back in 2012, mobile gaming started to become popular and bwin.party decided it was their time to get into this new medium.

I was responsible for creating the template system to port the most popular game titles to mobile and tablet devices using web technologies.

bwin.party team:

  • 1x Senior UX Designer 👋
  • 2x Game Artists
  • 2x Front-end developers
  • 1x Game Mathematician

Key responsibilities:

  • Wireframes, UI and prototypes
  • Workshop facilitation
  • Stakeholder management

Gracias.