Itcher Case Study

Overview

itcher is a personalised entertainment recommendations app that suggests movies, books, music and games that are specific to the user. Using an advanced collaborative filtering system, like-minded people are connected in order to provide tailored recommendations.

As Creative Director at itcher, I helped to grow the company since its earliest days across iOS, Android and web. This case study spans the latest v2 release and covers my UX design process.

I'm very excited to say itcher has partnered with Google and we created one of the first Google Home apps: itcher for Google Home.

I began as the first Product Designer, eventually moving up to Art Director and then Creative/UX Director as both the scope of the project and the team grew significantly.

What I did

  • - Product Design Lead
  • - Facilitating UX Workshops
  • - Design System Management
  • - Design Reviews & Mentoring
  • - Wireframing / User Flows
  • - Prototyping
  • - Iterative testing
  • - Documentation & Process creation
  • - Engineering handover & support
  • - Product Management
  • - User testing / Research

Project

Our task was to take the key learnings from our MVP and redesign the itcher iOS and Android native applications from the ground up, enhancing the UX as well as the branding and UI.

The problem

In today's "on-demand" world people expect quality entertainment that they can access quickly and easily. Users want personalised, tailored recommendations; not a generic top 20 list.

The goal of itcher was to create a simple, user centric experience that would solve this issue and exceed the expectations of the user. itcher not only provides tailored recommendations but also allows users to discuss, share and even be taken directly to the suggested media at the click of a button; so if a user selects their recommended movie or album itcher will provide an abundance of information on the source and also give them the option to view it directly by connecting them with popular apps such as Netflix, iTunes or Amazon Video.

The deliverables and challenges

The core deliverables were ambitious given the limited time and whilst working on a pre VC funding startup budget. The business needed greatly enhanced engagement and retention for the new app and had to offer an amazing UX across Android and iOS platforms for both phone and tablet. The biggest challenges were the size of our team, the budget, and as always, time. Given our limitations, I knew we could not perform a full research project so I ensured that I made the most of our resources.

UX process

Research

When embarking on any design project my absolute number one priority is to begin by clearly identifying the needs of the user and desires of the business i.e what does success look like to the company? And what problems are we really solving for the user?

I held user interviews with different demographics and we soon learned our user's general behaviour and expectations and validated some previous assumptions. I generally find 90% of the usability problems can be found within the first 3 - 5 tests and so I also conducted some testing on our MVP by asking users to complete a set of tasks from which I could assess existing pain points on our outgoing system.

In addition to this, we conducted an updated competitor analysis and checked our core technical metrics, such as conversion rates, watching for drop off points and various other KPI's. This initial testing identified the problems with our existing product and provided a much more intimate understanding of our user's needs.

User Interview Questions

Persona development

Once we completed the bulk of our initial research we were able to craft more accurate personas to help guide our design decisions. I conducted an ideation session with the engineering, marketing and design teams - and even one of our founders, to analyse our findings and create some persona profiles. I always find this is a great way to keep other departments involved and to get some helpful feedback whilst also giving everyone a clear picture of who our users are.

Personas give a human face to the problem you are solving; they generate empathy and can also act as a good set standard for feature requests or ideas e.g "Would Jenny use this? Would this help her complete her goals?" As we test and develop the product and then further test and iterate on it, our understanding of our users grow and we update our personas to ensure we are as close to reality as possible.

Persona profiles

User Flows & Task Analysis

We designed user paths based on task analysis, while accounting for edge cases, as this helped to remove potential illogical architecture issues or dead ends for our users. These processes really help optimise flows to ensure we are helping our users achieve their goals in the most efficient way possible.

Task flow examples

Ideation & Sketches

Once we had some clear user problems, I ran ideation sessions with our entire team, similar to our original persona development, getting everyone involved. I often run a "Crazy 8" exercise that helps to keep the ideas flowing; keeping sketches and ideas in a draft state helps non-designers feel more comfortable and not as intimidated to join in. I then encourage everyone to discuss their ideas as a group and give feedback on each concept, offering up further ideas.

At the end of the session the product and engineering teams have a collection of work that can be prioritised and scoped, which is how we selected core new features to add to our roadmap for the v2 release, with the highest impact we could achieve within our scope.

Some early sketches

Wireframes

The next stage is to produce cleaner wireframe designs; these act as the bones for the app, allowing clearer visualisation of the user flow. Wireframes are a great way to ensure you have all the content, functions and software requirements clarified before launching into high fidelity UI design work and, most importantly, feedback sessions with the engineering teams to cover edge cases, error and loading states etc.

Usabiltiy Testing: Fix & Repeat

"Test early, test often" is one of the best mantras in an agile production process; it is much more efficient to fix issues early on with mid-low fidelity design mockups or even at a wireframe level.

We would run Gorilla Tests in the office for very early stage work (often at the cafe near the office!) then advance to Usertesting.com for high fidelity testing on full prototypes.

Below are some examples.

Some early sketches

Here are some shots of one of the A/B tests we ran to tackle a particular issue. Users did not know how to view the media itcher recommended to them (i.e where to watch it, or how to purchase it) and we also had low click through rates from list view to details view which was a major problem.

I wanted to solve the issue quickly, with minimal changes to the UI, to ensure quick release and lower cost on engineering. One of the concepts was to add in product list items (Netflix, Amazon, iTunes etc.) Below are some shots of the original, UI (A) and the proposed solution to the problem, UI (B). I have also included screenshots of some recorded user tests we did on this.

Branding / UI

Part of our V2 release was a major overhaul of our branding and UI. The process updated our colour palette, typography, style guide, tone of voice, photography, logotype, app logos and more - a full service upgrade on the MVP. This was all led by business objectives and user research, which helped us craft a design DNA and language that held up to the requirements.

I began to grow the team and wanted to not only create an amazing new look for the brand and hugely improve the UI, but to also ensure that it was scalable and maintainable across the team and our supported platforms; iOS, Android and web.

itcher v2 release

Design System

Every element is documented with a title, description and usage rules and some also include technical rules, such as CSS code to aid developers.

Every element was discussed with the lead developer for each platform to ensure requirements were noted. We used Zeplin app, which is hugely helpful for development, making exact styles, sizes and spaces much easier to obtain for the dev team.

Prototyping & Interaction Design

My tool of choice for interaction design was mostly Pixate for Android and iOS. The interaction design was handled very carefully; I wanted animations and transitions to aid the UX whilst also adding to the quality of the app.

I managed to solve a few usability issues with a handful of micro interactions. For example, our horizontal scrollable category menu was often being missed by users, as they did not notice that it was scrollable, but instead of redesigning the entire menu component, I tried a variety of animated transition solutions. The winner was an extremely simple delayed spring animation which draws the user's eye to the menu, whilst also helping them to understand how it scrolls (animated example as below).

Most of our prototyping was done using InVision - it is a brilliant way to get validation and feedback quickly.

Interaction design examples, see my Dribbble page

A few shots

A product is never really finished, but we finally released a beta version and did rounds of internal and external usability testing. We made iterations as we got those results and carried out re-testing until we had a really solid UX that met our project goals.

iPad testing - v2.0
itcher branding shoot
Shoot day - itcher "How to" videos set

Final Result

We released itcher v2.0 on iOS and Android and early results have been extremely positive. Following these results, we continued to work on implementing new features and fixing various bugs and a well tested version is now out in the real world.

I hope you enjoyed the brief journey through my design process at itcher.