GlamGuide: Makeup Tutorial AND Product Reviews sITE

GlamGuide is a concept for a makeup tutorial and product review website, aimed to help people learn makeup techniques and the products that suit them most. Completed case study as part of the Google UX Design certificate.

Date: June 2023

Tool Used: AdobeXD

Role: UX Designer and Researcher

Hi-Fi Prototype

Completed Mockups

Project Goal:

Create a site designed for makeup tutorials and product reviews with ways to filter built in.

What problems are glamguide trying to solve?

Most places that people go to learn makeup are multi-use sites, such as Youtube and Tiktok, meaning there may be lots of irrelevant content to sift through and many places to look.
Often, users are unable to use anything other than search features for filtering on existing sites, which may not always work as intended.
On sites like Youtube and Tiktok, users can put tags related to style of makeup or products used but many don’t due to space constraints.

Paper Wireframes

With my desktop paper wireframes, I wanted to focus on the idea of spotlighting the top videos on the homepage, and allowing more filtering on the other pages to not clutter it.

Screensize Variation

When starting to design the paper wireframe for mobile, I made relevant changes, such as changing the top navigation to a hamburger menu to save space and streamlining navigation and the logo at the top.

Digital wireframes and lo-fi prototypes

When creating wireframes for tutorials and other pages, I made sure that filters were built in for users to use, thanks to my research. This lead to creative problem solving in AdobeXD.

Lo-Fi Prototype

Digital Wireframes: screen size variations

I also created screen size variations of the site for mobile, making sure to carry over important features, like filters, while making the site work better for smaller screens.

Usability Study Findings

I completed an unmoderated usability study on my low-fidelity prototype. This gave valuable feedback on my designs and allowed me to make them more user friendly

Home button

Users were confused by the lack of the home button, and did not realized they were able to click on the logo to go home

Navigation Buttons

Users used the large buttons on the home screen to navigate to tutorials, but not to product reviews, instead choosing the navigation bar. This indicated the button may need better emphasis.

Filtering

Users were unsure if “view by x” meant it was filtered or not, meaning the language surrounding feature was unclear.

Mockups

After the study, I updated my designs from the feedback. I added a home button to the top navigation bar. I also made sure to emphasize the buttons by making them different colors and changing it to say “PRODUCT reviews”
I also changed the wording on the filters header and added it below trending to better indicate that it will filter the videos below

Mockups: Screen size variations

I also created a mockup of my mobile site homepage, including the fly out menu. I made several changes, including moving the search bar to the top to declutter it.

Takeaways

Impact:

Users stated that the filters would be helpful and that the site was easy to navigate and included helpful features like product lists.

What I Learned:

I learned to always see how users actually use the product, something small like a home button can make a difference.

Next Steps:

Conduct any further testing.
Add more robust filters, such as color, tags, etc.