top of page

Logitech US

Website Revamp

A streamlined and enhanced browsing experience for online customers

Existing Logitech IA

HEURISTIC EVALUATION

Here are some of the issues found based on usability heuristics and design principles.

Observations and Insights

  • When searching, the customer uses the menu and goes straight to the category of the device she’s looking for.

  • For returning visitor, it’s hard to navigate back to the previously visited pages.

  • The words/labels are not straight forward and can't be easily understood in a glance. (eg. subcategories “Make a Scene”, “Raise Your Voice” & “Take Control”)

  • The objective of the "Learn" section is unclear, so is the label. The customer thinks that it's for product recommendations based on purpose/productivity like working from home.

  • The customer thought that the information in the "Learn" section was useful but wouldn’t visit these pages intentionally. Would read them on social media.

  • The customer thought the items after the header section were articles and not particularly interested in it to begin with.

  • Some of the titles/labels gives a different impression other than what they should be. (eg. “Creator Society” ≠ community for content creators, "Meet the Crew” ≠ people behind the solutions and recommendations)

Some of the tasks are...

- Browse Home Page

- Shop for Keyboard

- As a content creator, find products that suits you

- Check your Cart

USABILITY TEST

Initially in the class, we were only asked to assess the website based on our discretion. But when I decided to go further, I realized that I had to validate my analysis. So I asked a few people, who I feel would use the website, to perform a few predefined tasks then I took note of their actions and feedback.

OBJECTIVE

  • Identify the possible usability and design problems of the website

  • Redesign the website to improve its interface and user experience

OVERVIEW

Nowadays, shopping online has become customary. And like many retail brands, Logitech, known for their innovative computer peripherals and software, has a website that lets people browse, view products, and eventually purchase them online.

 

This study is a follow-up to a design exercise I completed during my Masters in UI/UX design, aimed at improving my understanding of UI design principles and applying them in practice. The initial task was to choose a website with UI that needs improvement.

 

Not long ago, I had browsed the Logitech website to look for a keyboard and had trouble navigating through it. From that point, I have decided to use it as my subject for the redesign.

Client

Student Case Study at Escuela Superior de Diseño, Barcelona (2023)

My Role

Sole designer

Disclaimer: I am not affiliated with Logitech in any capacity.

INFORMATION ARCHITECTURE

In order to redesign the website, I built the IA of the existing one to understand its flow and structure.

Existing IA

My general analysis based on my own feedback and the ones I’ve gathered from other users:

  • There are section/category labels that use catchy marketing phrases which makes it more difficult for the customers to understand what a section is about.

  • There are redundant and unnecessary items on the menu that can cause confusion when browsing.

Normally, customers visit a brand’s website to search, learn or examine specific product/s and/or purchase them. Therefore, it is better to simplify the contents and the flow to lessen the cognitive workload so the customers will be able to find what they need more easily.

You will notice that there's a lot going on in the existing flow, so I reconstructed the IA by simplifying it to increase the visibility of its key sections and improve the overall organization for better navigation.

Revised IA

Revised Logitech IA

IDEATION AND WIREFRAME

I started doing the low-fidelity wireframe to visualize my ideas as I figure out ways to improve the interface.

UX SUGGESTIONS AND REDESIGN

Experience 1

Browse Home Page

The website currently has overwhelming items on the menu, so I reorganized the contents leaving only the necessary ones and having a clearer sense of each section to make the browsing experience easier and clearer. I placed the rest of the items that cluttered the menu in the footer section and on the appropriate pages as seen on the revised IA. (see Menu and Footer Comparison)

 

I also rearranged and redesigned some of the sections to make the contents clearer and more interesting for the viewers. (see Home Page Browsing Experience)

BEFORE

AFTER

It is noticeable that All Caps texts are frequently used throughout the website. It makes it difficult and slower for the customers to read and browse items, and it also seems like shouting to them. To improve the readability and user experience, I avoided using all caps texts unless necessary or suitable.

​

Also, I restructured the filter section according to how I feel customers search and prioritize product features. (Note that this is my personal viewpoint, and given more time, I would conduct a survey to validate or potentially obtain improved results.)

AFTER

BEFORE

Experience 2

Browse a Product Menu

Looking for keyboards through the product category section on the home page is ineffective. Instead of seeing a page that has both Mice and Keyboards products, it takes you to a page that has Mice only. So I fixed this and separated these two product types (Keyboards, Mice) - easier than creating a new page designated for both.

Other functions with micro-interactions:

Experience 3

View a Product

The present product page isn't all that bad, but I thought it would be a good idea to spruce it up a bit, drawing more attention to the main features. I went ahead and created different sections and tabs for "Tech Specs," "Compare," and "Reviews," giving them extra room and focus. I also applied the same concept to the "Buy" page, making the purchasing process more user-friendly.

​

Existing Product Page, view here.

Experience 4

Shop a Product

As mentioned, I created a separate page focusing on simplifying the purchasing process. This helps customers gain a clear understanding of what they're buying, especially when there are various specification choices to consider.

Experience 5

Check Out Cart

When I first attempted to buy a keyboard on the current website, I was confused by the multiple payment buttons that showed up (see images below) before I even confirmed my address to determine any additional delivery costs. To complement the prior modifications I made, I opted to redesign the Checkout page for a more seamless product purchase flow.

LEARNINGS

Through this study, I learned that in order to enhance the interface and user experience of a website, it is crucial to identify the actual problems and experiences of users. This can be accomplished by conducting interviews and usability testing (may it be informal or not).

 

Also, I thought this would be a great opportunity for me to explore ways to enhance the presentation of information on websites, to make it more visually captivating, engaging and easy to understand.

​

Given a chance to do this study again and ample access, I would check the website’s analytic data such as the bounce rate and the heatmaps to help me understand and visualize better the customer’s behaviors - how they interact with the website. This will allow me to address certain problems carefully and identify what really matters to the customers or what interests them.

​

As a first-timer doing this kind of project, I didn’t know at first where to begin. But as I progressed, I was getting to realize what I needed. It was a lot of work, but I really enjoyed doing this project, especially the designing and prototyping part.

PROTOTYPE

Try out the functional prototype below:

Goodreads

bottom of page