Leo Online Dictionary - José Buendía UX Projects

Leo Dictionary

UX Study case | UX Design

Why this study case?
While I was learning German, I used to consult the Leo.org online dictionary almost daily to conduct inquiries regarding verbs, adjectives, idioms, and more. However, I found its interface to be cumbersome and difficult to use.

 The Problem 
The landing page is cluttered with distracting and unnecessary information, which makes it difficult to quickly search for the meaning of a word.Many others at the language school also had similar experiences. As a result, some of them turned to alternative resources such as Duden, PONS, Linguee, and Google Translate, which offer more streamlined and user-friendly interfaces.

What is there to design about leo.org to improve the user experience?

Here I show you my approach.

Actual Website - Leo Dictionary 2024

Website Proposal

The Challenge

How to reduce the cognitive load to the user when using the Leo.org online dictionary for the first time?

Research

I wanted to corroborate my concern about the frustrating user experience when wanting to find a word in the online dictionary, Leo.org. and understand if it is just a subjective matter or if it is also perceived in the same way by others.

I used a competitor benchmarking technique to learn and compare how other online dictionaries were presenting the search feature to the user. Two categories were analyzed; homepage information and search bar feature. I wanted to see what was working well and not so much.

Talking With Colleagues About Leo Dictionary

Furthermore, I approached former language student colleagues to understand how they use their preferred online dictionary and what features they use the most.

This helped me to broaden my perspective of the online dictionary user experiences and gain some new information that I was not aware of then.

Research Key Findings

In online search conventions, a prevalent approach is to position the search bar prominently at the center or top of the website. 

Competitors typically display essential information in their navigation menus. 

Language students highly appreciate the immediate availability of additional details about verbs or adverbs. For instance, in the German language, this includes information on grammatical cases, verbs in different grammatical times, and article declinations.

An optimal search experience should be both intuitive and swift.

It's crucial for users to easily switch between languages when searching for a word. 

Having a mobile app option for the dictionary is a valuable feature, especially for language students.

Analysis

The main issue with Leo.org is its visually confusing appearance, making the search process difficult for users. Additionally, its appearance is perceived as visually outdated due to nested boxes, a design practice less common these days.

The landing page contains a multitude of visual elements that compete for user attention. It is unclear where users should focus first or what action to take upon arrival.

1. The navigation menu has too many categories, eight in total, and the hamburger does menu doesn't work

2. The search bar is nested within 3 elements, difficult to spot at first sight

3. The body section has a different kind of information that is not categorized, rather confusing

4. The option to select a language is duplicated since it exists already within the search bar

5. Advertisements take up a large vertical space on the landing page

The Navigation Menu is Confusing

There are some here are issues with its sections:

The ‘Home’ and ‘Dictionary’ are the same section.

There is also no visible difference between them (1)

Some categories are duplicated, they appear in the navigation bar and body content, they are: ‘Forum’(2), ‘Trainer’(3), ‘Courses’(4), and ‘Apps’(5)

The Hamburger menu does not lead to a menu, but rather to a language selection tool (A)

The Search Bar is Challenging to Identify

Bold title with a yellow rectangle background, demanding additional attention
It is surrounded by attention-grabbing icons, such as country flags, which are visually heavy on the landing page. 
Short rectangle that is not easily noticeable
The colorful appearance of these elements overshadows the pale-yellow search bar.

As a result, users may need to navigate from the title to the flag icons and, if fortunate, locate the search bar.

Search Results

Overall, while Leo.org provides necessary grammatical information in search results, some visual components could be adjusted to enhance readability and reduce cognitive load.

The potential improvements include:

To simplify the language selection display, the current layout with country icons and surrounding text is confusing
To differentiate the input 'word' and the 'output' word
To enhance scannability by increasing space between result categories.

Analysis Key Findings

Based on the elements analyzed, the leo.org website would need an improvement on the following items:

Reorganizing visual elements on the landing page and eliminating unnecessary components
Prioritizing and enhancing the user experience in the search area
Adjusting the visual layout of the results page

Design

Based on the data gathered and the key elements from the analysis phase now is the time to put the pieces together and improve the dictionary user experience in the landing page and page results.

The design proposal aims to use standard conventions and tackle a logical approach to reduce cognitive load.

Let’s start with the navigation on the landing page and leave out what is redundant.

Let's Continue Reducing Elements

Unested the search bar
Remove the language selection column
Reduce information elements under the search bar

How Can The Landing Page be Improved?

The search bar is not nested but rather presented and recognizable to the user
The search bar is center center-aligned on the screen
Language selection feature with automatic language detection based on GPS or cookies. Can be changed by the user as well
Additional information area to highlight two essential company communication

Finally, Let's Re-imagine The Result Page

The search bar highlights the input word
The translated word is easy to identify and has the function of listening to its pronunciation
The results show synonyms from the searched word (adjectives, verbs, adverbs, nouns) when possible
The result for a verb offers the option to see its grammar conjugation as it is now offered by leo.org

Landing Page Proposal

Recognizable search bar that follows standard search conventions
The search bar is center center-aligned on the screen
Language selection feature with automatic language detection based on GPS or cookies.
Additional information area to highlight two essential company communication

Suggested Words When Typing

Search Result Page

Conclusion

This study aimed to enhance the user experience of Leo.org. Through competitor analysis and insights from colleagues, key pain points were identified. Leo.org's dictionary, perceived as confusing, could benefit from redesigning the search bar for better usability. Streamlining categories, inspired by competitors, could further improve the website's visual hierarchy and overall user experience, potentially attracting more users.

Incorporating these proposed changes could potentially steer the dictionary towards a better user experience, potentially attracting and engaging more users.

This project deepened my understanding of the initial steps of the search activity and underscored the significance of welcoming users to perform the search actions.

Furthermore, questioning the rationale behind each website element proved beneficial in refining and simplifying the interface, ultimately improving the user experience.

Finally, while the study provided valuable insights, a more extensive user outreach could have provided a broader perspective on the website's usage. This could potentially have uncovered additional pain points and further enriched the understanding of user needs.