Got password?
Enter the password to continue.
SEGA
SKILLS
Information Architecture
Design Systems
User flows
Prototyping
TOOLS
Figma
Miro
Drupal
Sega needs no introduction, we’ve all seen or heard about it here and there, the rebellious rival to Nintendo back in the 80’s… or at least that’s how many of us remember it.
Now it needed to suit up to celebrate decades of gaming history, while presenting itself as a modern entertainment company, with franchises that now go beyond video games.
Working alongside a copywriter, my first task was to rethink the site’s information architecture.
We started by zooming out to understand the cards we had, before diving into individual wireframes. One of the most impactful decisions came from the language itself: instead of referring to each intelectual property as a franchise, we adopted the term world, a concept that felt more natural to Sega’s audience and helped shape the rest of the site’s architecture.
Once the sitemap was in a good place and validated, we zoomed in to the individual pages.
Each module that we designed served a clear purpose, helping users to discover a world’s lore, explore related content, becoming part of the community and ultimately make a purchase.
We also kept in mind cross referencing different dimensions of the site. A world’s page wasn’t just a destination, it became a hub where users could discover games, tv series, films, forums and other types of content.
A major goal of the redesign was to streamline Sega’s buying funnel.
Purchasing a game wasn’t as straightforward as it sounds. Physical and digital versions of game titles were released across multiple consoles, many had “orphan” micro-sites, and different publishers and studios often managed their own purchasing experiences.
This created a fragmented journey that made it hard for Sega to own customer relationship, and also gave a broken experience to users.
GUIDING THE PURCHASE FROM THE TOP.
Users are shown a buying module, with multiple options for the users to get the format and version of the game they need.
Options will be defaulted to the most popular platform and the biggest edition.
Clicking the dropdown will allow the user to pick the different digital or physical editions or physical.
When users select a physical edition, a second dropdown appears with retailers in the dropdown field based on their location.
By allowing the users to choose the platform first, and by grouping digital and physical editions into a single flow, users only saw valid purchasing options—eliminating unnecessary error states and making the buying experience much smoother.
Now, the nature of the site called for the right balance of visual dynamism and thoughtful micro-interactions to capture the excitement of gaming. We had plenty of right assets to work with: from high-quality images and visual patterns, to gameplay videos. This gave us the opportunity to create an engaging and immersive experience. (Crafted in Figma prototypes)
Another key aspect of the project was that we were building for a long-term vision. The deal (literally the contract), wasn’t just to design a website, but to build a flexible library of templates and modules that their team could reuse, adapt and expand as they made future updates on the site.
This meant thinking in systems rather than individual pages. For example, we designed a hero banner that could be scaled up or down depending on context and needs of how it was going to be used.
This approach required detailed documentation, almost like an IKEA instruction manual to indicate how a component could be assemble, what elements were optional and what was the minimum viable version of it.
HERO - CAROUSEL VARIANT
Hero background (media):
The media for the hero can be a:Game-related video
Length: Recommend 7 seconds
Play mode: Automatically and on loop
Static image
If the hero is a carousel, the recommendation is to include 3 to 4 slides.Hero content:
The content on the hero banner, can include the following elements:Optional Tag: Shows the release date, when needed
Eyebrow: A single line of text
H1: Up to 2 lines of text
Optional Description: Optional paragraph to add more context
Play button:
If media is a video, a play button on the hero banner invites the user to see the full video (trailer, gameplay, or other media content) When clicked, the video will open in a modal.Carousel controls:
These controls indicate that there are more slides in the hero banner. The slides will changed automatically. A bar around the control button communicates time for each slide. (We recommend each video to be about 5 to 7 seconds.) If the button is clicked, it will advance to the next slide.Review interactions here in prototype mode.
Review carousel button documentation
Hero CTA's:
Primary button: This is the main action we want the user to take (i.e. buy a game, pre-order a game, wishlist a game, etc.)
Optional Secondary button: A complementary action we want the user to take (i.e. go to game detail page, etc.)Game logo:
This is the where to display the respective game logos. Game logos are only displayed when the content of the hero banner highlights a specific game.
FIRST WE PLAN, THEN WE CRAFT.
Great handoff and documentation don't begin when designs are finished—they begin much earlier. By understanding both the business goals and users' needs, we can craft components and modules that solve the right problems from the start.
This also contributes to have the right elements and tools throughout the project to reuse and maintain, making life easier not just for designers, but for developers as well.
One of the biggest challenges was setting a design system mindset within the team, this also involved establishing file organization practices that made collaboration smoother and handoff easier. The goal wasn’t just about delivering artifacts for Sega to confidently maintain and evolve after handoff, it was also about making our own work more efficient.
