Turning A Complex Fantasy Video Game Into An Easy-To-Use Design System
My Role
Senior Product Designer
(Project Design Lead)
Software Used
Figma
Adobe Photoshop
Team
3 Product Designers
4 Web Developers
Context
Soulframe is Digital Extreme’s new fantasy video game announced early in it’s development in 2022. With that announcement, we quickly launched a website for users to sign up for pre-alpha access to the game. Two years later, the visual style and branding of the game has evolved so much that the website’s visual design no longer represents the video game.
On top of this, Digital Extremes plans to launch the game in a pre-alpha state in 2024. This will require over 25 new pages on the website to support the game and the community’s needs.
Problem Space
Doesn’t look like the game
The website does not currently align with the game’s visual identity.
No design system
Soulframe doesn’t have a design system which may cause consistency issues while a team of multiple different designers and engineers are working on the product.
Tight timeline
The timeline to complete this project is very short and there will be over 25 pages launching on the website this year.
“Can we make the buttons on the website match the buttons in the game?”
- Creative Director of Soulframe
Yeah those buttons don’t match what we have on the website but I’m noticing a bigger issue…
The game’s visual identity has completely changed. It doesn’t match the website at all.
Problem Discovery
With Soulframe’s pre-alpha launch coming up this year, we’ll be adding over 25 more pages to the website. With the website getting much bigger and requiring a larger team to support it, creating a design system for it would greatly increase its visual consistency and reduce project timelines.
This overhaul of the website is a perfect opportunity to redesign the website’s UI to accurately reflect the game.
Solution Space
Redesign it
Re-design Soulframe’s website to accurately reflect the video game.
Create a design system
Create a design system that can be used across the team to ensure visual and UX consistency across all projects.
Create an MVP
Prioritize creating a minimum viable product needed for launching the upcoming web pages.
Research
I collaborated with project managers, producers, engineers, and community leads to create an outline of every new page we’re adding to Soulframe’s website.
I wanted to begin creating wireframes for these pages but to do this accurately and as time efficiently as possible, I had to establish a grid system first.
Grid System
In collaboration with the rest of the product design team, we defined a fluid responsive grid system and then I created documentation for it. After that, I worked with the engineering team to develop it.
Design system grid system.
Wireframes
I used the outline we defined and the new grid system to create wireframes for every page needed for Soulframe’s pre-alpha launch. Doing this as early as possible also allowed the engineering team to begin planning their work load and boxing out each page
More importantly, I now had a complete list of every design system component that needed to be completed for Soulframe’s launch. This list will act as the minimum viable product for Soulframe’s design system.
Account management wireframes.
UI Explorations
I created a mood board to get a clear vision of what Soulframe looks and feels like. This mood board consisted of in-game screenshots, marketing materials, and concept art.
The game’s UI design is very illustrative and not well suited for a website so I decided not to copy it pixel by pixel and to instead create a “website friendly” version of it.
Soulframe video game UI design.
Soulframe marketing materials.
UI Explorations
I created two completely different UI designs and shared them with the lead creative team of Soulframe. They were really happy with how they were looking and preferred the darker direction but they had one major request.
UI design exploration #1
UI design exploration #2
“The buttons should look exactly like they do in the game.”
Battle of The Buttons
On paper, this feedback seems reasonable but when applied, there are some clear issues. The in-game buttons aren’t ideal for a website because the contrast ratio between the buttons and the website’s dark background was too low to be accessible for visually impaired users.
On top of this, the buttons didn’t draw enough attention to act as a primary and secondary button. Ideally, the primary button component of a website commands the most attention on the page. This requires the design to be fairly different from it’s surroundings. The same logic can be applied for secondary buttons as they’re intended to command the user’s attention but not as much as the primary button.
Comparison between the in-game buttons and my proposed button designs.
Battle of The Buttons
With unaligned opinions between myself and the Soulframe team, I created a presentation to explain my perspective. I designed exactly what they were suggesting and then I designed a “compromise” version that I thought would work the best.
After showing the team both solutions and explaining my perspective, they agreed to move forward with my suggested designs.
Mocked up button comparisons.
Final Documentation
With an approved UI design and list of components, I began creating an icon library, gathering logos, and documenting interaction speeds.
I created a lot of documentation on the design system itself. This includes best practices on updating the design system, managing branches, adding new components, and much more.
Design system icon library.
Final Documentation
I also created an organized individual component documentation template to ensure all documentation is consistent, organized, and contains all of it’s relevant information.
Individual component documentation template.
Final Responsive Designs
I started using the approved UI design to create final designs for ultrawide, desktop, tablet, and mobile sizes of every page. I began with the pages that contained the most amount of different components and design decisions.
Account management page final desktop designs
Account management page final tablet designs
Account management page final mobile designs
Final Responsive Designs
As these designs were approved, I started creating individual components from them. Each component contained multiple variants to account for different states and device sizes. I also created any necessary prototypes for them as well as any booleans they may need.
Variants and booleans for the “notification” component.
Final Responsive Designs
At this point, I was using consistent colours and typography so I documented these and created a colour library and a typography ramp.
Design system colour library.
Design system type ramp.
Results
A Cohesive Visual Identity
The current website was fully redesigned to accurately represent Soulframe’s visual identity. The entire Soulframe team, including the creative directors and lead artists were extremely happy with the final look of the website.
Decreased Project Timelines
Project timelines have been dramatically decreased as we now have an easy-to-use design system used throughout both the design and engineering teams.
Over 1.1 million visits
All pages were completed ahead of time and deployed on schedule with Soulframe’s pre-alpha game launch. At the time of writing, over 100,000 users have used the website to successfully register for Soulframe and over 1.1 million users have visited the website.