anna istomina

Herbal Tea Central

An independent, informational website about herbal teas. The site provides reliable and comprehensive information about herbal teas: what they are, types of teas, health benefits, how to choose, brew, places to purchase, etc.

The project showcases the process from concept to interactive prototype to a coded website, including a UX testing plan and results.

Coded prototype

Mobile prototype

Desktop prototype

(click for interactive)

Process

Target Audience

Primary target audience is people between ages 30-50, yoga and healthful lifestyle oriented. They are interested in learning about alternatives to regular coffee and tea.

Secondary audience is people 30-50 who are encountering various health issues as they get older, and are looking for ways to supplement their medical diets with healthy drinks, and bring in variety.

Target Platforms

Desktop website, tablet and mobile phone

Core Features

Competitive Analysis

Herbal Tea Center

This site provides some information on different brands of herbal tea. There is a bit of information on botanicals and tea FAQs. However, this site is selling the tea, and there is no information on why they chose one particular brand over another. The user is not sure how reliable the quality of tea is, and there aren’t any customer reviews.

Republic of Tea

This is just one particular brand’s website, but it contains a lot of useful information about their own teas. They make tea fun by informing the user well about what their tea is all about, and integrating recipes for iced tea, and even selling sipware, and more.

Teavana

A beautifully designed site (but also for just one particular brand of tea) that has abundance of information on all their teas, steeping process, pairing notes, tasting notes, etc. They also sell tea related products like sipware and things to add to tea. The site is "spacious" and well organized.

Personas and use-cases

Wireflow

Use case

Last week someone told Samantha about Green Rooibos tea. She has never heard about it before, and apparently it has numerous health benefits. She goes on Herbal Central site to learn more about this type of tea.

Use case

Today Jason visits Herbal Central site to look for something that will help him boost his energy, as he is in a caffeine withdrawal.

Use case

Samantha likes Herbal Central, and has been using it for a few weeks now. She notices there is no information on a certain rare tea she is interested in. Since she trusts the site, she wants to contact them about possibly adding this information. She goes to the Contact page to submit an inquiry.

Style guide

Usability Testing Plan

Usability Goals

The main tasks that the website prototype was designed to support are:

With that in mind, I decided to focus on two major usability goals:

  1. Efficiency - how productive can the users be on the site, how easily and quickly can they find information, and the quality of information.
  2. Satisfaction - how pleasant is the site to interact with, and how satisfied the users are with the site overall, including visual appeal.

Specific measurements to be taken

What and how to test

  1. Initial reaction to the website, exploration and reporting on what the user thinks the site is about and what it does.
  2. Completing specific tasks scenarios.
  3. Getting subjective verbal opinion, and through a questionnaire.

The sessions will be completed with 3 participants total, in 3 separate one-on-one sessions.

Usability tasks and scenarios

  1. Please take a look at the Home page, without clicking anything, and tell me in a few sentences what you think the site is about, and what you could do on the website.
  2. You would like to browse herbal teas on the site. Please navigate to the appropriate page.
  3. You are interested in who the content creators are, and what their philosophy and policies are about.
  4. You want to read about the details on any given tea from the gallery, and where it is available for purchase. Please navigate to the appropriate page for the tea of your choice.
  5. You haven’t found a tea, and would like that added to the site. Please find a way to do that.

Post-testing questionnaire

For each question, please check one box that applies.

Methodology and procedure

The testing will have 3 participants. The site prototype will be tested on an Android phone (Pixel) and a Desktop computer. First impressions, demographic data, satisfaction assessment and suggestions for improvement will be collected via questions, tasks, and a questionnaire.

There will be one facilitator, myself. I will also be taking notes. After the brief introduction and an ice-breaker, I will ask the participants to carry out the “first impression“ part of the testing. We will then proceed to the task completion. After the tasks, I will ask them to fill out a brief electronic questionnaire form.

Participants

The testing will have 3 participants. They were recruited from the pool of friends and family, due to budget constraints. Since most of my friends and family love tea, it wasn’t hard to find ones that fit the personas from my market research.

Participant 1:

A single female in her early 30s, who is a yoga instructor. She loves herbal teas and is always interested in learning about new types of teas. She is also interested in having a website to refer her students to.

Participant 2:

A male in his early 30s, working in the tech industry, mid to high income. He has a wife and a young child. He is a power Internet user, and is always busy with work. The participant has been recently looking for ways to reduce caffeine in his diet. He is decisive, and doesn’t plan to spend too much time browsing the net for this type of information.

Participant 3:

A female in her 50s who loves doing yoga. She has recently been required to go on a medical diet that excludes caffeine. She is interested in learning more about herbal teas.

Usabilty Testing Results

Specific measurements taken

Completion rate

A completion rate of 100% has been achieved for every task, which meets the established goal of 100%.

Number of errors per task

100% critical error-free rate - meets the established goal of 100%

90% non-critical error rate - exceeds the established goal of 80%

Length of time to complete each task

12 seconds was the average task completion rate, ranging from 10 seconds to 20 seconds. One of the participants had only limited experience in using the web, the second one was an average proficiency user, and the third was a power user.

Subjective report on satisfaction and suggested improvements by the user

Will be summarized in the questionnaire results.

What was tested

Initial reaction to the website, exploration and reporting on what the user thinks the site is about and what it does.

Participants were all asked to take an initial look at the Home page and tell what the site was about, and what tasks they could perform.

While participants got an idea that the site was about teas, they were not sure what the site was exactly about, without having to go to the About page.

The tasks that they thought they could perform on the site were as follows:

Summary: Overall, participants had no difficulty recognizing the brand and the purpose of the site in general. However, they struggled with understanding what teas exactly it was about, and what kind of information it provided, just from looking at the Home page. It was not immediately clear where they were exactly.

Improvements will be suggested.

Usability tasks and scenarios

1. You would like to browse herbal teas on the site. Please navigate to the appropriate page.

This task was completed error-free, completion rate 100%. All participants were able to navigate to the Teas page and view the gallery, using the main navigation menu. Average time spent on task was 10 seconds.

Summary: Overall, this was an easy task, and all users completed it efficiently.

2. You want to read details of any given tea from the gallery, and where it is available for purchase. Please navigate to the appropriate page for the tea of your choice.

The task was completed error-free, completion rate 100%. Average time spent on task was 10 seconds (including some reading to make sure this is the right page).

One participant had mild difficulties with finding the information, because the details page didn’t display a lot of content, so they weren’t sure if there was a different content page available with more information.

Summary: Despite the 100% completion rate, this task uncovered a potential problematic area. Improvements will be suggested.

3. You want to read about the details of any given tea from the gallery, and where it is available for purchase. Please navigate to the appropriate page for the tea of your choice.

The task was completed error-free, completion rate 100%. Average time spent on task was 15 seconds.

This task revealed a concern. While the details page displayed the information regarding the tea brand, there were no links to where the tea could be purchased. Participants expressed the need for that information.

Summary: Despite the 100% completion rate, this task uncovered some potential problematic areas with information availability. Improvements will be suggested.

4. You haven’t found a tea, and would like that added to the site. Please find a way to do that.

The task was completed error-free, completion rate 100%. Average time spent on task was 20 seconds.

All participants were able to find the Contact page with ease. However, they were initially looking for a special feature for that - maybe a “Request to Add Tea” item in the navigation menu. The contact page didn’t state that the form can be used for that particular purpose.

Summary: Despite the 100% completion rate, this task uncovered some potential problematic areas with information availability. Improvements will be suggested.

Post-testing questionnaire

  1. The site was easy to use: 2 Agree, 1 Strongly Agree
  2. The site was useful: 2 Strongly Agree, 1 Agree
  3. I was satisfied with the overall experience: 3 Agree
  4. The site was visually appealing: 3 Strongly Agree

Additional comments and suggestions made by the participants:

  1. “Start Exploring“ button on Home page is not visible/prominent enough.
  2. “Contact“ button on Contact page can be changed to “Submit“
  3. Some sort of search feature would be nice
  4. Categories of teas would be nice for browsing
  5. Links to sellers of tea would be useful
  6. Home page doesn’t reveal immediately what the site is all about. “Herbal tea central“ doesn’t convey enough information
  7. Color of brewed tea and some recipes would be useful on Details page

Suggested improvements based on testing

Based on the task completion data, and the questionnaire, here are some improvements that would take the site from good to, hopefully, great:

Immediate changes

  1. Improve Home page by adding a tagline that will clarify, at a glance, that the site provides information about herbal teas.
  2. On Home page, make “Start Exploring“ button red.
  3. On Contact page, on form button, change “Contact“ to “Submit“.

Later changes

On Details page for each tea, add more information, such as links to sellers, photos of the tea in dry and brewed form, add tasting and paring notes, and recipes.

Post-testing iteration

Improve Home page by adding a tagline that will clarify, at a glance, that the site provides information about herbal teas. Make “Start Exploring“ button red.

On Contact page, on form button, change “Contact“ to “Submit“.