The Abnormal Normalist Icon

Lipton Tea Case Study

Website UI Case Study Project
Website UI Redesign
Drawn Rolex Image

Key Information

Role: UI Designer, UI Researcher
Software: Figma

Overview

This case study was to analyze a website and try to find possible improvements for their user interface through the approach of an UI case study including creating hypotheses and user testing.

Goal Of This Project:

The goal of this project is to showcase skills/strategies in performing an UI case study on a website learned from UI strategy courses.

As a designer and researcher, I was tasked duties like implementing purposed improvements for the site on Figma, creating hypotheses, and conducting user testing.

Lipton Tea 🫖

Case study

Start date: October 18, 2023
End date: December 13, 2023
Role: UI/UX Designer
Tools: Figma
Lipton Tea site Figma redesign

Overview

This group project was to select a website and try to provide suggestions for improvement on the site. Then to user test those suggestions and provide rationale on why our group chose our suggested improvements and how to implement them.

Brainstorming

arrow

To begin the project, my team did some brainstorming on what website to study. After a couple minutes of research, the team settled on Lipton’s Tea. We thought it would be an easy site to study and an interesting topic as it's about tea.

After choosing our site, my group did research and tried to find some areas on the site that would benefit from improvements. As my group studied and went through the site, we found that the navigation, page hierarchy, and shopping function on the site could possibly benefit from our suggestions. My group members all went on the site and tested the processes of each area and found that changes could be made to further improve user experience.  

Brainstorming

To begin the project, my team did some brainstorming on what website to study. After a couple minutes of research, the team settled on Lipton’s Tea. We thought it would be an easy site to study and an interesting topic as it's about tea.

After choosing our site, my group did research and tried to find some areas on the site that would benefit from improvements. As my group studied and went through the site, we found that the navigation, page hierarchy, and shopping function on the site could possibly benefit from our suggestions. My group members all went on the site and tested the processes of each area and found that changes could be made to further improve user experience.  

Hypotheses/assumptions

Once three areas of the site were identified, my group began to create assumptions and hypotheses for each area, each member creating a list. Collectively, we came together to decide on three concrete hypotheses, one for each area. Once that was decided, we created a Google form for our list of users to fill out. These forms would then give us options on who to user test in the end as only five total participants were needed. The form was sent out to a total of 15 participants, three found by each member.

Hypotheses/Assumptions

arrow

Once three areas of the site were identified, my group began to create assumptions and hypotheses for each area, each member creating a list. Collectively, we came together to decide on three concrete hypotheses, one for each area. Once that was decided, we created a Google form for our list of users to fill out. These forms would then give us options on who to user test in the end as only five total participants were needed. The form was sent out to a total of 15 participants, three found by each member.

Hypotheses and assumptions

User testing

Once all the participants gilled out the google form, everyone was assigned one participant to conduct our user test on. Our user test was on the three hypotheses to prove my group right or wrong and was to be recorded. Each hypothesis test took from 5-15 minutes to complete and once done, a SUS(system usability scale) and rainbow sheet were filled out for observations. Each group member was a moderator for the test and an observer, so everyone oversaw each other’s videos and filled out observations on the rainbow sheet for each participant. As a result, the user tests proved our hypotheses to be right, so the next thing my group did was to create prototypes. Here are some results from our Google form.

User Testing

arrow

Once all the participants gilled out the google form, everyone was assigned one participant to conduct our user test on. Our user test was on the three hypotheses to prove my group right or wrong and was to be recorded. Each hypothesis test took from 5-15 minutes to complete and once done, a SUS (system usability scale) and rainbow sheet were filled out for observations. Each group member was a moderator for the test and an observer, so everyone oversaw each other’s videos and filled out observations on the rainbow sheet for each participant. As a result, the user tests proved our hypotheses to be right, so the next thing my group did was to create prototypes. Here are some results from our Google form.

User test results

Creating prototypes

Because our hypotheses were proved right, our next task was to create the prototypes for these suggested improvements. Sekai and I oversaw creating the prototypes on Figma while the others handled the presentation and report. I oversaw the creation of the improved navigation and page hierarchy while Sekai handled the shopping function. The creation of the prototypes took roughly an hour to complete as we didn't come across any difficult obstacles. The rest of the team reviewed our work, and after we added some changes. Here are some high-fi wireframes from the Figma document.

Creating Prototypes

arrow

Because our hypotheses were proved right, our next task was to create the prototypes for these suggested improvements. Sekai and I oversaw creating the prototypes on Figma while the others handled the presentation and report. I oversaw the creation of the improved navigation and page hierarchy while Sekai handled the shopping function. The creation of the prototypes took roughly an hour to complete as we didn't come across any difficult obstacles. The rest of the team reviewed our work, and after we added some changes. Here are some high-fi wireframes from the Figma document.

High fi wireframes

Results

In the end, my group successfully did a case study on Lipton Tea’s website. We researched, conducted analysis to form our hypotheses/assumptions, did user testing, created prototypes, and presented our info. This has taught me that there’s much more to UI/UX design than simply creating the interface, there’s research and much testing to be done. Although these case studies can be very lengthy, I think it was a worthy project to introduce myself to these important processes in the field. A successful and enjoyable project in the end.

Results

arrow

In the end, my group successfully did a case study on Lipton Tea’s website. We researched, conducted analysis to form our hypotheses/assumptions, did user testing, created prototypes, and presented our info. This has taught me that there’s much more to UI/UX design than simply creating the interface, there’s research and much testing to be done. Although these case studies can be very lengthy, I think it was a worthy project to introduce myself to these important processes in the field. A successful and enjoyable project in the end.

Want to see it elsewhere?

Takeaways

1. To showcase UI case study skills from UI strategy courses

2. To learn how to create assumptions/hypotheses, conducting user testing, and other processes from an UI case study
Back To Projects
Up arrow icon