Role:
UI/UX Design
Web Development
Graphic Design
Timeline:
Jan 2020 - December 2022
Overview​
​
De Los Angeles Cosmetics is a new, up-and-coming health and beauty business. As their only UX Designer and Web Developer, I was in charge of developing, designing, and maintaining the user interface and analytics through Shopify. Furthermore, I delved into graphic design to create various visual designs (ex. logo and icons) specifically for the website.
Using Shopify​
​
Shopify is an e-commerce platform that allows users to produce their own online store and sell their own products. With this platform, I was able to easily add and design different pages for the website. However, there are some instances where I was required to edit and add code in HTML/CSS in order to create the desired interface.
Paper Prototypes
​
By comparing other varying shops from Shopify, more specifically other beauty shops, the owner and I designed the site to look simple yet classy.
Home Page
Drop Down Menus for Home Page
Collection Page
Rewards Page
Product Page
Gallery Page
Final Designs
​
In order to create the final designs, I used Figma to transform the paper prototypes into high fidelity prototypes. Once we finalized these designs, I added these features by coding in HTML/CSS. The font used is Helvetica (Regular, Bold, and Bold Oblique). The color scheme that is used is #FFD2EB, #FF59B3, #777777, #FFFFFF, and #000000. While coding the site, I had to write different parts specifically for desktop and mobile since most of our target audience uses their mobile phones in order to buy products online.
Reflection
​
Even though Shopify has an option to incorporate apps to add certain features, I still had plenty of code to change in order to create the intended layout. Prior to this work, I wasn't as confident as I am now with coding. However, through this project, I was able to learn more and practice more coding in HTML/CSS. Once I added all the features in the HTML code, I spent most of my time coding in the CSS files in order to format the contents of the site. Despite all the coding, I still made sure that the designs were legible and user friendly, so that users can easily buy products. Also, I practiced more designing on Figma to create the high fidelity prototypes and Photoshop and Illustrator to create the logos.
Creating and designing this site was exciting for me as this was my first project outside of school. It's also my first project where I didn't have a team of designers helping me. Despite this, I was still able to use my knowledge and design this site. With the site now up and running, I helped maintain it by looking through the analytics every day in order to find ways to improve the user experience and help users navigate through the site easily, which would lead them to buying the products.