Solspace Teaches You to Fish -- with Figma!
Using the right tool in the right way at the right time is always the smartest move.
A world-renowned spiritual training institution.
Understanding how to apply the right technology to solve a complex problem.
A highly intricate website build with many stakeholders, which created extra complexity and stressed budgets and timelines.
We provided a methodology plus coaching and training on how best to use Figma to optimize a major website build and communicate clearly with all stakeholders.
Scope and budget were contained. Timeline was set. Voices were heard. And developers could build components in parallel at scale.
Part of our expertise is knowing how to leverage our tools for extra efficiency and excellence.. We exemplified this with Figma.
A large, world renowned meditation center, spiritual training institution and retreat venue in Marin County California. Our client came to us in the early days of the COVID pandemic and had already begun the process of utilizing the web to serve a broader audience remotely, but as the pandemic continued they recognized bigger changes were needed.
We had begun building a comprehensive new web presence for the client. The new site was highly complex, with many interrelated parts. It had to serve audiences in many different parts of the world. It had to connect deeply and reliably to multiple APIs for event registration, membership handling, donations, etc. And it had to provide an experience that was aligned with the mission of the organization.
The main problem that plagued the website project was its complexity. The multiple 3rd party system connections were complex. The data model was complex. The user experience was complex. The design was complex. And perhaps most importantly the multiple types of interest groups and stakeholders made the project collaboration and project management process complex.
These complexities were not caused by problems, but were just part of the nature of such an ambitious web effort.
These multiple complexities produced an obvious side effect - scope, time and budget creep. It was difficult to control and manage a project of this size without special tools well suited for the purpose.
Because our team had experience with this situation, we knew that we had to bring the right mix of technology and human ingenuity to successfully manage the project and the process. The right tool for getting control of the design process would be key.
Enter Figma.
Figma is a web design tool built specifically to support the interaction between web designers and web developers. It provides designers with the toolset they need to create designs and interfaces that are on brand. It provides developers with the tools they need to transform designs into actionable components and specifications.
Figma is the reason this project was possible. We led our client through the process of cleaning up and normalizing the Figma files so that they could effectively support the necessary project management work of scoping components, proposing simplifications and sensible tradeoffs, while ensuring a high quality outcome.
Figma allowed us to create a shared knowledge base about all design factors. We could then use this as the basis for highly accurate cost estimates.
Good tools are swell. But only if you know how to use them. Fortunately we had pushed Figma beyond standard usage before and knew how to use it to optimize the flow of the project.
The value of this approach was that we were finally able to get our arms around the project, properly scope the work, finalize the budget and timeline, and set ourselves up to deliver efficiently, effectively, and with excellence.
The details of our approach are noted below. Those of you reading this who are responsible for a website as large and complex as this client’s will especially appreciate how Figma can be leveraged to streamline and clarify complex projects like this one.
It’s not unusual for developers to receive a handoff of design files from web designers that are disorganized and under-documented. It’s also not unusual for a web development agency like Solspace to work with outside agencies who specialize in branding and design, but not development. Sometimes we’re not on the same page with process.
Web designers are generally very busy solving big design problems. They don't always have time to worry about handing off tidy, organized design specifications and graphic assets. But if developers are going to succeed with their build, organization and clarity is essential if budgets and timelines are to be met.
The first critical task when organizing a design file and clarifying specifications is to intelligently break the design down into unique components, noting which ones are reusable (can be utilized in many places.) This simple task is essential and incredibly important. If a designer takes the time to do this, it reduces the unnecessary duplication of detailed design elements, and can greatly increase the speed and scale at which a design can be implemented. If the designer has not done this, the developer will have to.
An additional benefit of ‘componentizing’ the designs in this way is that multiple developers can then work in parallel, each owning an individual family of components. A developer will build out the primary component they’ve been assigned and then iterate on it to create the necessary variants. This allows Solspace’s development team to tackle a large volume of work in a tremendously efficient way.
Imagine this example: a design calls for 5 different types of biography page components. Perhaps there is one for staff, one for teachers, one for board members, etc. The designer may have specified something slightly different for each of these. But what the developer knows is that this approach is expensive and will be slow to build. But rethinking these components utilizing Figma optimization would allow the designer to define a baseline generic biography component that can be built (once) and then specify all of the possible variations on that component for various applications throughout the site. By identifying the baseline nature of each component, and then noting attributes that can be altered within defined rules, development time can be drastically reduced.
Our Figma optimization process with the project included a great deal of coaching and consulting up-front to help communicate the concept and the value of the effort. We guided our client and their designers to a new approach for their current design work, reframed their thinking into more of a developer mindset, and modified the design language and specifications to reflect what developers call a DRY method. DRY stands for Don't Repeat Yourself. Essentially we coached our design team collaborators (an outside agency as well as internal designers) through a mental shift from a creative abstract mindset to the ordered, logical developer mindset. The result was that developers, designers, and clients all gained a common language and framework, which led to better communication and decision-making, as well as increased predictability in the project execution.
Solspace takes pride in sharing our expertise and experience with partners and collaborators to help everyone stay successful beyond the current project. We have found that when we introduce this Figma optimization process to clients and their design teams, they quickly recognize the value and actively search for more opportunities to optimize and simplify. They are always pleased and surprised to find that the quality of the resulting look and feel is more coherent and compelling, and maintains the intention and integrity of their original designs. Using the right tool in the right way at the right time is always the smartest move.
