When we, the design managers at Wrike, decided to update the skills matrix for our team and I started to research examples, including right here on Medium, I was surprised: There’s an abundance of examples for product designers and graphic designers but almost none for web design teams.

As a result, I created a hard skills matrix for our team almost from scratch, assembling pieces from my own experiences and numerous other sources. I’m not holding back on sharing this. And, in a separate piece, I will share another part — the soft skills matrix.

To approach this article from a user’s perspective, I’ll show you the matrix straight away and, only after that, I’ll explain why our team needs it and how we work with it.

Try Wrike for free

Hard skills matrix for web designers

Our skill matrix spans five different levels of competencies:

  1. Learns
  2. Knows
  3. Does
  4. Helps
  5. Teaches

It brings together skills from four areas:

  1. Visual design and versatility
  2. Web design and usability
  3. Tools
  4. Digital marketing

You can either view the matrix in the following spreadsheet or read about it in the description below.

Visual design and versatility / Conceptual skills

  • Learns: Understands the fundamentals of conceptual skills and creates web or digital assets aligned with provided concepts and guidelines, with supervision.
  • Knows: Possesses a robust understanding of conceptual skills and independently creates web or digital assets that align with provided concepts and guidelines, requiring at most two rounds of revisions.
  • Does: Independently creates web or digital assets that align with provided concepts and guidelines and confidently offers improvements.
  • Helps: Demonstrates advanced expertise in conceptual skills. Independently designs and elevates web or digital concepts at a brand-wide level and is capable of leading such projects and supervising the project team.
  • Teaches: Possesses expert-level knowledge in conceptual skills. Independently develops, leads, and presents premium concepts for global campaigns at a departmental level. Capable of crafting guidelines and tutorials for stakeholders and peers and mentoring others on best practices in conceptual skills.

Visual design and versatility / Copywriting and storytelling

  • Learns: Implements pre-existing copy and follows the proposed story flow in projects. Regularly expands knowledge of UX writing and marketing copy principles.
  • Knows: Differentiates between marketing copy and UX writing. Identifies potential areas for copy improvement. Uses visual elements to establish a compelling narrative.
  • Does: Participates in discussions and brainstorm sessions with content teams to propose ideas to enhance copy, messaging, and storytelling in projects. Makes suggestions to content teams to ensure web and digital copy adheres to UX writing and storytelling best practices.
  • Helps: Collaborates with content teams to deliver optimal solutions for web and digital customer experience, utilizing both visuals and copy.
  • Teaches: Possesses deep knowledge of UX writing, storytelling, and digital/web messaging. Works with content teams, proposing innovative ways to connect with the audience. Acts as a mentor for junior colleagues.

Visual design and versatility / Visual design

  • Learns: Designs layouts based on templates with guidance, adhering to manuals. Utilizes and modifies existing illustration, icon, and image libraries. Creates basic compositions using grids and references. Applies predefined typography styles and uses knowledge of color theory for cohesive designs.
  • Knows: Independently designs layouts and creates custom images using illustration, icon, and image libraries. Crafts static and dynamic compositions with pre-built elements. Offers new typographic solutions under supervision. Uses color theory knowledge to create cohesive designs that guide attention, evoke emotions, and establish moods, while ensuring legibility across devices.
  • Does: Designs visually appealing, cohesive web and digital projects, promoting brand consistency. Handles composition at any level and creates custom assets. Suggests improvements to typography systems and libraries. Develops new web color schemes upon request and contributes to brand consistency and guidelines evolution.
  • Helps: Uses experience and research to construct complex solutions for new assets and designs with new layouts and grids. Enhances web color schemes and palettes within the web design system. Proposes enhancements to evolve image asset libraries. Educates and facilitates reviews for others.
  • Teaches: Continuously elevates web assets and layouts by creating and updating core styles and guidelines. Plans, scales, and enhances templates independently. Manages and enhances libraries with a strategic mindset towards visual design. Masters color and typography, constantly improving them within the web design system.

Web design and usability / Web page layout and creation

  • Learns: Continuously expands their understanding of web design principles by observing best practices and examples. Utilizes components from libraries and master layouts to support senior team members in creating visually appealing web page blocks.
  • Knows: Routinely applies best web practices to work, designing web page layouts with strong visual hierarchy under senior team members’ guidance.
  • Does: Applies knowledge of best practices to propose new, innovative solutions for web design. Has a solid understanding of creating user-friendly interactions, like efficient web forms and intuitive navigation systems.
  • Helps: Creates innovative web designs aligned with business goals. Oversees junior designers, ensuring they apply the best solutions. Capable of providing design solutions that can be shared as best practice examples externally.
  • Teaches: Regularly mentors and enhances the company’s web projects by leading and sharing experience and knowledge. Actively shares expertise with other departmental teams, aligning on business goals. Acts as an experienced mentor for junior designers.

Web design and usability / Prototyping and wireframing

  • Learns: Possesses a basic understanding of web page structure and creates prototypes under senior team members’ guidance and supervision.
  • Knows: Utilizes knowledge to create web page structures, prototypes, and wireframes for standalone projects under senior team members’ guidance.
  • Does: Independently creates website prototypes and supports senior designers in creating high-level web projects.
  • Helps: Confidently creates structures, prototypes, and wireframes for web projects of any level. Supports and guides prototyping for junior designers.
  • Teaches: Contributes to the continuous improvement of major web projects by exploring, using, and proposing best practices for web page structures.

Web design and usability / Web animation

  • Learns: Learns the basics of web animation, including types and their effects on user experience.
  • Knows: Has a basic understanding of web animation principles. Can suggest interface animation ideas to improve user experience and website conversions.
  • Does: Initiates the creation of web animation. Supports development and provides briefs for motion designers if needed.
  • Helps: Can independently create web animations using various tools. Proficient in using web formats for animation and supports their implementation within web projects.
  • Teaches: Possesses a strong understanding of web animation. Can mentor junior colleagues and supports the improvement of the website experience by providing trending and high-performing animation solutions.

Web design and usability / Grid systems and responsive design

  • Learns: Has a basic understanding of layout differences for various devices and resolutions. Learns to create web project breakpoints under senior guidance using existing layouts.
  • Knows: Possesses a robust understanding of various breakpoints and flexible grid systems. Confidently creates responsive designs by implementing breakpoints to support senior designers’ projects.
  • Does: Confidently designs web projects to be visually and functionally consistent across a wide range of devices within the web system.
  • Helps: Designs or enhances grid systems for web projects using their current knowledge of best practices. Works on any breakpoint as part of the entire web system to create a consistent experience. Develops core responsive grids and systems.
  • Teaches: Continuously enhances the consistent experiences of major projects across various devices and resolutions. Initiates and supports the evolution of core responsive grids and systems. Mentors and trains junior designers in responsive design best practices, providing guidance to improve their skills.

Web design and usability / Service design

  • Learns: Understands the fundamentals of service design. Learns the company’s web design system (WDS) by using existing components in daily tasks. Continuously explores the WDS to deepen their understanding.
  • Knows: Assists in improving the WDS under supervision from senior team members, following requests.
  • Does: Independently creates new components with the team’s input and reviews. Continually improves and updates the WDS to boost web production efficiency.
  • Helps: Demonstrates confidence in creating and enhancing the WDS. Regularly supports the development of major components.
  • Teaches: Continuously contributes to the evolution of the WDS, collaborating with other teams to expand and enhance it at a company-wide level. Acts as a mentor, sharing best practices and knowledge with team members.

Web design and usability / Usability principles

  • Learns: Has a basic understanding of usability principles, user flow, and web patterns. Consistently learns about accessibility guidelines and incorporates them into their work.
  • Knows: Has a robust understanding of common web patterns and incorporates them into designs to enhance user experience.
  • Does: Designs with accessibility in mind, optimizing user experience under guidance or supervision.
  • Helps: Has a deep understanding of usability principles and web patterns. Uses this knowledge to consistently enhance the user experience of major web projects. Stays up to date with accessibility guidelines and ensures projects conform to best practices.
  • Teaches: Innovates and resolves complex UI/UX issues. Serves as a mentor, sharing best practices and personal experience. Is a subject matter expert in usability principles and user flow.

Web design and usability / Research and analytics

  • Learns: Collects data and information for tasks using existing resources, and independently learns about user research methods.
  • Knows: Conducts visual research for their own projects and contributes to research for department-wide projects. Familiar with user testing and research methods, and assists senior designers in conducting these tests. Participates in research as a notetaker.
  • Does: Independently conducts visual and technology research for specific projects and areas, and applies findings to their work. Conducts usability testing as an interviewer, and analyzes and interprets user research data to enhance website experience.
  • Helps: Conducts competitive, industry, and trend research to enhance visual design decisions. Organizes and shares research findings. Conducts user interviews and creates personas. Supports in creating customer journey maps.
  • Teaches: Initiates improvements in research flows and tactics to deliver optimal results and meet business goals. Mentors and trains others on user research best practices. Creates and maintains customer journey maps to meet company needs.

Tools / Figma

  • Learns: Familiarizes themself with basic Figma tools to create simple wireframes and mockups. Uses layout grids and guides to position and align design elements. Uses existing libraries and assets.
  • Knows: Designs complex wireframes and mockups. Comfortable with advanced layout/design tools, like components and instances, design styles and libraries, and design constraints. Can create and share interactive prototypes. Is proficient in using Figma.
  • Does: Is expertly proficient with Figma’s design features. Creates highly polished designs. Automates workflows by creating and enhancing auto-layouts, components, and libraries.
  • Helps: Understands Figma’s capabilities thoroughly. Regularly provides improvement ideas and evaluates systems and libraries. Teaches others how to use and enhance components by consistently improving their knowledge and staying updated with new Figma features and best practices.
  • Teaches: Teaches and mentors others on effective Figma use. Automates workflows by creating personal plugins and scripts. Enhances libraries and components, and shares best practices with the team.

Tools / Adobe Photoshop

  • Learns: Has a basic understanding of Adobe Photoshop and uses it for simple tasks, such as resizing, retouching, and background removal.
  • Knows: Has a good foundational knowledge of the main Photoshop tools. Is able to work with provided Photoshop designs and make adjustments.
  • Does: Has a comprehensive understanding of the program and uses it to create high-fidelity raster graphic assets and imagery.
  • Helps: Has a deep understanding of Photoshop, using advanced techniques and features to create complex compositions and graphic assets. Is confident in creating their own unique designs.
  • Teaches: Has expert-level knowledge of Photoshop, as demonstrated by Adobe certification. Demonstrates in-depth knowledge of the program’s specifics and is capable of troubleshooting any issue.

Tools / Adobe Illustrator

  • Learns: Has a basic understanding of Adobe Illustrator functionality and can make slight adjustments to existing designs.
  • Knows: Has a good understanding of the main functions and tools. Can create custom layouts and graphics using a mix of existing assets and their own designs.
  • Does: Has a solid understanding of the tool and can develop new design solutions for their projects.
  • Helps: Experiments with new and existing tools to create unique designs. Is skilled in using advanced features and techniques to create complex compositions and graphics.
  • Teaches: Has expert-level knowledge of Illustrator, as demonstrated by Adobe certification. Brings innovations and improvements to team processes by finding and showing the tool’s advantages and educating the team.

Digital marketing / SEO tactics

  • Learns: Learns basic SEO principles and how to optimize websites for search engines and user discoverability.
  • Knows: Applies basic SEO principles to improve website performance and visibility.
  • Does: Understands how search engines operate and uses this knowledge to provide better SEO performance solutions.
  • Helps: Identifies potential SEO problems and regularly suggests optimization solutions.
  • Teaches: Possesses a deep understanding of SEO principles. Collaborates with SEO teams to consistently review and improve the website for an SEO-friendly user experience. Mentors the team by sharing knowledge.

Digital marketing / Website metrics

  • Learns: Understands the basics of website metrics, including various types and how they’re used to measure website performance.
  • Knows: Possesses basic knowledge of website metrics, analyzes data, draws conclusions, and identifies areas for improvement.
  • Does: Collaborates with analytics teams to understand and analyze website data. Identifies bottlenecks and proposes solutions.
  • Helps: Independently requests and analyzes analytical data to validate design solutions and optimize website performance for SEO and PPC campaigns. Ensures availability of sufficient data to validate hypotheses and make informed decisions in projects.
  • Teaches: Possesses a thorough understanding of website metrics. Consistently works on metric improvement by analyzing analytics data. Uses expertise to mentor and guide others in data analysis and optimization. Regularly shares knowledge and experience to enhance website performance.

Digital marketing / Digital campaigns

  • Learns: Learns digital marketing terminology, specifics, and principles. Creates assets to assist senior team members in creating campaign pages and generic banners using existing libraries and builders.
  • Knows: Assists senior team members in crafting digital campaigns. Uses best practices to make visually appealing landing pages and custom banners using existing libraries and builders.
  • Does: Has a strong understanding of digital marketing tactics and channels. Optimizes campaigns based on analytics data. Collaborates with digital teams to deliver better solutions in campaign production. Confidently creates any level of banners, and improves libraries and builders.
  • Helps: Uses best digital marketing practices and proposes solutions for different digital marketing channels. Collaborates with digital team leads to continuously review and improve campaigns. Improves banner libraries and builders, and leads effective digital campaign production.
  • Teaches: Consistently improves metrics with a deep understanding of channels and best market practices. Constantly provides solution improvements for major campaigns, and initiates and supports production process improvements. Acts as a mentor for junior designers, sharing expertise.
Try Wrike for free

Why does our web team need a skills matrix?

The skills matrix is essential for web designers to see their actual position on the career ladder and understand what needs to be improved to level up.

Moreover, as a design manager, the skills matrix helps me craft an overall skill map of the team and spot which skills are insufficiently covered and unlevelled. This matrix serves as a primary tool for the team’s skills review and helps us inhabit a unified conceptual realm.

How we work with the skills matrix

Our web design team operates with the matrix based on three main principles:

  1. Firstly, openness. The matrix is available to the entire team at any time. Any designer can independently assess which skills need to be worked on. The manager typically reviews the skills matrix during regular team reviews. This helps in conducting a timely checkup, tracking the development dynamics. Of course, any designer can request a checkup out of turn to get a fresh evaluation.
  2. Secondly, objectivity. The designer and manager begin by independently assessing skills and then calibrating them during a meeting. The goal of calibration is to understand each other better and get as close to a joint assessment as possible. If that doesn’t work, we either leave an average evaluation or ask for an anonymous assessment of individual skills by other colleagues. More opinions add up to objectivity.
  3. Thirdly, flexibility. The skills matrix is as much a live process as everything else in our team. As with any other issue, I value the team’s opinion. Any web designer can suggest changes at any time. After a discussion with the whole team, other design team managers, and, of course, the design director, I make the necessary tweaks.

As you can guess, at Wrike, we assess not only hard skills but also soft skills. Since there are many of them and we developed them as a whole team of design managers, I’ll dedicate a separate piece to them.

Please tell me about your experiences working with a skills matrix. I’m curious to learn how you assess designers’ skills. Don’t hesitate to share your opinions and advice!