Figma course project

A small mockup I made as a class project for a Figma course. The purpose of the course was to learn the tools for designing and prototyping in Figma while building a few mockups for an e-commerce site. The teacher set up the course so that I could follow along with proper steps for designing and applied a bit of UX theory to it.

First Task would be to generate a prompt for our project.  I used the website:

Here is the resulting prompt:

So my target audience is independent women in their 30's who work for themselves and lives in the capital.

The design brief provides a very basic description just a starting point. I pictured Esteé as a "free spirit", someone who enjoys time with friends, likes to explore new places and wears cute but comfortable clothes since she is always busy and rushing with her own work. The product will offer her a fun and relaxing time either alone or with friends.  

With this more precise picture of who Esteé is, I set off to make a moodboard for the project.

Following the moodboard, I had to follow the video tutorials to recreate the wireframes for the project. These are the bases for the design later on.

Next I created a color palette inspired by the moodboard and text styles.

Here is were the creative part of the project comes in. I was free to interpret the wireframes freely in terms of color, text, size and style. I searched online for some free wine bottle, wine stains and grapes vector illustrations to add a little bit more to the design beyond just flat shapes. I also modified the labels in the bottle vector illustrations to match the brand. These little additions were not a requirement for the course but just extra flare I wanted to add.

This is how the HiFi mockups turned out:

I also created components and respective variants for this project.  

Lastly I also created a desktop version of the landing page + a newsletter subscription modal.

This button will lead you to the prototype of the mobile version. Please try it out!