Beauty Scoop App Mockup

For this assignment, I had to create an interactive prototype app for my mockup business of a makeup company that sells high quality products called Beauty Scoop.  I made the app where it is like a blog where people who are using the app can view how to videos for using the Beauty Scoop high quality makeup products and to buy the products on the app.
First slide of the presentation of designing my own mockup of an app for my business mockup.
My Mockup Business I'll Be Creating The Mockup For The App
Logo I created for my mockup business:
Logo of a vector image of a sihouette of a female face on the side with short hair in a pink colour and underneath is the name Beauty Scoop in a pink colour.
Mockup of Beauty Scoop's Mission and Company Overview
Our mission is to meet our customers’ needs by providing them with high quality products they can trust to enhance their inner beauty, make them feel confident and age gracefully.

Beauty Scoop has been in business for 5 years. From the beginning our company sought to serve clients by being innovative and bringing the best products to our clients. We have achieved that by working to create a network of suppliers providing us with the best materials to enable Beauty Scoop to gain a reputation for care and quality in the industry that is second to none. Our goal is to build on our successes each year as we look to grow our efficiencies, partnerships, and products to benefit our clients and investors.
Beauty Scoop App Mockup
Part 1 layout of Beauty Scoop App Mockup it shows the starting screen where it has makeup brushes in the background, the logo and the heading saying Discover High Quality Beauty Products, it has something that says sign up or login, there is a sign up page where new users using the app can input all there information to set up there account, there is a login area where people can login to there account and if they forgot their password they will have an area to input their email so they can change their password. There is also a loading screen where it's nail polish in the background. It will take you to the homepage where it showcases some of the products that also have how to videos on how to use the product. When clicking on the first product on the homepage it will take you to the page where it has all the info about the product, what colours can you get for the product, a how to video on how to use the product, they can put a like on the product, can rate the product with the stars and can bookmark it too. They can also leave a comment and can put the video on full screen too or on small screen. When they add a product to the cart it will take them to the cart page where it will show all the products in your cart, the taxes and the total amount.
Part 2 layout of Beauty Scoop App Mockup it shows the items in your cart as well as the price of the items, there is an option to remove the items from the cart, it shows the total cost of the items in your cart and there is a proceed to cart button. There is an area where users can add their payment information in and there is a submit button. There is a loading screen that confirms that they purchased there items in the cart where they will also get a notification and in the notifications area is where they can see the receipt of what they purchased, what is there order number, what the expected date for the items to be delivered, what is the total amount they payed for, where there is an option for them to print the receipt, to download the receipt and has the option to share the receipt too.
Part 3 layout of Beauty Scoop App Mockup it shows the area where people can see their profile where they can can create a video on how to use a product, they can see what comments they wrote on a post, they can see which posts they like and what posts they have saved on the app. On their profile it also shows how many people followed them as well as how many people they follow on the app.
Part 4 layout of Beauty Scoop App Mockup it shows the area of where people can also get messages from other people where they can click on the message and send a message back as well. They also have the option to delete the contact, add contact, block the person or report the person too on the app. There is also a mobile keyboard in the image that showcases what it's like when the user will type something in the chat.
This image shows what the fonts are in the app, the fonts sizes, what is the company's target audience and what are the three journey goals for the app.
This image showcases the colours used on the app and there is a reference of what was the audio that was used on the app too
Part 1 of Beauty Scoop App Mockup it shows the starting screen where it has makeup brushes in the background, the logo and the heading saying Discover High Quality Beauty Products, it has something that says sign up or login, there is a sign up page where new users using the app can input all there information to set up there account, there is a login area where people can login to there account and if they forgot their password they will have an area to input their email so they can change their password. There is also a loading screen where it's nail polish in the background that welcomes new people using the app.
Part 2 of Beauty Scoop App Mockup it shows the homepage where it showcases some of the products that also have how to videos on how to use the product. When clicking on the first product on the homepage it will take you to the page where it has all the info about the product, what colours can you get for the product, a how to video on how to use the product, they can put a like on the product, can rate the product with the stars and can bookmark it too. They can also leave a comment and can put the video on full screen too or on small screen.
Part 3 of Beauty Scoop App Mockup it shows the cart it will take them to the cart page where it will show all the products in your cart, the taxes and the total amount. There is an area where users can add their payment information in and there is a submit button. There is a loading screen that confirms that they purchased there items in the cart where they will also get a notification about it.
Part 4 of the Beauty Scoop Mockup app shows the notification area where they can see the receipt of what they purchased, what is there order number, what the expected date for the items to be delivered, what is the total amount they payed for, where there is an option for them to print the receipt, to download the receipt and has the option to share the receipt too. The area where people can see their profile where they can can create a video on how to use a product, they can see what comments they wrote on a post, they can see which posts they like and what posts they have saved on the app. On their profile it also shows how many people followed them as well as how many people they follow on the app.
View App: https://xd.adobe.com/view/65b2c2fe-1644-4254-8cf0-c6d91e06960b-30e1/
When working on this project, I was figuring out what colour scheme on the app should it have for the mockup business I created called Beauty Scoop, how the layout will be on the app and how I wanted to design it. I decided that the best way to create the app to sell the companies high quality products is by making company I created is by having the app as a blog. This blog I created has where people can buy the products and watch how to videos on how to use the product. There are also other features they can do like liking a video, rating a product, there is a follow button, save a video or a blog post in their bookmarks, they can comment on the blog post, they will receive notifications of a receipt of what they purchased and they can also chat with others on the app too. For the colour scheme I decided to use calming and relaxing colours which are different shades of pink, light blue and purple. I also used other colours like light red and a yellow for the submit button and the sign up button.
Image References
- freesound_community. (2022, August 9). Pixabay - ping | royalty free music. Pixabay. Retrieved from: https://pixabay.com/sound-effects/ping-82822/
- Moreira, M. (2019, February 19). Cosmetics makeup brushes and powder dust explosion · Free Stock Photo. Pexels. https://www.pexels.com/photo/cosmetics-makeup-brushes-and-powder-dust-explosion-1926620/
- Hazelwood, S. (2018, August 15). Nail Polish Bottles. Pexels. https://www.pexels.com/photo/three-assorted-color-nail-polish-bottles-on-surface-1328379/
- Diamond, S. (2020, February 18). Woman Applying Mascara. Pexels. https://www.pexels.com/photo/woman-applying-mascara-3762768/
- Three Square Makeup Palettes. Pexels. (2019, July 10). https://www.pexels.com/photo/three-black-square-makeup-palettes-2639947/
- Miller, V. (2020, February 5). Photo by Valeriia Miller on unsplash. White and black plastic bottles photo – Free Skincare Image on Unsplash. https://unsplash.com/photos/white-and-black-plastic-bottles-_42NKYROG7g
- Shimazaki, S. (2020, November 20). Women Using Hydration Product For Her Face. Pexels. https://www.pexels.com/photo/calm-african-american-female-in-bathrobe-touching-face-against-blue-background-5938539/?amp=&amp=
- Garcia, L. (2020, March 25). Woman with black hair doing her makeup · Free Stock Photo. Pexels. https://www.pexels.com/photo/woman-with-black-hair-doing-her-makeup-4006693/
- Darmel, A. (2021, July 31). Woman Contouring her Face. Pexels. https://www.pexels.com/video/woman-contouring-her-face-8999279/
- Wp, A. (2021, November 5). Photo by Ajie WP on unsplash. Three mascaras and a brush on a pink background photo – Free Image on Unsplash. https://unsplash.com/photos/three-mascaras-and-a-brush-on-a-pink-background-nJexxVpHul0
- Diamond, S. (2020b, February 18). Woman with pink lipstick holding a dropper · Free Stock Photo. Pexels. https://www.pexels.com/photo/woman-with-pink-lipstick-holding-a-dropper-3762876/?amp=&amp=
- Pascua, J. (2019, October 2). Cosmetic Products · free stock photo. Pexels. https://www.pexels.com/photo/cosmetic-products-3018845/​​​​​​​
- Marketing, A. (2022, November 14). Skinergy Lip Conditioner Product. Pexels. https://www.pexels.com/photo/skinergy-lip-conditioner-product-14438189/
- Castro, A. (2022, September 19). Photo by Andrea Castro on unsplash. Graphical user interface, website photo – Free Contour Image on Unsplash. https://unsplash.com/photos/graphical-user-interface-website-519BDWSCqtk
- Dhumal, N. (2016, February 13). Red Lens sunglasses on sand near sea at Sunset Selective Focus Photography · free stock photo. Pexels. https://www.pexels.com/photo/red-lens-sunglasses-on-sand-near-sea-at-sunset-selective-focus-photography-46710/
- Bird, M. (2016, July 9). White Mercedes Benz cars · Free Stock Photo. Pexels. https://www.pexels.com/photo/white-mercedes-benz-cars-120049/
- Vieyra, F. (2021, April 1). Photo by Fortune Vieyra on unsplash. Man in black suit jacket leaning on gray concrete wall during daytime photo – Free Blazer Image on Unsplash. https://unsplash.com/photos/man-in-black-suit-jacket-leaning-on-gray-concrete-wall-during-daytime-aAN9ocBHbyo
- Asad Photo Maldives. (2017, July 4). Landscape photography of trees on shoreline · Free Stock Photo. Pexels. https://www.pexels.com/photo/landscape-photography-of-trees-on-shoreline-457882/
- Christina @ wocintechchat.com. (2019, November 11). Photo by Christina @ Wocintechchat.com on unsplash. Shallow focus photo of woman in gray jacket photo – Free Business Image on Unsplash. https://unsplash.com/photos/shallow-focus-photo-of-woman-in-gray-jacket-0Zx1bDv5BNY
- TieuBaoTruong. (2022, May 22). 40,000+ free happiness & happy images - pixabay. Pixabay. https://pixabay.com/images/search/happiness/
- Kalonji, P. (2022, January 26). Women Holding A Makeup With A Mirror. Unsplash. https://unsplash.com/photos/a-woman-holding-a-compact-compact-compact-compact-compact-compact-compact-compact-compact-compact-compact-compact-LH74lRYvBY4
- Morillo, C. (2018, June 22). Photo by Christina Morillo on Pexels. Pexels. https://www.pexels.com/photo/woman-smiling-and-holding-teal-book-1181424/
- Morillo, C. (2018, June 22). Photo by Christina Morillo on Pexels. Pexels. https://www.pexels.com/photo/woman-wearing-white-shirt-1181690/
An arrow in a shape of a letter S. The top half of the arrow is in a red colour and the bottom half of the arrow is in a blue colour. There is an eye in the middle of the logo where it's eye is open and the iris of the eye is in a light blue colour.
↑Back to Top