Portfolio Ux & Design - Compilation II

FILIPE PEREIRA

Portfolio User Experience & Design

filipepereira

filipepereira

[fp] MAY 2 0 1 8

Career & Milestones

TELCO PRODUCTS

Mobile Portal

TARGET2 SIBS CORE SYSTEMS

CORE SYSTEMS

PORTAL

NETemprego

AGENT PORTAL

ELEIÇÕES 2008 PORTAL

CORE SYSTEMS

The Cube Portal Mobile Portal

PORTAL & WEBAPP Portal Revamp eCOMMERCE

GAME

Citizens Portal

2000

2001

2003

2006

2009

Senior Consultant

Cisco Partner of the Year with Br@ain

PRÉMIO COMUNICÃO

NOVABSE ACD

INTRANET ACD COMMUNITY MANAGER

MICROSOFT Partner of the Year with Light-Intranet in-a-Box

WEBDESIGN Curso Pós Graduação

2010

2012

2018 UX\UI Manager Head of UX&DESIGN

“

I’m a self-starter, dedicated to improve processes and digital design. You can easily find me "fighting" for clarity and simplicity in the final customer experience and daily design team operations.

UX & DESIGN TEAM LEADING

INNOVATION

PRODUCT DESIGN

ART DIRECTION

STRATEGIC DESIGN

AGILE DEV

CORE DEVELOPMENT

Mobile Web & Native INNOVATION

UX & DESIGN

TEAM LEADING

ART DIRECTION

AGILE DEV

PRODUCT DESIGN

2018

TELCO VAS

UNBUBBLE ANDROID NATIVE GAME

Mobile game for Telco’s Loyalty programs with engaging image base trivia. Prizes to be redeemed in Telco data packs

MY KEY RESPONSABILITIES PRODUCT DESIGN

PRODUCT DEVELOPMENT

TOOLS AND TECHNOLOGY

Adobe XD

Android Studio TinyPNG

Slack

Invision MADE WHILE IN TIMWE

2018

TELCO VAS

RECARGA CERTA RECHARGE APP

Mobile app for Telco’s subscribers top-up their accounts. Gamification mechanics plus engine rules will allow further engagement and results. Under development.

MY KEY RESPONSABILITIES PRODUCT DEVELOPMENT

PRODUCT DESIGN

UX & UI REVAMP of EXISTING APP

TOOLS AND TECHNOLOGY

Adobe XD

MADE WHILE IN TIMWE

2018

TELCO VAS

GIFTTER ANDROID NATIVE GAME

Mobile game for Telco’s Loyalty programs a twist: subscribers collect points after top-up or spinning a fortune wheel and redeem the prizes to surprise their friends.

MY KEY RESPONSABILITIES PRODUCT DEVELOPMENT

PROTOTYPING

PRODUCT DESIGN

TOOLS AND TECHNOLOGY

Adobe XD

Android Studio TinyPNG

Slack

Adobe Illustrator

Invision MADE WHILE IN TIMWE

2018

TELCO VAS

GIGAPLAY ANDROID NATIVE GAME

TIMWE’s first android trivia game to offer mobile data as prizes. The players can win points after answering correctly and redeem them in megabytes (one gigabyte per week) via operator mobile data packs. The project was made following a Lean Ux \ Agile methodology. Members in São Paulo Brazil, Dubai UA, Lisboa and Covilhã.

Game has ended!

MY KEY RESPONSABILITIES UX ANALYSIS

FACILITATE ANALYSIS MEETINGS

PROTOTYPING

INTRODUCTION OF WIREFLOWS

FRONT END TEAM MANAGEMENT

FULL DESIGN SYSTEM ANIMATED GIFS

CHARACTER DEVELOPMENT

QA

TOOLS AND TECHNOLOGY

HTML \ CSS Slack

Android Studio

TinyPNG

Invision

Adobe XD Adobe Illustrator MADE WHILE IN TIMWE

The trivia flow

EMPATHY WITH THE USER Each question gives the user a certain amount of points.

When user wins the system is “also happy� and communicates it directly.

USE FUN TO CONNECT Several short animations where added during the game play to reinforce user emotions: victory, lost, anxiety. The idea was to make the app more engaging.

ANIMATED GIFs Using small animated GIFs to reinforce emotions

The sharing flow

SHARING: MAKE IT FUN

FIND A TREND AND USE IT

Ask users to share an app isn’t always an effective suggestion. We’ve decided to add some user value to the act of share. Each time the user wins a prize he as the change to brag about it by taking a selfie later enhanced by our system with the amount of data won.

The sharing feature was enhanced by using one of the current hypes: selfies.

The game, the achievement and the ultimate object to be shared.

The lean UX approach User Experience meets Agile Project Development GIGAPLAY was launched in a record time by three teams in two offices: Ux&Design and Product in Lisboa; Developing team in Covilhã.

To reduce the impact of the distance we’ve adopted Lean Ux practices and wireflows to present and document the product.

Wireflows did accelerate the main user experience, the definition of features and end-points, between back-end and front-end, support technical feasibility and prepare Scrum sprints.

Later in the project, I’ve transformed the Wireflows into a live Design Style Guide that still works today as the baseline for new product installation.

LIVE WIREFLOWS

the design and ux bible ground for project teams Marketing, Ux&Design, Backend and Front-end

TELCO PREMIUM SERVIVES

2015

Free Internet

MOBILE WEB SMARTPHONE & FEATURE PHONE

Mobile solution offering du clients the list of “no cost while browsing” websites and applications. We’ve come out with the idea of sponsored resources, where their owners or third parties could auction for.

Some digital ads could be placed before accessing sponsored resources.

MY KEY RESPONSABILITIES PRODUCT DESIGN

UX & UI DESIGN

PROTOTYPING

TOOLS AND TECHNOLOGY

Adobe Dreamweaver

HTML \ CSS

NEO PIM PORTAL EDITOR

NEO M3 CMS MADE WHILE IN TIMWE

2016

TELCO + GAME HOUSE

AppBox

MOBILE WEB SMARTPHONE & FEATURE PHONE

Games store available with an all-you-can-eat model! During the subscription period customers can download and play unlimited number of games from Electronic Arts.

Solution was prepared to be a label product and fully customized by the client

MY KEY RESPONSABILITIES PRODUCT DESIGN

UX & UI DESIGN

PROTOTYPING

ANDROID DESIGN

TOOLS AND TECHNOLOGY

Adobe Illustrator

TinyPNG

Android Studio

MADE WHILE IN TIMWE

2017

TELCO VAS

FUNHUB MOBILE WEB

Mobile portal offering multi content categories monthly curated and promoted per country. The monthly subscription is an “All You Can Download\Watch” model and allows users to save and to share their favorites trailers, photos, music and publications (e-books).

MY KEY RESPONSABILITIES PRODUCT DESIGN

UX & UI DESIGN

CONTENT STRATEGY

COPY-WRITE

TOOLS AND TECHNOLOGY

Adobe Dreamweaver

NEO PIM PORTAL EDITOR

NEO M3 CMS

Trello

HTML \ CSS

MADE WHILE IN TIMWE

2015

TELCO VAS

Seleção Premiada MOBILE NATIVE APP

One of TIMWE’s most profitable marketing campaign in vivo. In this second season of promotional campaign, product team decided to added two SMS based games (Virtual Football + Follow the Best Action) and use a native app to promote and consolidate the campaign

MY KEY RESPONSABILITIES ART DIRECTION

UX DESIGN

QUALITY ASSURANCE

TOOLS AND TECHNOLOGY

Adobe Photoshop

Trello

MADE WHILE IN TIMWE

2014

TELCO PREMIUM SERVICES

Light Self Care HYBRID ADOBE FLEX APP

First version of TIMWE’s offer for telecom's self care solution. The product bridges the technology gap between internal data systems, service offering, content and on-device user interface. The product is 100% customizable and includes an powerfull backoffice capable of edit available services, add moarketing campaings and change look & fell MY KEY RESPONSABILITIES ART DIRECTION

MVP TEAM MANAGEMENT

QUALITY ASSURANCE

TOOLS AND TECHNOLOGY

Adobe Photoshop

Adobe Flex

Trello

MADE WHILE IN TIMWE

Back-office App Editor

CLIENTS

DEDICATED BACKOFFICE TO CONFIGURE INTEGRATED SYSTEMS AVAILABILITY AND A WYSIWYG FEATURE TO CUSTOMIZE USER INTERFACE AND APP LOOK & FEEL

2017

TELCO & TV CHANNEL

ConfedCup 2017 ADAPTIVE THEMATIC PORTAL

Branded portal for 2017 Confederations Cup made in partnership with KWESÉ, ESPN and FIFA. The subscription offer football matches live streaming, exclusive content, pre-match and backstage video coverage.

MY KEY RESPONSABILITIES UX RESEARCH

UX & DESIGN

MVP TEAM MANAGEMENT

MVP TEAM MANAGEMENT AKAMAI INTEGRATION

CONTENT INTEGRATION JAVASCRIPT CUSTOMIZATION

TOOLS AND TECHNOLOGY

JWPlayer JASON

NEO PIM PORTAL EDITOR XML Spy

NEO M3 CMS

Adobe Dreamweaver

HTML \ CSS MADE WHILE IN TIMWE

2017

TELCO VAS GAME OFFERING

GAMES GALAXY APP, MOBILE WEB and DESKTOP

Fully responsible web games store featuring the best mobile games in Myanmar market. The final solution include a Single Sign On for the three channels: web, mobile and SMS.

MY KEY RESPONSABILITIES UX & UI DESIGN

ART DIRECTION

PROTOTYPING

HOTJAR INTEGRATION

TOOLS AND TECHNOLOGY

AKAMAI CDN integration SEO \ SEM

NEO PIM PORTAL EDITOR

GOOGLE ANALYTICS

HTML \ CSS

Invision

ANDROID STUDIO MADE WHILE IN TIMWE

Main flow and subscription

H O M E

C A T E G O R I E S

C A T E G O R Y

2016

CORPORATE & TELCO VAS

NewAfricanWoman MOBILE WEB THEATIC PORTAL

New African Woman Magazine mobile edition soon available on selected telecoms throughout Africa, monetizing the exclusive content before they reach the print edition. In partnership with IC Publication.

MY KEY RESPONSABILITIES PRODUCT DESIGN

UX & UI DESIGN

DEVELOP NEW VISUAL COMPONENTS

PROTOTYPING CUSTOMIZABLE WEB PARTS

VISIT DEMO

TOOLS AND TECHNOLOGY

Adobe Photoshop Invision

NEO PIM PORTAL EDITOR

SEO \ SEM

GOOGLE ANALYTICS

NEO M3 CMS Trello MADE WHILE IN TIMWE

2017

TELCO VAS

COMBOX THEMATIC MOBILE PORTAL

Multi content HTML5 mobile portal, build to be customized and managed with NEOTMPIM design tool. Available under an All You Can Download model.

MY KEY RESPONSABILITIES PRODUCT DESIGN

UX & UI DESIGN

DEVELOP NEW VISUAL COMPONENTS

PROTOTYPING CUSTOMIZABLE WEB PARTS

E-BOOK INTEGRATION

CONTENT STRATEGY TOOLS AND TECHNOLOGY

Adobe Illustrator Adobe XD

VISIT DEMO NEO PIM PORTAL EDITOR

Invision

GOOGLE ANALYTICS

NEO M3 CMS XML Spy

HTML \ CSS Trello MADE WHILE IN TIMWE

Content Categories

N E W S

P H O T O G R A P H Y

V I D E O S

G A M E S

E - B O O K S

Design trends • • • • •

Suspended visual elements and break the rule of symmetry Backgrounds and patterns Simple pages and navigation Work with contrasts and shift toward dimmer tones More tactile design: smooth animations, interactions, transitions, cinemagraphs, and boomerangs

..design for ecommerce • • • • •

Clear and useful MyAccount Intuitive navigation and categories Website speed plus Mobile optimization Product page optimization Clear subscription process

VISIT DEMO

2016

CORPORATE & TELCO VAS

LIVECLUB

PORTAL AND PROMOTIONAL CAMPAIGNS

Official Cristiano Ronaldo’s portal offering exclusive and public news, alerts, statistics, photos, videos and a cool promotion with special prizes. In partnership with athlete branding team. Available in smartphone and feature phones.

MY KEY RESPONSABILITIES COMPETITION ANALYSIS

CONTENT STRATEGY

MARKETING STRATEGY

UX & UI DESIGN PRDUCT DESIGN

SEO TV SPOT

INFORMATION ARCHITECTURE VISIT DEMO

TOOLS AND TECHNOLOGY

Adobe Dreamweaver HTML \ CSS

WML

Adobe Photoshop JavaScript \ jQuery

Adobe Illustrator Bootstrap

Invision

Trello MADE WHILE IN TIMWE

Telco customizations

INSTALLATIONS among other

Unitel, Angola Viva, Bahrain & Kuwait Personal, Argentina MTN, Ghana & Nigeria du, UAE Ooredoo, Qatar Indosat, Indonesia Tigo, Colombia Etisalat, Nigeria

Subscribers Pick

~1.4Million

ADVERTISING SPOT

A N G O L A

N I G E R I A

B A H R A I N

G H A N A

2016

TELCO VAS

KIDSBOX ANDROID NATIVE APP

App store dedicated to find and offer the best content for kids. Includes parental control features The subscription model is validated each time the user opens one installed apps.

MY KEY RESPONSABILITIES UI DESIGN

MOBILE DVELOPMENT

TOOLS AND TECHNOLOGY

Adobe Dreamweaver NEO PIM PORTAL EDITOR

Adobe Photoshop NEO M3 CMS

GOOGLE ANALYTICS HTML \ CSS

JavaScript \ jQuery MADE WHILE IN TIMWE

2015

TELCO

Kids World MOBIEL WEB THEMATIC PORTAL

Portal dedicated to kid’s educational content with a parent dashboard listing each children progress on specific activities.

Available in both smartphone and in the most advanced feature phones. The L&F is fully customizable to telco branding. In a partnership with Cartoon Network MY KEY RESPONSABILITIES ADPATIVE PORTAL DESIGN

UX & UI DESIGN

DEVELOP NEW UI COMPONENTS

UKRAINIAN VERSION

CARTOON NETWORK SPECIAL EDITION

TOOLS AND TECHNOLOGY

NEO PIM PORTAL EDITOR

HTML \ CSS

JavaScript \ jQuery

Invision

MADE WHILE IN TIMWE

2015

TELCO VAS PORTAL

COMBOPLUS

MOBILE WEB INCLUDING FEATURE PHONE EDITION

All You Can Download subscription portal with local and international content. Exclusive episodes for several local TV series. Integration with thirdparty content provider like AFP and Infoplum. Relevant partnership with AFP. MY KEY RESPONSABILITIES INFORMATION ARCHITECTURE CONTENT STRATEGY

UX & UI DESIGN

MARKETING CAMPAIGN DESIGN

VISIT DEMO

TOOLS AND TECHNOLOGY

Adobe Photoshop

NEO PIM PORTAL EDITOR

HTML \ CSS

JavaScript \ jQuery

GOOGLE ANALYTICS MADE WHILE IN TIMWE

Customizations SOUTH AFRICA

ACCESS TO FRANCE PRESS PORTALS

DEMO

GREECE

DEMO

2016

CORPORATIVE

FZ

FANZONE SOCCER THEMATIC PORTAL

Proposed to RealMadrid digital team, this mobile portal offered special curated content: latest news, multimedia, thematic emoji’s and small animations for the true fan.

MY KEY RESPONSABILITIES PRODUCT DESIGN

UX & UI DESIGN

PROTOTYPING

INTRODUCTION OF ANIMATED GIF PACK

TOOLS AND TECHNOLOGY

Adobe Photoshop HTML \ CSS

VISIT DEMO NEO PIM PORTAL EDITOR

JavaScript \ jQuery

NEO M3 CMS

Invision

GOOGLE ANALYTICS MADE WHILE IN TIMWE

FZ

Full screen set

2016

TELCO VAS

Universo VIVO INCENTIVE GAME

TIMWE’s first android multi-game to promote top-up usage and up-sell of VIVO services Users can challenge a friend and win prizes while having fun in common trivia games, True or Myth, Guess the Image, Math Challenges among others.

MY KEY RESPONSABILITIES PRODUCT DEVELOPMENT

UX DESIGN

ART DIRECTION

QUALITY ASSURANCE

TOOLS AND TECHNOLOGY

Adobe Dreamweaver

Adobe Illustrator

Invision

Trello

MADE WHILE IN TIMWE

Concept adaptation

2018

C E L C O M i n M A L A Y S I A

Desktop & Back-office INNOVATION

UX & DESIGN

TEAM LEADING

ART DIRECTION

AGILE DEV

PRODUCT DESIGN

2018

UAE GOVERN

LAUNCHPAD DUBAI THE YOUTH OFFICE

Al-Mahatta Youth Launchpads is an initiative facilitating the show of the Emirati youth projects. It’s mainly consists of allocated ready spots all over UAE for the youth to use for presenting their projects. The initiative is reflecting the direction of the leaders who believe that Youth are the key to the country’s future success.

MY KEY RESPONSABILITIES WEBDESIGN

BRAND DEVELOPMENT

CREATIVE DIRECTION

PROTOTYPING

UX & UI DESIGN

TOOLS AND TECHNOLOGY

Adobe XD

Invision

JavaScript \ jQuery

HTML \ CSS

MADE WHILE IN TIMWE

2016

UC

TELCO

Ubercare CRM ADMIN & FRONTEND

Framework that addresses the operational challenges of implementing customer processes

MY KEY RESPONSABILITIES BUSINESS ANALYSIS UX & UI DESIGN

PRODUCT DESIGN PROTOTYPING

TOOLS AND TECHNOLOGY

Adobe Dreamweaver

HTML \ CSS

Invision

JavaScript \ jQuery MADE WHILE IN TIMWE

2015

CORE PLATFORM

NEO Miit

SMS BROADCAST MANAGER

Redesign the internal core SMS Campaign Management platform, migrating the old development platform to Vaadin a modern Java development framework with a strong visual layer. All the use cases were redesign in order to simply user experience and business goals MY KEY RESPONSABILITIES USE CASES ANALYSIS

DESIGN NEW UI THEME

ADVOCATE THE USE OF VAADIN AMOUNG JUNIOR DEVELOPERS UX & UI DESIGN

QA TESTING

TOOLS AND TECHNOLOGY

Adobe Dreamweaver Java Server Pages

Vaadin HTML \ CSS

Netbeans JavaScript \ jQuery MADE WHILE IN TIMWE

2015

FINANCE

WeBanking TELECOM BANKING

Framework that addresses the operational challenges of implementing customer processes for homebanking in contexto with Telco fintech initiatives

MY KEY RESPONSABILITIES UX ANALYSIS

ART DIRECTION

MVP DESIGN

TOOLS AND TECHNOLOGY

Adobe Dreamweaver HTML \ CSS

Bootstrap

JavaScript \ jQuery

Yii Framework

Target Process

PHP MADE WHILE IN TIMWE

2009-2011

GOVERNMENT

CENS0S 2011

FRONT-END & BACK-OFFICE APPLICATIONS

Web application to support the citizens and families data for 2011 national census. A two year period preceded the launch where the team developed and tested several functional prototypes to produce a relevant user testing foundation before final solution.

MY KEY RESPONSABILITIES UX ANALYSIS

WEBDESIGN

PROTOTYPING

INFORMATION ARCHITECTURE COPY-WRITE

ACCESSIBILITY – WCAG1.0

QA TESTING

TOOLS AND TECHNOLOGY

Adobe Dreamweaver HTML \ CSS

W3C Validator

JavaScript \ jQuery

MS Visual Studio .NET \ ASPX MADE WHILE IN NOVABSE

2011-2012

INTRANET

NOVABASE ADN BUSINESS UNIT INTRANET

Our intranet to share knowledge and project documentation. Made in MS Sharepoint with a fully customized theme which included the standard elements like colors, fonts, images and new third-party JavaScript plugins to enhance the experience.

MY KEY RESPONSABILITIES UX ANALYSIS

WEBDESIGN

INFORMATION ARCHITECTURE COPY-WRITE

WEBMASTER

INTRANET MANAGER

DOCUMENT MANAGEMENT

QA TESTING

TOOLS AND TECHNOLOGY

Adobe Dreamweaver HTML \ CSS

MS Visual Studio

JavaScript \ jQuery

MS Sharepoint WSS

.NET \ ASPX MADE WHILE IN NOVABSE

2002

GOVERN

NETEMPREGO Institutional portal for all documentations and digital services related to the public employment institute: job offers, incentives and central campaigns made available by the Portuguese Govern.

MY KEY RESPONSABILITIES UX ANALYSIS

WEBDESIGN

PROTOTYPING

INFORMATION ARCHITECTURE BRAND IDENTITY

ACCESSIBILITY – WCAG1.0

COPY-WRITE

QA TESTING

TOOLS AND TECHNOLOGY

Adobe Dreamweaver HTML \ CSS

W3C Validator

JavaScript \ jQuery

Java Server Pages

Netbeans MADE WHILE IN NOVABSE

2012

SONAE SIERRA

LEDGER Real state Project Financial Management System

MY KEY RESPONSABILITIES DESIGN SPRINTS

UX & UI DESIGN

PRODUCT PACK

PRODUCT BRAND DEVELOPMENT

PLUGIN FOR BALANCE SHEET VISUALIZATION TOOLS AND TECHNOLOGY

Adobe Dreamweaver .NET \ ASPX

Adobe Photoshop

HTML \ CSS

MS Visual Studio

Jira

JavaScript \ jQuery MADE WHILE IN NOVABSE

2012

IEFP – PORTUGUESE GOVERNMENT INSTITUTE

eFORMS CAMPAIGN PORTAL

Web application to support A Portuguese Government 2010 campaign. Online forms and documentation to support the creation of new public and private initiaies.

MY KEY RESPONSABILITIES DESIGN SPRINTS

UX & UI DESIGN

TOOLS AND TECHNOLOGY

Adobe Dreamweaver HTML \ CSS

Adobe Photoshop

JavaScript \ jQuery

W3C Validator

Java Server Pages

Eclipse MS REPORTING SERVICES MADE WHILE IN NOVABSE

2015

IoT for VERTICALS

Gravity

MANAGEMENT PLATFORM – BACK-OFFICR SYSTEM

An M2M Enablement Platform that provides tools for building connected solutions. Major industrial verticals can features that reduce complexity, risk and cost

MY KEY RESPONSABILITIES DESIGN SPRINTS

UX & UI DESIGN

PRODUCT PACK

PRODUCT BRAND DEVELOPMENT

BUSINESS DASHBOARDS TOOLS AND TECHNOLOGY

Adobe Dreamweaver HTML \ CSS

Target Process

JavaScript \ jQuery

MS Visual Studio .NET \ ASPX

Bootstrap

MS Sharepoint WSS GOOGLE MAPS API MADE WHILE IN TIMWE

Marketing Campaigns INNOVATION

UX & DESIGN

TEAM LEADING

ART DIRECTION

AGILE DEV

PRODUCT DESIGN

2012 - 2017

TELCOS B2C SERVICES AND LEAD CAMPAIGNS

MARKETING CAMPAIGNS

K Y V S T A R -

U K R A I N E

O O R E D O O -

U A E

O O R E D O O -

M Y A N M A R

More than 100 campaigns developed for Telco’ all over the world.

Deliveries ranging from Print, TV Spots, Outdoors billboards, E-Mail Marketing, MMS and SMS campaigns, Print

MY KEY RESPONSABILITIES CREATIVE PROPOSAL

CAMPAIGN DEVELOPMENT

VIDEO PRODUCTION

PRINT ARTWORK

SUPPORT TO DIGITAL CAMPAIGNS MADE WHILE IN TIMWE

K Y V S T A R -

E T I S A L A T -

U A E

M T C -

U K R A I N E

U K A I N E

UX Consultancy INNOVATION

UX & DESIGN

TEAM LEADING

ART DIRECTION

AGILE DEV

PRODUCT DESIGN

2014

TELCO & GOVERNMENTS

Kazakhstan m-Gov – Vision & Execution

Ux consultancy included in a bigger project to develop mobile government in Kazakhstan.

S A M P L E R E P O R T

MY KEY RESPONSABILITIES BENCHMARK ANALYSIS

UX STRATEGY DEVELOPMENT

MOBILE BEST PRACTICES MADE WHILE IN TIMWE