- Product Design
- +
- Full-Stack Dev
japan-guide.com, Welcome to the 2020s
A multi-year effort to keep Japan Guide engaging, fast, and exceptionally helpful.
Background
After a major design and codebase overhaul (see my 2015 case study), the groundwork had been laid to start realizing bigger goals for japan-guide.com. We’d made major strides in UX and development, but there was still work to do. JG still needed a mobile-friendly, modern design, more intuitive navigation, and faster page speeds for travelers from around the world.
My main role at JG was to make those things happen.
This case study highlights some of my key efforts over my last 5 years at Japan Guide as our team’s sole product designer and developer to make the site’s user experience delightful, fast, and competitive with big name competitors.
Timeline
2017 – 2022
Key Deliverables
- Fully responsive, mobile-friendly UXDesignDev
- Optimized site & sectional navigationDesignDev
- Comprehensive design system & docsDesignDev
Going mobile
Creating responsive designs for over 2,000 pages of desktop-optimized content was no small task. But with over 50% of JG’s users accessing the site on mobile devices when we launched our first fully responsive version in 2017, the effort was worth it.
I adapted hundreds of components and layout designs to fit any and all screen sizes. I also made sure my changes had zero impact on SEO, accessibility, or ad spaces.
Getting navigation right
Japan Guide’s content is highly structured, but most sessions begin with visitors landing deep within the site from Google search results. Helping users orient and navigate quickly — on any device — was vital.
We tried out multiple navigation experiences over the years. One notable attempt was the “Explore” menu (2019–2022). This app-within-an-app concept was highly interactive and made exploring the site extremely fast. Ultimately, though, analytics showed that always-visible, top-of-the-page sectional nav menus were more effective at boosting discoverability.
Wrangling styles into a design system
JG was maturing, accumulating components, new designs, and complexity. But without a design system in place, consistently applying colors, typography, spacing, and all the design decisions that make a solid UX, was becoming a sisyphean task.
So, I created a design system for JG — a framework for standardizing, naming, and applying styles in both designs and code. I also created “JG Docs,” a living documentation resource directly linked to our codebase, to provide a single source of truth for our writers, videographers, and myself.