Call of Duty: MWR
🟢 2017
Overview
Role
Tools & Tech
Studio
At Raven Software, we enhanced the player experience for Call of Duty: Modern Warfare Remastered through research, art, and design. We remastered a classic, crafting new, cohesive, and engaging interfaces for a seamless and immersive player experience.
InDesign, XD, Photoshop, Illustrator, Animate, Proprietary engine and tools.
Playstation, PC, Xbox
Focus
Research, Art, Design
UI Designer
Platforms
Raven Software
Samples \ Multiplayer
Project Goals
Maintain Familiar Flow & Interaction
Ensure the updated UI retains the intuitive feel of the original game(s).
Update Visuals
Make the visuals stand out from other titles while maintaining Modern Warfare’s iconic energy.
Background
This project involved remastering a COD classic, aiming to modernize the game’s UI/UX while preserving its iconic feel. As part of the UI/UX team, I contributed to research, design, vis dev and implementation.
Create New Icons
Design new icons for all existing and new game content, including medals, rank icons, splashes, etc.
Incorporate New Features
Design and introduce intuitively simple interfaces for new features.
Develop High-End 4K Assets
Ensure all assets are created or updated to high-quality 4K standards.
Samples \ Information Architecture + Wires
Design
Contributions
Architecture & Flow:
Collaborated on mapping out information architecture, feedback, and flow for front-end and Multiplayer.
Research & Playtests:
Conducted game and competitive analysis during rapid pre-production.
Worked with the team to observe playtests and gather feedback on new features and designs.
Wireframes:
Designed high-fidelity wireframes for various screens and features, exploring new and cut features.
Implementation
Generated detailed documentation with redlining for engineers.
Worked closely with the engineering team to integrate designs into the engine.
Visual Design
Visual Development & Style Mocks:
Explored visual design options, creating style mocks and collecting references for potential directions.
Developed pixel-perfect art comps to establish the basis for the style guide.
Icons:
Designed many of the game’s icons, including gamemode, rank, prestige, medal, seasonal content, currency, and perks.
Motion:
Created animations for post-match rank-up messaging in Flash.
Collaborated with an engineer to implement animations using available tools.
Marketing:
Created marketing images for in-game announcements (MOTD), seasonal content, social media, and more.
Samples \ Wireframe + Art Comp + Final UI
Samples \ MOTD Images
Samples \ Icons
Outcome
Reflections
Takeaways
A few key insights gained while at Raven:
Team Collaboration is Crucial
The success of a project heavily relies on effective teamwork and collaboration. A cohesive team can overcome challenges and deliver outstanding results.
Strive for Excellence, Not Perfection
Perfection is unattainable and can lead to unnecessary stress and burnout. It’s more important to aim for excellence and continuous improvement.
Work Smarter, Not Harder
Early feedback is invaluable. Getting designs in front of stakeholders sooner and using tools like style tiles can expedite A/B testing and refine designs more efficiently.
The Hifi Wireframe State
Remaining in a high-fidelity wireframe state for as long as possible helps define visuals more accurately and ensures better alignment with project goals.
Future Focus
Takeaways applied moving forward:
Enhanced Stakeholder Engagement
Moving forward, I focused on crafting comprehensive survey artifacts to better capture stakeholders' vision. This helped with actionable feedback and maintaining alignment with their overall goals.
Importance of Team Composition
The UI/UX team at Raven was the largest I had joined in my career up to that point. This experience highlighted the importance of team composition and role strategy, areas I became particularly interested in. A well-balanced and strategically organized team can significantly enhance a product's quality and success.
Value of Motion Mocks
One key takeaway was the underutilization of motion mocks, rip-o-matics (concept sizzle reels), and interactive user stories. These tools can significantly aid in visualizing the final product, helping the team and stakeholders better understand the intended user experience and design direction.
Thanks for viewing my work!
More samples available upon request.