CODEMETTLE

UX/UI DESIGNER

Since May 2023, I've worked as a UX/UI Designer at CodeMettle, a software company based in Atlanta, GA. The role is composed of both User Experience Research and User Interface work.  In my time there, I've participated in the full design process- from leading initial kickoffs and facilitating user research interviews to sketching and rendering high-fidelity, interactive prototypes. CodeMettle's design team utilizes a range of UX processes, including Lean UX, Double Diamond Design Process, Francois Bouniq-Mercier's Design Process Toolkit, and many other resources published by the Neilsen Norman Group.  My time at CodeMettle has grown me as a designer due to strong leadership, a dedication to the UX process, and working with unique product audiences that require bespoke solutions to meet their needs.

ROLE HIGHLIGHTS

My role at CodeMettle included a variety of UX and UI-centered responsibilities. Some highlights of my time there include employing the full UX process from research to implementation for the creation of a new product, establishing an effective design system aligned to improve design consistency and workflow, and developing a user research repository to organize past research data and team resources, enhancing collaboration and accessibility for future projects.

In compliance with NDA and security guidelines, some information has been generalized to protect the secure nature of our product. The text and graphics below illustrate my work while protecting the confidential nature of our product and users.

ZERO TO ONE

New Product Process

In my time at CodeMettle, I had the privilege of working on the first-ever implementation of our Nexus product. The journey from a blank-canvas to a fully operational, consumer-facing product was intimidating, but allowed our team the opportunity to prioritize an effective and intuitive user experience from that start, embedding user research and data in each feature.

Discovery & Research

Nexus started by conducting kickoff meetings, stakeholder interviews, subject matter expert (SME) interviews, comparative audits, and competitive audits. The kickoff meeting sets the tone for the project, aligning expectations and fostering open communication among team members and stakeholders. Following this, stakeholder interviews gather diverse perspectives on project goals and requirements, ensuring that all voices are heard. SME interviews provide in-depth insights into specific areas, enriching our understanding of the domain. Comparative audits analyze market research to identify industry best practices and areas for improvement, while competitive audits assess the strengths and weaknesses of direct competitors. Together, these activities create a solid foundation for informed design decisions and a user-centered approach throughout the project.

Discovery for industry best practices surrounding progressive disclosure methods.

Defining Requirements

After conducting our stakeholder and SME interviews, along with comparative and competitive audits, we synthesized our research findings to define clear project requirements. To organize and visualize the data, we created an affinity map, grouping similar insights and themes together. This process helped us identify key patterns and priorities, revealing shared challenges and opportunities among different user perspectives. By clustering related information, we gained a deeper understanding of user needs and expectations, which informed our requirements definition. This collaborative approach not only clarified our focus but also ensured that our design solutions were grounded in real user insights, paving the way for a more targeted and effective design process.

Affinity Mapping feedback from stakeholder interviews.

Brainstorming & Ideation

With our defined requirements and insights from the affinity map, we moved into the brainstorming phase, where we engaged in various ideation exercises like sketching and Crazy 8s. During these sessions, team members rapidly generated and visualized ideas, allowing for a diverse range of concepts to emerge. Crazy 8s, in particular, encouraged quick thinking and iteration, pushing us to think beyond conventional solutions. This dynamic environment fostered collaboration and innovation, ensuring that our ideas were not only imaginative but also aligned with the user insights we had gathered, ultimately enriching our design direction. As sketches were solidified, they were taken to concept testing to gather insights and feedback.

Voting on sketches during team ideation session.

Modeling & User Flows

Following our ideation sessions, the next step in the process involved defining user flows and key path scenarios, translating our sketches and feedback into structured pathways that outline how users would navigate through the product. By analyzing the insights gained from our sketches, we identified critical interactions and decision points that needed to be addressed to enhance user experience. This led to the creation of low-fidelity frames, which served as visual representations of these user flows, allowing us to map out the overall journey clearly and concisely. These low-fi frames enabled us to visualize the hierarchy of information and interactions, ensuring that we maintained a user-centered focus while refining our design concepts. This step not only clarified the user experience but also set the stage for further testing and iteration in subsequent phases.

User Flows to visualize the architecture of the platform and key path scenarios.

Prototyping & Hand-off

Building on our low-fidelity frames, we progressed to developing medium and high-fidelity frames using Figma, integrating our design system components to ensure consistency and cohesiveness across the product. This stage allowed us to bring our user flows to life with more detail, including typography, colors, and interactive elements that reflect our brand identity. By leveraging the design system, we streamlined the process, enabling rapid iterations and ensuring that all components adhered to established guidelines for accessibility and usability. The high-fidelity frames served as a crucial reference for development, laying a solid foundation for the next steps in implementation and user testing.

Interactive Hi-Fi Figma file from 08/23.

User Testing & Optimized Features

After implementation, we entered the critical phase of user testing, where we gathered real-world feedback to evaluate the effectiveness of our design. This step involved observing users as they interacted with the product, allowing us to identify pain points and areas for improvement. Based on these insights, we iterated on our designs, optimizing features to address specific usability issues and enhance the overall user experience. This iterative design process ensured that we remained responsive to user needs, incorporating their feedback to refine functionality and streamline interactions. By continuously cycling through testing and optimization, we not only improved the product's usability but also built greater confidence among stakeholders in the final outcome, ensuring that the solution truly met user expectations and business goals.

Optimized Nexus files from 6/24 after testing.

FIGMA COMPONENT LIBRARY

Design System

Throughout my education, working with/establishing design systems became a priority and passion of mine. I believe design systems foster collaboration and efficiency, enabling teams to manage increased workloads while maintaining consistency across products. Utilizing Figma variables and components, implementing a strong design system at CodeMettle helped streamline workflows between designers and development, ensured a cohesive user experience, and maintained a strong brand identity across digital products.

Back TO Work