Make & Mary is a cbd beauty and wellness brand launched in 2016 by founder Yvonne Perez Emerson. While going through a brand update, I was brought in to help design and build their new website.
Make & Mary
Front-end developer, Site map, UX/UI
The Site Map
Make & Mary has three main points of focus: their store, their events, and their education on cbd. Secondary points of focus included options to display their new brand, a place to showcase all their blog posts, and new press articles. Shown on the site map below, I worked to create a user flow that would best work with the needs of the brand.
To emphasize the store, events, and education, touchpoints on the landing page were used to highlight the different components.
Because Make & Mary was beginning to amp up their brand, numerous new press articles were written about them. Thus, the articles needed to be searchable on the website as well as link out to the original article. To include both press asks, I created points of entry from both the logo bar and consolidating them into the blog as a category.
UI Specifications
With the brand update, came establishing assets that worked best for the web. Using the brands established typefaces, and translating the brand colors into web safe colors, I was able to create UI a system for the website.
Abril Fatface, and Monsterrat were original brand assets while Copper, dark blue, and light gray were translated for the web.
Code Study: Events Page UI
The client had wanted to use a Wordpress theme, as they were familiar with the content management system and woocommerce system. However, some of the plugins that were added presented a separate UI system than what I was establishing. Hand coding was required to create a similar UI system.
The plugin M.E. Calendar had specific UI assets that didn't live well in the established UI environment of the main site.
I had to identify the classes and specific changes to create a cohesive UI.
What I Learned
This project was unique as I learned how to work with a brand as it was being created and establishing its new identity. I was able to be flexible and contribute ideas that would help translate into the web environment.
The Make & Mary site was launched in early-August 2019. View it at makeandmary.com.
*The site was created in Wordpress, a content management system, and, per contract, changes are made to the site by the client. All documentation listed above was created by me before client turnover.
Art Direction: Yvonne Perez Emerson