.jpg)
About Nana's Apothecary: Nana's Apothecary, a small ecommerce business selling handcrafted aromatherapy products has been successful in keeping a steady cash flow.
Problem: The client feels as though she lacks connection with her customers and attracting new customers.
Solution: Enhancing the current website with a vibrant design refresh and modernizing the blog section to enable user comments and interaction.
Role: UX Designer, Researcher, UI Designer
Timeline: 6 weeks
Tools: Figma, Optimal Workshop, Notion
Before diving in, I prioritized evaluating the existing website and initiated a kick-off meeting with the client. During our discussion, we delved into her objectives, essential requirements, and any issues or apprehensions she had.
Based on the clients answers, this is what I learned:
To gain a deeper understanding of the participants, I structured the interviews into distinct sections. Initially, I focused on familiarizing myself with the participants, discovering their professions, leisure activities, stress levels, and their frequency of reading blogs. Subsequently, I delved into their knowledge of and experiences with aromatherapy. After discussing their experiences, we transitioned to their initial impressions and expectations of the existing website. In the final segment, I had the participants evaluate the usability of the current website, probing them on specific topics outlined below.
In the end, I let the participants freely go through the website and asked them to provide feedback that can help me with ideating.
.jpg)
With insights into users' perceptions of the existing design, I believed it was pertinent to comprehend their preferences concerning navigation. The present design lacked a cohesive flow. Hence, I engaged a few participants from the initial interview and some new ones to undertake a card sort, aiming to forge a more intuitive navigation structure.
I surveyed 6 individuals to card sort for the top navigation. The participants ages ranged from 19-37 and were of all genders.
.png)
Originally, Nana's Apothecary's top navigation did not feature dropdown menus. The primary navigation links included Home, Shop, Gift Card, Blog, Buddy's Baubles, and Contact Us. I chose to cluster various pages of the site under broader navigation categories. Informed by feedback from the initial interview, I've also proposed a prospective page dedicated to offering detailed information about essential oils.
.png)
Once I had a clear vision of the site map and after facilitating a card sort with participants, I turned to design execution. Using Mockup on my iPad, I sketched out layouts for the homepage, shop, product results, and blog.
Following the sketching phase, I promptly transitioned to crafting mid-fidelity wireframes in Figma to digitalize the site. I opted for mid-fidelity over low-fidelity, given that the site map had already been established earlier.
I chose to convene with the client and present the wireframes to ensure our visions were aligned. My aim was to highlight the advantages of categorizing their products by type for enhanced user experience.
Following my discussion with the owner of Nana's Apothecary, the client expressed satisfaction with how the new products would be highlighted on the homepage. Subsequently, I integrated the designated colors and the client's images into the wireframes.
With the finished prototype for Nana's Apothecary, I reached out to the same participants who tested the original website and a few others to perform the same tasks and get some feedback.
Post usability tests, it became evident that the logo was a consistent concern among participants. This was an aspect I felt compelled to discuss with my client. While I recognize her fondness for the original logo, it's essential for her to be informed of the accessibility challenges users are encountering. On top of the logo, users were not fond of the extra textures in the background and preferred a cleaner and smoother transition with the formatting. Shown below are the updates made.
In my final steps, I have met up with Anastasia (founder of Nana's Apothecary) and provided her with the feedback given during the last of my tests. Anastasia is making future plans to display more studio like photos of her products and is considering on changing her logo. Anastasia and I have discussed to make this change happen for her in the near future.
.png)
