Great Clips

My Roles

Stylescapes / Branding

We began by creating “stylescapes” to visualize the website’s look and feel. We presented three options and collaborated with the client to select the one that best captured their brand essence and vision for the site.

UX

As we developed the styles, our team collaborated with the client to update their requirements and suggest ways to enhance their website. One feature we implemented was the Lookbook, which lets users browse different haircut styles and learn about the necessary products and maintenance that would apply to that hairstyle.

UI / Visual Design

Once the client approved the wireframes, I began applying our stylescape work to the product. I designed components and built out the design system using the atomic design methodology. Starting with the basics—typography, grid, colors, and icons—I then moved on to global elements like navigation, buttons, image treatments, and cards. After receiving client approval, we implemented these elements across the website, beginning with the homepage. Using a waterfall approach, we successfully worked through all 122 screens, staying ahead of the initial timeline.

While the waterfall process led to some changes that impacted previously approved screens and pages, the scalable design system made global updates quick and efficient.

Development

As the development team worked on the pages, I collaborated closely with them to ensure everything was implemented as expected. I provided code for the navigation and footer components, utilizing a flex-based approach that allowed them to scale seamlessly across all screen sizes.

QA

Throughout the remaining development phase, I assisted with QA to ensure the website adhered to the design system, was fully responsive, and functioned as intended.