How We Redesigned SpanishDict

SpanishDict.com is the world’s largest Spanish-English reference website, rated by Quantcast as a top 250 most-trafficked site in the US, growing at a healthy 10-20% per year, and reaching more than 10 million people per month. You can even Google "spanish" and find it as the first result. So why did we decide to radically overhaul the design?

SpanishDict Rankings

"Plain. Boring. Busy."

We had conducted user testing sessions where people said things like, "I love the content on the site, but it's too busy and kinda plain." Here's a short clip illustrating the problem:

Data from our site surveys reinforced these anecdotes. People loved our content and lamented the design. Users knew the site design was sub par, and frankly, so did we.

Why a Full Redesign?

The site wasn't built to be complicated. But in the years since our previous redesign, bit by bit, new features crept in. We added announcements for our learning platform, calls to action for our word of the day emails, pleas to follow us on social sites, and ads for our mobile apps. The site took on a Frankenstein look as we added more appendages. To go from complex and disjointed to elegant and simple, we had to make big changes.

The Goals

We designed our goals and metrics before we designed our mockups. Here's what we decided to shoot for:

Overall Goal:

  • Users react with “Wow - I love this site!”

Metrics:

  • Engagement - Pages per visit; Repeat visits
  • Wows - Survey data on our Net Promoter Score; Positive Comments in Usability Sessions
  • Revenue - No short term impact on ad impressions or revenue

We wanted to make a great first impression--the wow--and then deliver an experience that people loved. We'd look for evidence of success in people's comments--net promoter score, user testing videos--and in their behavior--more return visits and greater engagements. Finally, we'd aim to have no short term impact on revenue. Over time, a site with happier users will be a site with more users. We decided to play the long game on revenue.

Redesign Priorities

A design is an expression of priorities. We aimed to make it easy for users to accomplish their goals. But across 10 million unique visitors per month, people have different goals. So we used Google Analytics to figure out what features people actually use, and what they don't. We combined that with qualitative data from user support emails, usability testing, and conversations that we have with people that use the site.

For our site, one feature is more important than all others--people want fast, accurate, and easy-to-use Spanish-English translations. So that was our #1 priority. But we also find that people want verb conjugations, help with vocabulary, answers to grammar questions. These secondary actions needed to be easy to accomplish, but didn't need to take a starring role.

At the same time, we have actions that we'd like people to take when they are on our site. For example, we'd like them to learn Spanish with our new adaptive learning program, Fluencia. We like people to share content. We want people to download our mobile apps. We have a number of calls to action throughout the site. We decided to make these calls to action secondary to the user goals. Here's a summary of how our priorities shook out:

  • #1 - Simple, Easy Translations
  • #2 - Everything else

Design Brainstorm

The two most critical pages on the site are the homepage and the search results page. We needed to nail the design on these two pages first. We kicked off the process with a big brainstorm of possible layouts. Here's a look at a few early layout ideas for the homepage header:

They are rough! But that was intentional. We wanted to share concepts quickly, gathering feedback from our own team through InVision on the structure of the site.

Pixel-Perfect Designs

From there we converged on one layout, and started working to make it pixel-perfect. More mockups. More feedback. Each time we got closer to a final design.

We liked this design because we found it to be:

  • Easy - Big obvious search; fewer options in the menu.
  • Beautiful - Dictionaries aren't sexy, but places where people speak foreign languages are; the photo added pizzaz.
  • Different - No dictionary site looks like this; it stands out.

We took this design aesthetic and expanded it to the rest of the site, creating designs for dozens of pages:

We also wanted to inject some delightful details. We faded in the background image, added a geolocation icon with more information on the photo, and added a fun animation in the footer.

Implementation

We worked on implementing the new design over the next couple months. In the process we replaced a legacy PHP application with a modern Node.js application to make it easier to develop enhancements in the future, provide better testing coverage, and bring the application inline with the tools that we use on Fluencia.

We wrote unit, front-end, and integration tests throughout the project, which we run on a Travis continuous integration server.

We also tested the front-end performance, using best practices recommended by Google Pagespeed and SpeedCurve, combined with Real User Monitoring from Pingdom.

We audited every key section of the site for SEO best practices, including targeted title tags, helpful H1, and rich relevant body content.

Finally, we conducted extensive cross-browser testing. SpanishDict reaches a broad swath of the Internet. We defined the browsers that we wanted to support based on our user analytics, and conducted tests using our mini in-house device lab.

User Testing

As the site came together, we conducted a number of hallway usability sessions, asking people in the office to try out new features and various UIs. We also conducted more than a dozen usability sessions using UserTesting. Some of the comments we heard were "It's beautiful. I really like the simplicity.", "I also like the sleek design of the website, it has a "clean" look to it that allows for a more enjoyable page view.", and "The site is really attractive. The layout, text, graphics, videos and navigation are great." Here's a short highlight video:

We learned we were heading in the right direction. We also found a number of areas that could make the site even better.

The Roll Out

With a change this big, affecting so many people, we decided to roll out the redesign gradually and turn the release into an opportunity to run an A/B experiment, comparing the old design to the new one.

We started by rolling out the site to just 1% of our traffic. We wanted to identify and squash bugs, ensure our analytics systems were working properly, and gauge the initial reaction. With the data showing positive early results, after the first week, we released the site to 10% of users, then 50%, then everyone. As an A/B experiment using random assignment, at each stage we could also measure the impact on the new design on metrics we set out to improve.

The Results

According to Google, pages per visit increased 7.5%, time on site rose by 5.24%.

We also ran our user survey again, and found that people's satisfaction with the site had increased significantly.

We were also happy to learn that even though we removed advertising inventory from the top of the homepage, the increased pageviews per visit more than compensated for the decrease in ads.

Continuous Improvement

By virtually all our metrics, the redesign was a success. But we built into the design systems that allow us to continuously improve. We added a simple feedback button that goes to our Desk customer service center. We read and respond to nearly all feedback within 24 hours. We also included a simple, one-click “Did we answer your question?” to gather data on search results that need improvements. Finally, we instrumented the site with analytics tools to measure user behavior. These sources provide feedback and inspiration for future updates.

Have any questions about the redesign or suggestions on ways we can improve? Let us know in the comments.