Thanks to our friends at BB Agency for sponsoring this blog!
Creating effective designs for tech-savvy audiences, such as data scientists and software engineers, requires a careful balance between visual clarity, functionality, and creativity. While the complexity of the product must be communicated clearly, the interface also needs to feel intuitive and engaging. Success in such projects doesn’t just come from creativity; it’s rooted in strategic collaboration.
Zerve’s platform—a cloud-based Data Science IDE—allows code-centric data teams to safely collaborate while producing stable code. It’s a powerful tool, essentially doing for data scientists what Figma did for designers and developers. However, Zerve’s existing visual identity didn’t fully capture its innovative spirit or resonate with its highly technical audience, so it was due for a refresh. The challenge Zerve faced was ensuring that its complex functionality was easily understandable and visually appealing to its digital-native audience. This article dives into how the collaboration between BB Agency and Zerve unfolded and what we learned along the way, highlighting key lessons for designers tackling similar projects.
Start with a Clear Product Understanding
Before jumping into design, it’s essential to develop a thorough understanding of the product—especially when dealing with highly technical audiences. By fully understanding the product from the start, designers are less likely to make assumptions that lead to costly revisions down the road.
Tip 1: Request a product walkthrough from the client to fully understand its key features before diving into design Without this knowledge, designers might waste time crafting visuals that don’t accurately represent the product’s real-world functionality.
Tip 2: Incorporate product visuals into wireframes. This sparks discussions on what to highlight and aligns the content structure before final UI designs are created.
Keep the Brand in Mind, but Make It Work for UI
A key element in effective branding is the creation of a unified visual language that resonates across all touchpoints. Inspired by the idea of collaboration and connection, the branding team designed a fluid shape to link important words or concepts. When incorporated into the UI, this shape was adapted for functional use. Instead of linking words, it became a background element for specific sections or containers, maintaining brand consistency but with a more subdued drop shadow and a refined, thin border for clarity in the interface. This allowed us to preserve the brand’s core identity while ensuring the design was practical and effective in a digital environment.
Tip: Remember, it’s not always about using your branding elements exactly as they are; adapt them for the UI to fit the specific needs of your users. This way, you maintain a strong visual connection while ensuring your designs feel fresh and functional.
Tip 2: Incorporating unusual shapes into UI design can present challenges for the development team. To avoid potential issues, collaborate with them early on. This ensures flexibility across devices, allowing the graphic elements to maintain a consistent appearance on different screen sizes. It’s also crucial that the designs presented to the client are feasible for development; otherwise, you risk setting standards that may be too high to achieve.
Remember Clients Aren’t Designers
It’s essential to remember that when presenting to a client, you’re not speaking to fellow designers. While certain concepts may seem clear to you, clients can struggle to see the bigger picture. For instance, when a client sees a color palette as a standalone slide in the presentation, it can be challenging for them to envision how these colors will be applied within the UI, making it difficult for them to sign off on the selections. Early collaboration between the Branding and UI teams will allow you to communicate your ideas more effectively to the client, ensuring they have a clear understanding of how every element would come together in the final product.
Tip: Always pair your branding presentations with practical UI examples. By showing how design elements will work in context, you help clients visualize the overall project, making it easier for them to provide feedback and approvals.
Keep It Simple and Focus on What Users Really Need to Know
Tech products like Zerve can be packed with so many features and workflows that it’s easy to feel overwhelmed. Designers must focus on simplifying these elements while making sure the critical features are prominent. For Zerve’s website, the goal was to use low-fidelity product visuals that highlighted one key feature at a time, ensuring clarity and avoiding overwhelming users with too much information.
Tip: Instead of focusing on all aspects of the product at once, concentrate on what is most important to the user. A streamlined approach to visualizing product features helps tech-savvy users quickly grasp how the product functions, without unnecessary distractions.
Get Creative With the Visuals You Use
In highly technical projects, designers often face a choice between product visuals, illustrations and product demos. For Zerve’s platform, we used a combination of all to tell a compelling visual story. Product visuals were used to represent actual features and functions—keeping things literal and focused on how the platform works. Demos, on the other hand, showcase more complex ideas and give customers a sense of the user experience.
Illustrations were introduced to communicate more abstract ideas and processes that are hard to convey through visuals alone. These helped simplify complicated data processes and humanized the user experience, while also offering opportunities for creative expression.
Tip: Use product visuals when showcasing the tool’s features and workflows, but rely on illustrations to represent more abstract concepts or to add warmth and personality to an otherwise technical experience.
Consider Adding Micro Animations to Draw Users In
One of the best ways to keep a tech-savvy audience engaged without overwhelming them is through micro animations—small, purposeful motions that explain product features or interactions. Animations shouldn’t be purely decorative; they should clarify or demonstrate functionality. They can also reflect the innovative spirit of a tech-focused brand, showcasing creativity and forward-thinking, which resonates well with tech-savvy audiences.
In the case of Zerve’s website, animations helped guide users through the platform, explaining how it works without them needing to dig into text-heavy explanations. For instance, we animated running lines that showcased data flow directions, creating an engaging experience that communicated the platform’s underlying complexities.
Tip: Well-placed animations can draw users in and keep them engaged with the content. This is essential for tech-savvy audiences who are often bombarded with information and need something to catch their eye.
Teamwork is what makes it fun and effective
Working closely with your teammates is super important. It lets you mix everyone’s unique skills and ideas, which makes tackling challenges way more creative. Plus, when you’re all on the same page, it’s easier to make sure everything fits together nicely.
Designing for tech audiences can feel a bit tricky at times, but the key is to keep it balanced between functionality and creativity. Whether you’re diving into a data science platform like Zerve or something equally complex, just remember to start by really understanding the product, focus on clear and engaging visuals, and collaborate with your branding, UI, and development buddies right from the start. By keeping things clear and simple, and working together across different areas, you can create digital experiences that click with even the most tech-savvy users, turning complicated platforms into easy-to-use tools.
BB Agency is a partner for digital evolution, merging creativity, strategy, and technology for holistic growth. By joining forces with companies dedicated to addressing real human needs, we rely on our full-cycle digital capabilities to shape brands, experiences, and products that enrich the lives of millions every single day. Our approach is rooted in a deep understanding of our clients’ unique challenges and opportunities, geared towards driving holistic change and creating lasting value.
Find more Community stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.
