Mandala
September 2021
Mandala was my first client website I had the pleasure of designing. Their brand was colorful, full of organic shapes and illustrations, and of course, spice. They loved the collage aesthetic and were ready to give their site a facelift.
Dive in to my process
Organized chaos
First things first, familiarizing myself with the brand. I reviewed previous meetings nots, gathered the clients needs then used my experience in UX to Card Sort or label and group similar content to decide what and how many pages this site requires. I then organized them categorically in a strategically structured diagram creating the Information Architecture for the site. This sets up the foundation for the user flow throughout the site.
Wireframes
Next, I created wireframes. This lets me design the layout the site sets a direction as well as a visual reference for when I later design the UI. For Mandala, I wanted to create a look that showcased the successful products they already market while also leaving plenty of growing room. This brand was evolving and it was important to me to create a site that was able to evolve with it.
Home page
The Homepage is the first impression of the brand and I wanted to make sure that I introduced the brand in a direct, user friendly, and colorful way. This brand mostly markets as a wholesale brand but does not leave the individual with a taste for quality out. This meant I needed to put anticipate the needs and pain points of both a single user as well as a business or wholesaler when designing the home page.
Pain Point Resolution
Next I wanted to address and resolve the other major pain points in Mandala’s current site. The store front was the most obvious choice. As previously stated, I wanted to create a page that was organized and current but also provided a systematic layout for growth. Users are able to add items to their cart with a single click both on the home page and shop page. Items are designed with a quick view feature as well as an additional product page.
Product Pages
Mandala’s products are individual and their product page should reflect that as well. Using brand elements to highlight the ingredients and packaging I designed each product page to give a feel for each individual product. There is also an add to cart and subscribe option to encourage returning customers.
Telling their story
Mandala’s story and pride in quality products were pertinent to their brand identity. It was important for me to set aside a page to really showcase this. I wanted an easy, digestible layout that inspired the user and ended with a call to action.
Reflection and Looking Forward
This brand was incredibly fun to work with. Not only was this my first client site but my first e-commerce site I designed. I, without a doubt, was learning and challenging myself each step of the way. Learning how to strategically set up a shop page was the most valuable lesson for me. I also really focused on perfecting design guides to create balanced collage graphics. My motto for this project was: you have to learn the rules before you can successfully break the rules.
I also really valued learning how to jump in during the middle of a project, listen to client and our creative director’s vision, adapt, and design a website that was representing all of our interpretations cohesively.
Looking forward, I created UI and style guides to be sent to the developers. Mandala’s website is currently in the process of being built.
Design Specs
Sept. 2021
Under the art direction of Maker+Made
Responsibilities
Research
Design
UX Methods
Research
Wireframes
UI
User Testing
Tools
Adobe Creative Suite
Squarespace