ciera tague

Make & Mary 2.0

Front-end developer, UX/UI, Backend development

Make & Mary is CBD beauty and wellness brand launched in 2016 that focuses on craft, education, and community.

Objectives

Having designed the previous website, Make & Mary pulled me in once again to address the new brand needs and digital design goals that were created by the establishment of a flagship store, the new COVID-19 culture, and the need for a developer-maintained theme.

The Site Map

Make & Mary has a lot of avenues for their brand, and have been expanding into bigger community-oriented spaces. Not only does Make & Mary sell its own products, hold events, and give education on CBD, it also sells other brand's products and frequently collaborates with others in the community. With all the Make & Mary does, it needed an updated site map to encompass and present to the user that clearly communicates without overwhelming.

Previous Site Map

Updated Site Map

Events List UX/UI

The previous website relied on using a calendar plugin to handle events that had many issues with Woocommerce. Not only did the events section constantly break and was difficult to be maintained by the client, but it was also did not allow for an interconnecting list of current events with an event archive. ux problem After assessing different ux pathways for users to register for events, we came to the conclusion that the easiest solution would to be to use functionalities that existed within the theme while also integrating thoughtful ui touchpoints that, such as a hover function that immerses the user into the event visually and gives them an emotional response that gages their interest and understanding of the event. I used an interactive slide template that could be easily input into other parts of the sites and worked individually and as an archive lead-in. ux/ui solution At any point, the user can easily access past events, which include valuable education.

User Friendly Marketing Opportunities

Guest writer Brie James teamed up with Make & Mary to create a monthly astrological ritual guide that is not only based off the products but includes special discounts each month. These ritual guides were sent out to subscribers through their mail system but is also available in it's complete form on the site. However, no traffic went to the recurring blog posts on the site. ux problem While examining the previous posts, emails, and social media posts referencing the ritual guides, I found that the social media posts and writings were similar but were not being visually unified across all outlets. The social media post had a photo that referenced the subject for the month, the writings were written with the same rhythms, and the emails pulled from both but never referenced each other. The website needed to be a final resting place for the user to interact with. But when they were on the site, how would they know about the blog posts without having to dig? Thus, I took the social media visuals, product visuals, and rhythmic flow of the writings and created two templates—one that existed on the home page and engaged the user with saving options and one that existed as the blog post itself that could always be referenced and was visually similar from month to month. ux/ui solution

Code Study: Footer

A new theme presented issues as each have different ways to output information. The new theme, though expansive in other areas, was restrictive with column amount and unable to support additional rows and widgets. To replicate the old footer, I had to rely heavily on coding techniques. For example, to give the appearance of 4 rows (when only three were allowed for the widgets), a table was coded and styled to add an extra faux columns.

What I Learned

This project has been a fun way to interact with a developing brand over time, seeing how the digital brand needs changed and grew as the brand fully established itself.

This is the second version of The Make & Mary site, the first was launched in early-August 2019 and can be viewed as a separate project on my site.

Art Direction: Yvonne Perez Emerson