A legend's arsenal,
built to win on any device.
A legend's arsenal,
built to win on any device.
PROJECT TOOLKIT:
Figma, Photoshop, Illustrator, Google Sheets, Google Slides
PROJECT TOOLKIT:
Figma, Photoshop, Illustrator, Google Sheets, Google Slides
THE GRAND ARMORY: A NEW CHAPTER IN THE HERO'S JOURNEY
THE GRAND ARMORY: A NEW CHAPTER IN THE HERO'S JOURNEY
The first chapter of our tale saw the creation of the Herculean Forge App, a digital workshop that empowered every gamer to become a master blacksmith and forge their perfect gear. The app was a resounding success, transforming a tedious task into a fun, game-like activity. However, our heroes' quests were not confined to a single device. The battlefield of modern gaming is vast, and a true armory must be accessible from all platforms, from the mobile screen to the grand, sweeping vistas of a desktop display.
My next mission, then, was clear: to take the magical, intuitive experience of the personal forge and scale it to a grand, responsive website, a Grand Armory that would serve as the ultimate hub for every hero in the kingdom.
The first chapter of our tale saw the creation of the Herculean Forge App, a digital workshop that empowered every gamer to become a master blacksmith and forge their perfect gear. The app was a resounding success, transforming a tedious task into a fun, game-like activity. However, our heroes' quests were not confined to a single device. The battlefield of modern gaming is vast, and a true armory must be accessible from all platforms, from the mobile screen to the grand, sweeping vistas of a desktop display.
My next mission, then, was clear: to take the magical, intuitive experience of the personal forge and scale it to a grand, responsive website, a Grand Armory that would serve as the ultimate hub for every hero in the kingdom.
A GLIMPSE INTO THE GRAND ARMORY
A GLIMPSE INTO THE GRAND ARMORY
The final prototypes were the culmination of this journey, showcasing the final, high-fidelity designs. They demonstrate the seamless user experience from start to finish, with two distinct paths forged to accommodate every hero's needs—from the master blacksmith who crafts their legend piece by piece to the swift warrior who chooses from a curated, battle-ready arsenal.
The final prototypes were the culmination of this journey, showcasing the final, high-fidelity designs. They demonstrate the seamless user experience from start to finish, with two distinct paths forged to accommodate every hero's needs—from the master blacksmith who crafts their legend piece by piece to the swift warrior who chooses from a curated, battle-ready arsenal.
THE CUSTOM JOURNEY:
FORGING YOUR LEGEND
This prototype is a testament to the art of customization. It showcases the intuitive and engaging process of building a one-of-a-kind gear, from selecting the base components to adding the final, personalized touches. This is also a guided process. The design highlights how users can see their gear take shape in real-time as they customize it, transforming a mundane task into an act of creation.
THE CUSTOM JOURNEY:
FORGING YOUR LEGEND
This prototype is a testament to the art of customization. It showcases the intuitive and engaging process of building a one-of-a-kind gear, from selecting the base components to adding the final, personalized touches. This is also a guided process. The design highlights how users can see their gear take shape in real-time as they customize it, transforming a mundane task into an act of creation.
THE PRE-BUILT JOURNEY:
THE STANDARD ARSENAL
This prototype demonstrates a frictionless checkout journey for heroes who choose from a curated selection of pre-built gear. The flow is optimized for speed and simplicity. It also provides informative details and reviews to help the user make a quick and easy purchase.
THE PRE-BUILT JOURNEY:
THE STANDARD ARSENAL
This prototype demonstrates a frictionless checkout journey for heroes who choose from a curated selection of pre-built gear. The flow is optimized for speed and simplicity. It also provides informative details and reviews to help the user make a quick and easy purchase.
A NEW BATTLEFIELD: THE CHALLENGE OF THE WEB
A NEW BATTLEFIELD: THE CHALLENGE OF THE WEB
The challenge was not just about building a website, it was about preserving the spirit of the app. A key challenge was how to ensure the hero’s journey was as seamless and engaging on a large monitor as it was on their mobile device. The gaming world's armories were often cluttered, difficult to navigate, and lacking the personal touch that our app had mastered. I had to solve this new, larger problem: a cumbersome web experience that was hindering our heroes' ability to equip themselves efficiently.
The goal was to create a responsive website that:
Maintained the core identity and game-like user flow of the mobile app.
Offered a streamlined and intuitive customization experience on any device.
Provided an efficient and frictionless checkout process.
Was a seamless and natural extension of the hero's journey, not a separate, confusing quest.
The challenge was not just about building a website, it was about preserving the spirit of the app. A key challenge was how to ensure the hero’s journey was as seamless and engaging on a large monitor as it was on their mobile device. The gaming world's armories were often cluttered, difficult to navigate, and lacking the personal touch that our app had mastered. I had to solve this new, larger problem: a cumbersome web experience that was hindering our heroes' ability to equip themselves efficiently.
The goal was to create a responsive website that:
Maintained the core identity and game-like user flow of the mobile app.
Offered a streamlined and intuitive customization experience on any device.
Provided an efficient and frictionless checkout process.
Was a seamless and natural extension of the hero's journey, not a separate, confusing quest.
FORGING A POWERFUL EXPERIENCE
FORGING A POWERFUL EXPERIENCE
My approach was guided by the Design Thinking Methodology, which was critical to uncovering true user needs and creating an impactful solution. It allowed me to transform abstract frustrations into a tangible, and delightful user experience.
My approach was guided by the Design Thinking Methodology, which was critical to uncovering true user needs and creating an impactful solution. It allowed me to transform abstract frustrations into a tangible, and delightful user experience.
CONSULTING THE HEROES:
The Empathize Stage
CONSULTING THE HEROES:
The Empathize Stage
The journey began by stepping into the boots of my heroes. Through user interviews and competitive analysis I listened to their tales of triumph and tribulation. I sought to understand their frustrations with existing e-commerce sites and what would make their experience truly legendary. This research was not just about gathering data; it was about empathizing with the gamers' quest for the perfect gear and their desire for a rewarding, rather than a frustrating, journey.
The journey began by stepping into the boots of my heroes. Through user interviews and competitive analysis I listened to their tales of triumph and tribulation. I sought to understand their frustrations with existing e-commerce sites and what would make their experience truly legendary. This research was not just about gathering data; it was about empathizing with the gamers' quest for the perfect gear and their desire for a rewarding, rather than a frustrating, journey.
Meet the Hero: Carter, The Aspiring Champion
Based on my research, I crafted a persona to represent our core user.
Meet the Hero: Carter, The Aspiring Champion
Based on my research, I crafted a persona to represent our core user.
Charting the Hero's Path
I created a user journey map to visualize a hero’s experience from realizing their need for new gear to using it in the field.
Charting the Hero's Path
I created a user journey map to visualize a hero’s experience from realizing their need for new gear to using it in the field.
A Hero's Motivation
I also developed a user story to capture the hero’s motivation and goal.
A Hero's Motivation
I also developed a user story to capture the hero’s motivation and goal.
USER STORY
As an aspiring champion, I want a fun and easy way to customize my gaming gear, so I can save time and get back to the game.
FORGING THE PATH:
The Define Stage
FORGING THE PATH:
The Define Stage
With a deep understanding of our heroes' needs, it was time to define the core problem and forge a clear path forward. This phase involved synthesizing research to create a definitive problem statement and a testable hypothesis.
With a deep understanding of our heroes' needs, it was time to define the core problem and forge a clear path forward. This phase involved synthesizing research to create a definitive problem statement and a testable hypothesis.
PROBLEM STATEMENT
Aspiring champions need a seamless way to customize and purchase gaming gear because current platforms are cumbersome and make the process feel like a chore.
HYPOTHESIS STATEMENT
A game-like, responsive website with intuitive customization will increase user satisfaction and reduce cart abandonment by providing a seamless purchasing experience for aspiring champions.
CRAFTING THE BLUEPRINTS
The Ideation Stage
CRAFTING THE BLUEPRINTS
The Ideation Stage
This was the phase where the magic truly began. With a clear problem and a defined path, I began crafting the blueprints for the Grand Armory. Through creative brainstorming and structured design, I established the skeletal framework that would bring the digital forge to life.
This was the phase where the magic truly began. With a clear problem and a defined path, I began crafting the blueprints for the Grand Armory. Through creative brainstorming and structured design, I established the skeletal framework that would bring the digital forge to life.
Weaving the Hero's Tapestry
The information architecture laid the foundation for the website's structure. I organized all the content in a logical, intuitive way, creating a seamless flow for users as they navigated from browsing gear to the final checkout. This ensured that every hero could find their path without getting lost in a labyrinth of menus.
Weaving the Hero's Tapestry
The information architecture laid the foundation for the website's structure. I organized all the content in a logical, intuitive way, creating a seamless flow for users as they navigated from browsing gear to the final checkout. This ensured that every hero could find their path without getting lost in a labyrinth of menus.
Drafting the Battle Plan
With the information architecture in place, I created paper wireframes. These simple sketches focused on the core functionality and user flow, allowing me to quickly test different design solutions for key user journeys like the customization process and checkout.
Drafting the Battle Plan
With the information architecture in place, I created paper wireframes. These simple sketches focused on the core functionality and user flow, allowing me to quickly test different design solutions for key user journeys like the customization process and checkout.
BRINGING THE ARMORY TO LIFE:
The Prototype Stage
BRINGING THE ARMORY TO LIFE:
The Prototype Stage
My blueprints came to life as interactive prototypes, allowing me to test different design solutions for key user flows.
My blueprints came to life as interactive prototypes, allowing me to test different design solutions for key user flows.
Drafting the Design
The low-fidelity prototypes were the first digital manifestations of the battle plan. These simple, interactive wireframes were designed to test the core functionality of the website before any visual elements were added, serving as a proving ground for the user flow and hierarchy.
Drafting the Design
The low-fidelity prototypes were the first digital manifestations of the battle plan. These simple, interactive wireframes were designed to test the core functionality of the website before any visual elements were added, serving as a proving ground for the user flow and hierarchy.
The Forger's Path:
The Custom Journey
A clear and distinct path was forged for the hero who wants to build their gear from the ground up. This intuitive, step-by-step customization flow includes a progress tracker and real-time visual feedback to make the process feel guided and effortless.
The Forger's Path: The Custom Journey
A clear and distinct path was forged for the hero who wants to build their gear from the ground up. This intuitive, step-by-step customization flow includes a progress tracker and real-time visual feedback to make the process feel guided and effortless.
The Forger's Path:
The Custom Journey
A clear and distinct path was forged for the hero who wants to build their gear from the ground up. This intuitive, step-by-step customization flow includes a progress tracker and real-time visual feedback to make the process feel guided and effortless.
The Arsenal:
The Pre-built Journey
A path was also forged for the hero who needs to get to the battlefield quickly. This journey is optimized for speed and simplicity, with a streamlined checkout process that eliminates unnecessary steps, allowing for a quick, efficient purchase.
The Arsenal: The Pre-built Journey
A path was also forged for the hero who needs to get to the battlefield quickly. This journey is optimized for speed and simplicity, with a streamlined checkout process that eliminates unnecessary steps, allowing for a quick, efficient purchase.
The Arsenal:
The Pre-built Journey
A path was also forged for the hero who needs to get to the battlefield quickly. This journey is optimized for speed and simplicity, with a streamlined checkout process that eliminates unnecessary steps, allowing for a quick, efficient purchase.
Testing the Battlefield: Responsive Design
A key part of the low-fidelity prototype phase was ensuring the website could adapt to any screen. I tested the wireframes on desktop, tablet, and mobile layouts, ensuring the information hierarchy and user flow remained intuitive regardless of device size. This early testing allowed me to identify and solve potential usability issues on smaller screens before committing to a high-fidelity design.
Testing the Battlefield: Responsive Design
A key part of the low-fidelity prototype phase was ensuring the website could adapt to any screen. I tested the wireframes on desktop, tablet, and mobile layouts, ensuring the information hierarchy and user flow remained intuitive regardless of device size. This early testing allowed me to identify and solve potential usability issues on smaller screens before committing to a high-fidelity design.
Testing the Battlefield: Responsive Design
A key part of the low-fidelity prototype phase was ensuring the website could adapt to any screen. I tested the wireframes on desktop, tablet, and mobile layouts, ensuring the information hierarchy and user flow remained intuitive regardless of device size. This early testing allowed me to identify and solve potential usability issues on smaller screens before committing to a high-fidelity design.
The Global Search
A powerful search function was a crucial addition to the arsenal. It acts as a guiding light, cutting through the clutter and leading heroes directly to the gear, materials, or information they seek without the need for extensive navigation. This feature was designed to make the hero's quest for gear as swift and effortless as possible.
The Global Search
A powerful search function was a crucial addition to the arsenal. It acts as a guiding light, cutting through the clutter and leading heroes directly to the gear, materials, or information they seek without the need for extensive navigation. This feature was designed to make the hero's quest for gear as swift and effortless as possible.
The Grand Reveal: High-Fidelity Prototypes
The high-fidelity prototypes added the visual magic, bringing the user experience to life. They were a polished representation of the final product, allowing for a final round of testing to ensure every design choice was a strong one.
The Grand Reveal: High-Fidelity Prototypes
The high-fidelity prototypes added the visual magic, bringing the user experience to life. They were a polished representation of the final product, allowing for a final round of testing to ensure every design choice was a strong one.
Adaptable Views: Screen Variations
To ensure a consistent and powerful experience, the prototypes were forged to adapt to every battlefield, from the grand desktop screen to the nimble mobile device and the balanced tablet. The design’s layout, navigation, and visual hierarchy fluidly transform to provide a seamless and intuitive quest regardless of the hero's device.
Adaptable Views: Screen Variations
To ensure a consistent and powerful experience, the prototypes were forged to adapt to every battlefield, from the grand desktop screen to the nimble mobile device and the balanced tablet. The design’s layout, navigation, and visual hierarchy fluidly transform to provide a seamless and intuitive quest regardless of the hero's device.
The Grand Entrance: The Homepage
The homepage was forged as the hero's gateway to the Grand Armory. Its design was a statement of power and purpose, featuring bold graphics and a dynamic video background to immediately immerse the hero in the game-like world. The page's strategic layout guided heroes toward featured products and showcased the community's prowess through a rotating carousel of featured gamers. This page was built not just for information but for inspiration, setting the tone for the journey ahead.
The Grand Entrance: The Homepage
The homepage was forged as the hero's gateway to the Grand Armory. Its design was a statement of power and purpose, featuring bold graphics and a dynamic video background to immediately immerse the hero in the game-like world. The page's strategic layout guided heroes toward featured products and showcased the community's prowess through a rotating carousel of featured gamers. This page was built not just for information but for inspiration, setting the tone for the journey ahead.
Night and Day:
Dark Mode Feature
A crucial addition to the final design was the dark mode feature. Recognizing that many heroes prefer a darker interface for extended gaming sessions and to reduce eye strain, a dark mode was designed as a core component of the prototypes. It not only provided a visually striking alternative but also enhanced accessibility and user comfort.
Night and Day:
Dark Mode Feature
A crucial addition to the final design was the dark mode feature. Recognizing that many heroes prefer a darker interface for extended gaming sessions and to reduce eye strain, a dark mode was designed as a core component of the prototypes. It not only provided a visually striking alternative but also enhanced accessibility and user comfort.
The Guild Wisdom: Community & Guidance
The Grand Armory is fortified with a community of heroes and expert guides. User reviews provide wisdom for future champions, while live chat offers direct guidance from a knowledgeable armorer, ensuring no hero's quest is ever in vain.
The Guild Wisdom: Community & Guidance
The Grand Armory is fortified with a community of heroes and expert guides. User reviews provide wisdom for future champions, while live chat offers direct guidance from a knowledgeable armorer, ensuring no hero's quest is ever in vain.
The Forger's Mark
To ensure every piece of the Grand Armory felt cohesive and consistent with the original app, a detailed design system was created. This system served as the master blueprint for all visual elements, ensuring a unified brand identity across all platforms.
The Forger's Mark
To ensure every piece of the Grand Armory felt cohesive and consistent with the original app, a detailed design system was created. This system served as the master blueprint for all visual elements, ensuring a unified brand identity across all platforms.
Forging the Visual Identity: The Style Guide
The style guide served as the core of the visual identity. It defined the colors and typography to ensure the website’s look and feel was consistent with the original app, providing a familiar experience for every hero.
Forging the Visual Identity: The Style Guide
The style guide served as the core of the visual identity. It defined the colors and typography to ensure the website’s look and feel was consistent with the original app, providing a familiar experience for every hero.
The Component Arsenal: Sticker Sheet
A sticker sheet served as an arsenal of reusable UI components, from buttons to cards. By using this library, the design process was streamlined, guaranteeing consistency. Every element was forged from this sheet to ensure a seamless and predictable experience.
The Component Arsenal: Sticker Sheet
A sticker sheet served as an arsenal of reusable UI components, from buttons to cards. By using this library, the design process was streamlined, guaranteeing consistency. Every element was forged from this sheet to ensure a seamless and predictable experience.
PROVING THE ARMORY'S STRENGTH:
Recurring Testing
PROVING THE ARMORY'S STRENGTH:
Recurring Testing
To ensure the Grand Armory was built for victory, I conducted recurring unmoderated usability studies with heroes from my target audience. Their feedback was my compass, guiding me to refine the pathways and fortify the experience.
To ensure the Grand Armory was built for victory, I conducted recurring unmoderated usability studies with heroes from my target audience. Their feedback was my compass, guiding me to refine the pathways and fortify the experience.
The Scribe's Recommendations: Related Products
Participants frequently engaged with the recommended products, reinforcing the value of a feature that helps heroes discover items that complete their arsenal. The ease of finding complementary gear was a key driver of engagement and a vital part of a frictionless journey.
The Scribe's Recommendations: Related Products
Participants frequently engaged with the recommended products, reinforcing the value of a feature that helps heroes discover items that complete their arsenal. The ease of finding complementary gear was a key driver of engagement and a vital part of a frictionless journey.
A Deeper Inspection: Zoomable Images
Heroes consistently sought a way to inspect the intricate details of their potential gear. The addition of high-resolution, zoomable images and multiple views on the product page directly addressed this need, empowering them to examine every angle of the gear before committing to a purchase.
A Deeper Inspection: Zoomable Images
Heroes consistently sought a way to inspect the intricate details of their potential gear. The addition of high-resolution, zoomable images and multiple views on the product page directly addressed this need, empowering them to examine every angle of the gear before committing to a purchase.
FORTIFYING THE FORTRESS FOR ALL HEROES:
Accessibility Considerations
FORTIFYING THE FORTRESS FOR ALL HEROES:
Accessibility Considerations
While forging a powerful experience was paramount, it was equally important to build a fortress that was accessible to all heroes. I conducted a thorough audit to ensure the website’s design met WCAG (Web Content Accessibility Guidelines) standards.
Screen Reader Compatibility: The content was structured with proper headings, alt text for all images, and semantic HTML tags to ensure compatibility with screen readers.
Color Contrast: All color palettes were checked to meet accessibility standards, ensuring text and interactive elements were legible for users with low vision.
Responsive Design: The layout was built to adapt flawlessly to various screen sizes and orientations, preventing the loss of information or functionality on smaller devices.
While forging a powerful experience was paramount, it was equally important to build a fortress that was accessible to all heroes. I conducted a thorough audit to ensure the website’s design met WCAG (Web Content Accessibility Guidelines) standards.
Screen Reader Compatibility: The content was structured with proper headings, alt text for all images, and semantic HTML tags to ensure compatibility with screen readers.
Color Contrast: All color palettes were checked to meet accessibility standards, ensuring text and interactive elements were legible for users with low vision.
Responsive Design: The layout was built to adapt flawlessly to various screen sizes and orientations, preventing the loss of information or functionality on smaller devices.
THE RESULT:
A Kingdom Fortified
THE RESULT:
A Kingdom Fortified
The final Herculean Forge website stands as a testament to this journey. It is a seamless extension of the app, a true Grand Armory that serves every hero, regardless of their device. The high-fidelity prototypes demonstrate a refined and visually stunning solution that not only offers robust customization and a streamlined checkout but also feels powerful, engaging, and fun. The design transforms a mundane e-commerce task into an act of creation, a step in the hero's ongoing quest.
The usability studies for the final design confirmed its success. Participants consistently praised the website's intuitive user flow and overall experience. The visual design played a significant role in making the website feel like a game rather than a task.
The final Herculean Forge website stands as a testament to this journey. It is a seamless extension of the app, a true Grand Armory that serves every hero, regardless of their device. The high-fidelity prototypes demonstrate a refined and visually stunning solution that not only offers robust customization and a streamlined checkout but also feels powerful, engaging, and fun. The design transforms a mundane e-commerce task into an act of creation, a step in the hero's ongoing quest.
The usability studies for the final design confirmed its success. Participants consistently praised the website's intuitive user flow and overall experience. The visual design played a significant role in making the website feel like a game rather than a task.
THE ENDLESS QUEST:
Lessons Learned and What's Next
THE ENDLESS QUEST:
Lessons Learned and What's Next
This project taught me that user research and usability studies are the true guiding light in any quest. They provide valuable insights that help a designer avoid biases and truly understand the needs of their users.
The hero's journey is never-ending. My quest continues with further refinement and expansion.
The next steps for the Grand Armory will involve:
Iterating on existing features based on user feedback.
Adding new pages to the website to expand the kingdom's offerings.
Conducting additional usability studies during development.
Monitoring key performance indicators to ensure the Armory continues to empower our heroes and strengthen our digital realm.
This project taught me that user research and usability studies are the true guiding light in any quest. They provide valuable insights that help a designer avoid biases and truly understand the needs of their users.
The hero's journey is never-ending. My quest continues with further refinement and expansion.
The next steps for the Grand Armory will involve:
Iterating on existing features based on user feedback.
Adding new pages to the website to expand the kingdom's offerings.
Conducting additional usability studies during development.
Monitoring key performance indicators to ensure the Armory continues to empower our heroes and strengthen our digital realm.
NOTABLE COMMENT
"Impressive work—great execution of features and user flow, with visuals and colors that really elevate the experience."
© 2025. All Rights Reserved.
All work for hire projects belong to their respective companies.
© 2025. All Rights Reserved.
All work for hire projects belong to their respective companies.
© 2025. All Rights Reserved.
All work for hire projects belong to their respective companies.