Brush&Shine

Web Design
Screenshot of the prototype created for the project Brush&Shine, showcasing various pages and how are they connected.
My Rol
UX designer leading the Brush & Shine Website Design
Project type
Web Design
Project year
July 2024 - August 2024

The product: 

Brush & Shine is a website full of tutorials that offers all types of makeups. The typical user is between 15-45 years old, and most users are makeup enthusiasts. Brush & Shine goal is to make searching easy and  fast for all types of users.

The problem: 

It’s difficult to find the video with the exact characteristics one wants, with applying filters can be confusing and making easy to connect with the community.

The goal: 

Design the Brush & Shine website to be user friendly by providing clear navigation and applying filters an easy process.

Right arrow

Objective Users

Persona: Valeria

Problem statement:

Valeria Martínez is a young makeup enthusiast who needs to find and view makeup tutorials specific to her skin type and special occasions because she wants to learn and apply makeup techniques that enhance her beauty for different events without wasting time searching through multiple sources.

Persona created named Valeria Martinez, it contains all info, goals, frustrations, etc.

Results of the Usability Test

  • Study type: Moderated usability study
  • Participants: 5 participants
  • Locations: Tarragona, Spain
  • Length: 45 min

Findings

At this point, I had received feedback on my designs from members of my team about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points. 

Changes done after the results of the usability test in the video reproduction page,
Modifications made in the video visualitzation

Accessibility considerations

  1. I used headings with different sized text for clear visual hierarchy 
  2. I used landmarks to help users navigate the site, including users who rely on assistive technologies
  3. I designed the site with alt text available on each page for smooth screen reader access

Initial Designs

Sitemap

Difficulty with navigation  through the tutorials was a primary pain point for users, so I used that knowledge to create a sitemap. The structure I chose was designed to make things simple and easy.

Sitemap organitzation

Paper Wireframes

Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation and searching process.

Definitive paper wireframe for the homepage

Digital wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing useful filtering process and visual element placement on the home page was a key part of my strategy. To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of doing a search and visualize a video.

Paper & Digital wireframes

Mobile paper wireframe
Tablet homepage wireframe
Desktop homepage wireframe
First digital wireframes created
No items found.

MockUps

Screnshoot of the homepage website of the project.
Screnshoot of the video list website of the project.
Screnshoot of the video reproduction website of the project.
Screnshoot of the blog post website of the project.
No items found.

Conclusion

Our target users shared that the design was intuitive to navigate through, more engaging with the images bigger, and demonstrated a clear visual hierarchy.

"There's a lot of content for my I love it so much!"

by Valeria

Other projects

Let's work together!

As you can see in my portfolio with all my projects I’m passionate about creating intuitive, user-centered designs that solve real-world problems. Throughout my journey, I’ve honed my skills in user research, prototyping, and usability testing, using tools like Figma and Adobe XD. Feel free to explore and connect with me!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.