Paul Mitchell Schools’ Website
Web Design
UX/UI
OBJECTIVE
Design and develop the Paul Mitchell Schools main EDU site and 110+ individual school sites. The new redesign integrates with the client’s existing CMS system while improving site structure and layout, navigation and mobile responsiveness to increase user engagement and website traffic.
Prior to design, a full design system was established for the main and school level sites. Elements that were pre-determined included layout, colors, buttons and text links, typography, headline and paragraph styling, from inputs and alerts, form selectors, lists, tabs, accordions and inline elements, icons and overall padding. A few of these elements are highlighted below:
SOLUTION
Working in collaboration with the development team, we created a headless, modular website that meets the principles of responsive design, ADA compliancy and improving the overall user experience. In order to give the design more longevity, we created the sites using a modular approach which allowed for more fluid layouts and flexibility in comparison to basic templates that typically need to be refreshed more frequently. Additional steps were taking throughout the process to ensure a successful launch:
We conducted a user analysis focus group, a critical stage in the discovery process, where we provided scenarios and had users navigate the current site to clarify specific user flows. The audit helped to identify gaps and in turn would help enforce the decisions made in the new website UX/UI
Following the discovery phase, we outlined a more streamlined site map for the EDU and school level sites to help both users and search engines navigate the site more efficiently
We developed a design system and standards that would be utilized throughout the websites thus providing quicker development times and consistency among modules
Once newly designed modules within a page layout were approved by the client team, modules were placed into annotated libraries for the developers to easily reference
We implemented lazy loading and image compression throughout the site to improve site speed, a key component
Extensive QA was performed, working along side the Project Manager and Developer, spanning across a 7 month time frame to verify modules worked seamlessly together no matter the browser or device viewed upon
Designed a training document and helped facilitate a three day training session with the client on backend implementation for the main EDU site and all individual school sites
Role: Art Director, Designer
Agency: Ideas Collide
Year: 2018-2020
Programs: XD, Photoshop
The following work samples were created while working with Ideas Collide for Paul Mitchell Schools. All rights of the designs are property of both parties and can be removed from display in my portfolio at any time.