Elia Alberti

Elia Alberti

UI UX Product & Interaction Designer | Creative Thinker | Product Innovator | Prototyping Adept

Vodafone Smart Tech App‎ Design System

 

Smart Tech App – The Design System

I’ve been responsible for the development of a global design system, built with a flexible, reusable, scalable and maintainable structure. In order to allow both designer as well as engineers to contribute to further develop it and enhance it within their respective areas of the app, I developed and implemented a contribution model enabling really anyone to collaborate on the design system.

I therefore developed and maintained detailed user-interface specifications and design patterns, describing the standards and best practices of our component library as a reference for designers and developers.

 

The main problems identified

  • Lack of Cohesion resulting in disjointed development and no clear modular boundaries
  • Inconsistent UI Design lacking a unified design language and standards
  • Failure to document design decision and architecture

 

The goal of the project

  • Improve maintainability and modular reusability
  • Create a coherent, consistent and reusable user interface
  • Facilitate knowledge transfer and future modifications
  • Create a contribution model which would enable anyone to further develop the design system

 

How I planned to solve it

Working closely with the development and the product design team I’ve harnessed effective strategies and a set of best practices that are pivotal in navigating the complex terrain of system design, such as:

  • Adhering to design consistency, correctly applying all of the four core elements of the design system such as iconography, typography, colors and grids and spacing.
  • Ensuring design’s scalability, discussing with the wider teams how scalable design is essential for future grow and changes by covering responsive design principles, modular approaches and the use of scalable vector graphics (SVGs).
  • Incorporating accessibility, providing guidance on adhering to accessibility standards like WCAG and incorporating inclusive design principle.
  • Balancing aesthetics and functionality addressing and developing intuitive navigational elements and paradigms as well as a clear visual hierarchy when looking at components and layouts.

 

The Contribution Model

Setting up a clear and well defined contribution model allows product teams to add new features based on their product requirements. At the same time, it allows to keep an eye on the quality and consistency of the user experience.

When a team identify a need for an update in the design system, they are encouraged to raise it by filling out a straightforward Asset Contribution Form:


 

This submission helps in comprehending the issue, identifying the stakeholders, and outlining the contributors’ expectations. In order to streamline this procedure, contributions are categorised in three primary use cases:

  • Light contribution: A small design tweak to an existing component or style.
  • Medium contribution: A bigger change to an existing component or UX pattern.
  • Heavy contribution: Creating a brand new component, UX pattern or tool.

In order for any contributor to determine the correct contribution weight, I created the following diagram:


 

The Contribution process

Our team follows the contribution process defined below. The process may vary depending on the level of contribution:

  • Contribution proposal: The first step of a contribution is always a conversation in order to reduce potential rework and frustration for the contributors by refining the solution before the work begins. Contribution proposals help the team to understand what you’re trying to achieve, and potential blockers along the way.
  • Kick-off: For medium and heavy contributions, schedule a kick-off meeting with the team. During this meeting we agree on the scope of contribution, discuss your involvement, and also confirm timelines.
  • Collaboration: Contribution are effectively a way of collaborating, supporting each and every team on their journeys.
  • Review: Before publishing the new feature, always make sure that the contribution conforms to our high standards for accessibility, usability, and consistency in user experience.
  • Publish: In the last step make sure that the new feature is documented, communicated, and showcased within the company when it gets published.

 

The approach

The system creates a single source of truth for all involved, and includes; colour, typography, iconography, UI components, accessibility and more. It acts as a toolkit to enable the designers to work more efficiently and empowers engineers to bring those ideas to life. Translating a user experience into a human experience.

It extends way beyond the app, touching all aspects of design within Smart Tech – to ensure the same sensibility, character, and care across all mediums and touchpoints.

Below is the actual Figma file of the design system which you can navigate, zoom in or out on all areas or launch full screen for a more immersive experience and to be able to view all of the different sections of the file:


 

Design Workflow


 

Design System Components

The contemporary aesthetic stems from translating design principle values into specific guidelines, to inspire and frame our thinking when selecting visual, interactive, and material choices.

Essential

Elements are kept to a minimum, drawing emphasis on our product’s usability and functionality.

Iconic

Texture, audio, animation, and colour – each is used sparingly to create signature moments to elevate the feel of the product without distracting from the function.

Minimal

Deliberately neutral, yet bold. Our main colours are black, grey, and white. Red is used throughout as a link to our Vodafone routes – an accent colour rather than a dominant colour.

Naturally, we use other colours in the system, but these are selected to emphasise product functionality and enhance the user experience, never for decoration.

Considered

Carefully considered elements and content are arranged with a clear functional and educational hierarchy, resulting in a visual and harmonious appearance.

Realistic

Our experiences are about connecting the worlds of digital and physical, we bridge the two finding ways for each to complement each other. From utilising CGIs of products to create interactive guides, to using animation and sounds to connect a device and the app on a sensory level.
 

Design system exploration and studies (Figma)


 

How I measured success data analysis

Upon launching the newly enhanced and optimised Vodafone Smart Tech Design System I could collect the following data:

65% less

developers’ requests for ad-hoc visual elements and components, regardless of specific smart device, journey and market.

52% less

time spent building user flows, customers journeys and developing specific areas of different Smart Tech devices.

46% increase

of development production speed since now developers didn’t have to spend a consistent amount of their time chasing informations and specs.

35% increase

in customer satisfaction following the first three months from the launch of the design system (CSAT survey score).

The global IoT connectivity leader

Vodafone’s IoT service was established in 2008 and has grown to be the largest IoT connectivity provider globally, with 150 million devices connected. Vodafone IoT has been recognised as a leader in managed connectivity by Gartner every year since 2014. Vodafone IoT currently generates €0.9 billion annual revenue with double-digit revenue growth and a strong double-digit ROCE. The total addressable market is €10 billion and expected to grow 16% p.a., with further stimulus from the NextGenerationEU recovery plan funding, supporting Vodafone’s further expansion into end-to-end IoT services.

CLIENT

Vodafone Smart Tech – IoT Devices

TECHNOLOGY

Discovery+ Beijing 2022 Winter Olympics

 

Beijing 2022 Winter Olympics Cross-Platform Design

Working as part of the UXD team I worked toward developing and championing a user-centred design process able to promote a culture of customer-focused product discovery and delivery cross-platform to present to the Discovery+ vast userbase the best possible CX allowing them experience the Beijing Winter Olympics seamlessly regardless of which device they’re on.

I supported the UI design process by developing and enhancing design systems particularly for mobile, Android and iOS whilst I also worked on translating the Beijing Winter Olympics 2022 visual identity’s into a cohesive UI pattern library, developing an iconography and set of pictograms representative not only of the geographical location of where the Olympics where held at but also the local culture and traditions.

Creating low and high-fidelity mock-ups and prototypes that evolve into pixel-perfect designs ready for development was one aspect of my assignment however I was equally very much focused on supporting the development team and back-end engineers with the creation of brand new assets and UI guidelines whilst liaising with the editorial team analysing and exploring the Beijing 2022 Winter Olympics’ brand and visual identity to produce visual assets such as the background image to be used on the main landing / home page cross-platform.

 

Achieving & Measuring Success

Discovery reported record Olympic Winter Games viewership and engagement on its digital platforms, as the household appeal of discovery+ drove significantly higher consumption and numbers of new paid subscribers compared to PyeongChang 2018, specifically:

    • New paid streaming subscribers for Beijing 2022 exceed PyeongChang 2018 by almost 50%

    • Over 1 billion streaming minutes consumed across discovery+ and Eurosport subscription services

    • Over half of new Olympic subscribers also enjoyed discovery+’s entertainment content, meaningfully enhancing subscriber lifetime value

 

Discovery+ US – WEB

 

Discovery+ US – MOBILE

 

Discovery+ US – Connected TV

 

Discovery+ EU – WEB

 

Discovery+ EU – MOBILE

 

Discovery+ EU – Connected TV

 

Discovery+ – Sport Pictograms Library

 

Discovery+ – Visual Identity – Background image creation

DISCOVERY+ The Streaming Home Of The Olympics Across UK And Europe

As The Streaming Home of the Olympics across UK and Europe, Discovery+ delivered the ultimate Games experience capturing all the unmissable moments live from the greatest sport show on Earth. Athletes from over 200 nations descendED on Beijing to compete in a multitude of competitions for the world’s largest international sport event.

Beijing 2022 produced strong results across Discovery’s European television network and streaming products. Discovery+ drove an increased number of new paid streaming subscribers, the total of which exceeded PyeongChang 2018 by almost 50%.

More than 156 million Europeans visited Discovery’s platforms with over one billion streaming minutes consumed, 19 times more than the last Olympic Winter Games. Discovery+ and Eurosport streaming services saw 8 times more streaming viewers during this Games as users consumed more than double the content with average consumption exceeding 7 hours per viewer. The same trend was seen on linear television with viewers on average watching 24% longer than PyeongChang 2018.

Discovery presented the Beijing Winter Olympics in 50 markets in Europe featuring 11 national productions and coverage in 19 languages. It is the only place in Europe to offer all of the Olympics Discovery+ and its Eurosport digital services.

Jean-Briac Perrette, President & CEO, Discovery Streaming & International, said: “The Winter Olympics has proven to be a terrific success for discovery+ and all our channels and platforms across Europe. Discovery is leading the way in building global scale in streaming whilst also maintaining strength in traditional television viewership, significantly outperforming the market across both.”

CLIENT

Discovery Inc.

TECHNOLOGY

SYFT Mobile App

 

The problems identified

I identified different issues with the app via the analysis of CSAT score, costumer feedback surveys, user feedback sessions and by reviewing the ratings and customer’s reviews on both iOS and Android marketplaces, the main ones were specifically:

  • UI / UX inconsistencies between iOS and Android apps

  • Profile page lacking of relevant and actionable informations

  • Unclear to users how to set their availability and get relevant shifts

 

The goals of the project

Given the specific issues encountered and analysed, the goals of the project were to:

  • Apply UI / UX consistency between iOS and Android apps

  • Improve the Profile Page UI / UX adding useful and actionable information, adding value to page and improve the overall CX

  • Implement a clear system to indicate personal availability, reducing the number of mismatched shifts, calls to costumer service and increasing the number of shifts first booked and then completed

 

KPIs

  • To improve the overall Profile page UI / UX driving more users to it with at least a 35% traffic increase

  • To reduce the number of unfulfilled shifts by 25% increasing the number of fulfilled ones by 30% within the following 2 quarters

  • To be able to serve more relevant shifts and to reduce the time spent finding suitable shifts and indicating users’ availability

 

Design System

 

How I planned to solve it

Working in Agile (Jira, Confluence) I was working very closely with the stakeholders, Head of Product, Lead Android and iOS Developers, Back & Front end Lead Developers, Product Managers and User Researchers.

The process put in place to develop the feature is as follow:

    • DISCOVER – Background Research / User interview / Competitive analysis

    • DEFINE – Feature prioritisation / User persona / Costumer journey

    • DESIGN – Wireframe / Visual mock-up / Prototype

    • TESTING – Usability testing / User testing sessions / A-B testing

    • DELIVER – Pixel perfect visuals / Interactive prototype / Assets ready for devs

 

Wireframes – Information Architecture

First and foremost it was pivotal to have a full understanding of all of the different areas / screens of the app and that the user will navigate to which is why I’ve worked toward a fully fledge Information Architecture in order to focus, organise, structuring, labelling contents in an effective and sustainable way.

Information Architecture / User Flow - SYFT App

Information Architecture / User Flow – SYFT App – Click to Enlarge

 

Wireframes – App / Individual Screens

 

Wireframes – Profile / Individual Screens

The focus here is entirely on the type of information and actionable items presented to the users and on how to surface them in the most efficient and clear way possible.
Ratings, Shifts and Earnings being the most important piece of information are clearly displayed at the top of the screen right below the profile picture and personal blurb.

We tested the possibility to surface New Features and Announcements directly on this page as well as adding the presence of a profile progress bar completion, with clear CTAs inviting the user to complete his profile in order to have more chances to get the best shift and receive interest from different companies.

Below it all of the different areas of the app are clearly labelled and efficiently presented in an organised manner with the presence of badges indicating if and when the specific area needs the users’ attention and it has tasks to be completed.

The wireframes take into account both, a fully fledge solution with profile page progress bar completion, news / announcement area and visual indicators in regards to the users’ activities (earnings, shifts performances) as well as one with the bare minimum information, which would take less time to be developed and implemented and would introduce all of the other different aspects of the screen on a second phase.

 

Wireframes – Availability – Wire Flow

It’s pivotal for the user to be able to indicate his availability in order to get the correct shifts, complete them all and add the experience to their own profile in order to get more shifts directly from more companies. I tackled the two main areas where the availability settings are present, the Profile page as well as the Sign up one.

I worked toward a simple UX where users can easily indicate via the tap of an icon if they’re available for morning, afternoon or evening shifts.

Information Architecture / User Flow - SYFT App

Availability Wire Flow – Click to Enlarge

 

Wireframes – Availability – Profile

 

Wireframes – Availability – Sign Up

 

User Interface – Profile

I created a new set of icons for each and every area of the app to aid the users clearly and immediately identifying the specific section they’re looking at. I’ve used and developed the SYFT colour scheme in accordance with the design system, making sure the overall look and feel reflected a fresh and entrepreneurial spirit, positively impacting every users’ life, offering them a product and service easy to manage, understand and utilise at any given moment.

 

User Interface – Availability – Profile

 

User Interface – Availability – Sign Up

 

UI / UX Consistency improvements

The Cancellation screen is prime example of ui and ux inconsistencies between platforms and here I show how I compared the two analysing visual incongruences and usability patterns to improve and facilitate the assimilation of the on screen information and actionable points. These are design tasks which I addressed at specific and relevant areas of the application conducted in parallel with the main redesign of the app.

Android Cancellation Screen - Current vs New Screen - Click to Enlarge

Android Cancellation Screen – Current vs New Screen – Click to Enlarge

iOS Cancellation Screen - Current vs New Screen - Click to Enlarge

iOS Cancellation Screen – Current vs New Screen – Click to Enlarge

Cancellation Screen - Current vs New Screens - Click to Enlarge

Cancellation Screen – Current vs New Screens – Click to Enlarge

Design refinements in details - Click to Enlarge

Design refinements in details – Click to Enlarge

 

How I measured success data analysis

Following the release of the new Profile page and Availability screens using tools such as Mixpanel and CSAT surveys I collected the following data:

56.5% increase

of organic traffic on the Profile page compared to the same quarter the previous year

42% less unfulfilled shifts

whilst the number of successfully completed one went from 41% to 78%, exceeding the set target of 30% within the next two quarters

32% increase CSAT score

with the users able to efficiently indicate their availability avoiding the risk of missing out on relevant shifts and being served the correct ones for them to attend

ABOUT SYFT

SYFT (now Indeed Flex) is a market-leading flexible recruitment platform uniting jobseekers and employers in the hospitality, industry, retail, care, and facilities management sectors, smoothing the recruitment process of part-time and temporary employees. We currently support more than 5,000 employers, and 44,000 jobseekers.

SYFT helps jobseekers to apply for jobs 24/7 on the go with the SYFT app and get confirmed for shifts instantly allowing them to choose when and where you want to work with a schedule that suits their lifestyles, setting their pay rate and see which great employers match their preferences.

SYFT also works on recruitment, Workforce and Staffing Solutions for Employers via a team of staffing experts tailors the solution to ensure it meets their business objectives and supports them along the way with offerings such as Vendor Management System, Workforce management, Permanent & Temporary hiring and managing service providers.

UX

I’ve research, analysed and compared the best cases of similar UX Design solutions to the project’s final brief. I’ve generated personas and validated my concepts and approaches via data and user research sessions to understand the motivations of users and to use that insight to design better experiences, working closely with the back-end and engineering team. I’ve then helped develop a road-map in partnership with the PM whilst considering both internal and users’ requirements in order to help me identify risk assumptions early and swiftly.

UI & Visual Assets

The user interface had to the reflect and be aligned with the SYFT design system and brand identity, following a clear and seamless design system which I’ve helped implementing upon joining the company.

The aim of my work is not only to create a colourful whilst minimal and clear user interface which is also efficient and connected to the users but I also wanted it to be immediate for the users to understand and assimilate, given the wealth of informations and options the user has got available when for example he indicate his weekly availability and / or the hourly rate.

It takes in consideration users’ needs, goes to address pain point such as the lack of consistency which was initially present between iOS and Android devices and embed the entrepreneurial spirit which drives both the company and its users.

The importance of Prototypes

Many ideas fail, not because they are flawed, but because people didn’t ‘get it’. It can be hard to imagine new products, services or features. That is where traditional specification documents and business plans fail. They do not excite people about the potential. They do not show them what could be.

Which is why working in Agile, I felt the need to prototype pretty much every design task for every sprint so to shows stakeholders, developer, PM and back-end, what I was going to build. That means everybody had the same picture of the end goal. It significantly reduces the need for people to ‘fill in the gaps’ with their imagination.

It’s also a great tool for user testing session, to gauge the level of engagement of a specific feature and further iterate if and when needed. Occasionally and particularly in the early days of a project, I had to make few assumptions about what users want. Some companies do market research, but just like stakeholders users often struggle to picture what it is you are proposing building.

Testing a prototype allows you to validate the assumptions you make and be confident you are building the right thing.

TARGET AUDIENCE

Both male and female audience, between 18-55 yrs old.

CLIENT

SYFT (Indeed Flex)

TECHNOLOGY

Sky Q Order Tracker

 

 

Analysis Overview and Aims

Objective:

Identify opportunities to optimise Order Tracking for BB Provisioning to reduce digital leakage

Sample Size: 99 customers who have visited Order Tracking within 14 days of placing a BB order and subsequently called the contact centre

Insight Aims:

  • What are the most common issues customers have within Order Tracking that lead to them to still need to call?

  • What is the customer intent when using Order Tracking on Sky Q STB?

  • Does our current journey include what customers typically want to see/get from Order Tracking?

  • Looking at trends in customer behaviour when using Order Tracking, Is there any copy we could change, or amend/add next best actions?

Clicktale and Call Listening Analysis - Issue Summary

[ Click to View the Full Document ] – Clicktale and Call Listening Analysis – Issue Summary

 

The problems identified

 

39% of broadband provisioning customers

called to check their order status even though this was available online via Order Tracking.

 

56% of these customers had the status of ‘In Progress’

The reasons the customers called were:

  • Information – who contacts other provider regarding phone line takeover
  • Order was cancelled as the wrong address was used – had to be reordered to correct address
  • Status change to action required – Openreach engineer needed to be booked
  • Activation date on OT was showing the day she contacted Sky and BBT was not working
  • Customer was worried about one her Q boxes not arriving

 

44% of these customers had the status of ‘Action Required’

The reasons customers fell into this status were:

  • Failed order due to system issues. Customer was alerted via SMS
  • Order recovery team had cancelled order
  • Delayed order due to issue with service install – customer alerted via SMS

 

The goal of the project

  • Improve on current Track My Order experience on Sky Q STB
  • Reduce calls into the contact centre, with focus on ordered items where better informations could have been provided
  • Increase engagement of customers with the order tracking process
  • Improve on the following key issues that customers highlighted as being the biggest problems they have:
    • Checking order status
    • Checking service activation date
    • Check Sky Q hub delivery
    • Check engineer date

 

KPIs

  • Number of calls into the contact center, obviously we wanted to drastically reduce the number

  • Engagement level with user when visiting the Track My Order experience on Sky Q

  • Customer Satisfaction level (increase the CSAT score)

 

How I planned to solve it

Working in Agile we set up a team which included me as the Senior UI/UX Designer, PO, back end and front-end developers.

The process put in place to develop the feature is as follow:

    • DISCOVER – Background Research / User interview / Analysis

    • DEFINE – Feature prioritisation / User persona / Costumer journey

    • DESIGN – Wireframe / Visual mock-up / Prototype

    • TESTING – Usability testing / User testing sessions / A-B testing

    • DELIVER – Pixel perfect visuals / Interactive prototype / Assets ready for devs

 

Background research

Similar Order Tracking Experiences

Sky Mobile Order Tracking Experience

Sky.com Order Tracking Experience

 

Wireframes

The main aim is to identify the best layout and scalable solution which would be then developed into the fully fledge journey.

The focus is on presenting all of the necessary information whilst clearly displaying order’s statuses optimising the on-screen real estate in order to be able to accommodate all of the products and correlative journey within the wider process.

 

User flow – Click to view full screen

 

Visual exploration

Several variations on the UI of the Order Details screen as well as the Main Dashboard elements.

 

Phase one

My focus was on visualising the most appropriate, effective and immediate visual solution, comparing and developing an easy to understand iconography, colour scheme, labels and order status / informations.

 

Phase two

I’ve delve into labels, clearly signposting the current order’s status at a glance, the solid background of the smart tile and variations on the overall look and feel.

 

BOT journey, Voice commands, Conversational UI

A Conversational UI gives the privilege to the user of interacting with the STB on human terms. Conversational interface allows a user to tell the STB what to do.

With my work I’ve identified the correct syntax and voice actions a customer should utilise in order to get to check is order’s status from anywhere in the Sky Q STB.

I’ve then developed an MVP for what a potential BOT-guided journey would look like, adapting several element of the UI and creating brand new ones, changing the interactivity paradigms and utilising new areas of the on-screen real estate such as the lower third of the screen.

 

User flow – MVP

User flow of the Sky Q Order Tracking MVP.

 

Order Tracking - MVP - User flow

Order Tracking – MVP – User flow

 

Interactive notification

The so called “umbrella notification” as they display in the upper third of the screen, have been identified as an optimal way to keep the customers informed about any status update on their ordered products. It also provides a quick an easy way to interact with, reschedule, cancel or track on map any live order.

 

Product Statuses

Each and every product can have up to four different statuses, On Track, Delayed, Get in Touch and Complete. These are all of statuses of the several products available to track as part of the MVP journey.

The fact that one product changes status has structural consequences as with the new status the order may now present two distinct CTAs depending on factors such as if the order requires an engineer installation or is a self-install one.

 

Sky Q 2TB STB

 

Sky Q HUB

 

Sky Q HUB / Self Install

 

Sky Q Minibox

 

Sky Q Minibox & Remote Complete

 

How I measured success data analysis

Within the first three months following the launch of the new Order Tracking experience on Sky Q STB we collected the following data:

28% less

phone calls to the Contact Centre for customers with active orders

11.5% increase

in customer satisfaction following the introduction of the new experience

15.3% increase

of customers using the new Order Tracking dashboard and viewing orders on the Sky Q STB

 

Developers handover / specifications

Preparation of the specifications for the whole of the journey provided to the front end developers.

Smart Tiles Specs

Smart Tiles Specs

What is Order Tracking?

Order tracking is where you can track all your orders, ranging from accessories to Sky Store products, delve into the order’s details, reschedule an engineer visit and get a precise estimate of when the product will be with you.

Project Background

More than 39% of existing customers who call up within 14 days of placing an order could have solved their issue if a better customer experience was provided to them. An update to our current order tracking process would provide real value for STB users wanting to track their items.

UX

I’ve researched, analysed and compared the best cases of similar UX Design solutions to the project’s final brief whilst considering both internal and users’ requirements in order to help me identify risk assumptions early and swiftly, avoiding to waste up time for a final solution that doesn’t satisfy the users nor the company’s goals and vision.

UI & Visual Assets

There have been several iterations of the UI of the whole journey, they’re based on technical limitations and back-end capabilities, user feedback gather via on-site workshops, user testing with fully working prototypes, A-B testing which solution would better satisfy customers needs.

The importance of Prototypes

Many ideas fail, not because they are flawed, but because people didn’t ‘get it’. It can be hard to imagine new products, services or features. That is where traditional specification documents and business plans fail. They do not excite people about the potential. They do not show them what could be.

Which is why working in Agile, I felt the need to prototype pretty much every design task for every sprint so to shows stakeholders, developer, PM and back-end, what I was going to build. That means everybody had the same picture of the end goal. It significantly reduces the need for people to ‘fill in the gaps’ with their imagination.

It’s also a great tool for user testing session, to gauge the level of engagement of a specific feature and further iterate if and when needed. Occasionally and particularly in the early days of a project, I had to make few assumptions about what users want. Some companies do market research, but just like stakeholders users often struggle to picture what it is you are proposing building.

Testing a prototype allows you to validate the assumptions you make and be confident you are building the right thing.

Click on the thumbnail below to launch the interactive prototype:

Click here to launch prototype

Click here to launch the interactive prototype

TARGET AUDIENCE

Sky Q STB customers.

CLIENT

Sky

TECHNOLOGY

Depop Video Feature

 

The problem identified

User were growing increasingly frustrated about not being able to record and upload a video in their listing. On the majority of the other online-marketplace apps it was one of the most popular feature and they felt left behind, not being able to fully express their creative self.

 

The goal of the project

The goal of the project was to empower sellers providing them with a feature which would help them sell their items whilst engaging with their followers and potential buyers.

At the same time buyers would benefit from a new way to vision an item before purchasing it.

 

KPIs

  • Global revenue increase in Q4 compared to the same time the previous year

  • To increase number of listed items p/w

  • To reduce time spent selling an item to ideally no longer than one week

  • To increase marketplace rating by 0.2 on both iOS and Android platforms

  • To increase the number of listings globally by 3% to 5%

 

Style Guide

 

How we planned to solve it

Working in Agile we set up a team of five including PD, PM, Q&A, Android and iOS developers.

The process put in place to develop the feature is as follow:

    • DISCOVER – Background Research / User interview / Competitive analysis

    • DEFINE – Feature prioritisation / User persona / Costumer journey

    • DESIGN – Wireframe / Visual mock-up / Prototype

    • TESTING – Usability testing / User testing sessions / A-B testing

    • DELIVER – Pixel perfect visuals / Interactive prototype / Assets ready for devs

 

Wireframes & Sketches

 

Listing Flow

Proposal with new listing screen layout, image gallery upload, new camera ui and navigational footer.

 

How I measured success data analysis

Working closely with back-end and PMs we could witness the following areas of improvement upon having launched the new feature, validating our work but more importantly exceeding expectations:

5.6% increase

of revenue generated upon having launched the feature (Q4) compared to the same period the previous year

14.8% increase

of successful listing where the item Has been sold within the first week of it being published compared to any period prior the release of the feature

0.2 rating points increase

of the rating on both iOS and Android market due to positive feedback related to the newly released video recording feature

 

ABOUT DEPOP

Depop is the new way to shop where you can buy, sell and share millions of unique items, vintage & luxury fashion, art, illustration, books, records and trainers and where you can build your own community of sellers and buyers.

Start selling by taking a video or a picture and open your own personal shop. Buy an item with just one tap.

More importantly, stay connected. Depop is a community – it’s a fun place to hang out. Keep up-to-date with your friends’ activity – like, share and comment on items that catch your eye.

Originally a social network, the app became a global marketplace — a mobile space where you can see what your friends and the people you’re inspired by are liking, buying and selling.

In turn, your friends and creative influencers all over the world can see the things you like, buy, and sell, and are inspired by you. This ecosystem has supported Depop becoming a global conduit of connection, not only in m-commerce, but culture, design, and creative communities around the world.

With 10 millions users worldwide, today 80% of Depop users are under 25-years-old, they’ve sold $230 million of clothing last year, and are on track to double that to $460 million in 2018-19.

Video Feature

With this engaging new feature users can now shoot short videos of their items to help them show off what they’re selling. The aim is to empower them to explore their creativity through a different media format as well as to give creatives an additional tool for self expression.

Moreover it has been proven to be of great help to buyers too as it will give them better insight into the items they are purchasing. The better users can present their items, the more revenue they can generate.

talking about UX

I’ve research, analysed and compared the best cases of similar UX Design solutions to the project’s final brief. I’ve generated personas and validated my concepts and approaches via data and user research sessions to understand the motivations of users and to use that insight to design better experiences, working closely with the back-end and engineering team. I’ve then helped develop a road-map in partnership with the PM whilst considering both internal and users’ requirements in order to help me identify risk assumptions early and swiftly.

Talking about UI

The user interface had to the reflect and adhere with Depop’s core values such as authenticity, self-expression, entrepreneurialism and uniqueness, whilst offering a cutting edge solution to satisfy buyers and sellers needs.

The aim of my work is not only to create a colourful whilst minimal and catchy user interface which is also fresh and connected to the users but I also wanted it to be engaging enough to appeal to anybody, top sellers as well as new users at a global scale.

It takes in consideration users’ needs by offering a seamless experience regardless of the device or the os and it wants to stand out in the same way that our unique community does with their goods on sale, focusing on translating, implementing and enhancing the Depop visual and brand identity.

The importance of Prototypes

Many ideas fail, not because they are flawed, but because people didn’t ‘get it’. It can be hard to imagine new products, services or features. That is where traditional specification documents and business plans fail. They do not excite people about the potential. They do not show them what could be.

Which is why working in Agile, I felt the need to prototype pretty much every design task for every sprint so to shows stakeholders, developer, PM and back-end, what I was going to build. That means everybody had the same picture of the end goal. It significantly reduces the need for people to ‘fill in the gaps’ with their imagination.

It’s also a great tool for user testing session, to gauge the level of engagement of a specific feature and further iterate if and when needed. Occasionally and particularly in the early days of a project, I had to make few assumptions about what users want. Some companies do market research, but just like stakeholders users often struggle to picture what it is you are proposing building.

Testing a prototype allows you to validate the assumptions you make and be confident you are building the right thing.

TARGET AUDIENCE

Both male and female audience, between 16-45 yrs old.

CLIENT

Depop

TECHNOLOGY

TalkTalk TV STB UI

 

 

The problem identified

Talktalk has just completed the acquisition of Blinkbox, the online purchase and rental VOD company and it now has to restructure the whole catalogue of Movies and TV series.

The current STB user experience and interface needs an almost complete overhaul in order to not only accommodate the new titles but to offer the user a seamless and intuitive user experience.

 

The goal of the project

The goal of the project was to offer users a brand new immersive interface for the TalkTalk TV Store capable of showcasing the latest cinematographic contents in an efficient and effective way, which would engage with potential new users whilst allowing them to navigate a vast catalogue of the last movies and tv series from the comfort of their couch.

 

KPIs

  • To increase users subscriptions to VOD packages

  • To drive a younger audience to join TalkTalk TV

  • To decrease churn rate

 

How we planned to solve it

Working in Agile we set up a team of four including UI / Visual Designer, PM, back end and front-end developers.

The process put in place to develop the feature is as follow:

    • DISCOVER – Background Research / User interview / Competitive analysis

    • DEFINE – Feature prioritisation / User persona / Costumer journey

    • DESIGN – Wireframe / Visual mock-up / Prototype

    • TESTING – Usability testing / User testing sessions / A-B testing

    • DELIVER – Pixel perfect visuals / Interactive prototype / Assets ready for devs

 

Information Architecture

 

User Experience

How I measured success data analysis

Following the launch of the new STB UI/UX we collected the following data:

7.2% increase

of users’ subscriptions to VOD packages (sports most popular)

3.2% of new subscribers

in the 20 to 30 years old demographic group (predominantly male)

1.8% churn rate

decrease since the new STB user interface was launched

DESCRIPTION

TalkTalk TV the Set Top Box Experience, the project I was tasked with consisted in creating a brand new immersive interface for the TalkTalk TV Store capable of showcasing the latest cinematographic contents in an efficient and effective way, which would engage with our users whilst allowing them to navigate a vaste catalogue of the last movies and tv series from the confort of their couch.

Information Architecture

Backbone of the project it servers to define and visualise how the several elements and areas of the whole experience are categorised and organised hierarchically. Mapping out the IA is crucial to make sure that all of the main functionalities and areas of the wider business are present and connected in the most effective and simple way.

UX

I’ve research, analysed and compared the best cases of similar UX Design solutions to the project’s final brief whilst considering both internal and users’ requirements in order to help me identify risk assumptions early and swiftly, avoiding to waste up time for a final solution that doesn’t satisfy the users nor the company’s goals and vision.

UI & Visual Assets

Visuals of the STB UI prepared for the final prototype to be presented internally to the engineering team in order to understand if there could have been any last tweak or last remaining feasibility issue.

TARGET AUDIENCE

Both male and female audience, between 16-45 yrs old.

CLIENT

TalkTalk TV

TECHNOLOGY

Base79 Media App

 

DESCRIPTION

IPTV application for the Ministry of Sound realised at Base79 (founded as MyVideoRights) which is the largest Multi Channel Network in EMEA. Base79’s channels cumulatively receive over 750 million views monthly. The company gets its name from the atomic number of gold and it has now been acquired by Rightster to position it as the largest YouTube partner outside North America. To conceptualise and design the application was very challenging mainly due to the vast amount radio shows, music videos and live broadcast events produced by the MOS.

DELIVERABLES

IPTV Application featuring all of the major radio shows, music videos and live broadcast events directly from the Ministry of Sound.

Working closely with the dev team I designed a suitable interface for a big screen TV app. In designing the UI I adhered to the MOS brand guidelines and primarily the use of colours they do to distinguish all the different contents available. I made sure that all the contents were easily accessible and recognisable by the user whilst the visuals would match those of the MOS Website. Everything has been designed and optimised to work within an IPTV environment.

TARGET AUDIENCE

Their core target group is 14 to 45 mixed audience.

CLIENT

Ministry of Sound

TECHNOLOGY

Bebo UX Studies

DESCRIPTION

Bebo was founded by husband-and-wife team Michael and Xochi Birch in January 2005 at their home in San Francisco. The website name was bought by the founders, and the backronym “Blog Early, Blog Often” was invented to answer the question of what the name meant. The site was purchased by AOL on March 13, 2008 for $850 million, with the Birches’ combined 70% stake yielding a profit of $595 million from the deal. The website, at the height of its popularity, overtook Myspace to become the most widely used social networking website in the United Kingdom,[13][14] eventually registering at least 10.7 million unique users. The site was also extremely popular in Ireland – at one point it claimed to have over a million Irish users, and data from Alexa ranked it as Ireland’s most-visited site.[citation needed] Its popularity saw it sold to AOL for $850 million in 2008.

The National Space Agency of Ukraine’s RT-70 radio telescope sent 501 messages chosen by Bebo users, called A Message From Earth, toward planet Gliese 581c. Sent on 9 October 2008, it will arrive in the spring of 2028.

DELIVERABLES

UX wireframes of the user’s personal news feed.

TECHNOLOGY