UX/UI/IA Design - portfolio May Maxime Renaudin. Jr UX Designer

Transcription

1 UX/UI/IA Design - portfolio May 2014 Maxime Renaudin Jr UX Designer

2 Maxime Renaudin Jr UX Designer Understanding users to take design decisions that satisfy their needs. 2 years of experience Publicis for Calor.fr - Freelance 02/14 User Research : Guerilla Research Design : Sketchs + Wireframes + Mockups LeLaptop.fr Website V2 - University Project < / > User Research : Data Analysis + User Interview Ideation : Service Blueprint + Persona + Storyboards Design : Sketchs + Wireframes + Mockups AirFrance.com - Apprenticeship User Research : Analytics + Tests Ideation : Service Blueprint + Persona + Storyboards Design : Sketchs + Wireframes + Mockups + Prototypes Test : Usability + A/B & MVT La Poste Innovation - Apprenticeship Ideation : Moodboards + Persona + Storyboards Design : Sketchs + Wireframes + Mockups + Prototypes Developpement : PHP, Sass, HTML5, JavaScript, Wordpress 08/13 - Now 08/12-09/ rue de Crimée Paris hi@maximerenaudin.fr +33(0) Education Master Cultures & Metiers du Web Université Paris-Est 08/12-09/14 UX Design, Ergonomics, Project Management, Web Science, Web Development Research Paper : Internet des Objets : Les enjeux d un développement durable, éthique et acceptable International Media & Communication Studies Media Analysis, Media Ethics, Media Policy & Regulation Uppsala University (Sweden) 08/11-01/12 Bachelor in Information & Communication Université Rennes 2 08/ /2012 Web Development, Cultural Studies, Internal & External Communication Interests Visual Design Trends, Cutting Edge Technologies, Internet Of Things, Wearable Techs, Arduino More activites Volunteered at Intersection (Strategic Enterprise Design Conf) Music, Cinema

3 Projects I ve worked on

4 Calor : Landing page Responsive, Brand Experience, Time restrained Business requirement: We would like to create a playful and ergonomic webpage to present as best as possible the pain-relieving technology of both products. Methodology Quick and dirty guerilla research Sketch Wireframe Design of a playful and fact based landing page for a new product.

5 Calor : Landing page Responsive, Brand Experience, Time restrained

6 Tablet App - Air France User Experience, Research, Ideation Business requirement: As our audience changes and switches devices, we need to understand what our users do on our website and adapt our future digital services to match these behaviors. Used all data available throughout the company to design a new user-centered tablet app by using a truly user-centered approach composed of creative workshop and iterative processes.

7 Tablet - Air France User Experience, Research, Ideation User Journey Map v1.0 UX Team - Air France BEFOREHAND USING THE SERVICE AFTER USE STEPS Notice, understand, be triggered. Decide to use, first use, further use, help with problems. Building relationships, stimulating re-use, end of use. NEED What does the user want? Want to buy a return flight. Search for flights Compare Select and pay Check-in Recovery Wants either to leave at precise Wants to be offered best fares Wants the payment Wants to be sure he/she dates & hours, to be offered the and to be able to find it back process to be hassle will get onboard and get best price, to be assured the flight when the decision is made free and seamless info about place and time will leave, to spend hard-won miles of onboarding SERVICE PROVISION USERS ACTIVITIES What does the user do? TOUCH POINT How does the user come in contact with the service? ANSWERS How are the demands of the user answered? (What does the employee do? What does the website do? Etc.) Google search with O&D Search for AirFrance website on google Search for flights knowing O&D and approx. dates EBT Search for flights knowing desired regions and season Search for flights for an UM Compare dates and time of the day Compare with other airline Choose meal Select and pay flights Select and pay Miles paid flights Choose seats Choose meal Check-in and get boarding pass Inform on who collects Uncheck and modify ABT PROMO EBT MMB ICI Entertainment Recovery MMB UM H-30 Push ICI Auto CI Info Entertainment and AFPress Declare a lost luggage Check progress of process Inform about luggage recovery and info about pick-up AF Persona Sara, the pragmatic Anna, the efficient Jack, the hedonist Tom, the ambitious Alice, Care-for-me Marie, the price-driven Price & Hours Hours Price Miles UM & Ease Price

8 Page Redesign - Air France User Experience, Responsive Business requirement: When users open an on their smartphone and click on a link, they are redirected toward a static page. We need a responsive template for our content pages. Sketch Wireframe

9 Laptop V2 - Le Laptop User Experience, UI Design, Front-End Dev Business requirement: We want our new website to guide our growth and the website is the center of The Laptop s growing community. Methodology Research User Experience Design Front-end Developpement < / > Analyzed data gathered by Pauline Thomas when she created The Laptop Created an experience tailored for Freelance professionnal in need of a community to find help, support and new opportunities Designed and developped a responsive Wordpress theme based on Bones bare theme.

10 Laptop V2 - Le Laptop User Experience, UI Design, Front-End Dev Scénario utilisateur v1 Persona : Mimi résidente Éric nomade Pierre membre Léo agence Discover Engage & Search Use Inform LeLaptop.com accès direct au site Moteur de recherche Sur la homepage,un encart news annonce un nouvel atelier. A: 1 Découvre la nouvelle rubrique atelier sur le site. Reçoit une notification d un nouveau projet pouvant l intéresser / fait une recherche de projet. Sur lab.lelaptop.com il découvre le service, voit des projets et des membres ayant participés. Peut faire une recherche pour comparer. Fait une recherche sur le site pour trouvé l atelier dont il a entendu parler. S informe sur le projet proposé et décide d y postuler. Fait une recherche Atelier Ruby on Rails Paris et tombe sur l annonce de l atelier sur le site du Laptop. Crée un projet sur la page du lab. Se crée un compte et complète la fiche projet. Sur la page de l atelier, il découvre le prix, l heure et la date de l atelier. Il s inscrit et paye. A2 : Propose un atelier et une date et est informé qu elle devra être validée. (Thomas valide / propose une autre date) Une fois validé, l atelier est publié. Décide de répondre à l appel d offre au nom du Laptop, sa réponse doit être validée avant d être soumise. Notify La deadline de dépôt est terminée, il télécharge les réponses et les lit. Une fois son choix fait, il en informe l UX Designer remportant l appel pour lancer le projet. On l informe qu il peut télécharger les documents qui lui on été présenté lors de l atelier. Il choisi de déposer les docs de son atelier (aux participants ou aux membres du Laptop). Si sa réponse a été validée il recoit une réponse de porteur d offre, sinon, il reçoit une réponse du Laptop qui lui propose de répondre en son nom propre. Organiser un atelier au Laptop Mimi : membre résidente Le Laptop - lieu physique Environnement, membres, bouche-à-oreille En se rendant au Laptop, il voit une affiche annonçant un nouvel atelier qui l interesse. B1 : Découvre la nouvelle possibilité d organiser un atelier par un flyer se trouvant au Laptop. Demande à quelqu un s il connait un UX Designer pour son projet, on lui donne la page du Lab. On l informe d un nouvel atelier / projet qui pourrait l interesser. B2 : Va voir Thomas au Laptop pour proposer son idée d atelier. (Thomas valide en direct) B3 : Un date est proposé et Thomas s occupe d organiser l atelier et de mettre en ligne l annonce. 1. Mimi découvre en arrivant ce matin qu un le nouveau service d atelier commence dès aujourd hui. Ayant des compétences qu elle veut faire partager, elle décide de se lancer. Partage sur ses réseaux, l atelier qu il organise. Il partage sur ses réseaux l atelier auquel il participe. 2. Elle va voir Thomas pour lui proposer son idée d atelier. Il trouve que c est une bonne idée et lui propose une date qu elle accepte. 3. Thomas se charge de mettre en ligne l offre d atelier en indiquant que Mimi est l organisatrice et l animatrice. 4. Mimi partage l atelier qu elle animera sur les réseaux sociaux pour s assurer d avoir le nombre minimal de participants. 5. Lors de son atelier, Mimi peut compter sur l équipe du Laptop pour l accompagner. 6. Après l atelier, Mimi met en ligne les documents de présentation qu elle a utilisé lors de son atelier.

11 Laptop V2 - Le Laptop User Experience, UI Design, Front-End Dev Le Laptop Lab Communauté Blog Photo Rechercher TITRE & PRÉSENTATION Entrez un titre et une brève description de votre projet. Entrez un titre Ajoutez des images qui définisse votre projet. Supprimer Entrez une brève description 80 caractères max. AJOUTER UNE IMAGE Logo d agence photo porteur DESCRIPTIF Entrez un descriptif du contexte de l appel d offre, de l entreprise cliente, du projet et du secteur d activité dans lequel celui-ci se place. Décrivez ce que vous attendez de la proposition que l équipe vous fera. Ceci permettra aux membres et à l équipe Laptop de mieux comprendre votre projet Compétences requises : Entrez une compétence Ajouter une deadline Entrez votre descriptif Entrez votre descriptif Ajouter un site web 410 caractères max. 410 caractères max. Ajouter un descriptif Ajoutez un tag VALIDER Ajouter une competence DOCUMENTS UTILES Ajoutez des fichiers qui définisse votre projet. AJOUTER UN FICHIER FINALISATION APERCU ENVOYER Documents utiles Budget 00,00 TAG Répondre

12 LastFM Uninvited Redesign User Experience, UI Design Current Android LastFm app Redesign concept for LastFM Android App

13 References Pauline Thomas, UX Adobe & Founder of The Laptop op.thoms@mac.com Alicia Bogouslavsky, UX Air France albogouslavsky@airfrance.fr Rodolphe Bary, UX La Poste rodolphe.bary@laposte.fr

14 Thank you! maximerenaudin.fr