PINKSTRATDESIGN Filippo Andolfatto PORTFOLIO

Size: px

Start display at page:

Download "PINKSTRATDESIGN Filippo Andolfatto PORTFOLIO"

Agatha Reeves
5 years ago
Views:

1 PINKSTRATDESIGN Filippo Andolfatto PORTFOLIO

2 RECENT PROJECTS

I ve suggested to them to work and develop a design system first and then to work on their apps. December 2017- now UX & UI Consultant for Nuevora.com NUEVORA.

3 BACKGROUND Nuevora.com is one of the top-10 big-data analytics companies. They are based in San Francisco (US). They hired me to redesign more than 50 apps, a challenge that could take up to 4 years (about 1 month per app). I ve suggested to them to work and develop a design system first and then to work on their apps. December now UX & UI Consultant for Nuevora.com NUEVORA.COM MY ROLE Developed the first version of their design system to unify the experience across multiple apps in a fast-paced agile environment; Designed the User Experience for their showcase application; Designed the User Experience for a Customer Care application. PROCESS Analyzed 2 of their most important applications to find patterns and UI components that we use multiple times across different apps; Defined a framework (bootstrap 4) to develop the UI; Create wireframes of their showcase and customer support application based in user s feedbacks; Create the UI;

COMPONENTS IN COMMON four types of buttons three types of forms one table

4 Analyzed two of their most important applications to find patterns and UI components that we use multiple times across different apps APP 1 APP 2 COMPONENTS IN COMMON four types of buttons three types of forms one table one slider one checkbox one radio-button one modal view; one sidebar one header

Create wireframes of their showcase and customer support application based in user s feedbacks; Example of question that we asked to members of the customer support team Article row before The row

If the user needs to know information about clicks, scores and boosts, he ll need to click on the row CLOSED ROW OPEN ROW Article row redesigned Important information are all exposed in the first

5 Create wireframes of their showcase and customer support application based in user s feedbacks; Example of question that we asked to members of the customer support team Article row before The row exposed only the title as meaningful information. If the user needs to know information about clicks, scores and boosts, he ll need to click on the row CLOSED ROW OPEN ROW Article row redesigned Important information are all exposed in the first level of interaction (both on desktop and mobile version). Only descriptions are collapsed in the closed row. CLOSED ROW MOBILE VERSION HOW DO YOU FIND MEANINGFUL ANSWER TO CUSTOMER S QUESTIONS? 1. I make a quick search based on keywords; 2. I look at articles titles; 3. I look at the scores, number of clicks and number of boosts that the article received in the past OPEN ROW

6 Create wireframes of their showcase and customer support application based in user s feedbacks; MOBILE VERSION DESKTOP VERSION

7 Create the UI based on the Design System; MOBILE VERSION DESKTOP VERSION

8 LINKS: Design system: link to the design system Customer Support Dashboard Prototype (Desktop): link here Customer Support Dashboard Prototype (mobile): link here Showcase Application Prototype (Desktop): link here Showcase Application Prototype (mobile): link here

9 BACKGROUND Chino.io is a startup that developed a database-as-a-service that ensures EU/ GDPR & HIPAA compliance. They mainly work with health businesses but also with telco companies such as TIM (Italian Telecom) and BT (British Telecom) EU and US Data Protection laws and Security standards Endless list of sources of requirements constantly evolving. October now UX & UI Consultant for Chino.io CHINO.IO MY ROLE Analyzed triggers that can catch the attention of CEOs when we are talking about compliance; Designed the new homepage and technology pages able to explain complex concepts such as GDPR and give a sense of trust; Developed the new iconography and illustration style (axonometric illustration). Requirements Nullam id dolor id nibh ultricies vehicula ut id elit. DO IT BY YOURSELF You can do it by yourself and facing risks and costs. our solution

EXAMPLES OF PERSONAS BASED ON THEIR ROLES PERSONA 1 PERSONA 2 SECTIONS & ARGUMENTS For every section of the homepage, we defined the primary

For example, in the first part of the homepage there is a banner that says: -150 days to GDPR. Are you ready? - check more.

NAME: Martin Aren AGE: 30 years-old ROLE: CEO of PHARMA APP OBJECTIVES: He s aware of the problems generated by GDPR but he doesn t know how to

He doesn t want to spent tons of money and time in solving the compliance issue. He s looking for a trusted partner.

10 EXAMPLES OF PERSONAS BASED ON THEIR ROLES PERSONA 1 PERSONA 2 SECTIONS & ARGUMENTS For every section of the homepage, we defined the primary argument associated that and the main emotional trigger that we should use to grab the visitor s attention. For example, in the first part of the homepage there is a banner that says: -150 days to GDPR. Are you ready? - check more. It uses the trigger of the fear. NAME: Martin Aren AGE: 30 years-old ROLE: CEO of PHARMA APP OBJECTIVES: He s aware of the problems generated by GDPR but he doesn t know how to solve them in an efficient way. He would like to understand laws more in deep. He doesn t want to spent tons of money and time in solving the compliance issue. He s looking for a trusted partner. TRIGGERS: fear, knowledge, trust. NAME: Donald Regan AGE: 26 years-old ROLE: CTO/DEV since 2010; OBJECTIVES: He s not interesting in understanding GDPR and other laws. He is looking for a solution to solve compliance issues in an efficient way. Developing on his favorite framework. Avoid deep code writing TRIGGERS: easy-to-use solution, no need to learn another programming language or facebook, no-need-to-updates solution.

WIREFRAMED ILLUSTRATIONS We developed a wireframe to

Firstly the illustration style was flat, inspired by

The copywriting was improved several times to meet users

ILLUSTRATION - SOME AXONOMETRIC ILLUSTRATIONS INSPIRED

MONUMENT VALLEY Then, inspired by the blockbuster video

11 WIREFRAMED ILLUSTRATIONS We developed a wireframe to test it with new and old customers. Firstly the illustration style was flat, inspired by Google s one. The copywriting was improved several times to meet users feedbacks WIREFRAME EXAMPLE ILLUSTRATION - FIRST STYLE ILLUSTRATION - SOME AXONOMETRIC ILLUSTRATIONS INSPIRED BY MONUMENT VALLEY Scanned by CamScanner ILLUSTRATION - MONUMENT VALLEY Then, inspired by the blockbuster video game Monument Valley we ve tried to achieve a more three-dimensional illustration style. I must admit that it was a big challenge for me (I m not an illustrator). Anyway, the results seem to be catchy and visitors appreciate the new style.

12 LINKS: Website: link here

BACKGROUND PMT is a responsive web-app that helps physicians to get access and manage their schedule. It was developed by PMTKP for Kaiser Permanente, an important private hospital chain in the US.

with Formstack; Designed the schedule builder that helps physicians to build their schedule on a mobile device based on the standard stepper (Angular Material Design Template); Developed a clickable

13 BACKGROUND PMT is a responsive web-app that helps physicians to get access and manage their schedule. It was developed by PMTKP for Kaiser Permanente, an important private hospital chain in the US. June October 2017 UX & UI Consultant for Physician Mobile Technologies MY ROLE Developed user stories to define and approve features together with the client; Designed a clickable prototype with Formstack; Designed the schedule builder that helps physicians to build their schedule on a mobile device based on the standard stepper (Angular Material Design Template); Developed a clickable prototype of the UI with Invision; Designed the user-test session to test prototypes with different subjects; Successfully improved the physician experience by simplifying the schedule creation method. PMTKP.COM

14 WEEKEND CALL Developed user stories to define and approve features together with the client Physician were used to plan their schedule via and send it to the hospital officer for approval. Thanks to PMT the process became smoother, it saves time to both parties. We developed user stories based on the template that they were used to use. FROM TEMPLATE TO USER STORIES Physician were used to plan their schedule via and send it to the hospital officer for approval. Thanks to PMT the process became smoother, it saves time to both parties. We developed user stories based on the template that they were used to use. USER STORIES EXAMPLES User Story #1 As a user I'd like to have a way to send my monthly scheduling to the scheduler so that I ll not losing my time with s; STEP1 (mandatory) User Story #2 As a user I'd like to define the month that the schedule refers to so that I can plan it for month that are ahead. User Story #3 As a user I'd like to have a way to discard the operation STEP2 (optional) User Story #4 As a user I'd like to define my vacation days for the coming month(s) so that I can plan trips and communicate efficiently with the scheduler QUICK N DIRTY PROTOTYPE We developed a quick n dirty prototype as the one here below. Then, we ve used Formstack to create a clickable prototype and to test the flow. FORMSTACK STEP_1 Name Last Name STEP_2 Vacations If you don't need any vacation day skip this section and move to the next section Day #1 Day #2 need more days? SKIP STEP_3 EDUCATION LEAVES REQUESTS If you don't need any education leave day skip this section and move to the next section STEP_3 SKIP EDUCATION LEAVES REQUESTS If you don't need any education leave day skip this section and move to the next section Activity #1 name Activity #1 description EDUCATION LEAVE #1* - DATE AM/PM? NATIVE STEP_1 Name Last Name STEP_2 Vacations If you don't need any vacation day skip this section and move to the next section Day #1 add more vacation days SKIP we already know his name since he s logged in the app. Should we ask something to users here? select month for example? do we need to create an archive of all the scheduler sent to the office? Move the skip button at the top of the page (if user will start to fill the form label will be updated to next. Add more vacation days will add a new field at the bottom of day #1 Move the skip button at the top of the page (if user will start to fill the form label will be updated to next. Add more EDUCATION LEAVES REQUESTs) will add a new field at the bottom of activity #1 STEP_4 PREFERRED CALL NIGHTS If you don't need any education leave day skip this section and move to the next section Select #1 CN Select #2 CN MORE PREFERRED CALL NIGHTS NO MANDATORY Select #3 CN Select #4 CN Select #5 CN NEXT STEP_5 WEEKEND CALL Select the Weekend you prefer to take call in January 2018* Select WE call NEXT STEP_5 WEEKEND CALL Select the Weekend you prefer to take call in January 2018* Select WE call STEP_6 COMP-TIME PREFERRED Select the Weekend you prefer to take call in January 2018* Is COMP-TIME preferred?* Congratulation NEXT Save & Submit Move the next button at the top of the page (it will be disabled till the user will have filled the mandatory fields) Move the next button at the top of the page (it will be disabled till the user will have filled the mandatory fields) Activity #1 name STEP_5

15 Developed a clickable prototype of the UI with Invision link to the prototype

16 Designed the user-test session to test the prototype with different subjects; I designed the user-test performed on subjects at the hospital. here some questions; Good morning, Imagine that you re Tania, a physician from your hospital: today is the last day to present her monthly schedule for November Take a look to our new app and go to your profile page: 2- Start the process to create your monthly schedule: you re just in time to submit the November schedule! 3- You need to setup a vacation request for November 1st; Please follow the instructions on the wizard! FEEDBACKS Information is exposed in the right way. Creating the scheduler on the app takes 4 minutes less (on average) than using s. Errors decreased by 30 % (on average); 4- It s time to fill the Call Backups section: You ll not be available for Calls on November 15th;

Successfully improved the physician experience by simplifying the schedule creation method. In the first three months of test, the use of the app was not mandatory: it was used by 48% of physicians.

17 Successfully improved the physician experience by simplifying the schedule creation method. In the first three months of test, the use of the app was not mandatory: it was used by 48% of physicians. Feedbacks were all positives from both parties (hospital staff and physicians) and the number of s to create schedules decreased by 62%. We are now gathering feedbacks from 100% of hospital staff since the app is mandatory to accomplish this task. ADOPTION RATE DURING THE TEST RELEASE 48% OF PHYSI- CIANS USED THE APP (EVEN IF IT WAS NOT MANDATORY); DATA ABOUT USAGE -62% S SENT TO HOSPITAL STAFF AND PHYSICIANS TO CREATE SCHEDULES

18 LINKS: Prototype: link here User test tasks: link here

19 BACKGROUND Moderated the design sprint for Infonido.com, the most used Kindergarten management platform in Italy. As UX Designer I had been involved in the redesign of the Android tablet and smartphone application used by teachers to track the children s daily activities. We ve based UI on Google Material Design System. April May 2017 Design Sprint Moderator and UX Consultant INFONIDO.COM MY ROLE Prepared and moderated the design sprint; Involved real users and the customer care team to gather needs and requirements; Conducted user tests on the old application to find usability problems Developed a clickable prototype based on insights arisen during the sprint Planned the user-test session to test prototypes with three different groups of subjects; Reviewed the user-test session; Successfully designed the new UX of the app with increment of the task completion rate by +300%; Designed the interface compliant with Google Material Design Guidelines.

20 What s a Design Sprint? The sprint is Google Ventures s unique five-day process for answering crucial questions through prototyping and testing ideas JAKE KNAPP

Design Sprint - DAY 1 Design Sprint - DAY 2 During day one we ve created the map of the experience on the old app and decided what should be the focus of our attention during the sprint.

21 Design Sprint - DAY 1 Design Sprint - DAY 2 During day one we ve created the map of the experience on the old app and decided what should be the focus of our attention during the sprint. We invited two teachers and the head of customer support department to join the sprint to have real experts on board. Day two started with inspiration: a review of existing ideas, from apps and websites, to remix and improve the experience on our application. During the afternoon each person sketched his ideas of interaction. SOME OF OUR SKETCHES MAP OF INTERACTION

22 Design Sprint - DAY 3 Design Sprint - DAY 4 In the morning each solution from day two was analyzed and voted. The most accepted was used as starting point to build a storyboard. ONE OF OUR STORYBOARDS On day four I ve spent the entire day to transform storyboards into the prototype to test our ideas.

23 Design Sprint - DAY 5 Results - Group 1 We tested our ideas and reviewed them. Here some info about the test SUBJECTS We tested the app on five subjects from 3 different groups GROUP 1: two subjects that are not working as teachers and never used Infoasilo before GROUP 2: two teachers that never used Infoasilo before Subject 1 Subject 2 GROUP 3: one teacher that is using Infoasilo in her daily routine THE EXPERIMENT New App Old App New App Old App Complete seven different tasks with the app; For the first two groups we tested the new app before and the old app later; For the teacher that already used Infonido we tested the old app before and the new design later Task Completed 7 tasks (100%) 1 task ( 14%) 7 tasks (100%) 4 tasks ( 56%) METRICS % of completed tasks Time to complete each task Time 7:55min Abandoned after 5mins 9:12min Abandoned after 7 mins Time to complete the experiment

24 Results - Group 2 Results - Group 3 Subject 31 Subject 24 Subject 5 New App Old App New App Old App New App Old App Task Completed 7 tasks (100%) 31 tasks ( 14%) 7 tasks (100%) 45 tasks ( 56%) (70%) Task Completed 7 tasks (100%) 7 tasks (100%) Time 7:11min 7:55min Abandoned after 5mins 6mins 9:12min 6:20min Abandoned after 79 mins Time 4:37min 5:15min (+13%)

25 FINAL ANALYSIS LINKS Prototype: link here +300% COMPLETION RATE; -15% OVERALL TIME TO COMPLETE TASKS

com selection challenge TOPTAL.COM PROJECT BRIEF with the rise of the internet and the growth of mobile devices how, where and when people work has shifted.

26 BACKGROUND The Toptal.com 8-hours selection challenge is the last step of this platform selection process. As required, in only 8 hours I ve developed a User Experience project for a data-visualization dashboard called MindBrain (a fancy name) April 2017 UX Designer for the Toptal.com selection challenge TOPTAL.COM PROJECT BRIEF with the rise of the internet and the growth of mobile devices how, where and when people work has shifted. We are living an information-driven work environment with lines between work and home becoming more and more blurred. In this scenario, forward-thinking companies are integrating into the work routine mindfulness exercises to improve the quality of life of their employees on one side and the quality of their work on the other. MY ROLE Developed a complete design document in only 8 hours Developed personas and scenarios; Developed User stories based on personas and scenarios; Developed storyboards that satisfy user stories; Created a clickable prototype to showcase the project after the challenge; Successfully met the requirements to get access to Toptal.com

EXAMPLES OF PERSONAS & SCENARIOS EXAMPLES OF USER STORIES BASED ON PERSONA 1 PERSONA 1 PERSONA 2 USER STORY 1 As an HR Manager I would like to use my company e-mail and password as credentials to

27 EXAMPLES OF PERSONAS & SCENARIOS EXAMPLES OF USER STORIES BASED ON PERSONA 1 PERSONA 1 PERSONA 2 USER STORY 1 As an HR Manager I would like to use my company and password as credentials to login in Mindful Minute so that I do not need to remember another password or . INSIGHTS As an HR Manager I would like to have a way to recover my credentials if I ll forget them. USER STORY 2 As an HR Manager I would like to manage and organize teams in order to reflect real life, so that the organisation in Mindful Minute will reflect the company hierarchy in the real world USER STORY 3 INSIGHTS As an HR Manager I would to create, delete and reorganize teams based on mine and company needs INSIGHTS As an HR Manager I would like to send an automatic notification to the employee As an HR Manager I m a busy person. I would like to have a system that helps NAME: Marina Yankee AGE: 36 years-old NAME: James Burn AGE: 40 years-old that I ve just added to Mindful Minute so that she ll be able to start her Mindfulness program as soon as possible (and I ll save a lot of time). me saving time so that I can optimize my performances. ROLE: HR Manager since 2015; ROLE: HR Manager since 2010; OBJECTIVES: Add new teams and employees to Mindful Minute; OBJECTIVES: Check the sleep quality of a team and take action if problems SCENARIO: NYInsurance just hired Mark Newton, a new Sales Team are discovered; Manager. Marina as HR Manager need to add Mark to Mindful Minute She SCENARIO: James need to check the keep track of the sleep quality of a team: gets access to our system with her company and password. She creates a he has noticed that some team members seemed more tired than usual. He team and add Mark to it (other employees profiles will be added in the future adds team s sleep quality graph to his dashboard: there are some critical values. as hired). The system sends an notification to Mark Newton and welco- He compares this values with the company s one. The system give an automa- me him to Minduful Minute. In less than one minute Marina is able to create a tic hint: Hey James, it s time to a assign a Mindfulness program to improve new team and add a member to it. the sleep quality of the team. Would you like to assign the the excerxice? YES, assign / Cancel. James decides to assign the program to the team.

28 EXAMPLE OF STORYBOARD BASED ON SCENARIO #1 PART 1/13 NYInsurance just hired Mark Newton, a new Sales Team Manager. As an HR Manager Marina needs to add Mark to Mindful Minute. She is ready to login. RELATED STORY Story #1 PART 3/13 Once logged she lands on the dashboard session: On the top left corner she finds the application s logo; On the left side of the screen there is a menu to navigate across different sessions of the app; On the top right corner there are a profile picture of Marina and her profile name; Her dashboard is still empty and an infographic invite her to add statistics to it. PART 2/13 She gets access to our system with her company and password PART 4/13 She needs to add a team. She reaches the teams section by clicking on the left menu. RELATED STORY Story #2

29 LINKS: WIreframe Prototype: link here UX Document: link here

30 OTHER IMPORTANT PROJECTS

SOME SCREENSHOTS AND INFORMATION I founded Narrami

(ios, Android app, and web management dashboard)

A SCREENSHOT OF THE FRONT-END WEBSITE 2017 A

31 SOME SCREENSHOTS AND INFORMATION I founded Narrami with other two friends: It s a cultural platform (ios, Android app, and web management dashboard) that allows institutions to build their interactive guides without the aid of developers. We ll launch it in the next months. A SCREENSHOT OF THE FRONT-END WEBSITE 2017 A USERFLOW OF THE ANDROID APPLICATION Co-founder, UX & UI Designer of Narrami.com NARRAMI.COM

32 SOME SCREENSHOTS OF THE IOS APPLICATION WEB APP TO PUBLISH STORIES ON APPLICATIONS ICONS ON THE TABBAR OF THE ANDROID APP STYLEGUIDE OF THE IOS APPLICATION

SOME SCREENSHOTS AND INFORMATION Led the redesign of endorser.me (previously promover.

profiles. POST UI interface SOME SKETCHES 2016 UX & UI Designer for Endorser.

ME Featured on Product Hunt: STORIES As Social media marketer I d like to: write my

me; copy and paste a post body from my favourite text editor so that I can write it

33 SOME SCREENSHOTS AND INFORMATION Led the redesign of endorser.me (previously promover.me), a platform that allows social media marketer to share their posts on friends profiles. POST UI interface SOME SKETCHES 2016 UX & UI Designer for Endorser.me ENDORSER.ME Featured on Product Hunt: STORIES As Social media marketer I d like to: write my post directly on Endorser.me; copy and paste a post body from my favourite text editor so that I can write it offline; enter a precise website s link in order to connect directly; customize the link title, description and caption to test different ones on my audience; retrieve images from my website in order to save time or upload images from my computer;

34 ON-BOARDING USER-FLOW ON-BOARDING PART 1

35 ON-BOARDING PART 2 ON-BOARDING PART 3

36 ON-BOARDING PART 4 PROFILE VIEW

37 THANKS FOR THE ATTENTION MORE INFO ON: PINKSTRATDESIGN.COM

One of the fundamental kinds of websites that SharePoint 2010 allows

One of the fundamental kinds of websites that SharePoint 2010 allows Chapter 1 Getting to Know Your Team Site In This Chapter Requesting a new team site and opening it in the browser Participating in a team site Changing your team site s home page One of the fundamental