Lurexy
Diseño de APP ecommerce
#Research #UX #DiseñoDeAPP
Lurexy es un producto digital de venta de joyería de resina de alta calidad y 100% a medida. Se basa en un sistema de personalización visual en live, donde se escogen los materiales y colores de las piezas.
- Objetivo: crear ecommerce de productos personalizados
- Problema: no encontrar los pendientes exactos que necesitas para un evento
- Solución: personalizador visual y fácil de usar de pendientes de resina
Proyecto de fin de curso de UX/UI en CEI por Mayte Moreno.
Mi objetivo es reconvertir mi marca propia mayrandomshit.com en una empresa pionera en la joyería de resina, con una estética más profesional y unas funcionalidades nunca vistas en el sector, con la creación de una web y una app donde se pueden personalizar las joyas de forma visual.
La metodología utilizada es Design Thinking, una técnica de pensamiento que nos permite “ponernos en situación” para diseñar un producto o una solución.
Puedes ver todo el estudio en esta presentación de Figma
Final project of UX/UI course at CEI by Mayte Moreno.
My goal is to turn my own brand mayrandomshit.com into a pioneering company in resin jewellery, with a more professional aesthetic and functionalities never seen before in the sector, with the creation of a website and an app where jewellery can be customised visually.
The methodology used is Design Thinking, a thinking technique that allows us to “get in the customers mind” to design a product or a solution.
You can see the whole study in this Figma presentation.
HIghlights
Interviews
User persona
Business model canvas
The design process
En esta etapa se reducen las soluciones planteadas a una, basándonos en test con usuarios que validen cuál es la opción que mejor resuelve el problema planteado.
Después de eso, ya se puede pasar el producto a producción y lanzarlo.
Una vez que el producto está en el mercado, el ciclo de mejoras e iteraciones continúa, por lo que es necesario establecer canales de feedback de los usuarios.
Esta etapa consta de 3 pasos:
- Construir/Prototipar
- Probar/Analizar
- Iterar/Repetir
At this stage, the proposed solutions are reduced to one, based on user tests that validate which option best solves the problem posed.
After that, the product can be put into production and launched.
Once the product is on the market, the cycle of improvements and iterations continues, so it is necessary to establish user feedback channels.
This stage consists of 3 steps:
- Build/Prototype
- Test/Analyse
- Iterate/Repeat
Sitemap
Hierarchical structure of the core pages
Estructura jerárquica de las páginas básicas
Flowchart
Customer journey to purchase a customised piece.
Viaje del cliente para comprar una pieza personalizada.
Sketch
First sketches by hand
Primeros bocetos a mano
Wireframes
Organisation of the schematic content of the views:
- Outline of the home or main page,
the shop page with finished products of unique designs (good for customer inspiration and for selling ready-made products), - the collections page of custom-made products,
- the contact page with a search engine for FAQs to ease the burden of messages.
- Page of a normal finished product, with its gallery and description
- Page of a custom-made product, with the configuration options available.
Organización del contenido esquemático de las vistas:
- Esquema de la home o la página principal,
la página de la tienda con los productos ya acabados de diseños únicos (es bueno para inspiración del cliente y para vender productos que ya están hechos), - página de las colecciones de los productos a medida,
- la página de contacto con un buscador de las FAQs para aliviar la carga de mensajes
- Página de un producto normal ya terminado, con su galería y descripción
- Página de un producto a medida, con las opciones de configuración disponibles.
The prototype
Diseño de las pantallas principales del prototipo para que el usuario pueda completar el flowchart sin inconvenientes.
Diseños:
- Onboarding
- Home, menú desplegable y tienda de productos a medida
- Ejemplo de producto con una opción disponible para personalizar
Después se crea el Maze para testear el producto con usuarios reales y se estudian posibles iteraciones.
Design of the main screens of the prototype so that the user can complete the flowchart without any inconvenience.
Designs:
- Onboarding
- Home, drop-down menu and customised product shop.
- Example of product with one option available for customisation
The Maze is then created to test the product with real users and possible iterations are studied.
Prototype – general view
Here we can see how the prototype behaves.
Prototype – Onboarding
When you first download de app, this is what tells you the basic app operation.
Prototype – Home and shop
Here we see what the main menu would look like when we open it, the home page and the page with the collections of customisable products. There would also be a shop page with all the products already made, but the design has not been created in this first phase as it does not go into the essential part.
Aquí vemos cómo sería el menú principal cuando lo abrimos, la home y la página de las colecciones de los productos personalizables. También habría una página de tienda con todos los productos ya hechos, pero no se ha creado el diseño en esta primera fase al no entrar en la parte esencial.
Prototype – Home screen
By adapting the design to desktop size, a full-screen background image or short video is added and the horizontal scrolling function of the products is removed, but the same structure and styles are maintained.
Al adaptar el diseño a tamaño escritorio, se le añade una imagen o vídeo corto de fondo de pantalla completa y se quita la función de scroll horizontal de los productos, pero se mantiene la misma estructura y estilos.
Prototype – tailored product
In the process of creating a custom-made product only one option of each variable (shape – flowers – colour – metal) has been created but all available options will be created for each collection, so that all combinations fit together.
En el proceso de creación de un producto a medida sólo se ha creado una opción de cada variable (forma – flores – color – metal) pero se crearán todas las opciones disponibles para cada colección, de forma que todas las combinaciones queden bien entre ellas.
Testing
We test the product in its basic version in the Maze.co tool, where we put the following tests:
- Complete the onboarding
- Enter the customised product
- Customise the product and add it to the basket
Testeamos el producto en su versión básica en la herramienta Maze.co, donde ponemos las siguientes pruebas:
- Completar el onboarding
- Entrar en el producto a medida
- Personalizar el producto y añadirlo a la cesta
A usability error was detected on the first screens.
On screens 1, 2 and 3, users click on the elements that will be clickable in the future, but they have no functionality in the prototype as only 1 model of each is created and it is not possible to go back. In the following screens the user learns and this error is not observed, which will be corrected when all the variants are created and all the elements are clickable.
On the last screen there is a usability error in which the user does not know that he/she can click the add to cart button because the product is fully configured. The design is iterated to leave the button visually disabled until the user completes the product.
The conclusions
After designing the entire project and iterating the design to address usability issues, development can proceed. The basic functionality is well appreciated, as is the general style.
There is nothing yet that offers exactly this service, besides the fact that this kind of earrings are in fashion, so it is a good time to develop this project.
Tras realizar el diseño del prototipo completo e iterar el diseño para solventar los errores de usabilidad, se puede proceder al desarrollo. El funcionamiento básico está bien valorado, al igual que el estilo general.
No hay nada todavía que ofrezca este servicio exactamente, además de estar de moda este tipo de pendientes, por lo que es un buen momento para desarrollar este proyecto.