6.9: Estudio de caso - Descendencia
- Page ID
- 67521
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)Resumen de una línea
Cómo pasar a un sitio web de diseño receptivo ayudó a una tienda online de sneakers con sede en el Reino Unido llamada Offspring a aumentar la tasa de conversión móvil y los ingresos
El problema
La descendencia (http://www.offspring.co.uk) no tenía sitio web móvil, y los usuarios móviles estaban teniendo una mala experiencia de usuario al acceder al sitio en sus dispositivos. Esto provocó malas tasas de conversión y bajos ingresos para los móviles.
Los usuarios móviles son el mercado en línea de mayor crecimiento y Offspring fue testigo de un aumento constante en el tráfico móvil a su sitio web. Su sitio actual no era compatible con dispositivos móviles y no brindaba una buena experiencia de usuario. Esto también estaba impactando en su puntaje SEO. Offspring sabía que necesitaban garantizar que los usuarios móviles tuvieran una buena experiencia de usuario para mejorar las conversiones, los ingresos y el SEO.
La solución
Offspring consideró un sitio compatible con dispositivos móviles, pero decidió optar por un sitio totalmente receptivo para proporcionar una experiencia de visualización optimizada independientemente del dispositivo utilizado para acceder al sitio. La descendencia quería asegurarse de que los usuarios de tabletas también fueran atendidos en el diseño.
La marca también quería asegurarse de que proporcionaran a los clientes existentes una apariencia familiar para que pudieran acceder y navegar fácilmente por el sitio.
Se incluyeron ciertas características clave de diseño para mejorar la experiencia del usuario. Se incluyó un nuevo encabezado pegajoso que siguió a los usuarios por la página mientras se desplazaban, proporcionando una navegación fácil sin tener que desplazarse hacia la parte superior cada vez.
Se incluyó una nueva barra de búsqueda con búsqueda predictiva. Esto permitió a los usuarios buscar su producto más rápidamente.
Otras características de diseño incluyen:
- Una nueva página de listado de productos que tenía tres columnas de ancho en un escritorio que podría reducir automáticamente a dos o una dependiendo del tamaño de cualquier dispositivo diferente utilizado.
- Se incluyó el nuevo proceso de visualización de imágenes y selección en las páginas de detalles del producto.
- Se incluyó una sección 'No olvidar' en la página de la cesta para que los usuarios pudieran agregar artículos automáticamente a su cesta.
- Se creó un proceso de pago mejorado con nuevas opciones de entrega.
El proceso de navegación intuitivo fue crucial para garantizar que los usuarios en cualquier dispositivo pudieran encontrar la información que necesitaban de forma rápida y sencilla.
Los resultados
Los usuarios pasaron más tiempo en el sitio, lo que llevó a un aumento en las conversiones y ventas. La visibilidad SEO del sitio mostró una mejora dramática después de pasar al sitio receptivo principalmente debido a que la puntuación de usabilidad del sitio móvil en Google se disparó de 60/100 a 100/100. Esto vio aumentar el tráfico orgánico al sitio en más de 25%.
Los ingresos también aumentaron, con:
- Un aumento de 15.19% en la tasa de conversión de móviles/tabletas
- Un aumento del 102.95% en los ingresos de móviles/tabletas año tras año
- Un incremento de 20.25% en la tasa de conversión de comercio electrónico solo de usuarios de tabletas.