Graphic Designer & Web Developer

Jeffree Star Cosmetics | Website Redesign

For this project, I had to pick a website to redesign based on finding using different user testing methods.

 

Jeffree Star Cosmetics is a small makeup company ran by Jeffree himself. The makeup line consists of liquid lipsticks, lip scrubs, lipsticks, and eyeshadow palettes. The redesign for this project is to ultimately make the UX better, along with the organization of the site easier to understand. 

Site Selections

The sites I considered for the redesign are ones that I use frequently. All of these sites were in need of improvement for the overall ecommerce experience.

  • Jeffree Star Cosmetics - The site itself is well set up and pretty to look at, but the organization needed some help, along with with some of the functions on the site itself.
  • Wicked Clothes - This site could have used more categories and an easier check out process.
  • Look Human - This site's problem came from the product pages, organization, and how crowded it was.
  • Torrid - This site was once again pretty to look at for the most part. The problem came with how crowded it was, the amount of content on the product pages, and not being able to edit the cart once in the check out without going back.
  • GameStop - This site was possibly the worst of them all. I would compare it to the Amazon of game stores. The navigation is not easy to follow, it's hard to find an item unless you search for it. They don't just show things they sell. They list their partner store items, which then takes you to that store if you click on said item. The cart is easy to use, but could use some design help.

For the final site I decided to go with Jeffree Star Cosmetics. I decided that this site would allow me to give the best redesign as there is not much for a home page or category pages.

Project Overview

This project included several different steps. First was an overhaul of the homepage. The next step was to work on the category page. I worked around what was already given as the layout was well designed. I added in some color and design elements to take the page to the next level. The next page to tackle was the product page. This page was overhauled as well. I took the basic design of the previous page and added to it, providing more information about the product to the user. The final page of the project was the cart. This page was similar to the category page. I just added some different design elements to help an already well laid out design. 

Key Research

Visibility of System Status

Jeffreestarcosmetics.com does not do this in places. One place in particular is the login page when you enter your information incorrectly. The only feedback it gives you is that you have entered the wrong information. As for the check out it has you checkout via Paypal, Amazon Pay, or through the site itself. When checking out through the site is does not give you feedback when you are entering your information. If you enter something wrong you have to reenter everything. 

Match Between System and Real World

Jeffreestarcosmetics.com matches between the system and the real world. The site uses symbols that are commonly used on the internet such as a shopping cart and the common social media icons. It also uses the common words to identify items as well.

Jeffreestarcosmetics.com is missing a search function though. This would be nice for if someone was looking for a certain color or item. 

User Control & Freedom

Jeffreestarcosmetics.com does this in a couple of places. The main place is in the shopping cart when checking out. It always gives the user the option to go back to the site and continue shopping.

Recognition Rather Than Recall

Jeffreestarcosmetics.com uses the common add to cart options. So the user does not have to think to hard about adding an item to their cart. This site allows the user to add the item to the cart from the main shop page and from the item page.

Jeffreestarcosmetics.com does not allow the user to add an item to a wishlist, even when logged in. This may be a feature to add. 

Flexibility & Efficiency of Use

Jeffreestarcosmetics.com does not take advantage of this feature. They do not have features that speed up the shopping experience for the more experienced user. The site does offer the experienced user and/or collector the option to by "vaults", which are entire collections at one time. 

Aesthetic & Minimalist Design

Jeffreestarcosmetics.com has both aesthetic and minimalist design when it comes to the homepage of the website. You start to lose that as you continue shopping on the site. It seems as if the makeup and the clothing has different feels. It should all have the same feel. 

Help & Documentation

Jeffreestarcosmetics.com has this as links in the footer and a FAQ in the main navigation. They also provide a email you can write to. 

Competitive Audit

If people are looking to shop a similar online brand as Jeffree Star Cosmetics, they will come across multiple small businesses that sell similar products. These such brands include Colour Pop Cosmetics, Dose of Colors, and Sugarpill Cosmetics.

The main competition for Jeffree Star Cosmetics is Colour Pop. When you compare their sites, they are far different from each other. Out of the two sites Colour Pop is set up to sell the user products. They have their best sellers on their main page, along with their most recent collections and products. Colourpop also has an option to search for an item. These are all things that the Jeffree Star Cosmetics site is lacking. 

User Persona

Name: Breanna Valencia
Age: 21
Gender: Female
Nationality: American
Location: Sioux Falls, SD
Education: Pursuing a Bachelor’s in Business
Income: $25,000

Appreciations: Going against the grain | Standing out from the crowd | Likes supporting small businesses

Breanna is a 21-year-old female who is currently pursuing her Bachelor's in Business, while working at a local bank. She is a workaholic and loves being able to dress up and be fashionable for her different work functions. Breanna loves going against the grain and standing out from the crowd by wearing bold colors. While Breanna is not working, or hanging out with friends, she can be found at different makeup stores and watching YouTube videos, trying to figure out the latest trends. 

Workflow Analysis

Schematics - Round One

Schematics - Round Two Responsive

Schematics - Round Three

For this draft of the schematics I used Axure. I did an in-depth navigation bar and featured item section for A/B testing. Within the featured items I tested a header style and button style I will use throughout the rest of the schematics and final prototype. The rest of the site is just basic functions at this point in time. 

Schematics - Final Redesign

Final Website Redesign

For this final draft of the wireframe I decided to continue using Axure. This final redesign has taken into consideration everything that I have learned during the class so far. It has also taken into consideration all of the feedback I have gotten from my peers and from my use testers.

The final outcome is a complete redesign of the Jeffreestarcosmetics.com home page, category page, product page and the cart page. The design itself has stayed similar to the original site in color, but the functionality and features have changed.

The following is a link to the working Axure prototype: 
Prototype Link

The steps to take for this prototype go as follows: Home - Lips - Liquid Lips - Click on Product Image and/or Add to Cart Button - Product Page and/or click Add to Cart - Checkout.

I have also included some fun little things you can click on. Some examples would be all the sliders, the search bar, and calculate shipping button. Also if you hover over the product images on the category page and hit the quick view you'll get a little surprise.

Please keep in mind that not all the links work, only the ones relevant to this redesign process. 

 

Quick View Popup appears when clicking on the quick view option.

When clicked on the calculate shipping button on the cart page, the user will see that their shipping information pops up with estimates.