UX DESIGN PROJECTS GABRIELLA BELLO PORTFOLIO

Transcripción

2 UX DESIGN PROCESS Strategy, Planning and Implementation WHO FOR? USER-CENTRED DESIGN PROCESS I am motived by being part of interactive projects that give a useful, fun and life-enhancing experience to users across platforms. I celebrate the ever-growing amount of user input that projects have to take into account. I embrace work that empowers people; I am happy when I know the projects I am involved with trigger new experiences or knowledge. My objective at all times is to deliver work that is solid in its concept as well as its functionality. My aim is to provide users a clear way to navigate a product to complete tasks smoothly. Each product can be seen as a how to guide for users, that communicates with visual and content-consistent hierarchies, implements creative, interesting and easy-to-scan copywriting strategy and create an engaging and trustworthy experience. Thank you for visiting! Let me know what you think. MULTI-PLATFORM EXPERIENCE CONTENT CREDIBLE CONNECTED SOCIAL 01. LEARN Understanding the brief, collecting requirements and identifying target users, user tasks and client goals: Planning: understand clients goals and existing issues. Research and analysis: qualitative and quantitative research, define target users and tasks through interviews and data analysis. Project requirements: assemble technical (IT) resources and restrictions, content strategy, art direction and other documentation from project owners and other members of the team. 02. DESIGN AND BUILD Developing concepts and ideas: Heuristic and cognitive evaluation: accessibility, analytical and emotional assessment of a product (and competitors benchmark). Information architecture: define hierarchies, organisation scheme, descriptive content labelling. Outline user journeys: mental models, scenarios, tasks completion. Sketch and design solutions: apply concepts, navigation schemes and information hierarchy that responds to user goals and product strategy. Functionality: develop prototypes to test interaction. Parallel developments: agile, multidisciplinary team work. 03. TEST, UPDATE AND PUBLISH Comprehensive project evaluation and deployment: Organise users and stakeholders workshops to test UX and validate solutions and scope. Integrate test results: consolidate UX, visual design and development. Prepare for production and deployment. 04. DATA MONITORING Observe, monitor and collect data: Through analytics tools monitor performance and organise for additional usability testing, develop a report to indicate further improvement opportunities if necessary. MOBILE RESPONSIVE ACCESSIBLE

3 CLIENT: THE MINI AGENCY PROJECT: Website ROLE: User Experience and Visual Designer AGENCY: Freelance assignment, London / NY PROJECT DESCRIPTION The task was to create a fresh and friendly website that explains to the novice promoter how crowdfunding works and also to support experts and entrepreneurs in their ongoing campaigns. I guided the client through the research and analysis of tasks, personas and scenarios. The results of interviews, current clients and existing data helped us defined the main target users principal goals and designed solutions. I studied the scope of the project and business goals, validated the technical requirements, content strategy and organised the architecture information to be included on the site. I designed the research strategy and testing guidelines. I integrated the test results, adjusted visual design accordingly and prepared the files for production.

4 CLIENT: THE MINI AGENCY PROJECT: Website ROLE: User Experience and Visual Designer AGENCY: Freelance assignment, London / NY HOME PAGE

5 CLIENT: THE MINI AGENCY PROJECT: Website ROLE: User Experience and Visual Designer AGENCY: Freelance assignment, London / NY SUCCESS STORIES

6 CLIENT: THE MINI AGENCY PROJECT: Website ROLE: User Experience and Visual Designer AGENCY: Freelance assignment, London / NY ABOUT

7 CLIENT: SUGARY DRINK MIX PROJECT: Responsive Site ROLE: User Experience Designer AGENCY: BD Network London PROJECT DESCRIPTION The brand was preparing to re-design its website to reflect the launch of a new packaging and marketing campaign, basing its digital strategy on the fun personality of the brand and the characters it uses in its advertising. The main objective of the new site was to inform visitors about the benefits of the products and preparation methods, to signal specific stocking information, to answer questions about the products and extend a friendly hand to parents through fun educational activities they could print out for their children. I formed part of the digital team and contributed to the development of a clear UX design path to follow on all screens and sections, designed to be responsive and adjust the hierarchy to prioritise relevant content specifications, taking into account preparation methods, product information, the presence of the characters and educational activities. I prepared the files to present for client approval, production and deployment.

8 CLIENT: SUGARY DRINK MIX PROJECT: Responsive Site ROLE: User Experience Designer AGENCY: BD Network London 01. HOME PAGE Inc. cookie and browser and prompt. Links to the four main sections: products, activities, brand characters and where to buy. COOKIE POLICY We are using cookies to give you the best experience on our site. Cookies are files stored in your browser and are used by most websites to help personalise your web experience. By continuing to use our website without changing the settings, you are agreeing to our use of cookies. WHERE TO BUY WHERE TO BUY PRODUCTS Drink mix flavours BRAND TIME Activities BRAND Characters PRODUCTS Drink mix flavours BRAND TIME Activities BRAND Characters ANIMATION MIXING PRODUCT ANIMATION MIXING PRODUCT Character animation Character animation TIME Activities Character animation Copyright 2014 Terms & Conditions Cookie and Privacy policy FAQ Contact us BRAND TIME Activities RESPONSIVE Terms & Conditions Cookie and Privacy policy FAQ Contact us Copyright 2014

9 Drink mix flavours Activities Copyright 2014 Terms & Conditions Cookie and Privacy policy FAQ Contact us Characters WHERE TO BUY CLIENT: SUGARY DRINK MIX PROJECT: Responsive Site ROLE: User Experience Designer AGENCY: BD Network London 02. PRODUCTS PAGE Inc. product details, flavours, ingredients, how to make it and nutritional information. PRODUCTS BRAND TIME BRAND WHERE TO BUY Makes 20 drinks ANIMATION MIXING PRODUCT PRODUCTS Drink mix flavours PRODUCTS Drink mix flavours BRAND TIME Activities BRAND Characters Character animation ANIMATION MIXING PRODUCT PRODUCTS Drink mix flavours 500ml Character animation STRAWBERRY Character animation Instructions 25ml mix + 175ml milk Lorem ipsum dolor sit amet, consectetur adipisi cing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. No artificial colours or flavours INGREDIENTS 500ml Makes 20 drinks Instructions 25ml mix + 175ml milk STRAWBERRY Water, Sugar, Fat Reduced Cocoa Powder (3.5%), Acid (Lactic Acid), Acidity Regulator (Tri Sodium Citrate), Preservative (Potassium Sorbate), Stabiliser (Xanthan Gum) Suitable / Not suitable for vegetarians INGREDIENTS NUTRITIONAL INFORMATION Per serving = 25ml Brand syrup and 175ml semi-skimmed milk Energy KJ 462KJ kcal (calories) 109kcal Protein 6g Carbohydrate 15g of which sugars 14g Fat 3g of which saturates 2g Fibre 0g Sodium 0.8g equivalent of salt 0.21g Character animation Lorem ipsum dolor sit amet, consectetur adipisi cing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. No artificial colours or flavours Makes 20 drinks Character animation INGREDIENTS Per serving = 25ml Brand syrup and 175ml semi-skimmed milk Energy kcal (calories) Protein Carbohydrate Fat Fibre KJ 462KJ 109kcal 6g 15g of which sugars 14g 3g of which saturates 2g 0g Sodium 0.8g equivalent of salt 0.21g 500ml RESPONSIVE Terms & Conditions Cookie and Privacy policy FAQ Contact us Copyright 2014

10 CLIENT: NESTLÉ DESSERTS PROJECT: Mobile app ROLE: IA/UX design lead and strategy AGENCY: Wikot PROJECT DESCRIPTION A new mobile app was part of the ongoing digital strategy of the brand and its products and was developed to accompany the launch of a new website and social media channels. The application responds to the desire to be connected and have easy access to dessert recipes when presented with shopping opportunities or when a special occasion arises. I participated in the development of an application that allows users to carry a whole catalogue of dessert recipes with them. The app suggests ideas, seasonality and creations by expert chefs and filters recipes by ingredients. It incorporates information on the benefits of the brand s products, cooking tips, ingredients and nutritional information. There are practical and organisational functionalities for recipe preparation: a timer, unit converter, shopping list, record of recipes prepared and favourites, ratings and sharing options.

11 CLIENT: NESTLÉ DESSERTS PROJECT: Mobile app ROLE: IA/UX design lead and strategy AGENCY: Wikot MOBILE APP 1. Home 2. Recipe detail 3. Recipe ingredients 4. Recipe preparation 5. Search 6. List of recipes per category 7. Lists admin 8. Other tools: Timer, Unit conversor, Shopping list MOBILE APP gabriellabello/en behance/cvgb

12 CLIENT: B.O.D WESTERN DISCOUNT BANK PROJECT: Virtual Gallery Facebook App ROLE: IA/UX design lead and strategy AGENCY: Wikot PROJECT DESCRIPTION The BOD Bank approached the agency wanting to update its first version of the art gallery. This project represents one of the Bank s most important non-profit cultural and communication initiatives. The main objective was to create a fun cultural experience for a nationwide audience. We designed a new UxD where visitors could navigate through the Virtual Gallery easily and find a favourite artist by name or title, browse the gallery or opt to see the artworks within a category. Visitors were also invited/encouraged to vote and share their favourite artwork in order to promote community values: Respect, Solidarity, Equality and Dignity. The works of more than 200 Venezuelan artists were selected for the exhibition at the Virtual Art Gallery hosted on the Bank s Facebook page. During the three-month initiative the strategy and UCD developed increased the B.O.D Virtual Art Gallery increased national brand awareness, engaged 59.3% of returning visitors and gained a 37,8% increase in followers on social networks.

13 CLIENT: B.O.D WESTERN DISCOUNT BANK PROJECT: Virtual Gallery Facebook App ROLE: IA/UX design lead and strategy AGENCY: Wikot USER JOURNEY / ARTIST ENTRY / REGISTRATION PAGE Countdown Share Online media FB page Twitter HOME APP START Registered Facebook User? Open for Submitted entries? proposal? Confirmation screen Processing Aproved Not selected Facebook Register Rules of entry / T&C Submit other artwork? Complete submission Form Data base notifications Valid artist details and proposal? Action Decision Upload confirmation End user action Save and upload proposal Wikot Registered user Agency s approval? Client s approval? Registered user FACEBOOK APP Registered user

14 CLIENT: B.O.D WESTERN DISCOUNT BANK PROJECT: Virtual Gallery Facebook App ROLE: IA/UX design lead and strategy AGENCY: Wikot USER JOURNEY / PUBLIC VOTE Online media FB page Twitter HOME APP Registered Facebook User? Like page Allow to vote? Countdown Share Data base notifications Action Facebook Register Visit Virtual Gallery See proposals Like Share Twitter Decision End user action One vote per day Vote Share FACEBOOK APP

15 CLIENT: B.O.D WESTERN DISCOUNT BANK PROJECT: Virtual Gallery Facebook App ROLE: IA/UX design lead and strategy AGENCY: Wikot USER JOURNEY / SELECTED ARTISTS PRIVATE VOTE Notification nonselected participants Notification selected participants Invite to vote for selected participants Facebook APP APP HOME Pre-selected User Register Vote Register Vote Register Vote Selected artwork Value Dignity Selected artwork Value Equality Selected artwork Value Respect Selected artwork Value Solidarity Data base notifications Confirm selection? Confirm selection? Confirm selection? Confirm selection? Action Decision End user action Register Vote Confirm votes FACEBOOK APP

16 CLIENT: B.O.D WESTERN DISCOUNT BANK PROJECT: Virtual Gallery Facebook App ROLE: IA/UX design lead and strategy AGENCY: Wikot ARTIST ENTRY: UPLOAD ARTWORK PAGE User Name Home User Name Home lorem ipsum lorem ipsum Me Gusta lorem ipsum lorem ipsum Me Gusta Inicio Inicio VALORES QUE SE VEN Bienvenidos al II Salón de la Cultura B.O.D., en el cual podrán participar artistas visuales venezolanos, dedicados a la pintura, ilustración, fotografía o artes gráficas. Participa, inspírate y prepara tu propuesta digital SUBMIT ARTWORK Tienes hasta el 18 de julio de 2013 para hacerlo. VALORES QUE SE VEN Bienvenidos al II Salón de la Cultura B.O.D., en el cual podrán participar artistas visuales venezolanos, dedicados a la pintura, ilustración, fotografía o artes gráficas. Participa, inspírate y prepara tu propuesta digital SUBMIT ARTWORK Tienes hasta el 18 de julio de 2013 para hacerlo. Compartir Compartir Especificaciones técnicas Inscripción propuesta digital Francisco Fernandez Diseñador Gráfico Caracas davidevieirag@gmail.com 50 cm Tu propuesta digital debe cumplir con las siguientes especificaciones para ser publicada en la galería virtual. - Dimensiones 50 cm x 144 cm Francisco Fernandez Diseñador Gráfico Caracas davidevieirag@gmail.com * Título (máx. 50 caracteres) Lorem ipsum dolor sit amet, consectetur adpisicin * Valor que representa Dignidad Respeto Igualdad Solidaridad Twitter:@dvieirag Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inci idunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure. 144 cm - Sin marco - Resolución: 250 dpi - Modo: RGB - Formato JPG - Peso máximo: 30 MB - No puede tener firma, Twitter:@dvieirag Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inci idunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure. * Descripción (máx. 250 caracteres) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Buscar archivo año o mensaje que identifique autor y/o procedencia. 0 Caracteres * Campos obligatorios Anterior Siguiente Hemos localizado un error por favor verifique los campos seleccionados Anterior Siguiente Reconocimientos Bases del concurso Términos y condiciones Valoramos tu esfuerzo Lo que debes saber Infórmate de los detalles Reconocimientos Bases del concurso Términos y condiciones Valoramos tu esfuerzo Lo que debes saber Infórmate de los detalles 2013 BOD Banco Universal J Desarrollado por 2013 BOD Banco Universal J Desarrollado por FACEBOOK APP

17 CLIENT: B.O.D WESTERN DISCOUNT BANK PROJECT: Virtual Gallery Facebook App ROLE: IA/UX design lead and strategy AGENCY: Wikot VIRTUAL GALLERY LANDING PAGE User Name Home User Name Home lorem ipsum lorem ipsum Me Gusta lorem ipsum lorem ipsum Me Gusta Inicio Inicio valores que se ven Bienvenidos al II Salón de la Cultura B.O.D., en el cual podrán participar artistas visuales venezolanos, dedicados a la pintura, ilustración, fotografía o artes gráficas. Participa, inspírate y prepara tu propuesta digital ARTWORK STATUS Las votaciones inician el 22 de julio de 2013 VALORES QUE SE VEN El B.O.D. en su búsqueda por rescatar los valores sociales, te invita a votar por tu propuesta favorita. Apoya el talento venezolano. Conéctate con el valor del arte VALUES Compartir Compartir Valores Buscar por nombre Dignity Equality Respect Solidarity Con esta iniciativa, B.O.D. tiene el propósito de contribuir de forma activa con el rescate de los valores sociales como un tema importante para la sociedad venezolana. Bienvenidos a la galería virtual del Solo aparece cuando hacen mouse over en la zona Desplázate hacia los lados para ver todas las propuestas y votar por tu favorita. Compartir Reconocimientos Bases del concurso Términos y condiciones Valoramos tu esfuerzo Lo que debes saber Infórmate de los detalles 2013 BOD Banco Universal J Desarrollado por Reconocimientos Bases del concurso Términos y condiciones Valoramos tu esfuerzo Lo que debes saber Infórmate de los detalles 2013 BOD Banco Universal J Desarrollado por FACEBOOK APP

18 Avatar Avatar Avatar Avatar Avatar Avatar CLIENT: B.O.D WESTERN DISCOUNT BANK PROJECT: Virtual Gallery Facebook App ROLE: IA/UX design lead and strategy AGENCY: Wikot GALLERY ARTWORKS DISPLAY / PUBLIC VOTE User Name Home User Name Home lorem ipsum lorem ipsum Me Gusta lorem ipsum lorem ipsum Me Gusta Inicio Inicio VALORES QUE SE VEN El B.O.D. en su búsqueda por rescatar los valores sociales, te invita a votar por tu propuesta favorita. Apoya el talento venezolano. VALUES VALORES QUE SE VEN El B.O.D. en su búsqueda por rescatar los valores sociales, te invita a votar por tu propuesta favorita. Apoya el talento venezolano. VALUES Conéctate con el valor del arte Conéctate con el valor del arte Compartir Valores Propuesta Buscar por nombre - Título: Lorem ipsum dolor consectetur adpis - Autor: Francisco Fernande - Valor: Respeto - Ciudad: Caracas Ver detalle Propuesta - Título: Lorem ipsum dolor consectetur adpis - Autor: Francisco Fernande - Valor: Respeto - Ciudad: Caracas Ver detalle Propuesta - Título: Lorem ipsum dolor consectetur adpis - Autor: Francisco Fernande - Valor: Respeto - Ciudad: Caracas Ver detalle Compartir Valores Propuesta Buscar por nombre - Título: Lorem ipsum dolor consectetur adpis - Autor: Francisco Fernande - Valor: Respeto - Ciudad: Caracas Ver detalle Propuesta - Título: Lorem ipsum dolor sit amet, consectetur adpisicin - Autor: Francisco Fernandez - Valor: Respeto - Ciudad: Caracas Propuesta Propuesta Descripción - Título: Lorem ipsum dolor Lorem sit amet, ipsum consectetur dolor adipisicing elit, sed do eiusmod tempor consectetur incididunt adpis ut labore et dolore magna aliqua. Ut - enim Autor: ad minim veniam, quis nostrud exercitation ullamco Francisco laboris Fernande nisi ut aliquip ex ea commodo consequat. Duis aute - Valor: irure d Respeto - Ciudad: Caracas VOTE 300 Ver detalle X - Título: Lorem ipsum dolor consectetur adpis - Autor: Francisco Fernande - Valor: Respeto - Ciudad: Caracas Ver detalle Twitter 300 Compartir 300 Me gusta % de popularidad Estas personas apoyaron tu propuesta Reconocimientos Bases del concurso Términos y condiciones Valoramos tu esfuerzo Lo que debes saber Infórmate de los detalles Reconocimientos Bases del concurso Términos y condiciones Valoramos tu esfuerzo Lo que debes saber Infórmate de los detalles 2013 BOD Banco Universal J Desarrollado por 2013 BOD Banco Universal J Desarrollado por FACEBOOK APP

19 CLIENT: B.O.D WESTERN DISCOUNT BANK PROJECT: Virtual Gallery Facebook App ROLE: IA/UX design lead and strategy AGENCY: Wikot ARTIST PRIVATE VOTE PAGE: CONFIRM AND SEND SELECTION User Name Home User Name Home lorem ipsum lorem ipsum Me Gusta lorem ipsum lorem ipsum Me Gusta Inicio Inicio VALORES QUE SE VEN Contribuye junto al B.O.D. a difundir los valores expresados en las propuestas digitales de nuestros artistas venezolanos. VALUES VALORES QUE SE VEN Contribuye junto al B.O.D. a difundir los valores expresados en las propuestas digitales de nuestros artistas venezolanos. VALUES Conéctate con el valor del arte Conéctate con el valor del arte Compartir Compartir Selecciona un valor para ver todas las propuestas digitales y votar por tu preferida Dignidad Igualdad Respeto Solidaridad Selecciona un valor para ver todas las propuestas digitales y votar por tu preferida Dignidad Igualdad Respeto Solidaridad X Votar Votar Votar Deseas enviar esta selección? Votar Votar Votar - Título: Lorem ipsum dolor sit amet, consectetur adpisicin - Autor: Francisco Fernandez - Ciudad: Caracas - Título: Lorem ipsum dolor sit amet, consectetur adpisicin - Autor: Francisco Fernandez - Ciudad: Caracas Cancelar Aceptar Recuerda que para completar el proceso, debes seleccionar una propuesta digital por cada valor Confirmar votación Confirmar votación Reconocimientos Bases del concurso Términos y condiciones Valoramos tu esfuerzo Lo que debes saber Infórmate de los detalles Reconocimientos Bases del concurso Términos y condiciones Valoramos tu esfuerzo Lo que debes saber Infórmate de los detalles 2013 BOD Banco Universal J Desarrollado por 2013 BOD Banco Universal J Desarrollado por FACEBOOK APP

20 VENEVISION TV NETWORK PROJECT: TV Show Website ROLE: UX/UI designer COMPANY: Venevision, Cisneros Group PROJECT DESCRIPTION Venevision is one of the largest TV networks in the Americas. It produces popular television shows that can be seen in over 90 countries. The network needed to update its digital products, to follow new technical and internet connection requirements and incorporate new design trends and content creative strategy. I implemented a new approach to the UX/UI design, defining a graphic hierarchy to feature shows highlights, optimising image use to improve loading time. I facilitated navigation of the site by defining repetitive content modules and patterns, opened feedback platforms by incorporating social media widgets and other comment forms and launched a new public voting platform. The new UX and cross-media strategy implemented achieved an increase in viewers ratings, expanded the network s audience to a larger digital public and created a space to offer exclusive web content, increasing audience participation and achieving a truly crossmedia exchange.

21 VENEVISION TV NETWORK PROJECT: TV Show Website ROLE: UX/UI designer COMPANY: Venevision, Cisneros Group TV SHOW SITE Modules and Patterns 1. HOME - Highlight hero - Video content area - Episodes gallery - Social networks modules - Media gallery modules - Survey module 2. CHARACTER MINI SITE - Character information: Actor s name, Interviews, Character s description, Sharing options. - Photo gallery - Characters gallery menu - Survey module 3. EPISODES STREAMING - Video content area - Social networks module - Episodes gallery - Comment section DESKTOP

22 CLIENT: VENEVISION TV NETWORK PROJECT: TV Show Website ROLE: UX/UI designer COMPANY: Venevision, Cisneros Group MISS VENEZUELA WEBSITE Inc. Public voting platform CROSS-MEDIA STRATEGY: TV, Web, Social Media, Display advertising 1. HOME - Highlight Hero - Participant s gallery - Selected subject media gallery - Style module - Survey module - Blog module - News - Agenda module - Photo gallery module 2. PARTICIPANT S PAGE - Participant s banner inc. Twitter account link - Video content area - Interactive gala voting module - Participant s photo gallery - Participant s dedicated module: Interviews, Invitations, Runway videos - Video module - Media gallery - Comment section 4 MILLION votes were cast Most-Watched TV Show (59% share) DESKTOP