SECOND MARKET

This project is a Dummy project who consist of an e-commerce for selling technological products of second hand. For doing this project I used some UX techniques but I focused more in the UI design, using FIgma paying special attention to Design Systems and Auto-Layout feature.  

Challenge


The Challenge that was presented to me was to design an e-commerce website. First of all I decided to use the UX technique that is calles Competitive Analysis, thanks to this tool I could know the state of the competence in Spain and also get some inspiration to my website. 


Prioritizing

After knowing what is in the Market, and doing some Guerrilla Interviews with my some people, I decided to put all the information that I got and use the tool MoSCoW to prioritize what I would include in my design and what not.


Mid-fidelity Wireframes

Once we used Round Robin and Crazy 8 to define our Low-fid prototype, I decide to design the Mid-fid wireframes adapting the UX / UI process in all its phases. Tests using an interactive prototype created in Figma.


Defining our Logo

A logo is a a big part of your brand identity (what people will see). A good logo is memorable, differentiates you from everyone else, and fosters brand loyalty. It's what I attempt with this design. I hope you like it!


The importance of having a Design System

Thanks to having a good Design System our projects will have lot of advantages. It is not only a classification of components, it will help you to reduce design debt, eliminate inconsistencies and save time. Here you have some samples of my Design System for this project. 

Components

Grids

Typography Styles

Colors

In the following video that I made you will see how I uses components & variants to simplify my work while I was doing my cards.

Auto-Layout feature

Figma recently released a new feature: Auto-Layout. This feature helps you to create resizable components easily. Auto Layout allows you to create dynamic Frames that respond to their contents. I really recommend you to get use to this feature cause you will save lot of time. you will have total control in your components and it will be very helpful for developers too!

High-fidelity Wireframes

Design of the final product adapting the UX / UI process in all its phases. Tests using an interactive High-Fid prototype created in Figma.


Prototype video.

Here you can see the Prototype Video of the project designed with Figma.



That was all, if you want to know how the whole UX / UI process was carried out in depth, you can send me a message by filling out the following form.