Redesigned Think with Google's navigation for mobile-first marketers
Project overview
Think with Google’s marketing research website shares data reports, guides, infographics, and interactive articles on the latest digital trends keeping marketers informed, innovative, and inspired from one credible resource.
Strategized, iterated, and executed a mobile-first design solution to restructure the navigation on the Think with Google website
Synthesizing user research, problem framing, low fidelity concepts, high fidelity design solution
Think with Google
Problem framing
Digital marketers need to constantly generate new ideas for ways to create compelling campaigns or content that drives meaningful results for their business. However, conducting market research across multiple sources can be time consuming, redundant, and not always backed by credible data and insights.
The previous experience
While the previous navigation on Think with Google was sufficient, it proved difficult for marketers to find the right content that met their needs. About 40% of users were coming to the site via an article link, viewing one piece of content and leaving. Navigating the site was not mobile-friendly despite having 70% of users access the site through a mobile device. There was a clear lack of information hierarchy and way-finding with inconsistent naming across pages. In feedback surveys users reported that they were dissatisfied with the relevancy in the content presented.
🔴 1. Not mobile-friendly
Main UI elements sit outside of the thumb zone at the top left corner of the screen.
Navigation doesn’t utilize available screen real estate and tap targets to page links are small.
Multiple levels of navigation to tap through with unclear page names like "Programmatic".
🔴 2. Difficult to understand content relevancy
Overwhelming to select a topic or focus on an area of interest with so many article options surfaced at once.
Log in entry point provides an opportunity to capture relevant information about a user.
High level points of discovery like keyword search or aggregating popular content could be more accessible.
🔴 3. Inconsistent navigation and information hierarchy
From starting on the article page, the main navigation is not easily accessible.
Changing names and titles in the nav bar make it difficult to understand if you're on the same site.
Inconsistent navigation structures across many pages.
The design solution
Each of these 3 factors created barriers to a user's engagement thus becoming the focus of the design solution.
A marketer’s time is limited. How can Think with Google serve them with the most relevant content that meets their needs? By meeting them where they are with a mobile-first navigation.
✅ 1. Make the global navigation mobile-friendly
The toolbar navigation style allows for easier tap targets on a smaller screen size.
Positioned in the bottom portion of the screen to sit within the thumb-zone.
Balances the screen real estate so that the content is the main focus.
Translate this mobile-first redesign for consistency on desktop.
✅ 2. Improve the discoverability of relevant content
Toolbar keeps the main actions of a market researcher accessible like browsing by trending content, keyword search, and an organized menu of marketing categories.
Surface content recommendations on new landing pages for “Trending” and “Search”.
Updates to the login flow are out of scope for this phase of work, but consider where the login entry point should be situated with the updates to the navigation.
✅ 3. Ensure consistent use of navigation and clarify the information hierarchy
Toolbar navigation is ever present throughout the site to improve wayfinding.
Stylized iconography pulls from the Think with Google visual style and helps organize the information hierarchy into 4 main marketing categories.
Stacked navigation on article pages identifies the relationship between the name of the overall site, the marketing category, and title of the article.
To arrive at this solution I broke down the work into phases where each step in the process helped to inform my design decisions, and created alignment and confidence with the client during rounds of review. From discovery to design, here are some of my key learnings during my design process.
Synthesizing user research
Before any design can take place I want to ground my understanding of the user’s needs and business goals through research to build a complete narrative. With the scope of the redesign focused on the navigation, I prioritized my research around these main artifacts:
Define the target audience through developing personas.
Understand the information architecture and content strategy of the site.
Evaluate how direct and indirect competitors utilize mobile navigation on their sites.
Target audience
Through user data provided by the client I identified 2 main types of marketing professional personas: “The Decision Maker” or thought leader and the “Practitioner” or team level researcher.
Main motivations included finding new and inspiring information and being able to drive immediate impact.
Pain points in their marketing research experience was the time spent compiling compelling insights and risk of using out-dated or not credible information.
Site map and information architecture
Documenting the previous site’s structure revealed the complexity of layers to the global navigation making it hard to discern what type of content should belong under which destination.
In the previous site structure there were multiple instances of redundant content landing pages like “Creativity” under “Future of Marketing” and “Create with Google” a separate website altogether organized under “Tools”.
Marketers are struggling to find relevant content on Think with Google because there are too many categories and layers of information that do not align with their main jobs to be done.
Competitive analysis
A review of existing properties, and competitors both direct and indirect reaffirmed some common pain points with established web patterns and insight into mobile-first approaches.
Navigation on research sites like Meta for Business didn’t clarify main points of destination with multiple levels of menus per topic.
Popular social content apps like Pinterest , Instagram, and Facebook utilize a toolbar with the main tasks of their user.
Informing my design hypothesis
To clarify the outcomes each marketer is seeking and what the design should help them achieve, I developed the narrative even further by outlining their key jobs to be done. From here, I can make an informed hypothesis that identifies what I’d like to explore through iterations and test to validate (or invalidate 🤷♀️).
💼 Jobs to be done
Persona 1
The Decision Maker
When I'm determining the overall marketing strategy, I want to easily access emerging marketing insights or trends so that I can make informed, strategic decisions that drive business growth.
Persona 2
The Practitioner
When I'm executing a marketing campaign, I want to quickly discover actionable data and cite detailed research so that I can optimize our tactics and deliver measurable results.
🔬 Hypothesis
📈 How will efficiency be measured?
Increase click-through rate on primary navigation links.
Maintain or increase 70% of site visits from mobile devices.
Exploring and evaluating 3 different directions
After diverging through multiple rounds of high fidelity design exploration, these final 3 directions emerged as strong solutions addressing the problem of mobile engagement barriers. Each direction was evaluated by both the client and a client-approved user testing group using developed prototypes. Once the user testing studies were concluded it was time to organize the feedback and converge on a final solution. Here are some of the key takeaways I gathered from the feedback:
Recapping the final design decision
Analyzing the feedback gathered during user testing validated 3 key design decisions:
1. Users were more likely to tap through navigation with visuals that drew their interest.
2. Surfacing user actions based on their main tasks in the first level of navigation led to more tap throughs on the navigation to find content that interested them.
3. Striking a good balance between visible tap targets and minimal levels of nested navigation helped users find what they needed and remember their place.
These takeaways guided the final design solution to create a mobile-first toolbar navigation. From this entire process, it was valuable to learn how to best help a user find what they were interested in, how many levels of navigation led to drop-off or disinterest, and incorporate an opportunity for visual interest by leveraging Think with Google’s iconographic illustration style into the UI in a meaningful way.
