Alejandro Ostalé User Experience Design Portfolio

Transcripción

1 Alejandro Ostalé User Experience Design Portfolio Updated January 2016 Contents

2 Profile I am a versatile UX Designer with a strong focus on the Visual Design & Interaction Design fields and skills and knowledge in other areas within the broad UX Design spectrum. Profile chart Able to speak the language of different stakeholders and having experience working in and with international distributed teams, I can meet various needs for a variety of projects and teams in several phases of a User- Centered Design process. I work hard to ensure that the business requirements are met and the end products are properly visualised and executed for the users. Skills Waterfall and Agile (Scrum) Sketching Storytelling Project Management Adobe CS HTML Prototyping Rapid Prototyping Responsive Design Activities» Defining and redefining functional requirements» Planning content / information» Exploring interaction solutions» Developing Personas & Scenarios» Designing Wireframes and Prototypes» Gathering feedback from stakeholders» Planning tests with users» Designing the visual layer (UI)» Developing Front-End code Deliverables Personas Scenarios Storyboards User Journeys Sitemaps Wireframes Mockups Style Guides Prototypes 2

3 My Work Style I adapt my workflow and design process to the requirements of each individual project, but my general approach prioritises a hands on, user-centred approach. My work is a combination of thinking, research, design, communication and execution. Strategy Evaluate Beta launch Launch * Research Production *I don t have experience in research but I indicate it in this graphic just to show its place in the process. Analysis Design Understanding Exploring ideas Prototyping Production When required I create personas, scenarios and story boards with different fidelity levels to be sure the problems to solve are understood. Once content and information arquitecture is defined, I explore concepts from quick sketches to wireframes to explore and comunicate the posibilities and gather feedback. If it fits into the project, I help in creating prototypes for testing and presenting. Can be from a simple PDF to a HTML prototype. I can produce the visual layer and create intermediate deliverables like style guides. 3

4 Deliverables 1 Arquitectura del sitio Ir a portada Ir a índice DISA RECARGAS DISA TRANSACCIONES Recargas Sistemas Beneficios Noticias Ethernet/línea analógica GPRS PC Inicio Conexiones Inicio Zona DISA Autoservicio Ingresar saldo Monitorización La compañía Atención al punto de venta La compañía Contacto Operadores Nacionales Contacto Descargas Internacionales Noticias Virtuales? Empleo Transacciones Tarjetas internacionales Loterías y apuestas Tabla de comisiones Valoraría la posibilidad de separar de alguna manera (un subdominio o un dominio nuevo...) las RECARGAS de las TRANSACCIONES por diversos motivos: - Distinto tipo de cliente. - Diferente actividad. - Evitar confusiones en el visitante de la web. - Buscar un SEO más acorde a cada actividad. REDISEÑO DEL SITIO WEB DE Alejandro Ostalé García Sitemap analysis in different contexts Storyboards Wireframes 2 Análisis de la maqueta actual: problemas y puntos débiles Ir a portada Ir a índice 760 píxeles Tamaño Está pensada para una resolución de 800x600 píxeles. A falta de un análisis de las estadísticas de tráfico, se puede presuponer que por lo menos se puede ampliar a 1024x768 píxeles. Análisis por zonas de la portada Cabecera corporativa 4 Log in 1.- Nada que destacar. 1.- Excesivo tamaño/importancia. 2.- Aparece muy lejos de la cabecera. 2 Navegación 1.- Su ubicación hace que rivalize con 5 Contenidos destacados el contenido en importancia. 1.- Contenidos confusos. El usuario no 2.- No puede aumentar fácilmente de sabe a dónde va a ir si pincha. tamaño. 2.- Falta jerarquía visual. 3.- Las subsecciones no son visibles. Por ejemplo la encuesta de la web no es visible desde un primer momento y está dentro de la categoría 6 Cuadro de búsqueda servicios. 1.- Excesivo tamaño/importancia. 2.- Aparece muy lejos de la cabecera. 3 Destacado gráfico (flash) Escaso tamaño y posición. Se lee después del menú de navegación a su izquierda. 2.- Sólo es capaz de mostrar un mensaje animado y no ofrece la posibilidad de volver a verlo. 3.- No ofrece un enlace directo a la información que explica. 7 Noticias 1.- Aparece muy lejos de la parte de arriba de la página. 8 Pie de página 1.- Un poco escueto. REDISEÑO DEL SITIO WEB DE Alejandro Ostalé García Heuristics analysis to improve usability From wireframes to visual design 4

5 Visual design Web design projects Interactive CD Android app screenshots 5

6 Contact details