- Product Design
- +
- Full-Stack Dev
japan-guide.com, Welcome to the 2010s
My first project at JG: Redesign and rebuild a 15-year-old site, and make its 2,000+ pages of content effortless to navigate.
Background
In 2014, japan-guide.com was at a turning point. As one of Japan’s top Google-ranked English tourism sites, serving 2M+ unique visitors on average every month, JG had cemented itself as a reliable and beloved brand amongst travelers to Japan.
The problem? The site hadn’t seen a major design update since 2005.
JG had been regularly publishing up-to-date content since 1996, but the site’s design — and codebase — had not kept up. For many visitors, this blast-from-the-past UX gave an impression that the site was more a museum piece than a modern, trustworthy travel guide. It was time for a change.
Timeline
August 2014 – March 2015
Key Deliverables
- Streamlined info architecture & navigationDesign
- Refreshed brand’s visual identityDesign
- Modernized site designDesign
- New custom front-end framework (PHP/JS/CSS)Dev
Making 2,000+ pages effortless to navigate
After studying JG’s analytics, I found that the vast majority of users were viewing just one content area: travel information. But the site’s architecture made this content harder to discover and cumbersome to browse.
My first proposal at JG was to turn the entire site into the “Travel” section: lifting the site’s most popular pages (Tokyo, Kyoto, When to travel...) up one level to make navigation faster and more intuitive. New “Destinations,” “Interests,” and “Travel Planning” sections created more discoverable, traveler-centric navigation paths, and a new “News” section gave a more prominent home to business-critical sponsored articles.
Catalog all the things
With hundreds of design elements on thousands of pages to evaluate and potentially redesign, a site-wide audit was in order. Page by page, I populated an enormous spreadsheet with details about each template, component, and any pain points or inconsistencies to address heuristically.
With all pages and design elements documented, I could start analyzing the data: finding sections that could be reorganized more intuitively, consolidating similar page elements, and discovering opportunities to breathe new life into the site’s UX.
Redesigning JG
Giving a nearly 20-year-old site its first design overhaul is kind of a big deal. JG’s founder described the feeling like “getting a new nose.” My goal was to preserve what made the site successful while bringing the design into the 21st century.
I iterated designs rapidly based on continuous feedback from our founder, advertisers, team members, and friends outside the company — both familiar and unfamiliar with the site. Though our bandwidth didn’t allow for more formal user testing, these interviews provided massive insight.
Refreshing the brand
Restyling a beloved brand is a job best done respectfully. My goal was to pay homage to JG’s personality while evoking the traits we wanted the brand to project: authoritative, reliable, authentic, inspiring.
I refreshed our logo and color palette, chose new typefaces, and had the good luck to discover and commission Japanese designer Nakako Hashimoto to create a bespoke collection of pictograms tailored to our site’s needs.
But perhaps the biggest change I made to the brand’s visual language was a much heavier emphasis on photography. The story of travel is often best told in pictures, and this was the ideal opportunity to let the company’s considerable collection of travel photography do more of the talking.
The results
In total, the project took about 6 months: roughly 3 months each for design and development. There were many late nights, compromises, mistakes, and successes, but on April 1, 2015, we made the deadline we set with our advertisers and published a brand new version of japan-guide.com.
Homepage
Destination page
“Interests” page
Going forward
We were thrilled that user feedback after launch was over 80% positive. Direct feedback via our site’s feedback form largely praised the new look and feel, and many comments mentioned the site feeling “easier to use.”
With this project complete, the work on “Stage 2” could begin: making the site fully mobile-friendly, continuing to modernize the design and codebase, and adding new and improved features and content to keep JG ahead of our competition.
What worked
- Increased traffic to target content areas. Varied by section, but in some cases we saw increases over 1,400%.
- Site traffic continued to rise. We saw no negative impact in traffic or bounce rates post-redesign.
- Maintained full browser support for over 99% of users.
What’s next
- Site was not yet mobile-friendly/responsive, our main goal for “Stage 2.”
- Many sections and components still needed to be upgraded.
- “Stage 1” development prioritized expediency and shipping an MVP. “Stage 2” was our chance to focus on optimization.