Smart Tech App – The Design System

The Main Problems Identified

The Goal of the Project

How I Planned to Solve It

The Contribution Model

• 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.

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

Design Templates

Design System Components

Design System Exploration and Studies (Figma)

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

• Figma
• Jira
• Abstract
• Medallia
• GitHub
• Notion

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 – 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.

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

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

Cancellation Screen – Current vs New Screens – 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

• Sketch
• Figma
• Adobe XD
• Principle
• Illustrator CC
• Zeplin
• Abstract