dict.cc - Redesigning for Education

dict.cc - Redesigning Germany's favorite Online Dictionary

The Challenge

The Challenge

dict.cc is the one of the most popular Online Dictionaries in Germany. It exists since 2002 and has not much evolved yet when it comes to design. Although its' design seems to lack quite a lot, it still is one of Germany's favorites, because of the high accuracy in translating.

I tended to use this online dicitonary quite often due to the fact that I am not a native speaker in English.

When I was using dict.cc, I came across dozends of misleading elements in hierarchy and information architecture - that definitely had to change.

Interesting fact: dict.cc only depends on the free service of its' community and on donations. Latter just did not seem quite highlighted on the pages, although it is actually a quite important topic.

We (my designer friend @jonashuber and I) were aiming for a better user experience, bringing the interface to the next level and highlighting elements which are important to the business behind this online dictionary service.

dict.cc is the one of the most popular Online Dictionaries in Germany. It exists since 2002 and has not much evolved yet when it comes to design. Although its' design seems to lack quite a lot, it still is one of Germany's favorites, because of the high accuracy in translating.

I tended to use this online dicitonary quite often due to the fact that I am not a native speaker in English.

When I was using dict.cc, I came across dozends of misleading elements in hierarchy and information architecture - that definitely had to change.

Interesting fact: dict.cc only depends on the free service of its' community and on donations. Latter just did not seem quite highlighted on the pages, although it is actually a quite important topic.

We (my designer friend @jonashuber and I) were aiming for creating a better user experience, bringing the interface to the next level and highlighting some elements that might be important to the business behind this online dictionary service.

WhatsApp Image 2019-10-12 at 18.57.10

Jonas working on the future Information Architecture (IA)

Jonas working on the Information Architecture (IA)

Design Process

Design Process

We started with analyzing the Information Architecture and wrote down our thoughts on the site as well as key elements and further elements we came across during the session.

We wrote each single element on a single post-it and put them on the wall to vote on these later on to make sure we were focusing on the most important and critical elements first.

Then we asked users about their experience with the dictionary. Some of them were quite familiar with dict.cc, others never even heard of it. That did not matter to us – we wanted to know both sides; an online dictionary was not a site that should have a rough learning curve.

We asked them some questions and gave them certain tasks.

We started with analyzing the Information Architecture and wrote down our thoughts on the site as well as key elements and further elements we came across during the session.

We wrote each single element on a single post-it and put them on the wall to vote on these later on to make sure we were focusing on the most important and critical elements first.

Then we asked users about their experience with the site. Some of them were quite familiar with dict.cc, others never even heard of it. That did not matter to us – we wanted to know both sides; an online dictionary was not a site that should have a rough learning curve.

We asked them some questions and gave them certain tasks.

 

User Research / Testing

User Research / Testing

User Research / Testing

User Research / Testing

User Research / Testing

Those were the average of the results we got through conducting user interviews:

 

Q: Do you use dict.cc already?
A: Yes. (60%)

Q: How often do you use this online dictionary service?
A: 2-4 times a week.

Q: When using it, how much time do you usually spend?
A: 1-2 minutes.

 

We also asked the particpants what other online dictionary services they use and what they like about them.

We asked our test users to complete tasks; some focusing on general issues, some tasks based on the interest of designers.
After completing each task we asked them how they felt, when they exactly encountered problems  and what they liked about it so far and wrote down the results:

 

Task: Spend 20 seconds on the dict.cc home page and tell us afterwards what you have experienced.
Result: cluttered content; unnecessary data; feeling of cognitive overload

Task: Change the general language of the webpage.
Result: often need 2 tries to change language (overall 15 seconds); takes a long time to find the right option (about 20 seconds)

Task: Spend 20 seconds on this page (vocab detail page) and tell us afterwards what you have experienced
Result: happy about the variety of results; confused about certain unexplained abbreviations and data

Those were the average of the results we got through conducting user interviews:

 

Q: Do you use dict.cc already?
A: Yes. (60%)

Q: How often do you use this online dictionary service?
A: 2-4 times a week.

Q: When using it, how much time do you usually spend?
A: 1-2 minutes.

 

We also asked the particpants what other online dictionary services they use and what they like about them.

We asked our test users to complete tasks; some focusing on general issues, some tasks based on the interest of designers.
After completing each task we asked them how they felt, when they exactly encountered problems  and what they liked about it so far and wrote down the results:

 

Task: Spend 20 seconds on the dict.cc landing page and tell us afterwards what you have experienced.
Result: cluttered content; unnecessary data; feeling of cognitive overload

Task: Change the general language of the webpage.
Result: often need 2 tries to change language (overall 15 seconds); takes a long time to find the right option (about 20 seconds)

Task: Spend 20 seconds on this page (vocab detail page) and tell us afterwards what you have experienced)
Result: happy about the variety of results; confused about certain unexplained abbreviations and data

Those were the average of the results we got through conducting user interviews:

 

Q: Do you use dict.cc already?
A: Yes. (60%)

Q: How often do you use this online dictionary service?
A: 2-4 times a week.

Q: When using it, how much time do you usually spend?
A: 1-2 minutes.

 

We also asked the particpants what other online dictionary services they use and what they like about them.

We asked our test users to complete tasks; some focusing on general issues, some tasks based on the interest of designers.
After completing each task we asked them how they felt, when they exactly encountered problems  and what they liked about it so far and wrote down the results:

 

Task: Spend 20 seconds on the dict.cc home page and tell us afterwards what you have experienced.
Result: cluttered content; unnecessary data; feeling of cognitive overload

Task: Change the general language of the webpage.
Result: often need 2 tries to change language (overall 15 seconds); takes a long time to find the right option (about 20 seconds)

Task: Spend 20 seconds on this page (vocab detail page) and tell us afterwards what you have experienced
Result: happy about the variety of results; confused about certain unexplained abbreviations and data

Wireframing

Wireframing

After analyzing the results from the User Testing we knew that, besides from removing some unneccasary features and data to not let the dictionary create a 'cognitive overload', the architecture itself has to change.

We were aiming for creating wireframes that showed a future intuitive interface that is aware of user needs and business goals.

Due to the fact that dict.cc completely exists because of donations and ad revenue, we had to create a space that is user-friendly and makes sense for digital marketing purposes.

Furthermore the users and us designers encountered loads of problems in architecture on a very important section of dict.cc – the forum. This is why we decided to create not just new structures for the home page as well as the vocab overview, but also for the forum and a forum thread page.

After analyzing the results from the User Testing we knew that, besides from removing some unneccasary features and data to not let the dictionary create a 'cognitive overload', the architecture itself has to change.

We were aiming for creating wireframes that showed a future intuitive interface that is aware of user needs and business goals.

Due to the fact that dict.cc completely exists because of donations and ad revenue, we had to create a space that is user-friendly and makes sense for digital marketing purposes.

WhatsApp Image 2019-10-12 at 19.04.40

We were creating wireframes as sketches on a whiteboard and digital mid-fidility wireframes to test functions, flows and logics as well as being able to show the progress later on.

User Interface Design

User Interface Design

desktop-home

Home

desktop-vocab-detail-page

Vocab Detail Page

desktop-forum

Forum

desktop-forum-thread

Forum Thread Page

Validation Phase

Validation Phase

Validation Phase

Validation Phase

Validation Phase

Those were the average of the results we got through a revision of conducting user interviews:

We again asked our test users to complete tasks; some focusing on general issues, some tasks based on the interest of designers or on issues we archived as results in the first session.
After completing each task we asked them how they felt, when they exactly encountered problems  and what they liked about it so far and wrote down the results:


Task: Spend 20 seconds on the dict.cc landing page and tell us afterwards what you have experienced.
Result: feels way less cluttered; easier to navigate through; more awareness towards dictionary features

Task: Change the general language of the webpage.
Result: found within 1-2 seconds

Task: Spend 20 seconds on this page (vocab detail page) and tell us afterwards what you have experienced)
Result: easier to compensate information; nothing missing out on, although there are fewer elements than in the original

Need help with your project?

Need help with your project?

Toni Labahn
Product Designer

Toni Labahn
Product Designer