Project Overview
Working together as a group, we were tasked with analyzing an existing website for any popular brand name product that we felt needed to be re-designed based on Jakob Nielson's heuristic evaluation scale for usability problems.
My team chose to evaluate the Lipton Tea Website
Working together as a group, we were tasked with analyzing an existing website for any popular brand name product that we felt needed to be re-designed based on Jakob Nielson's heuristic evaluation scale for usability problems.
My team chose to evaluate the Lipton Tea Website
Working together as a group, we were tasked with analyzing an existing website for any popular brand name product that we felt needed to be re-designed based on Jakob Nielson's heuristic evaluation scale for usability problems.
My team chose to evaluate the Lipton Tea Website
My Role: UX Designer, UX Researcher, UI Designer
Project Duration: 2 weeks
Tools Used: Figma
What is Heuristic Evaluation?
Heuristic evaluation is based off of established rules (ex. Jakob Nielson's heuristic evaluation scale) that designers use to determine the overall usability of the UI in websites and/or apps. These heuristics reveal insights that could potentially help design teams to create better product usability.
Nielson's 10 Usability Heuristics
Visibility of System Status
The system should always keep its users informed about what is going on by providing appropriate feedback within a reasonable amount of time.
Match Between System and the Real World
The system should speak the users' language through the use of words, different phrases, and concepts that are familiar to each user rather than using system-oriented terms. Follow real-world conventions and make information seem like it is in a natural logical order
User Control and Freedom
Users will often select system functions by mistake and will need a clearly marked "emergency exit" in order to leave the unwanted state without having to go through too much dialogue.
Consistency and Standards
Users should not have to wonder if different words, situations, or actions mean the same thing.
Error Prevention
Error prevention is a careful design that would prevent a problem from occurring in the first place. It can either eliminate error-prone conditions or simply check for them and present users with a confirmation option before allowing users to commit to the action.
Recognition Rather than Recall
Minimizing the user's memory load by making objects, actions, and options visible would help make the users' experience a lot easier. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible and/or easily retrievable wherever it is appropriate.
Flexibility and Efficiency of Use
Accelerators may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Doing so would allow users to tailor frequent actions.
Aesthetic and Minimalist Design
Throughout the design, dialogues should not contain information that is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
Help Users Recognize, Diagnose, and Recover from Errors
Including error messages should be expressed in plain language and not through codes to indicate the exact problem and should also constructively suggest a solution to help the user to fix the problem.
Help and Documentation
It might often be necessary to provide the users with help and documentation even though it is better if the system can be used without documentation. Any information should be easy to search, it should be focused on each user's task, and it should list concrete steps to be carried out without being too big.
Heuristic Evaluation Scale
0
I agree that this problem is not a usability issue at all
1
Cosmetic problem only: need not be fixed unless extra time is available on project
2
Minor usability issue: fixing this should be given low priority
3
4
Major usability issue: important to fix and should be given high priority
Usability catastrophe: imperative to fix this product before it can be released
Persona
In order to help us to create a task flow when navigating the Lipton Website, my team and I created this persona as it would help us to view the website as a user and not just as designers who have been "hired" to improve the usability of the website.
Lily Matthews
Tea Enthusiast
27 | Book Publicist | Married
"I can't start my day without a good cup of tea."
About
Lily is a busy young mother, who also works full time. The best place she finds that she can get work done is away from home, at libraries or at cozy cafes. She loves working with a warm cup of tea in her hand.
Being a mother has also made her more environmentally conscious as she wants her daughter to grow up in a world that she can enjoy.
Goals
-
Cut down on her tea spending habits
-
Learn how to make her favorite teas at home
-
Be more environmentally and socially conscious
Needs and Pain Points
-
Spends a lore of money at the cafe and is trying to find a way to make her favorite drinks at home
-
She wants to find a tea that not only tastes good, but also aligns with her ethics
-
She wants something that has been sustainably and ethically sourced
Our Task Selection
-
As a team, we have decided to walk through the Lipton Tea website through Lily's perspective
-
Lily has decided that she is spending way too much on buying her favorite tea at her local café
-
She decides to check out the Lipton Tea website in search of exploring cost-effective tea options.
What we Loved About the Website
The task wasn't to completely change what already existed so we didn't want to point out the flaws without first acknowledging what we felt was working well on their website.
Those things are:
Bright and warm brand colors
Beautiful imagery throughout the website
Inclusion of various recipes using Lipton products
Captivating history, story telling and slogan
Wide variety of tea products for users to browse
Heuristics Analysis
Aesthetic and Minimalist Design
The Problem
In several pages, we found this large white text that has been placed over a white background or over top of busy images which could make the text harder for the users to read and navigate through the site.
Our Solution
We suggest to use different colors to better contrast the background, or even add a background overlay behind the text so that it can stand out and is much easier to read.
4
We rated this a 4 on the heuristic evaluation scale because it is important that users are able to read the text in front of them as it become an accessibility issue if the text is not clear and easy to read.
The Problem
In the hero section we noticed that there was unnecessary information about daily consumption at the bottom. Not only was it difficult to read, but it also makes the hero section look cluttered and it also does not quite belong.
Our Solution
We would suggest to move it where that type of information makes more sense or to just remove it completely.
2
We rated this a 2 on the heuristic evaluation scale because even though it is not legible and makes the hero section look messy, it isn't something that requires immediate attention and would be placed at the bottom of our "to-do" list.
User Control and Freedom
The Problem
Once you hit the search button on the website, there is no way to get back to the page you were previously on. In order to get back to your page you would have to reload the page or hit the back button from your browser instead.
Our Solution
We would suggest to create a way for users to go back by adding either a "X" button or an arrow or even text that says "go back" so that users are able to easily exit from the search bar.
3
We rated this a 3 on the heuristic evaluation scale because it is important that users are able to freely navigate throughout the website without having to go through any extra steps and therefore this task should be as a high priority.
Help & Documentation
The Problem
This section of the website offers "Live Chat" although the only button available to click on sends user to a contact info to call Lipton Representatives. There is no actual way to access a live online chat even though it is being offered as one of the options to receive help.
Our Solution
We would suggest to create a CTA ("call to action") button that clearly is identified as a live chat button for users to click on if they would prefer to speak to customer service in a more timely fashion.
3
We rated this a 3 on the heuristic evaluation scale because it becomes a very misleading function to not have a CTA included for services that are offered especially when users would want a quicker way to recieve help from Lipton's customer service representatives.
Match Between System & World
The Problem
When shopping for Lipton products, there is text that mentions “100 CT” however, some users, if not most, wouldn’t know or understand what the abbreviation "CT" stands for. This could cause confusion for the users and deter them from continuing their shopping experience.
Our Solution
To fix this, we would suggest to either add an explanation for what "CT" means to users, or change the language to something that is easy for users to understand.
3
We rated this a 3 on the heuristic evaluation scale because users might become confused when faced with uncommon terminology during their shopping experience and this task should be a high priority to avoid that confusion.
Consistency & Standards
The Problem
The "Well Being " page has two completely different screens, with different images displayed in the hero section. The inconsistency would completely change the experience for users depending on what page they land on when navigating to the "Well Being" page.
Our Solution
To fix this, we would ensure that the pages are consistent and present users with the same content so they can easily go back and access the same content they viewed, and share it easily as well.
4
We rated this a 4 on the heuristic evaluation scale because having different content presented in the hero section of the well being page can completely change each user's experience when visiting this page and so it's important that we make sure that this issue will be fixed immediately to ensure the same experience for all Lipton tea visitors.
The Problem
The "How to make iced tea" seems like it would be a recipe, but it uses a different icon (a cup icon) than the one displayed on the recipe page (a spoon icon) which also leads the users to a page with a much more in-depth version of the recipe.
Our Solution
To fix this issue, we would use the same icon to keep it consistent for all recipes as it is more informative, as well as have each recipe grouped under "recipes" page to remove any confusion in where to go to find tea recipes.
2
We rated this a 2 on the heuristic evaluation scale because even though the recipe icon is inconsistent throughout the website, it is not a big enough detail that many users would even notice while navigating through the site and therefore fixing the task does not require immediate attention.
Design Prioritization Matrix
Aside from the main tasks we decided to focus on, since there were so many things that we felt needed to be changed/fixed, we decided to make a design matrix to help us stay focused on for the tasks that we felt were a major usability issue first before tackling the rest of the minor usability issues.
Design Recommendations
Create a more minimalist design, remove text where it is not needed and allow for the imagery to speak for itself
Ensure the page formats are more organized and easy to navigate
Make sure that the website is consistent with icons and CTA (call to action) buttons
Format the content better on the recipe page to allow for a more pleasant read for all of the users
Clean up the typography so it is visually more accessible and easy to see
Re-designing Lipton's UI
Before
After
2
In the hero section there was unnecessary information about calorie and consumption of Lipton Tea products and it made it feel cluttered and uninteresting to look at. The navigation bar also had a confusing layout as the Lipton logo is not being made clear that it is a CTA (call to action) button. To fix these issues, we made the background a bit darker so that the main text can stand out without being too distracting from the products being promoted. We also removed the text that was not needed so that the hero section looks much cleaner and redesigned the navigation bar so that the logo is now found in the top left corner of the page.
Before
After
4
In a few of the pages on the lipton website, there is large white text that sits over top of a white background and is also not properly placed underneath the hero section. We also noticed that the body text format feels heavy and looks unorganized as well as the images found below that are not the same size and alignment. The text is drowning because the images are so bright and it is often difficult to read what the text says. To fix these issues, we made the title yellow and bolded it so that it can stand out on the white background and we also centered the body text using information hierarchy to make it easier for the users to read and digest. We added in an image overlay so that the text over top can be a lot easier to read as well without taking away from the beautiful images behind it and we also made sure that each image was the same shape, alignment and size to keep up with consistency.
Before
After
2
Again, in the original website, the text in the hero section is drowning in the bright image behind it. The nutrition facts also don't stand out as much as is also not super obvious that they are nutrition facts (it seemed like there was no nutrition information filled out). The images below everything not only have the same drowning text again, but the icon is incorrect as each image are wellbeing related and not necessarily tea related links. To fix these issues, we moved the recipe title down to the area right below the hero section and treated it as a header (header font style and yellow font color). We also rearranged and changed the typography so that it is easier to read and understand. Lastly, we added in image overlays again so that the text stands out as well as replaced the icons with the wellbeing icon so that it is consistent with everything else under "wellbeing".
Before
After
3
The language "100 CT" above the "shop now" CTA could be hard to understand for majority of visitors. This can be fixed by changing the wording to something that is more familiar and easier to understand. This required us to google what the CT abbreviation meant and once we knew what it meant we changed the text to "100 Tea Bags".
Before
After
3
When you go to the "Contact Us" page, we noticed that there was no CTA for the live chat option even though the text suggest that there should be. To fix this issue we just simply added in a "chat now" CTA similar to the "get in touch" CTA underneath the Live Chat option for visitors in the future to have east access to that specific feature.
Before
After
3
On the search page, the users are unable to go back to the previous page they were on without interacting with the navigation bar at the top of the page. To fix this issue, we added in a clear "X" symbol that indicates that the users can exit out of the search page and return to the page they were previously on without further complicated steps to get there.
Examining and judging the interface and its compliance with the 10 heuristic principles help to gain a detailed understanding of potential violations and the severity of them. \All of these lead to one goal: providing users a smooth and efficient user experience which in turn would benefit Lipton by increasing traffic and sales in your product.
Understanding the brand is important when changing up the website because we want to ensure the Lipton brand, that is already memorable, exists through out the website. When we were evaluating the website, there were so many things we wanted to change and we realized how helpful the Heuristics were to have because we were able to prioritize the most important changes from the ones that didn't need that much attention.
Add more changes to the design that we wanted to include
Prototype the design and conduct usability testings
Present the new redesigned version based on user testing feedback for approval