Welcome to the latest edition of Polar Updates, where we highlight the innovative design projects and insights from the Polar Hedgehog team. This month, we're thrilled to spotlight our collaboration with MiXi, an organization dedicated to advancing the circular economy.
Through our partnership with MiXi, we've had the opportunity to contribute to their mission of creating a more sustainable future. Join us as we explore the creative journey behind MiXi's rebrand and delve into other exciting projects and developments from the world of design.
In this issue:
- 🔍 Project Spotlight: Illuminating MiXi's Mission Through Design
- 🌱 Worthy Mention: Foundational Secures Seed Investment
- đź“ť From Our Blog: Optimizing Navigation Bars for Smaller Screens in Webflow
- 🤖 AIcebreaker: Enhancing Design Decisions with AI-Powered Usability Testing
- 🌀 Blast from the Past: Go Retro's Superhero-Inspired Icon System
Let's dive in and discover how design can shape a more sustainable and circular future!
In this edition's Project Spotlight, we're excited to showcase our collaboration with MiXi, an organization dedicated to bridging the gap between the current linear system and the circular economy of the future. MiXi provides essential support, resources, and a collaborative ecosystem to help companies navigate the landscape, develop impactful solutions, and foster partnerships.
We refined the typography and emphasized the connections between the letters, symbolizing the interconnectedness MiXi fosters within its network. The vibrant blue hue chosen as the primary brand color represents the dynamism and clarity of MiXi's mission.
To further distinguish the three key sectors MiXi engages with—Investors, Startups, and Companies—we introduced a color-coding system. This visual language extends seamlessly across the website we developed, the slides we designed, and various promotional assets such as banners and webinar thumbnails.A focal point of the website is the captivating hero animation, which encapsulates MiXi's core purpose. The animation illustrates the transition from a linear economy to a circular one, highlighting the transformative impact of MiXi's work.Through our design partnership, we aimed to create a visual identity that not only reflects MiXi's values but also engages their audience in understanding the importance of a circular economy. We're proud to contribute to MiXi's mission of driving positive change and forging a more sustainable future.
.png)
In our latest blog post, we dive into a common challenge faced by web designers: creating navigation bars that remain user-friendly on smaller desktop screens. When a navbar contains numerous links and buttons, it can quickly become cluttered and difficult to navigate as the screen size decreases.
Our web design team has developed a solution to this problem by displaying the burger menu at a custom breakpoint earlier than Webflow's default 991px. By implementing custom code, designers can optimize the navigation experience for users on smaller screens, ensuring that the navbar remains accessible and easy to use.
The blog post provides a step-by-step guide on how to implement this solution in your own Webflow projects. It covers essential aspects such as:
1. Adding the custom script to your website.
2. Locating your navbar styling for tablet devices.
3. Incorporating the styling into your custom script
By following these steps, designers can create responsive navigation bars that adapt seamlessly to different screen sizes, improving the overall user experience of their websites.
We're excited to announce that our client Foundational has secured a seed investment to fuel their AI-powered code analysis solution. Foundational identifies and prevents data and privacy issues before code deployment, suggests fixes, and accelerates the development of data and AI products.
To support their growth, we've updated Foundational's website with new product and solutions pages, a feature to test the product, enhanced resources, and refined visual elements. We're proud to partner with Foundational as they empower data organizations with cutting-edge technology.
Conducting usability testing and evaluation for a new product is a necessary step for making smarter, data-driven decisions. However, it can also be cumbersome and difficult to execute within a startup environment with tight timelines, fast learning, and decision-making. This is where the use of artificial intelligence (AI) in the design process comes in. To succeed in providing valuable products in no time, we use Attention Insight - An AI product which allows us to obtain heat-maps and contrast mapping, Clarity scores, and benchmarking for UI screens. With its help, we can "predict" human attention, instead of traditional mouse tracking which is more indicative of the perceptual level.
In our recent design project with a new startup in the Cyber Security industry, we incorporated a data-driven approach with the help of Attention Insight, alongside qualitative assessments and stakeholder feedback. Our biggest challenges were the organization of the main dashboard which contained big complex visualizations and their color intensity. At first, we compared wireframes to finalized UI screens to ensure the transfer between concept into the detailed phase and alignment with customer requirements. Second, we compared 2 versions of the UI screens, and by that, we could control the coloring and contrast of the elements inside the dashboard until the desired result. This method facilitated data-driven decision-making regarding UI and UX design elements, providing a structured framework for our design process. Eventually, this allowed us to conduct AI-based usability testing in less than a week and saved us a lot of time and effort in order to obtain additional data-driven feedback on the design.
Although using agile usability testing is time-saving and data-driven, it is important to note that usability testing with real users is still necessary and crucial because of a few reasons. First, it is more reliable and representative than an AI model, especially when the data the model is trained on is different from the one examined. Second, qualitative feedback like users' satisfaction, feelings, thoughts, and sayings are very important and help us learn the users' mental models. Third, a predictive attention tool will help us better understand how and where the product attracts attention, but it doesn't explain the gap between attention to interpretation and taking action, which real-user usability testing provides.
To sum up, in the fast-paced and resource-constrained startup environment, this predictive-attention solution provides us with an additional layer of knowledge and insights over the design process and assists in the process of making efficient and effective decisions.
In this "Blast from the Past," we highlight our work on GoRetro's comprehensive icon system, designed to empower agile teams in their retrospective collaboration.
Drawing from the world of superheroes, we created a visual language that encourages teams to tackle challenges head-on. Starting with simple, recognizable foundational icons, we progressively built up to more illustrative and expressive designs for empty states, onboarding sequences, and engaging animations.
The resulting multi-tiered icon hierarchy seamlessly integrates with GoRetro's brand guidelines, enhancing usability and strengthening the platform's distinctive identity. By weaving the superhero theme throughout the iconography, we've crafted a cohesive and on-brand user experience that sets GoRetro apart.
This iconic visual language empowers agile teams to approach their retrospectives with the confidence and determination of superheroes, making collaboration more intuitive, engaging, and effective.
Through our partnership with GoRetro, we've showcased the power of a well-designed icon system in elevating both usability and brand identity, ultimately creating an iconic user experience that truly empowers teams.
.png)
.png)
.webp)
