Make a large corporate site easier to scan.
Walmart Canada's corporate pages needed stronger hierarchy, consistent modules and clearer navigation so visitors could move through community, impact and campaign content without losing the path.
Retail · Corporate site & campaigns
Walmart
A corporate site system and bilingual motion for Walmart Canada.
On the SJC agency team I structured Walmart Canada's corporate site — navigation, page modules, footer — and produced English and French animated campaign infographics that had to land in seconds.
- Role
- Art Director & UX/UI Designer (SJC agency team)
- Scope
- Corporate site navigation and page modules, footer system, EN/FR campaign motion
- Focus
- Structure, brand consistency, motion that explains fast
- Context
- Corporate site & campaigns
- Walmart Canada's corporate site (community, impact, careers): navigation, page modules, footer, bilingual campaign assets.
- Output
- 8+ animated modules
- Campaign infographics delivered in English and French as motion assets.
- Year
- 2022
- Designed in 2022 at SJC, partnering with the Walmart Canada team.
- Duration
- ~3 months
- A focused agency sprint covering responsive layouts, the footer system, and EN/FR campaign rollouts.
Project arc~3 months - Structure, completed
- UX cases, completed
- Wireframes, completed
- Page modules, completed
- Responsive, completed
- Motion, completed
Settle the structure, then tell the story.
I worked on the page structure from wireframe to responsive layouts, treated navigation and footer as one wayfinding system, and produced the animated infographics in English and French.
Corporate site
Crowded corporate pages need structure.
Walmart Canada’s corporate pages carry a lot at once: community stories, impact reporting, careers, campaign modules, navigation, language variants, and footer utilities. The UX work was about making those layers feel intentional instead of crowded.
Inside the homepage
A homepage that answers questions in the order visitors ask.
Each zone of the homepage answers one question a visitor arrives with: where can I go, is this the store or the company, what is new, where do I go deeper. Here is each zone and the reasoning behind it.
Desktop homepageSeven zones, one reading order
01 / 07Four destinations stay in view.
Where can I go from here?
Four destinations stay in view.
About, News, Purpose and Work at Walmart sit in the bar on every page, so the top level of the site is four choices. Search, the EN | FR switch and Shop are grouped on the right, apart from the sections. Shop leads out to the store, so it reads as an exit rather than a fifth section.
- Recognition over recall
- Exits apart from navigation
Is this the store or the company?
The welcome names the site.
The first screen says “Welcome to Walmart Canada” beside three associate portraits. There is no product, price or offer on it, so one glance tells a visitor this is the corporate site and not the shop.
- Orientation first
- People before products
What is this site about?
One statement, one button.
“Helping Canadians live better” leads two short paragraphs about the company, followed by a single About Us button. One action after the introduction keeps the first decision simple: keep reading, or go deeper into the company.
- One primary action
- Plain language first
What is new?
The top story is the largest card.
Latest News puts one large story in the centre with four smaller ones around it. Every card repeats the same order (image, category, headline, date), so the eye compares stories instead of decoding layouts. A More button below leads to the archive.
- Visual hierarchy
- One card pattern
Where do I go deeper?
Three doors of equal weight.
Our People, Our Culture and Our Impact share one band. Each card has an illustration, a short summary and one Read more button at the same size, so the page does not rank one topic above another.
- Equal options, equal weight
- One action per card
Who is behind the company?
Associates close the story.
A full-width band of three associate portraits ends the content and echoes the three in the hero. The page opens and closes on people before the footer takes over.
- Matching bookends
- Brand through people
Where is everything else?
The footer repeats the map.
The four destinations return in the footer with Shop beside them, so a visitor who reaches the end does not have to scroll back up. Social links and the language switch sit on the left, and the legal links run in one row below.
- Wayfinding at the end
- Group by purpose
UX cases
What a visitor asks, and where the site answers.
Pick a question. See the screen that answers it.
Concepts · not shipped
Three I would design next. Try them.
- Shop at walmart.caA store question. It leaves this site.
Send store questions to the store.
Type a question- Purpose › CommunityCommunity
Same page, same spot.
Switch language, stay on the page.
Flip it - About · News · Purpose · Work at Walmart · Shop
Fold the footer on small screens.
Open a group
Wireframes
Structure came before surface polish.
The homepage was drawn in grey boxes first, with the real navigation and footer already in place, so the order of the content was settled before any photography or colour went in.
Wireframe
Final design
Both pages are shown at the same scale. The final design is about a third shorter than the wireframe.
Name every block the page has to carry
The wireframe labels each one: a top story with secondary stories, then Our Business, Our People, Our Culture & Value and Our Impact.
Settle navigation and footer first
Both are drawn in full in the wireframe while everything between them is still grey boxes, so each later decision was made with the wayfinding already in view.
Give the top story the centre
In the wireframe the top story sits on the left with three stories stacked beside it. In the final design it moves to the middle of the grid with two stories on each side.
Shorten the middle, keep the order
Four full-width rows became three equal cards in one band, and a short company statement now follows the welcome. The page got shorter without changing what comes first.
Challenge
Make a content-heavy corporate site easier to move through.
Walmart Canada needed pages that could hold a lot of business and campaign content while still feeling quick to scan, clear to navigate, and visually connected to the brand.
Make the path through a large corporate site feel predictable.
Primary navigation, footer logic, and page anchors were treated as a UX system so visitors could orient themselves quickly.
Use motion to explain the idea before the visitor reads everything.
Animated modules gave campaign content more personality while keeping the message scannable and lightweight.
Keep the same story intact across page widths.
Desktop, homepage, and mobile treatments were aligned around the same visual hierarchy instead of becoming separate experiences.
Responsive system
The same page logic had to survive smaller screens.
Instead of squeezing desktop work into mobile, the page system was rebalanced around purposeful stacking, tighter image crops, and more deliberate content rhythm.
Figma frames for two section pages at desktop, tablet and mobile widths. The navigation bar and the section title block appear at every size.
Campaign content, navigation, and story modules were stacked so the story remained clear on narrower surfaces. Layout mock with placeholder copy.
The page structure kept visual continuity while adapting image, copy, and navigation density. Layout mock with placeholder copy.
Each page block had to work as its own story while still belonging to the full site. Layout mock with placeholder copy.
The responsive system protected important page content from becoming squeezed or visually noisy.
Page patterns
The utility areas still had to feel designed.
The Walmart identity had to carry from hero content into the footer and the smallest utility moments, so the page felt consistent from first impression to final link.
Blue, yellow, bold navigation, and the spark mark gave the page system a stronger brand center.
A photo on the left and the section name in a blue title block with sparks, under the same navigation bar. Community is shown here.
On narrow screens the logo and social icons centre, then the destinations, legal links and language switch stack in that order.
Explore these patterns as an interactive library: tokens, bilingual components, and page templates.
Animated infographics
Motion gave the campaign stories a little spark.
The animated modules helped Walmart Canada’s campaign content feel more memorable while still keeping each message short, visual, and easy to understand.
Outcome
The corporate site now reads as one system.
What shipped, what I don't claim, and what I'd start from next time.
What shipped
- Corporate homepage direction and a page-module system, handed to Walmart Canada's production team
- Primary navigation and a footer system with utility, legal and social links organized as wayfinding
- 8+ animated campaign infographics delivered in English and French
- Responsive page patterns handed to the production team
What was measured
No performance numbers are quoted for this work — I'd rather show what shipped than borrow a metric I didn't measure.
The call I’d revisit
I'd start from the module catalogue, not the homepage.
Looking at the work now, the homepage got the attention and the module system reads as derived from it. On a corporate site the durable asset is the catalogue of modules — story, stat, campaign, utility — with English and French string lengths designed in from the first draft. Next time I’d ship that catalogue first and let the homepage be its first customer.
What I’d instrument next
- Completion of the corporate site's top tasks: careers, community, impact report
- Watch-through of the animated modules against static versions
- EN/FR parity checks on every release