One of the most influential life lessons that I follow every day is about planning—which teaches us that if you fail to plan, then you are planning to fail. You may wonder if planning really is that important. Uh, yes—yes, it is.
As part of a digital agency, planning is one of the core phases of every project we engage with. The ability for us to strategize as a team really feels like a game of chess. Every piece has a purpose, and if you plan well in advance, you just might make it out alive.
When it came to planning, communicating, and documenting data architecture, I noticed that our organization had some inefficiencies— repeated issues that chewed up both time and money. This past year, I sought out to design and develop a tool that would build in efficiency into our process—and look good while doing it too.
Digital strategy has always been about connecting people to information through well-informed navigation.
For most projects we’ve engaged with, there had been some level of documentation around research and data architecture. Who is this product for? What information are they seeking? How will they get to this information? Digital strategy boils down into a few primary areas.
3 Primary Areas of Digital Strategy
1. People
Until the robot apocalypse occurs (it’s only a matter of time), the products we design and develop are to be consumed and engaged by people. Whether we put together assumptions on personas or we conduct user research and interview actual people, it’s important that we document the characteristics of these people to help us understand them better. The better we understand, the more accurate our recommendations become. Empathy is a powerful emotion that we can use to connect with people.
2. Information
Information can come in many forms, such as products or services. They can also tell stories and evoke emotions. We use content strategy methodologies to define and organize content that audiences seek. More specifically, content models help document information with a brand and define the relationship between them. These relationships help shape data types, taxonomies, and templates.
3. Navigation
The bridge that connects people to the information they desire is through well-informed navigation. Even the most desired information becomes useless if people cannot ultimately find it. We frame our content and navigation around sitemaps. Sitemaps help us show connections between our content, giving us a bird’s eye view of the product. Keeping our content well-organized allows us to provide better design solutions.
Identifying Documentation Pain Points
After countless hours of reviewing documentation across various projects, I was able to audit how we were documenting and setting ourselves up for digital success. Spoiler alert—it wasn’t pretty.
Each project was almost entirely different in their approach to documentation, yet they all shared similar problems, like:
- Too many documents
- Too many file formats
- Too many locations
- Inconsistent branding
- Proprietary software or hardware
Needless to say, our documentation was fragmented and ineffective.
Challenges With Visual Sitemaps
One document that we typically produce in projects is called a visual sitemap. These are graphical representations of a website or applications content, and the connections made between them. What makes them unique is how we apply illustrations that best represent the kind of information each page may have. Visual sitemaps can give us a glimpse into user journeys, template architecture, and so much more. Often times, we print these sitemaps on a wide-format printer, which gives us a tangible poster for the team to review collectively.
As you can imagine, large-scale sites or apps can make for some impressively large visual sitemaps. When producing these sitemaps projects can end up wasting lots of paper and ink – especially when you account for multiple revisions.
Challenges With Standard Tools
Using Google Drive as our repository for documentation was ineffective due to cultural diversity in technology and inadequate governance policies. For example, documents were being created in various applications based on personal preferences, projects were not being shared properly to team members, and nothing appeared to be brand-compliant. Drive was supposed to be the answer for us, but wasn’t measuring up to our standards.
We also tried making visual sitemaps in Omnigraffle. Personally, I love Omnigraffle for making diagrams. However, if the designers weren’t available to make edits, the rest of our team could not help; Omnigraffle requires both macOS and a paid license.
To make matters worse, additional methods for documentation got out of hand. Some details were posted as activity notes in our project management platform (which almost always gets lost), while others were simply emailed between one another. As if that weren’t bad enough, we’ve ran across files that were stored on people’s desktops—or worse—in their trash bin.
If you were not part of the project team from the very beginning, getting involved became almost impossible. The landscape of how we documented and stored our plan of actions was chaotic. When you can’t effectively communicate with your team or even comprehend what is going on, you lose efficiency.
Designing a New, Inclusive Application
It was time to design an inclusive, customized app to promote improved team communication and strategy. I wanted to design and build an application that:
- Centralized documentation into a single location
- Allowed access cross-platform
- Automatically applied branding to all documentation
- Reduced dependency on 3rd party software
- Eliminated ink and paper waste
By creating an app to address the issues, my goals were:
- Reduce Costs: Remove time-intensive inefficiencies, and uncover problems quickly with real-time metrics.
- Increase Product Quality: Allow teams to spend more time making awesome products.
What if we could use technology to help us make better decisions and improve planning? By allowing the application to display real-time metrics— like page counts, page title lengths, and persona distribution—we could make well-informed decisions around the data architecture.
I branded and called the app Sapphire—for its clarity, strength, and beauty around providing value to us. Sapphire’s core value is about being a real-time data architecture planning tool that can help us strategize digital products at any scale.
Benefits of Sapphire
More Empathy for People in Design
Sapphire makes it very easy to define and explore personas for projects. Every project can create as many personas as necessary, with just the right amount of information at a glance. It’s incredibly easy for team members—especially designers—to empathize with a person’s goals or frustrations.
Better Organization for Content
Creating well-organized architecture around a project became effortless. Each project can have content broken into data types, taxonomies, templates, and pages. In fact, you can also create relationships between pages and people. This allows us to understand who our target audience truly is.
Clear Perspective on Navigation
In the past, we had to document the same information multiple times. The best part about Sapphire is that both branding and visual sitemaps are automatically generated in real-time. If I could get people to focus on the content and nothing else, Sapphire could handle the rest. Visual sitemaps are fully interactive, allowing anyone to explore pages and their architecture.
Inside the Single-Page App
In order to provide such a rich experience, I wanted to ensure Sapphire was using the latest technology. With performance being an important factor, I needed to choose technologies that were built for speed.
Sapphire was built on React—as both a progressive web app and single page app—and used Google Firebase for its NoSQL real-time database. Users were authenticated securely using Google Domain Authentication and was securely hosted through Google Cloud Hosting. All of these technologies were relatively easy to learn and integrate.
To power our intuitive sitemaps, I opted for jsPlumb framework over something like D3—primarily due to time constraints and the amount of effort required. I’ll admit, jsPlumb integrated extremely well with React and allowed me the power to customize as I needed to match the desired functionality.
Final Thoughts on Digital Strategy
Documentation allows teams to communicate and work together on projects of any scale, and digital strategy around architecture plays an important role in documenting how products should work. When we ignore documentation—or simply allow it to deteriorate over time— we are hurting our ability to communicate effectively.
By recognizing these problems, I was able to design, develop, and deploy a tool that helps us reimagine digital strategy and how we document data architecture. When we can work better together as a team, anything is possible. Make something people love!
This article was originally posted by Mark Riggan on Medium.
