Case study: Oxford Learner’s Dictionaries

Complete redesign of oxfordlearnersdictionaries.com to support a new dictionary edition and reverse declines across all key business metrics.

Overview

Oxfordlearnersdictionaries.com is Oxford University Press’s English language teaching division’s most visited website, serving millions of language learners a year.

The project coincided with the release of the 10th edition of the Oxford Advanced Learner’s Dictionary and a trending decline across almost all key business metrics.

The full redesign resulted in a 25% increase in users, 30% increase in sessions, and 40% increase in page views compared to the previous year.

Problem

The website had remained relatively static for over 5 years and featured outdated code, suffered from poor findability, confused mental models and site goals, unclear upgrade options and the purpose of the site beyond core dictionary search was not apparent to end users.

Declining business metrics across the board and limited visibility of user behaviour meant all aspects of the website and the business models surrounding it required review.

Approach

As the UX and UI lead on this project, I was responsible for coordinating all user experience research, stakeholder workshops, wireframing, prototyping, user testing, and I undertook front-end development work.

I worked closely with an offshore development team in France (IDM) and collaborated with the internal cross-divisional project team and senior stakeholders.

Challenges and their mitigations

  • Analytics were not configured or added, so we had no visibility of what users were doing on the site.

    Mitigations:

    Fixed broken Google Tag Manager implementation to reveal aspects of site that weren’t visible.

    Adopted Hotjar to record user behaviours in heatmaps and to solicit direct feedback through surveys.

  • Users were unable to locate core functionality beyond search, and the information architecture led to users getting lost or not recognising what sections were for.

    Mitigations:

    Fully reviewed and reworked search.

    Changed the site navigation to better align with end-user mental models uncovered through testing.

  • Nearly every aspect of the site required attention and limited resources meant the initial planned scope would not be able to be completed within the project timeframe.

    Mitigations:

    Separating stories into themes pointed towards desired outcomes and allowed prioritisation of the most impactful work.

  • There was much initial hesitancy among stakeholders about changing the old site as they had become used to how it had always been.

    Mitigations:

    Stakeholder workshops uncovered the historic reasons for change hesitancy and opened the door to rapid prototype creation.

    End user testing provided demonstration opportunities for stakeholders to see the developments in practice.

  • Owing to the complexities of dictionary creation, there were many factors to take account of and deep data sets that contained errors or quirks to be resolved or accommodated.

    Mitigations:

    Spent time understanding and playing back challenges particular to dictionary entry composition.

    Created extensive markup in wireframe deliverables to account for different scenarios.

  • A core business goal was to improve the adoption of paid features on the website. Previous attempts to run sale campaigns had had limited success. A problem lay in that users didn’t understand what the benefits of paying for features would be.

    Mitigations:

    Explored various subscription models.

    Investigated ways to raise discoverability on the website and other channels.

Research

Research continued at regular intervals throughout the project to provide as much user insight as possible before making decisions.

Heuristic reviews of all areas of the site were conducted and recommendations gathered to inform development of themes and user stories.

Hotjar was installed onto the site to gather heatmaps, record user behaviours previously unseen by the project team and to gain baseline sentiment scores to measure the success of our interventions.

Wordlist user interactions and click heatmap data for previous implementation demonstrate users thinking the icons in the pink box are clickable when they aren't

Hotjar allowed gathering of direct feedback from hard-to-reach customers, enabling the team to gain deeper insights. It was also used as a recruitment tool for further in-depth studies.

User studies were integral to uncovering problems and building a shared understanding with internal and external colleagues to shape work around end-user goals in balance with those of the business.

Competitor analysis was undertaken (including Cambridge University Press, Macmillan, Dictionary.com, British Council, Merriam-Webster) to map features and assess implementation of common functionalities.

 

Stakeholder engagement

Discovery, empathy, design, prioritisation, and critique workshops were conducted with all stakeholders through different phases of this large, complex project over a period of a year.

Example persona based on available data used to orientate stakeholders away from only their experience of using the website

Persona development and enrichment deepened understanding of how the landscape had changed in online dictionaries since the last iteration of the website. Stakeholder perspectives shifted from a ‘features-first’ to a ‘users-first’ approach. Themes and user story development led to prioritising a shaped product roadmap and open design and content critiques to evaluate how they met user needs.

Stakeholder workshops: Building stories around themes
 

Wireframes and prototypes

Almost every element of the site was reworked. In some cases, legacy data had to be accommodated alongside the new site style, so elements had to be scalable as content could range from very light to very dense. Striking this balance between existing users’ experience of the site, which they had come to learn through repeated use, with the improvements that were needed to grow the site again helped inform how we moved respectfully through the live site update.

The approach to wireframing was to start low fidelity (hand-drawn sketches or low-fidelity concept mock-ups) and discuss them with the team and test with users. This allowed us to move through a high number of elements more quickly while allowing the new site identity to develop collaboratively.

Low-fidelity wireframes to enable discussions on possible entry layout variations

Higher fidelity wireframe and prototypes were created as unworkable ideas were moved to the side and team alignment became more joined up. Detailed wireframes were needed to not only articulate what we would build in code but also to help stakeholders visualise and align their thinking. Visualising the experience in this way brought shared understanding and reassurance as they let go of their attachments to the old design.

Higher fidelity options experimenting with brand colours and tone of voice

Core areas worked on included the entry design, landing pages, navigation, wordlists, branding, upgrade options, writing tutor, speaking tutor, help and support, and bringing in business-standardised elements such as footers and sign in and redemption journeys.

 

Testing

Testing with users was conducted frequently throughout the lifecycle of the project, with a mix of in-person and remote sessions via video conference. Stakeholders were encouraged to participate in user interviews and usability studies to increase buy-in around proposed designs that were working well and to build empathy with the end user.

Different types of users were sought, ranging from teachers, students, and those using dictionaries in their work, with a particular focus on learners and advanced-level learners of English.

Studies were typically task-orientated. Participants worked with prototypes and provided commentary on what they were thinking, what their expectations were and what they had experienced in the past.

Card sorting activities were also used to inform improvements in the information architecture of the site, which had become cluttered and was using internal business-centric terms and acronyms. This affected the findability and discoverability of the site with core issues relating to information scent and a mismatch of mental models.

Tree testing was further employed to test various proposed navigation structures and whether core information finding goals could be achieved in the new structure.

 

Implementation

Implementation was managed through a Jira backlog, working in 3-week sprints. This differed from the usual cadence of 2 weeks, but was in line with the capability of the team to deploy reliably.

Not only was I responsible for wireframes, prototypes, and design documentation, I was heavily involved in the front-end development alongside the off-site development team.

I also brought in standardisation in our testing by utilising Google Lighthouse to improve and then maintain site scores as the development progressed. Using this tool, I was objectively able to present areas we could improve on to bring about tangible immediate benefits, while also communicating about web standards.

Dictionary data is highly complex. I had to learn to understand and regularly validate the semantics of dictionary entry structures with experts in this field to account for numerous edge cases and quirks in the data.

Entry design mark-up with data tags

Releasing to customers was improved as the project progressed. Typical education publishing cycles tend to air on ‘big releases’, with a certain discomfort inherent in regular delivery. By demonstrating the benefits in deploying more regularly to end users – such as more regular customer product feedback, sooner realised customer benefits, business KPI improvements, and better code quality – we were able to bring in a cadence that showed tangible results much sooner than if we had waited for an ‘optimal’ time.

How success was measured

Business KPIs returned to good health, including a 25% increase of users, 30% increase in sessions, and a 40% increase in page views compared to the previous year.

Sales funnels to additional paid content saw increased engagement, with summative studies showing that user happiness with the site had grown substantially. Market gains took place in territories the dictionary was performing well in before.

New markets grew substantially, as millions of new and returning visitors were choosing the Oxford site as their English learning dictionary of choice.