hello@jonas-huber.com
hello@jonas-huber.com
No DNA test required

Redesigning dict.cc

Although dict.cc is one of the most popular online dictionaries in Germany, it has barely changed visually since its launch over 18 years ago.

As long-time users of the site, we have noticed various problems in the site's design, which have also been confirmed to us by many other users. We have tried to fix these problems and in this article I'll show you what we came up with.
This project was created in collaboration with Toni Labahn
The Project

Overview

Duration

3 weeks

Role

Wireframing, Information Architecture, UI Design

Tools

Adobe Xd, Slack, Whiteboard, Invision Freehand, Whimsical

What we where working on

The current Design

  • dict.cc current website old homepage
Understanding the Problem

Hypothesis

We suspect that due to the cluttered interface of the site, the risk of an occurring cognitive overload can quickly arise. The enormous amount of choices leaves the user confused and severely detracts from the user experience.

Furthermore, the lack of responsiveness of the user interface on mobile devices can have a strong negative impact on the perceived quality of usability.

The Challenge

Our goal was to reduce the cognitive load and raise the generally poor user experience to a new significantly better level. We also wanted to show users ways to support the independent dictionary.
The Process

Our Design Process

#1 Discovery and Research

User Interviews

When we set out to research the project, these 5 points were particularly important to us in understanding how users currently interact with and perceive the site:

  1. Understanding the background of what currently convinces users to use dict.cc
  2. Discover how aware users are regarding all the offered services (browser extension, smartphone application) and and whether they are interested in them at all.
  3. Learn about how people perceive the overall experience and what currently troubles their minds.
  4. See if certain assumptions that are describing an unsatisfying experience are covered by opinions of others.
  5. Take a look at the willingness of paying for extra services and support the site (single-purchase or yearly/monthly subscription).
Subjects

5 Users

Age

18-23 y/o

Duration per Session

20 min

#1 Research

Questions & Tasks

Spend 20 seconds on the dict.cc home page and tell us afterwards what you have experienced.
Change the general language of the webpage.
Do you use dict.cc already and if so, how often and what exactly do you use?
What do you usually do to get the translation of a word on dict.cc?
Would you consider paying for an app that makes it even easier and faster to get translation?
Which features do you like the most and what do you think is currently missing?
#1 Research

Results of the Interviews

#1 Research

Key Insights

1. Insight

Cognitive Overload

Almost every of the interviewees reported that they felt overwhelmed by the overall presentation of dict.cc.
Even when users were tasked with something as simple as changing the general language of the webpage, they found themselves struggling to find the right element to interact with.
2. Insight

Lack of feature/service awareness

Shockingly not a single interviewee knew about the applications for smartphone and desktop. Although the ones that have been using dict.cc already, deem the smartphone application worth a try and are considering to download it.
3. Insight

Poor aesthetics and lack of visual hierarchy

The users described the website as seemingly laborious to interact with due to the current appearance, style and positioning of elements and the hierarchy within objects. One element that got criticised very harshly was the forum area of dict.cc.
#2 Define

Personas

Personas describe exemplary users of a page whose characteristics correspond to the demographic data of the actual target group. Personas give this data a face and a story with which the development and design team can identify. These personas have helped us put ourselves in the users' shoes for every design question and make decisions with them in mind.
#3 Ideation

How might we ...

1. decrease cognitive load?

By reducing the site to its most essential and best features, and using visual hierarchy to bring order to each option. So we completely cleaned up the header area to put the focus entirely on the search. We wanted to use the rest of the home page to draw the user's attention to the services offered on the site.

2. enhance feature awareness?

After finding out that almost no users were aware of features like the desktop or smartphone app, we knew we had to highlight them significantly more, as both are excellent tools for translating in everyday life. We included the apps in the main navigation and gave them a place on the home page.

3. improve aesthetics and visual hierarchy?

Since the current design is quite dated, it wasn't much of a challenge to improve from here. By creating a clear and hierarchical design, we gave the site a new look that makes information much more accessible and tangible.
#4 Design

Our solution approach

  • Homepage Desktop-Screen
  • Vocab Detailpage Desktop-Screen
  • Forum Overview Page Desktop-Screen
  • Forum Thread Desktop-Screen
#5 Validation

What we were able to achieve with the design

After developing a clickable prototype for the design, we repeated the user testing to see what differences could be seen from the first run:

  1. "Feels much less cluttered" - Quote from test user
  2. To change the general language of the page, users needed only 2 seconds, which previously took them an average of 34 seconds.
  3. "It's easier to navigate trough" - Quote from test user
  4. The awareness for the offered mobile and desktop apps went up significantly
  5. "It's easier to consume the content. It feels there is all I need although there is less content" - Quote from test user
  6. Increased awareness that dict.cc is a project fundet only by community donations

Disclaimer

This case study was created as a private project and only reflects our approach to a redesign of the dict.cc site. dict.cc is not a client and asked for this redesign.

I'm a great Designer, trust me.

Feel free to drop me a line and I'll get back to you as soon as possible.
message me
thumbs up