As an IT support officer, I can put myself in the perspective of a user and identify friction points, but this document had no visuals, no simplified explanations, just walls of backend jargon: service mesh, container orchestration, async queues, REST APIs… you name it.

I realized quickly: if someone like me struggles to understand this, so will PMs, frontend devs, new hires, and even other IT staff.

Here’s a practical guide for creating system architecture documentation that anyone on your team can read and use:

• Step 1: Show the System from Different Angles

• Step 2: Make Diagrams the Star

• Step 3: Translate Tech Into User-Relevant Outcomes

• Step 4: Make Communication Clear

• Step 5: Keep it Simple and Consistent

• System Architecture Documentation Tools for Teams

• Conclusion

Step 1: Show the System from Different Angles

A good architecture doc isn’t just a list of tech terms. Think about who is reading it:

A. Conceptual View (PM/UX/business folks)

• What the system does for the user.

• Example: “User Authentication System,” “Checkout Service”

• Focus on user value and business goals.

B. Component View (frontend developers/IT staff)

• How the parts interact.

• Example: “Web App calls API Gateway → Microservice → Database”

• Focus on data flow and system boundaries.

C. Operational View (backend/DevOps)

• Where the system runs and how.

• Example: servers, databases, cloud setup, scaling.

• Focus on infrastructure and deployment.

This way, everyone can find what’s relevant to their role without getting lost in technical weeds.

Step 2: Make Diagrams the Star

Words alone don’t cut it. Diagrams help people visualize the system, especially if they’re not experts.

Types of Diagrams to Include

• System Context Diagram: Shows the system and its external dependencies. UX/PM/IT staff can see how it touches users and other systems.

• Container Diagram: Shows main boundaries like “Web App,” “Auth API,” “Database.” Frontend and backend teams benefit.

• UML/Component Diagram: Shows internal structure or interactions. Mostly backend focus, but helps everyone understand flow.

Tip: Even a simple flowchart drawn in PowerPoint, Figma, or by hand is better than none. Clarity matters more than perfection.

Diagrams help:

• UX sees user impact.

• Frontend knows which services to hook up.

• Backend sees infrastructure and interactions.

• Everyone shares the same mental picture.

Example 1: System Context Diagram

This diagram illustrates who uses the system (a person on the web) and which external services it depends on, like Stripe for payments and SendGrid for emails. It doesn't show the internal workings of the system, just what it connects to.

Example 2: Container Diagram

This diagram illustrates the main components of the system: the Web App, which is the user interface; the Auth API, responsible for handling login and security; and the User Database, where user profiles are stored. The arrows indicate how these components interact with each other.

Practical Tip: Tools to Create Clear Architecture Docs.

Step 3: Translate Tech Into User-Relevant Outcomes

System architecture goes beyond databases and queues, focusing on making the product fast, reliable, and secure for users. Link technical requirements to outcomes everyone can understand:

Even a person with basic UX awareness can see why tech decisions matter.

Step 4: Make Communication Clear

One major source of confusion is how different parts of the system talk to each other. Spell it out:

a) Frontend ↔ Backend: Clearly explain how your frontend connects to the backend.

Example: “The website sends login requests to the Auth API.”

b) Backend ↔ Backend: Explain whether services communicate with each other instantly (synchronous) or through background tasks like message queues (asynchronous). This helps the team understand why some actions feel instant to users, while others take time.

Even non-backend readers can follow the flow and understand how it impacts the product.

Step 5: Keep it Simple and Consistent

• Use headings, bullet points, and a table of contents. Don’t write a novel.

• Keep names consistent: “User Service” in diagrams should match text labels.

• Explain the “why” behind major decisions:

“We chose a NoSQL DB for User Profiles because it requires fast read/write for non-relational data.”

Consistency and simplicity make the doc useful to everyone, not just backend experts.

System Architecture Documentation Tools for Teams

Great architecture documentation lives where your team already works and uses tools that are easy to update, share, and understand. Below are the common types of tools teams use, grouped by purpose.

Documentation Platforms (Where You Write the Full Doc)

You can use these tools to combine text, diagrams, and structure a document.

Google Docs
Simple, familiar, and collaborative. Supports real-time comments, edit history, and easy sharing. Perfect if your team already uses Gmail or Drive. Just paste diagrams as images.

Confluence
Common in larger companies. Integrates with Jira, supports page templates, and lets you embed diagrams. Good for structured knowledge bases.

Notion
Flexible workspace for small teams. Mix docs, tasks, and diagrams in one place. Great if your team uses Notion for other work.

GitHub/GitLab Wikis (with Markdown)
Ideal for engineering-heavy teams. Docs live next to your code, and you can include diagrams using simple code (like Mermaid). Changes are tracked like code.

Start with Google Docs if you’re unsure. A living doc people actually read is better than a “perfect” one no one opens.

Diagramming Tools (Where You Create Visuals)

These help you draw the architecture diagrams you’ll add to your documentation platform.

Draw.io
Free, browser-based, and drag-and-drop simple. No sign-up needed. Exports clean PNG/SVG files you can paste into Docs or Confluence. Great for C4-style diagrams (System Context, Container, and so on).

Figma
If your team already uses Figma for design, you can create architecture diagrams using basic shapes and arrows. Real-time commenting makes feedback easy. Just export as PNG for Docs.

Mermaid (Diagrams as Code)
Write simple text like User --> Web App, and it becomes a diagram. Works in GitHub, GitLab, and tools like Obsidian. Use the Mermaid Live Editor to design, then download and paste into Google Docs.

A Key Insight from Practicing Architects.

Avoid tools that only produce static images (like PowerPoint, Canva, or basic whiteboards) for anything beyond quick sketches. If the same service appears in three diagrams and you rename it, you’ll have to update all three manually, leading to outdated and inconsistent docs.

How They Work Together

1. Write your doc in Google Docs (or your team’s existing platform).

2. Create diagrams in Draw.io or Figma (or try Mermaid if you’re curious).

3. Paste the diagram into your doc, add alt text, and explain what it shows in plain language.

This combo gives you accessibility, collaboration, and maintainability without overwhelming you or your team.

Conclusion

You don’t need to be a senior engineer to write great architecture docs. You just need clarity, empathy, and the willingness to explain “why.”

Then I came across the term Creative Technologist and realized, "Oh, so that's what I've been doing."
Even though my tech career path isn't totally defined yet (the tech world is constantly evolving), I've discovered a niche where my skills naturally fit together: merging code, culture, and creativity.

That is what being a creative technologist entails. If you've ever wondered if you could combine technical talents with creativity, this article will explain what the role is, what skills are required, and why it's becoming more important than ever.

Table of Contents

• What Does a Creative Technologist Do?

• Key Skills Every Creative Technologist Needs (with Examples)

• How Is This Different From UX?

• Why Creative Technologists Matter More Than Ever

• Conclusion

What Does a Creative Technologist Do?

A creative technologist is someone who combines technical knowledge with creative intuition to turn ideas into usable digital experiences. Think of a creative technologist as a bridge builder, someone who links storytelling, design, and technology to enable innovation.

Some people jokingly label them "jacks of all trades." In actuality, they are more like translators, ensuring that creativity and code communicate well.

Key Skills Every Creative Technologist Needs (with Examples)

Unlike traditional roles, a creative technologist’s skill set is hybrid and exploratory. Here are some of the most important skills, with examples from my own journey:

Technical Know-How

A creative technologist must have enough technical knowledge to work across multiple mediums. This is not about knowing every programming language, but about being able to choose the best tool for the job. It's the toolset that enables experimenting.

• Web development (HTML, CSS, JavaScript, or frameworks like React and Django)

• Mobile app development (Flutter, React Native, or Swift/Kotlin basics)

• Design and prototyping tools (Figma, Canva, or Adobe Suite)

• Low-code/no-code platforms (WordPress, Wix, Webflow, or Bubble)

Example:** In my own projects, I’ve switched between Python/Django for custom builds and WordPress/Wix for quick websites. Having that range of technical fluency means I can adapt to different project needs without being stuck in one medium.

Creative Prototyping

This is the process of immediately turning ideas into real experiments, rather than waiting for a finished product. It's less about the tool and more about the mindset: hacking, sketching, and testing to discover what's feasible.

Example:** For my undergraduate project, I built a prototype African literature e-book reader using Python and Django. It wasn’t just code, it was an experiment in accessibility and cultural preservation.

Cultural and Contextual Thinking

Identifying points of intersection between technology and culture, as well as asking how products serve human needs beyond functionality.

Example: On my Substack blogs (The Pop Radar and Story & Scene), I wrote about how pop culture sparks tech innovations, like Jennifer Lopez’s dress influencing the creation of Google Images.

Translating Between Worlds

Acting as a bridge between highly technical teams (developers) and highly creative teams (designers, writers, marketers).

Example: I worked with startups where I turned business ideas into creative assets, like building branded websites with Wix and WordPress, while also shaping their visual storytelling through graphics and video.

Storytelling and Experimentation with Technology

Creative technologists use tools, from design and video to AI, AR, and Web3, to communicate ideas in fresh ways and to explore how new technologies can expand the creative process.

Example: I’ve collaborated with AI tools like ChatGPT and DALL·E in content production. I used them for research, brainstorming ideas, and shaping the plot for a social media brand identity ad. I’ve also created humorous explainers on Web3 that broke down intimidating tech concepts using cultural analogies. In both cases, technology became a way to experiment, simplify, and tell better stories.

If you’re wondering how to start building these skills, you don’t need a formal education. Many creative technologists begin by experimenting on their own, taking online courses, prototyping small projects, writing about culture and tech, or contributing to open-source work. What matters most is curiosity and a willingness to explore where creativity and technology overlap.

How Is This Different From UX?

It’s a fair question because creative technologists and UX designers often work side by side. But the focus is slightly different:

• UX/UI designers are concerned about usability and aesthetics. Their main job is to ensure that a product is user-friendly, accessible, and visually appealing. They conduct user research, generate wireframes, design interfaces, and test how real users interact with a product.

• Creative technologists sit at the intersection of creativity and technology. Instead of simply improving an app's flow, they tackle bigger questions: What could this product be? How does it connect with culture? What new technology or mediums could make this experience more interesting?

  They experiment, prototype, and occasionally even code to make ideas a reality.

Think of it this way:

• A UX designer might redesign a fintech app to make it easier to use.

• A creative technologist might question why everything in the Nigerian tech ecosystem is fintech, then prototype an app that connects new homeowners with nearby handymen, plumbers, electricians, and other essential services.

By paying attention to cultural and everyday needs, creative technologists can spark innovation in areas that are often overlooked. While UX is a defined role with clear processes, creative technologist is an umbrella role that blends design, code, experimentation, and cultural insight.

Why Creative Technologists Matter More Than Ever

So why is this hybrid role even necessary? The tech world is rapidly evolving. With AI automating many repetitive coding and design activities, the future belongs to those who can bridge the gap across disciplines.

To put it simply, a creative technologist is someone who can translate abstract creative thoughts into practical products, understands the culture in which technology exists, and can construct or prototype when necessary. In a world where roles are increasingly multidisciplinary, this blend of skills isn’t optional, it’s essential. Designers may concentrate on interfaces, developers on backend logic, and writers on narrative. However, the creative technologist sits at the intersection, ensuring that all of these pieces come together to build something innovative and human-centered.

Because the role is fluid, there isn’t a standard “creative technologist salary.” Pay varies depending on the core job, such as design, development, or innovation strategy. Someone in an agency, for example, may be paid like a UX designer, whereas in a huge tech business, they may be compensated more like a product developer or innovation lead.

Conclusion

“Creative technologist” isn’t a rigid job title. It’s an umbrella term for anyone combining creativity and technology in meaningful ways. Whether through coding, design, research, or storytelling, the value lies in bridging gaps, asking new questions, and building solutions that resonate with people.