GettyImages-975552058.jpg.webp

Mint

UI Design

UI Designer  |  6 weeks (2020)  |  iOS

Mint is an online fashion and cosmetic retailer. The project is focused on creating a cohesive brand to attract young people with its fun and appealing UI.

Tools: Figma, Sketch, InVision

Ice Cream.jpg
Item W.png

Brand

Developing a brand.

For this project, I wanted to practice my UI skills by creating a beautiful app and developing a brand from scratch. To do it, I chose to work on an online retailer application, as it could help me learn more about e-commerce design. First, I decided how I wanted my app to feel when interacting with it and the users I wanted to target. I chose to create it for young adults as they prefer shopping online more than others. I wanted my brand to be fun, fresh, clean, modern, tasty and young so I started with creating a mood board to guide me throughout the process.

Moodboard.png

UI inspiration.

Before actually working on the brand, I did a competitor analysis to see how the existing online shops attract their target audience and how the UI of their applications helps them to achieve it. Also, I thought about what would be different in my app to make it stand out.

UI.png

Colours.

Then, I decided on the colour palette for my application. To create this fun and tasty feeling, I went with a bright turquoise for the brand colour and added two more matching vibrant shades to complement it. I felt like these three colours go great together and they could help me achieve the look I was going for.

Colours2.png

Typography.

While deciding on the typography for the app, I knew it should be a sleek typeface to supplement the colours. I also needed it to have a lot of weights to give me more choice when creating different title and body styles. After some consideration, I went with Avenir typeface as it has a nice, modern appearance and it looks gorgeous in all the weights it has. Avenir is also easy to read, and it is widely used by other apps, so this typeface is familiar to the user.

Text.png

Logo and wordmark.

Then, I finally started my ideation phase, where I developed a few wordmarks and logos for the chosen name - Mint. I felt like it was a perfect name as it reminds of summer, cold tasty ice cream and it just fit well the app's idea. All the logos designed reflected the name and created a fun, vibrant mood, but I needed to narrow them down to just one. So, I went with the ice cream logo because it had this summer, fresh feeling and it looked good with the wordmark chosen.

Logo and Wordmark.png

Creating a UI library.

I translated the branding into the visual design of the app's interface and created a UI library with all the components, fonts and colours used in it.

Components Mint.jpg

Implement

Final UI.

When I put it all together, I had my UI design ready, matching all the ideas I had in mind at the beginning of the project. As a result, I had a cohesive brand for the app with young and fun vibe.

Flash W.png
Home W.png
Explore W.png

Reflect

Evaluating the results.

Mint was one of my first projects in design, and it helped me learn more about designing for e-commerce and creating a brand from scratch. I enjoyed the ideation process where I worked on different logos, chose colours and tried to make it all look like a whole. As an avid shopper online, I constantly put myself in my user's place to imagine what would they feel interacting with the app. I believe working on Mint helped me grow better as a UI designer.

apple-watch-and-magazine-mockup-scene@2x