Background

Viv's Botanicals started creating plant based and herbal products a little over a year ago. They currently have an Etsy Store, but the company's owner also wants to start offering wellness consultations, a function her current store can't accommodate. She's also looking to hone in on her brand and her story.

Role

UX Designer

Timeline

4 weeks

Goal

Design a responsive site where users can purchase items, set up wellness consultations and learn about the benefits of using herbal products.

Step 1: Research

Competitive Analysis

There weren't many companies that offered products as well as wellness consultations, so now I knew that Viv's Botanicals would stand out in that regard. Also, aside from the above findings, I noticed that big company sites came across polished and professional, but lacked "personality". The smaller, DIY sites looked more blog-ish and templatized, but had more character. I made a note to try and combine the two aspects with my UI design.

Market Trends

According to Grand View Research, the botanical ingredient market is expected to grow 7% from 2020 to 2027 with a predicted market value of $49.36 billion USD. With easy access to information about the ills of common product ingredients, there’s been an uptick in people moving away from purchasing traditional products in favor of brands with natural ingredients.
‍
Even with competition, especially in terms of Ecommerce, I still think Viv's Botanicals will be in a good position to benefit from that growth and take advantage of current trends. Plus, the company will be offering health coaching services, an addition that will be sure to set her apart from her competitors.

Provisional Personas

I created three persona sketches with my first pieces of research to get a feel for who would most likely use the site. I also used these as a basis for determining participants to interview.

Interviews

I recruited four women to participate, aged between 39 and 60 years old for my initial interviews. They were all in my immediate circle of friends, so I knew they would fit one of the provisional personas. I wanted insight into their shopping habits, what they looked for in a natural product and what aided in their decisions to purchase.

Questions centered on what types of skin care products each used, whether they were natural or not, how they purchased them and what types of challenges/frustrations they faced while shopping. I followed up with a few questions about wellness coaching - had they consulted one before, would they ever consult one and how their experiences had been.

All of this data helped to create the main persona.

Key Findings

• All participants said almost all of their products are natural or herbal and they use them every day.

• 3 of 4 shopped for their products online and researched considerably before purchasing.

• Reviews were important in decision making for 3 of 4 participants.

• Half of participants said recyclable packaging was a factor in purchasing.

• 3 of 4 had used wellness coaching before and found it beneficial.

• Two interviewees had accounts with stores they purchase from.

• All participants cited health as their main reason they switched to all natural products.

Persona

Empathy Map

With my persona created I could dig a little deeper into her motivations to understand how to design the best experience.

Feature Roadmap

Based on the information collected so far, I created a hierarchy for the product features to help keep us on track for release.

Step 2: Information Architecture

Sitemap

The owner and I decided early on that we wanted to keep navigation as minimal as possible, so we stuck to just four primary points to jump from. The only section that needed a little more attention was the store, but since the current product line is only six items we opted to forego a card sort and revisit if there were issues during user testing. We also combined the About section to one page during the final design period to further streanline.

User Flow

To internally test the Sitemap, I created a hypothetical journey for my persona to see how she would navigate the site. I included alternate choices as well so I could get a better picture of how the IA would function.

Sketches

Armed with the persona, research and some site examples from the owner I was ready to start drafting the first ideas for the site.

Wireframes

Once we agreed on the sketches and the general layout ideas, I went in to Figma and produced the wireframes. Even though user testing would only involve buying a product and inquiring about a consultation, I decided to add Contact and Account pages since I will eventually be creating the whole site. Now I could test the relationships between the CTA's, header navigation and pages.

UI Design

Moodboard

I had a few conversations with the owner about how the site should look and feel, but I still wanted to comb the the web for images that would help solidify the tone and visual direction of the design.

Step 3: UI

UI Toolkit

The tone of the site should evoke nature, serenity and breeziness. Initially I had a more complicated color palette, but found that it brought too much noise to the design. I decided to simplify with shades of green, which helped since I knew that most of the color would be coming from imagery.

Homepage Iterations

The homepage would dictate the rest of my design, so I knew I had to get it right. I started with a hero containing copy and a CTA that pointed to the wellness section. I then recalled my earliest contact with the owner and remembered that selling products was her initial objective. The next couple of iterations weren't hitting the mark, so I tried an animation. The owner liked it, but we ultimately agreed it wasn't necessary. We both felt the site should look professional, but still maintain an element of DIY ethos.

Homepage Design

The homepage would dictate the rest of my design, so I it had to be right. I started with a hero containing copy and a CTA that pointed to the wellness section. I then recalled my earliest contact with the owner and remembered that selling products was her initial objective. The next couple of iterations weren't hitting the mark, so I tried an animation. The owner liked it, but we ultimately agreed it wasn't necessary. We both felt the hero should direct the user to the store and look professional, but still maintain an element of DIY ethos.

Pages

Once the homepage was approved I moved on to designing the rest of the site. This went a little quicker since the owner and I agreed that, aside from the store, it should have a blog-like feel. The store has a more polished feel since we wanted to differentiate it from the educational and coaching areas.

Step 4: Testing

Goal

Learn users feelings on overall design, gauge positives/negatives of navigation layout and obtain insight on task performance and completion.

Set Up

I recruited three participants for usability testing and gave them a set of tasks to complete on the site. Testing was conducted over Google Meet so I could observe their reactions in real time.

Tasks

• Explore the site

• Sign up for Wellness Coaching
‍
• Purchase Toner

Participant 1
Age 46
Vintage Shop Owner

Participant 2
Age 39
Senior Buyer

Participant 3
Age 59
Jewelry Designer

Findings

Luckily, most of the feedback I received was positive and were generally about details I overlooked, not about navigation. None of the participants had any issues completing a task nor did they get stuck anywhere on the site.

Positives

• Over all feelings on the site were positive. All of the participants thought it was cohesive and responded in ways they anticipated. There also was a positive response to the look of the Shop and the product pages.

• Although no one entered into the Shop the same way, everyone thought the navigation made sense. One participant even commented on how easy it was to get around.

• Copy, especially in the Coaching section, got positive feedback. All of the participants noted at one point that it made the process understandable. This was an especially good note for when we design the final implementation.

• The checkout funnel was also a win. I tried to keep everything accessible at every step rather than going page to page which seemed to have worked well.

Opportunities
‍
• Participants had no way to add or save an item to a Favorites section. I intended to add this, but forgot during the design process. Adding an icon or button on the product page should remedy this.

• There was a callout from one participant to add a link to the Philosophy section while learning about coaching. She felt it would help a user to quickly learn about the owner before she makes her decision. This will be included in the next iteration.
‍
• The Ingredients/Directions/Benefits section on the product page was confusing to everyone. How they function wasn't intuitive. A noticeable hover state may fix this issue.

• Two participants made note of the image on the coaching page saying it looked "young". There were also minor comments about some images being "boring". Even though most of the images are place holders, it was good to note how important image choices will be.

To see the full site and prototype, click here.

Takeaways and Next Steps

Designing this project gave me good insight into how difficult it is to work solo on a project. From inception to final iteration (well, almost final), I had to think through each step, calculate the ways I would obtain information and make all of the design decisions. A simple website became very complex, very quickly. And even though the site has a somewhat templatized feel, I still have the gratification of knowing I designed every piece. Plus, the owner of the company told me over and over how much she loved the design, so there’s that too!
‍
If I had more time I would have gone deeper into testing transitions, creating animations, fine-tuning forms and spacing and thinking about how to add memorable touches to the experience. I also would have carved out time to really curate the content photography and photograph the products. But as it stands, I’m very happy with the results.

Next steps: I will be building the site for the client, either on Squarespace or Webflow. I would prefer Webflow as it will give me more opportunities to add animation and make the site unique, but I want to do what’s best for the owner. Prior to building I’ll set aside time for some of the items I listed above, plus tighten up the design so it’ll be ready for implementation. Imagery and copy will be most important, so I’ll be in contact with the owner frequently to discuss options.
‍
Once the design is finalized, I’ll go through another round of user testing to help catch any roadblocks, typos and mistakes. It’ll also give me an opportunity to gauge how users feel about the overall design and experience. I’ll then move to transferring the design to the chosen platform and launch the site. And then, hopefully, I'll receive the greatest complement - the owner's first sale!