October 1st, 2020
Aromatherapy Guild, August - October
Aromatherapy Guild is a privately-owned boutique that offers all-natural health alternatives to their customers. Aromatherapy Guild is entering a market currently dominated by established brands and franchises such as Bath & Body Works, doTERRA, and True Botanicals. My primary role, as Lead UX Designer at Aromatherapy Guild, has been to collaborate with the Business Stakeholder, primarily focusing on the responsive web design of Aromatherapy Guild’s landing page. I used Adobe Suite, Wordpress, and remote-interviewing tools such as Zoom to make design improvements to the original website.
The Challenge
How might we encourage first-time customers to discover a new brand of aromatherapy products?
The Situation
As COVID-19 continues to negatively impact small business, small business owners have been looking for ways to stay afloat - turning to web design for a prominent online presence amidst the global pandemic and various quarantining measures. At Aromatherapy Guild, the boutique has primarily sold products through word of mouth and personal connections but without that face-to-face interaction, the business stakeholder recognized the need for a user-friendly website.
The Problem
How might we prioritize design features to invite new customer engagement, sell products, and resolve consumer pain points?
The Tasks
Before my arrival, the business owner had put together a website on Wordpress; but, due to the limited capabilities of template page builders and his limited knowledge of front-end web development, he was forced to find some workarounds to create the solutions he hoped for.
Screenshot of a portion of the original landing page design
After meeting with him to learn more about his company vision, the original landing page design, and the target audience; I was able to highlight some key design considerations for the project.
Design Considerations for Aromatherapy Guild:
The original landing page design did not focus on the product and its target audience, thus not serving the main goal: Sell. Sell. Sell.
Task: Research visual design of direct and indirect competitors
The original landing page design employed imagery depicting women, flowers, nature, and a green primary color.
Task: Ideate moodboards and wireframes
The original landing page design was built with a lot of backend workarounds that looked messy, outdated, and ignored design industry standards.
Task: Create a prototype using Wordpress and proficient understanding of modern CSS
As provided by the stakeholder, the overall target audience would be women and men, aged 25 to 65, from an affluent suburban demographic that commute into big cities for work. Think Jersey!
Task: Conduct user testing with target characteristics
An ideal workflow would lead to quickly, easily, and delightfully selling a product to a customer.
Task: Make final recommendations
The Ideation
How might we create an appealing, user-friendly responsive design consistent with the target audience’s expectations and the stakeholder’s company vision?
The Task
Research direct and indirect competitors
The Action
I started by researching top competitors in the aromatherapy retail industry to get a sense of what the target audience might be expecting in terms of visual design. Here are some visual surveys I put together to serve as inspiration and guidance.
Most competitors kept their font dark and simple with heavy sans-serif headlines or serif headlines combined with simple sans-serif copy. I liked the natural color palettes that AromaTech and True Botanicals used with a slight twist (AromaTech didn’t use green and True Botanicals went for a rich, deep green). Vicks could afford to de-prioritize images of the actual product in the hero section, instead showing how the products enhance everyday life for their customers. These were my favorites as their UI prioritized available products without wasting whitespace and presented their relevant information.
Several competitors included a sticky sale banner at the top of the page that constantly alerted the user to opportunities to save money on products! I really appreciated the product-focused hero sections but could see designers struggling with how to seamlessly balance images and descriptions (see: Young Living’s text block and doTERRA’s black bottom overlay for image contrast). These competitors incorporated testimonial sections that I really enjoyed.
The Task
Ideate moodboards and wireframes
The Action
I asked the Business Stakeholder to provide three words that captured the feelings he would like to evoke in first-time users and he stated: natural, authoritative, and healthy. The original Aromatherapy Guild design seemed to be leaning towards Art Nouveau with hand-illustrated typefaces and whimsical imagery; however, in my competitive research, I found that minimal and flat design was most popular. I tried to keep these differing design styles and stakeholder feedback in mind as I created moodboards in Adobe Illustrator.
The audience-inspired moodboard reflected the original design of the website with bright greens and purples paired images of plants and women. The product-focused moodboard served as a reminder for how our target audience expects aromatherapy products to look on websites, similar to how they’re presented on competitor sites. And finally, the ingredient-inspired moodboard featured images of eucalyptus, mint, and valerian - all ingredients used in Aromatherapy Guild products, which blended together to ultimately influence the final UI.
I also used competitive research to understand the anatomy of an appealing, user-friendly responsive design, finding key similarities that would meet user expectations (Jakob Nielsen’s 2nd Heuristic: Match between System and the Real World) and key differences that would help the product stand out. You can find the original design compared to the wireframe below.
Click here to check out my wireframing process in Figma for all responsive designs.
The MVP wireframe was inspired by minimal, flat design but sought to incorporate features from the original design to stay true to the Aromatherapy Guild brand. The wireframe comprised of a sticky sale banner in the top bar, a two-part header, a product-focused header with accessible text and call-to-action, a guarantee section to create user buy-in, a best sellers section to quickly introduce products and make sales, a discover section to make the brand more personable, and an organized footer to access all necessary pages after an initial review.
The Result
After presenting these design findings to the Business Stakeholder, he provided a collection of product images that he had personally created and we agreed that it was time to start prototyping!
But prototyping with a template page builder can be a lot harder than it sounds. The Business Stakeholder wanted me to use a particular template theme that the Wordpress community considered very flexible and modern. He struggled with making a responsive design and various workarounds, encouraging me to explore the possibilities. Right away, I discovered it would not be possible to implement some of my wireframe features which meant pivoting to a more sustainable solution, using some modern CSS.
The top bar worked exactly as I hoped it would but the main header and the bottom header had limited customization abilities so I pivoted to something more minimal with easily recognizable icons for “Search”,“Account”, and “Bag” while maintaining text labels for “Shop,” “Our Story”, and “Help” all on a single line. The original logo used the main color (#285419) but in future ideations, I’d recommend changing it to a darker green (#304021) as seen in the ingredient-inspired moodboard and using more modern product images like those seen in the product-inspired moodboard.
After seeing how competitors like True Botanicals and AromaTech presented simplified versions of their company mission, I decided that Aromatherapy could also benefit from a flat, minimal summary of their unique offerings. I designed the icons from scratch and edited the microcopy from paragraphs throughout the original design.
The “Best Sellers” section gave me the most trouble. It would’ve been easy to create a static version of the products, with modern CSS, that looked exactly like the wireframe; however, the template builder offered a quick, responsive “Products” feature that enabled an “Add to Bag” button on hover. The only problem? I couldn’t design a more prominent “Add to Cart” button as had been originally ideated. While I think the design works for an MVP, it would be best to take the time to dig deeper into the front-end for the next iteration. On the brightside, I was able to add product descriptions to create more customer buy-in.
Per the business stakeholder’s request, I used the provided product images. In the next iteration, I would recommend turning this “Discover” section into something more personable with images of customers or hands holding the products in a setting that makes sense - like a bathroom! As for the button design, the template builder had an “underline” style but it didn’t look quite right and I liked the outline version once I saw what it looked like on hover (inverted colors - green fill, white text).
Last but not least, the footer! It looked very similar to the wireframe but the template builder didn’t have a “space-between” option, as can be employed by using flexbox in modern CSS. In the next iteration, I would explore this but I didn’t feel it was necessary for an MVP.
Once everything seemed in order, I started testing users with similar target characteristics. After speaking with 5 users, I was able to collect delightful moments:
4 out of 5 users appreciated the “Guild Guarantee” section and felt it gave them a better, modern sense of what the boutique was offering.
5 out of 5 users immediately recognized the page as an e-commerce site for aromatherapy products.
4 out of 5 users were motivated to click “Shop All” because of the hero image design.
5 out of 5 users easily recognized the words, phrases, and icons used in the header and footer.
...and pain points:
4 out of 5 users did not like the product imagery, the calligraphic font style, or the colors, describing the mood as “dated” and “nymph in the enchanted forest” not “wealthy, suburban dweller seeking health alternatives”
3 out of 5 users felt they wanted more company and product context, perhaps the addition of a testimonial section or prioritizing sections differently?
3 out of 5 users felt a more medicinal mood than self-care, perhaps the addition of more people using the products?
The Conclusion
How might we measure success for design iterations?
Click on the image above to try out a live prototype of my desktop design.
After delivering the first iteration to the business stakeholder, I asked for any additional feedback. He provided notes that I thought could be implemented now (microcopy, updated links for more extensive prototyping in the future, font adjustments, and image positioning). I believe other questions regarding further template building functionalities and designing other pages such as the “Shop” page should be considered in the next iteration.
The stakeholder praised my work for creating a more modern look. I was overwhelmed with emotion as he said my devotion to this project in such a calamitous time had inspired him to keep giving Aromatherapy Guild his all. As my first freelance design project for a small business, I couldn’t be happier with the result. And I look forward to using my design skill set to create more social good in the future.