Overview

This was my first UI project which I created as a part of the Course «UI/UX Design Essentials». The project doesn’t include much UX, but it perfectly shows my Figma knowledge.

During this project, I learned to design website pages & mobile phone apps in Figma. I created components, worked with fonts and colors, and built a UI Kit. I also gained experience in creating multi-dimensional variants, micro-interactions, page transitions, and animations.
‍

The problem

Users don’t want to waste time on shopping, they want to see all the details of the product online to be sure of the size, colour, and quality of the backpack.
‍

Solution

To create a super simple and user-friendly app that shows all the features of the product and includes video, look book and customer reviews.
‍

Persona

‍

City: Berlin

Job: marketer

Family: single

‍

‍

Goals:

• to save time
• to buy high quality products
• to find detailed description of the product06:53 undefined

Frustrations:

• wrong size of the product
• poor quality of the product
• poor communication

I don’t like wasting time on shopping. It would be great to watch video of the backpack in app to see the details and understand it’s real size.

‍

Visual design

The user interface has to be super easy and accessible for users of all types of mobile devices that’s why I’ve chosen a contrasting palette with simple colors. The application layout is structured around a light background and eye-catching visuals. The light and airy background set the effective space for product photos.
‍

Moodboard

UI kit

User flow diagram

Low-fidelity wireframes

High-fidelity wireframes

Prototyping and micro-interactions

‍