LHH · Website architecture
Giving a complex website a clearer structure
I shaped the information architecture, navigation and wireframes for LHH’s global website. The work connected the structure of the site to the story on each page: questioning the proposed navigation, identifying fragmented messages and defining the modules that would guide copy and visual design.
Scope
Information architecture, content auditing, navigation, tree testing and wireframe design.
Collaboration
I worked through detailed reviews with stakeholders from LHH’s US offices. Copywriting and final UI design were delivered by collaborators.
The wireframe / Job search
Search results alongside the selected job. A detail of the original wireframe, with the complete page available to explore.
The wireframe / Job search
Search results alongside the selected job. A detail of the original wireframe, with the complete page available to explore.
01
Start with the message, not the page count
Some messages were spread across two or three pages. I analysed those pages and proposed bringing related content together, so a single page could explain the message more clearly.
This meant looking beyond the existing sitemap. I audited page content, suggested improvements and considered which information belonged together. Consolidation was part of the design work, not just an exercise in shortening the navigation.
The same thinking carried into the wireframes. Before deciding how a page should look, I needed to establish what it should communicate and how its sections would build that story.
01
Start with the message, not the page count
Some messages were spread across two or three pages. I analysed those pages and proposed bringing related content together, so a single page could explain the message more clearly.
This meant looking beyond the existing sitemap. I audited page content, suggested improvements and considered which information belonged together. Consolidation was part of the design work, not just an exercise in shortening the navigation.
The same thinking carried into the wireframes. Before deciding how a page should look, I needed to establish what it should communicate and how its sections would build that story.
02
Question the proposed navigation
I challenged the initial sitemap and mega menu proposal, then helped define the revised navigation. I used a simple tree test to inform the structure I proposed to stakeholders in the US.
The navigation was not a separate deliverable to finish and put aside. It established where information belonged, which pages were needed and how those pages connected. My work on the sitemap and individual wireframes addressed those questions together.
02
Question the proposed navigation
I challenged the initial sitemap and mega menu proposal, then helped define the revised navigation. I used a simple tree test to inform the structure I proposed to stakeholders in the US.
The navigation was not a separate deliverable to finish and put aside. It established where information belonged, which pages were needed and how those pages connected. My work on the sitemap and individual wireframes addressed those questions together.
Selected navigation branches from the initial global proposal and my revised US sitemap, redrawn for this case study.
Selected navigation branches from the initial global proposal and my revised US sitemap, redrawn for this case study.
03
Make the page structure useful to the whole team
I put together a detailed map connecting pages to their sections, content requirements and calls to action. It gave the copywriter and graphic designer a structure for deciding what to put on each page.
I chose modules, cards and other components to support the story, rather than writing the final copy. Those choices defined the order and grouping of information, and the points where a visitor could move to another page or take an action.
The deliverable went beyond showing which pages existed. It described what those pages needed to contain and how their content connected to the rest of the site.
03
Make the page structure useful to the whole team
I put together a detailed map connecting pages to their sections, content requirements and calls to action. It gave the copywriter and graphic designer a structure for deciding what to put on each page.
I chose modules, cards and other components to support the story, rather than writing the final copy. Those choices defined the order and grouping of information, and the points where a visitor could move to another page or take an action.
The deliverable went beyond showing which pages existed. It described what those pages needed to contain and how their content connected to the rest of the site.
A simplified view of the original page plan. Selected sections of the executives landing page connect content to calls to action and destination pages.
A simplified view of the original page plan. Selected sections of the executives landing page connect content to calls to action and destination pages.
04
Work through the decisions with stakeholders
My sitemaps and wireframes went through detailed scrutiny in meetings involving more than 20 participants from LHH’s US offices.
I worked through those reviews at both levels: the overall structure of the website and the content and components within individual pages. The sitemap, page plans and wireframes made the proposed experience available for discussion before final copy and UI design.
04
Work through the decisions with stakeholders
My sitemaps and wireframes went through detailed scrutiny in meetings involving more than 20 participants from LHH’s US offices.
I worked through those reviews at both levels: the overall structure of the website and the content and components within individual pages. The sitemap, page plans and wireframes made the proposed experience available for discussion before final copy and UI design.
05
Carry the structure into detailed wireframes
Job search brought several decisions into one view. My wireframe placed the results list beside the selected job, with search controls above and a separate filter panel. The selected job included its description, responsibilities, benefits and application action. Supporting job seeker content sat below the search experience.
05
Carry the structure into detailed wireframes
Job search brought several decisions into one view. My wireframe placed the results list beside the selected job, with search controls above and a separate filter panel. The selected job included its description, responsibilities, benefits and application action. Supporting job seeker content sat below the search experience.
The detail / Filters
A separate space to narrow the search.
The filter panel brings location, work preferences and job requirements together, with actions to save or clear the selection.
Original wireframe. Example content is retained.
The complete filter panel, including its save and clear actions.
The detail / Filters
A separate space to narrow the search.
The filter panel brings location, work preferences and job requirements together, with actions to save or clear the selection.
Original wireframe. Example content is retained.
The complete filter panel, including its save and clear actions.
Locations
The location pages formed a connected journey. The finder combined a location search and distance control with a list of offices and a map. The office detail page brought together contact information, opening hours, directions, the local team and open jobs.
These wireframes made the content structure concrete. They showed what information belonged together and how someone could move from finding a result to understanding their next step.
Locations
The location pages formed a connected journey. The finder combined a location search and distance control with a list of offices and a map. The office detail page brought together contact information, opening hours, directions, the local team and open jobs.
These wireframes made the content structure concrete. They showed what information belonged together and how someone could move from finding a result to understanding their next step.
A connected journey / Locations
Original wireframes. Example content is retained.
Search by location and distance, then compare offices in a list and on the map.
Bring contact information, directions, the local team and available jobs into one page.
A connected journey / Locations
Original wireframes. Example content is retained.
Search by location and distance, then compare offices in a list and on the map.
Bring contact information, directions, the local team and available jobs into one page.
The contribution
What the work delivered
I delivered the information architecture, page and module plans, and wireframes that guided content and visual design for the global website. I also helped define the navigation used on the live site.
Separately, I developed sitemaps, information architecture and wireframes for LHH’s US website.
My contribution connected decisions about the whole site to the details of individual pages: what to consolidate, where content belonged and which components would help tell the story.
The contribution
What the work delivered
I delivered the information architecture, page and module plans, and wireframes that guided content and visual design for the global website. I also helped define the navigation used on the live site.
Separately, I developed sitemaps, information architecture and wireframes for LHH’s US website.
My contribution connected decisions about the whole site to the details of individual pages: what to consolidate, where content belonged and which components would help tell the story.
The contribution
What the work delivered
I delivered the information architecture, page and module plans, and wireframes that guided content and visual design for the global website. I also helped define the navigation used on the live site.
Separately, I developed sitemaps, information architecture and wireframes for LHH’s US website.
My contribution connected decisions about the whole site to the details of individual pages: what to consolidate, where content belonged and which components would help tell the story.