valentin-rechitean-elFPAMiuxOo-unsplash-scaled-e1578527858340

Challenge

dict.cc is one of the most popular online dictionaries.
Since it went online in 2002 it has not much evolved, which can be easily seen as well as identified through the opinions of its users. 

The challenge was to make this already quite popular online dictionary even more popular by using a human-centered design approach to  make it more user-friendly and easier to navigate through.
Furthermore we wanted to cover certain business aspects due to the fact, that dict.cc is only run by donations; offers further solutions no one knows of, but that could be very useful and would increase the use of dict.cc as online dictionary. 

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.

WhatsApp Image 2019-10-12 at 18.57.10

Jonas working on the future Information Architecture (IA).

User Research / Testing

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. 
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.
 

Further we 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

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.

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

desktop-home

Home

desktop-vocab-detail-page

Vocab Detail Page

desktop-forum

Forum

desktop-forum-thread

Forum Thread Page

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

I would love to work for you and your clients.

I would love to work for you and your clients.

I would love to work for you and your clients.

Toni Labahn
Product Designer & UX Consultant

Toni Labahn
Product Designer