TELL Japan Website - Homepage Redesign
TELL Japan Website - Homepage Redesign
Primary Case Study
Embedded Files
My Role and Responsibilities
Role: Website Designer and Graphic Design Coordinator
Organization: TELL Japan
Period: October 2020 – Present
Primary Platform: WordPress / Elementor
Additional Tools: Figma, Adobe Creative Suite, HTML/CSS, Google Analytics 4, and WordPress Plugins
Key Responsibilities:
UI/UX and responsive web design
Streamline information architecture and improve navigation
Create wireframes and mockups
WordPress and Elementor implementation
Front-end troubleshooting and optimization
Website analytics and data-informed improvements
Collaboration with technical and non-technical teams
The TELL homepage before the update
The TELL homepage footer before the update
The Problem And The Goal
When I joined TELL, one of my first major projects was a homepage redesign, which began in July 2022 in collaboration with an external backend developer.
The existing website had an outdated design and was not optimized for different screen sizes, making it difficult for users to navigate and find information. The website structure also needed reorganization, including improvements to navigation, submenus, search functionality, and calls to action.
The redesign involved updating the homepage's UI, page layouts, content, imagery, and CTAs to create a more intuitive user experience. Since TELL provides a wide range of services and resources, it was important to make information easy to find for different audiences.
I worked closely with staff across the organization, including TELL administration, Outreach, Lifeline, Development, Mental Health Clinical Staff, the Executive Director, and Board members. We used Google Workspace and Figma to develop ideas, organize content, create initial concepts, and design screens before implementation.
The redesigned homepage launched in October 2022 with a new visual design, updated information architecture, improved navigation, and a more responsive user experience across different devices.
The image on the left shows a comment from TELL staff regarding counseling content on the page.
The image on the right shows the very first stages of website planning and ideation with non-technical staff.
The Process
Information Architecture
The existing TELL homepage needed improvements to the navigation, page hierarchy, and website design. I revised the sitemap, streamlined the content, created CTAs, and updated the menu/submenu navigation.
The existing homepage hierarchy was poorly organized, with a lot of repetition even within submenus. For example, the Lifeline parent page has three child pages and even more sub-child pages.
With the improved homepage hierarchy, pages are organized into a clearer structure with less repetition and more intuitive navigation. Related content is grouped together, making it easier for users to find information without navigating through multiple submenu layers. Additionally, moving the Job Opportunities and About sections to the static footer is best practice for most websites.
Before the Website Update — Navigation Lifeline
Before the Website Update — Navigation Counseling
Before the Website Update — Navigation Donate
After the Website Update — Improved Navigation Lifeline
After the Website Update — Improved Navigation Counseling
After the Website Update — Improved Navigation Donate
The new, improved navigation structure uses a clearer parent-and-child page hierarchy, grouping related content under relevant sections, reducing unnecessary layers, and making it easier for users to find key services and resources intuitively. The donate page doesn't have child pages, as we wanted users to have as few clicks as possible to donate to TELL from the landing page. Fewer clicks means fewer chances to not complete a donation.
Initial homepage wireframe
Next iteration of homepage wireframe
Redesigned homepage wireframe mobile view of Lifeline menu
Improved mobile navigation was a major need for the homepage redesign. The existing navigation was difficult to use on smaller screens, particularly when navigating through nested menus and submenus.
I redesigned the mobile navigation into a 3-line hamburger menu icon at the top right of the screen. This simplified the menu structure and made key services and resources easier to access.
Staged the TELL website on WPEngine for testing
We staged the TELL website on WPEngine to safely test the work-in-progress design. Once the website was finalized, we pushed it live with minimal downtime. This was vital as the Lifeline runs an essential mental health service around the clock.
The Solution
The website's homepage redesign provides a more consistent experience and gives TELL a strong foundation for adding future content. By developing and testing the site in a staging environment, we transitioned to the redesigned website while keeping the existing site and vital Lifeline services available during development.
The TELL homepage after the update
The improved homepage now has a simplified menu with more intuitive parent-child submenus. The navigation is streamlined, reducing visual clutter and helping users find the content they need when they need it. The CTAs are clearer and highlight the services TELL offers and the key actions users can take on the website, including donating, engaging with TELL's video content/social media, accessing emergency numbers, and signing up for TELL's monthly newsletter. The footer information is greatly reduced, improving the user experience by highlighting job opportunities, access information, newsletter archive, and Lifeline information.
The website layout is now responsive and adjusts for different screen sizes. Finally, the homepage content is reorganized to emphasize information hierarchy, so TELL website users have a better experience regardless of the device they use.
The Outcome
The website's homepage redesign provides a more consistent experience and gives TELL a strong foundation for adding future content. By developing and testing the site in a staging environment, we transitioned to the redesigned website while keeping the existing site and vital Lifeline services available during development. Google Analytics also reported a significant increase in website traffic. We saw the greatest increase in visits to the TELL homepage, Lifeline page, and Counseling pages.
Before the Website Update — Google Analytics
Before the Website Update — Google Analytics
After the Website Update — Google Analytics
After the Website Update — Google Analytics
View My Other Web Design Case Studies
Google Sites
Report abuse