Project Specs

Project Duration: 3 weeks

Platform: Web

Software: Figma

Goal(s): Use the Material Design System to improve the Boys Lie ecommerce website and create a more accessible, cohesive, and elevated brand experience between mobile and desktop.

Overview

Boys Lie is an ecommerce brand that sells luxury leisure wear with artistic graphics and prints. The brand was founded by Tori Robinson and Leah O’Malley in 2018 and skyrocketed in popularity after being featured in the 2019 TV show Euphoria, which is popular with Gen Z. In 2020 the business brought in $5 million, 12% more than the previous year. Their designs take inspiration from early 2000’s fashion with a modern twist, and Boys Lie caters to the later end of Millennials and Gen Z customers. Although this Brand is rising in popularity and has a growing revenue each year, the website has areas for opportunity and improvement to create an ideal user experience on their website (usability issues, lack of consistency, accessibility issues). Some of these areas for opportunity have been changed since this project and some remain an issue. In this Case study, I will show how I implemented Material, a design system created by Google, to not only better understand how design systems work, but to conceptualize how the Boys Lie website would function using this system. It is important to not that Boys Lie is not my client, and this was purely an exercise for my own design knowledge.

Methodology

There were 2 methodologies used: research through googling and scrolling and learning through replication by using the new design system.

Process

Step 1: Interface Inventory

The first step was creating an interface inventory, by auditing the website, to determine if Boys Lie currently uses a design system. Currently I am in the process of reorganizing this audit now that I have a better understanding for what is necessary to include.

Step 2: Research Design Systems

After creating an inventory I was able to determine that (still need to insert here if Boys Lie has a design system. I will know by the time I am done reorganizing the inventory.), and I was able to research to find the best design system to fit the needs of Boys lie. I looked at Polaris by Shopify, Carbon by IBM, Atlassian, Finastra, and Material by Google. My research concluded that not only is Material Design one of the most revered, strongest, and adaptable design systems to date, but it is a design system with mobile functions in mind first. It was very important to me to use a design system that valued mobile over desktop because in my research I found that most of Gen Z shops on their mobile devices. This could be due to social media promoting brands or just because they spend a lot of time on their phones.

I felt that Material would be a great fit for the Boys Lie website because Gen Z shops so often on their phones and I realized that there needs to be a cohesive experience between desktop and mobile, and mobile displays need to be prioritized.
M3 has a modern, current feel that will appeal to Gen Z
The rules of the M3 system are easy to follow and concise. I chose Material Design, and then it was time for the final step: implementing the system.

Step 3: Implementing Material Design

Notable Changes

• M3 says that FABs are reserved for high priority buttons. I have converted the Help and Accessibility buttons into FABs to show priority and help them stand out.

  • These buttons show icons and words but can be reduced to just the icons if the user chooses-- M3 accepts both.

• Menu was moved to the side, for both mobile and desktop to free up space and live somewhere more intuitively.

• Because the main menus are retractible, they are defined by icons-- M3 standard.

• iconography was updated to M3 standards.

  • Tags were appropriately placed (such as on the shopping cart) with the primary attention color (6750A4)

• The search icon button has been changed to an M3 standard, outlined search bar. This search bar stays consistent with the entire website, which is different from before, when the icon opened up a new menu and lead to a new page with another search bar.

• Breadcrumbs have been added to show progress within the website, in line with M3’s accessibility guidelines.

• Button colors change when hovering and clicking per M3 guidelines.

• Add to cart button is elevated to show the main action or purpose of the page.

• Information about the product is condensed within an M3 standard Tab because the information is of equal level.

• Carousel is moved to the side to minimize scrolling for the user.

• Images are condensed into their own card.

• Information to the left is condensed into an M3 standard card.

• The menu for mobile (as well as desktop) is enclosed in a hamburger menu opens to the left side.

  • Elements of the menu are expandable.

    • When a category is chosen, and the menu expands, the category changes color in line with M3’s color guidelines for indicating clicking.

    • When the menu expands a standard line appears for the user to understand their ability to scroll.

  • Peace of Reign image becomes decorative-- before it was a button-- the button is annotated with a button and the image sits in the background to create a molecule.

  • Buttons highlight when clicked.

  • Menus function to show the user a list of navigating options.

  • Dividers are being used throughout the redesign to group appropriate information together.

Before Material 3

After Material Design 3

Final Product

conclusion

I learned a lot from this exercise: implementing a design system onto a website that already exists. Although I still stand by my reasons for choosing Material Design, it was difficult and verging on experimental, and felt almost like an imposition, to use Material Design for desktop redesigns— since Material Design is a system with mobile in mind first. This being said, I do not feel as though it was an incorrect design system to use. I learned that a design system is not end all be all for a website. Although useful products, design systems can start to create such rigid rules that the aesthetics of a website might be compromised to stay in line with these rules. Certain problems may arise, like sizing images, or making a button stand out. But design systems are incredibly important for accessibility, and can help a website, company, or brand feel more cohesive.

This was an exercise to help me learn and better understand design systems, so that I might be able to start creating my own systems. I feel as though I could have multiple iterations using Material Design and the Boys Lie website and each time I would understand the system a little more and see things that I did not see before. My plan moving forward is to attempt this exercise again. I look at this finished product as a jumping off point to build upon. Although I feel as if the website has improved in an interesting way, using this design system, I feel that I still have room to improve, especially with buttons. I cannot wait to grow from this point in my design career and be able to record my progress.