Diseño del Sitio Web para Audiomusica S.A.

De Casiopea



Título
Palabras ClaveProyecto, Diseño Gráfico, Lenguaje Computacional, 2010
Período2010-2010
CarrerasDiseño Gráfico
Alumno(s)Sofía Savoy
ProfesorJorge Barahona

Documentación

Maqueta Navegable

Maqueta sitio web Audiomusica S.A.

Sitio Web Audiomusica S.A.

La documentación del siguiente proyecto, desarrolla los pasos dados para el diseño del sitio web de la empresa Comercial e Importadora Ausiomusica S.A., lo cual comienza con el brief (simulado, con gran parte de contenido real) de esta empresa.

La idea es mejorar la interacción del sitio con el cliente, a través de una clara organización y disposición del contenido, facilitando la búsqueda de productos y de la información que la persona necesite.

Descarga Brief de Audiomusica S.A.


Procesos

Benchmark

El sitio web de Audiomusica, contiene mucha información que está desorganizada, resultando dificil llegar a ella. Por ejemplo, existen dos maneras devisualizar la ficha de un producto, llegando por distintas secciones del sitio, y además, sólo una de las fichas permite cotizar el producto que se está viendo.


Sus competidores más directos son las empresas Fancymusic y Mundo Musical, pero haciendo comparación con el diseño de otros sitios web, se encontró el de Prosound (tienda que se encuentra únicamente en Viña del Mar), observando que tiene una accesibilidad y navegación más simple y directa que la de los otros sitios.


  • Fancymusic


  • Mundo Musical


  • Prosound

Índice de Contenidos

  1. Home
  2. Categorías
    1. Amplificadores Audio
    2. Atriles
    3. Baquetas
    4. Cables Conectores
    5. Case/Fundas
    6. Computadores
    7. Cuerdas
    8. Equipos Grabación/Reproducción
    9. Hi-Fi
    10. Iluminación
    11. Instrumentos de Cuerda
    12. Instrumentos de Viento
    13. Mezcladores
    14. Micrófonos
    15. Parlantes
    16. Percusión
    17. Platillos
    18. Procesadores-Efectos de Audio
    19. Sistemas Industriales
    20. Teclado
    21. Varios Audio/Midi
  3. Academia
  4. Descargas
    1. Audio
    2. Drivers
    3. Midi
    4. Synth
    5. Plug In
    6. Utilitarios
  5. Foro
    1. Conversaciones
      1. Temas
    2. Clasificados
      1. Temas
    3. Información (problemas y dudas)
      1. Problemas de Autentificación y Registro
      2. Preferencias Usuarios y Configuraciones
      3. Publicación de Mensajes
      4. Mensajería Privada
      5. Usuarios y Grupos
  6. Mi Cuenta
    1. Registrarse/Ingresar
  7. Preguntas Frecuentes (FAQ)
  8. Tiendas
    1. Megatienda Ñuñoa (tienda y escuela de música)
    2. Crowne Plaza
    3. Mall Parque Arauco (tienda y escuela de música)I
    4. Mall Plaza Vespucio
    5. Mall Plaza Oeste
    6. Mall Plaza del Sur
    7. Iquique (ventas mayoristas internacionales)
    8. Mall Plaza Antofagasta
    9. Viña del Mar
    10. Concepción
    11. Mall Paseo Costanera del Mar
    12. Servicio de Atención al Cliente (SAC)
    13. Bodega Principal
  9. Acerca de la Empresa
  10. Contacto

Card Sorting

Para entender las preferencias del usuario, respecto al orden y disposición del contenido, se hace un card sorting. Este método se aplicó a ocho personas; cinco con conocimientos músicales (Dj, guitarristas, baterista, cantante) que suelen consultar por productos en sitios web, y a otras tres sin mayores conocimientos del tema.

Con esto se ha construido una visión más amplia de las distintas ideas mentales de las personas, con lo que se logra hacer un filtrado de esta información, organizando y disponiendo los contenidos de manera útil y eficaz para quien navega por el sitio web.


Diseño del Sitio

Mapa de Navegación

Mediante el card sorting, el diseño del mapa de navegación se vuelve más sencillo y se reafirman las ideas de una primera organización de contenido. Este debe ser accesible y fácil de encontrar, pero muchas veces los usuarios se guiaban por la idea de sólo organizar estos contenidos, sin pensar mucho en que su visión, podría hacer la búsqueda de productos más lenta.

Es aquí donde se vuelve a aplicar el criterio del diseñador para optimizar las ideas entregadas por las personas.


Archivo:Mapa de navegación audiomusica.jpg

Archivo:Mapa de navegación audiomusica v2.jpg

Wireframes

La grilla creada para la diagramación de contenidos en el sitio web, consta de 10 columnas de 100 píxeles cada una, siendo el tamaño total de 1000x750 píxeles.

Primera propuesta

Segunda propuesta


Interfaz

Home
Selección
Catálogo
Ficha del producto