Introduction
As the Product Design Manager at Helpful, a startup that experienced significant personnel growth since the initial launch of Switchful.com from 3 to 25 employees in a year, I took on the responsibility of creating design artifacts for each project. These artifacts were crucial in maintaining alignment, preventing siloed systems, and providing transparency to key stakeholders. This case study highlights the importance of design artifacts and the process I implemented to ensure project success.
The need for artifacts
Design artifacts served multiple purposes within our organization. Firstly, they acted as historical references, documenting decisions made during the design process. This historical record allowed for better continuity and informed decision-making in future projects. Additionally, these artifacts promoted transparency, enabling stakeholders to understand the reasoning behind design choices and ensuring alignment across teams.
The artifact documentation
To establish a standardized documentation process, I created a comprehensive document outlining the various artifacts required for different types of projects. Here is a breakdown of the key artifacts and their purpose:
Discovery & Research: This initial phase involved competitive audits, mood boards, and relevant data and best practices documentation. This stage was intentionally left open-ended to accommodate different creative processes and uncover the best possible outcomes.
Breadboarding: Borrowing from Electrical Engineering, breadboarding refers to creating prototypes focused on circuitry and wiring without considering industrial design or polish. This step allowed for experimentation and exploration of concepts without getting caught up in details. (Shapeup)
Fat Marker Sketches: Fat marker sketching was a prototyping technique emphasizing high-level design exploration without excessive detail. Using intentionally thick markers, these sketches outlined the basic structure of a design, leaving room for the build team's imagination during implementation. (Shapeup)
Lo-fi Wireframes: This artifact, whether digital or analog, represented low-fidelity wireframes that captured the skeletal framework of a design. It served as a blueprint for the subsequent stages of the design process.
Hi-fi Design: High-fidelity design involves creating polished visual representations of the product, incorporating brand elements, typography, and UI components. These designs aimed to convey the final look and feel of the product.
Prototype Creation: Prototypes brought the designs to life, allowing for interactive exploration and user testing. Depending on the project's scope, prototypes were developed to showcase the functionality and gather valuable feedback.
Usability Testing: Usability testing plays a critical role in evaluating the effectiveness and user experience of the designs. The type of testing varied based on the project's needs and involved real users interacting with the prototypes.
Final Design: The final design artifact encompassed the refined and validated design solution, ready for implementation. It incorporated feedback from usability testing, ensuring an optimal user experience.
Applying the artifact documentation
Throughout my tenure as a Product Design Manager, I used this artifact documentation framework to guide the design process for various types of projects. Here is how the documentation was applied to each project category.
New Tool: A new tool addresses the specific needs of users, eliminates guesswork, and provides valuable decision-making support. This allows organizations to significantly enhance their user experience and create a competitive advantage in their respective industries.
Discovery & Research
Fat Marker Sketches and/or Breadboarding
Lo-fi Wireframe (if applicable)
Hi-fi Design
Prototype Creation
Usability Testing
Final Design
New Small Component: Examples of small components include buttons, form fields, checkboxes, radio buttons, tooltips, etc. These components are crucial in enhancing usability, interactivity, and overall user engagement. In atomic design, these are similar to atoms.
Discovery & Research
Hi-fi Design
Usability Testing
Final Design
New Medium Component:
A medium component is a larger, more complex element within a user interface that combines the functionality and visual elements of 2-3 smaller components. It serves as a building block for creating more advanced and interactive user experiences. In atomic design, these are similar to molecules.
Discovery & Research
Lo-fi Wireframe (if applicable)
Hi-fi Design
Prototype Creation (if applicable)
Usability Testing
Final Design
New Large Component: A large component is a substantial and intricate element within a user interface that combines multiple medium and/or small components to create a complex and comprehensive functionality such as a table. In atomic design, these are similar to organisms.
Discovery & Research
Fat Marker Sketches and/or Breadboarding
Lo-fi Wireframe
Hi-fi Design
Prototype Creation (if applicable)
Usability Testing
Final Design
New Page Type: A new page type encompasses a combination of large, medium, and small components, along with additional written content, to create a single, distinct page within a website or application. Examples of new page types include landing pages, home pages, product pages, or any other unique page layout.
Discovery & Research
Fat Marker Sketches and/or Breadboarding (can replace lo-fi wireframe in certain cases)
Hi-fi Design
Usability Testing
Final Design
New Experience: An experience is a comprehensive culmination of multiple page types, encompassing a cohesive and interconnected set of interactions and content. Unlike a single page type, an experience involves more deliverables and includes a broader user journey within a more extensive user experience.
Discovery & Research
Fat Marker Sketches and/or Breadboarding
Lo-fi Wireframe (if applicable)
Hi-fi Design
Prototype Creation
Usability Testing
Final Design
Component Update:
Discovery & Research
Hi-fi Design
Prototype Creation
Usability Testing
Final Design
Tool Update:
Discovery & Research
Fat Marker Sketches and/or Breadboarding
Lo-fi Wireframe (if applicable)
Hi-fi Design
Prototype Creation
Usability Testing
Final Design
Experience Update:
Discovery & Research
Fat Marker Sketches and/or Breadboarding
Lo-fi Wireframe (if applicable)
Hi-fi Design
Prototype Creation
Usability Testing
Final Design
Impact and Conclusion
Implementing design artifacts had a profound impact on our project outcomes. It facilitated effective communication, ensured transparency, and empowered cross-functional teams to make informed decisions. The documentation served as a historical reference, enabling us to learn from past experiences and continually improve our design processes.
In conclusion, creating and utilizing design artifacts proved instrumental in achieving successful project outcomes at Helpful. By implementing a standardized documentation process, we fostered a culture of collaboration, efficiency, and transparency. These artifacts not only facilitated effective project management but also contributed to the growth of our organization.