WORKING WITH STAKEHOLDERS
Leading this engagement, a priority was establishing a comprehensive design system to direct the website's aesthetics. I facilitated a collaborative workshop with key stakeholders, including the client team, to align on product vision, goals, and desired design principles.
WORKSHOP INSIGHTS
Structuring focused sessions around critical elements like colors, typography, and UI components allowed me to methodically capture invaluable insights from Indupro on the intended messaging, emotions, and brand personality for the new website design direction.
THE APPROACH
After collecting the insights from the workshop, I decided to start with the basics: color pallet, typography, and grid layout.
Color Pallet
For the website's visual design, the Indupro team aimed to strike a balance between a bright, cheerful, and inviting energy while still maintaining an overall professional aesthetic. To achieve this, I extracted the core colors from their existing logo as a starting point to reinforce brand recognition.
However, I then expanded the color palette by introducing complementary tints and shades. This allowed me to craft a vibrant yet refined look that seamlessly aligned with Indupro's branding goals for the new website.
Typography
Throughout the collaborative workshop, the stakeholders consistently emphasized their desire for the website's design to embody a clean and modern aesthetic, while still projecting an approachable, user-friendly experience that allows visitors to intuitively explore and follow Indupro's complex technological and scientific content.
To strike this balance, I decided to anchor the typographic system around the Montserrat font family. Montserrat's modern geometric styling aligns seamlessly with the intended minimalist yet sophisticated overall design direction.
At the same time, its versatility in various weights and styles enables clear content hierarchies and wayfinding that enhance the usability and comprehension of Indupro's innovative solutions.
Grid Layout
The website's extensive visuals and videos necessitated a robust yet flexible grid system for optimal layout across devices. I implemented a 12-column grid with 30px gutters for large breakpoints, responsively reducing column count by 4px increments on smaller screens. Serving as a standardized guideline, the grid distribution provides consistent structure for placing elements, streamlining the design workflow. This systematic approach fosters a cohesive visual language, enabling seamless collaboration while maintaining spacing, balance, and aesthetic integrity.
Responsive Design
This scalable grid framework accommodates diverse content while allowing clean reflow, ensuring an organized, visually rich experience regardless of screen size.
THE UI ELEMENTS
Crafting the website's UI elements was an engaging creative exercise that allowed me to infuse unique brand characteristics throughout. For instance, I reimagined Indupro's triangular logo motif as a sleek underline accent as well as a distinctive dot-and-line hamburger menu icon. This strategic repurposing of recognizable brand shapes establishes a cohesive visual language.
Additionally, I developed a comprehensive custom iconography system utilizing the defined color palette. This approach ensures brand consistency extends to even the smallest UI details. Each icon seamlessly complements the overall aesthetic while maintaining utility and recognizability for users. By thoughtfully weaving brand DNA into the fundamental UI components, I've created a cohesive, branded experience that reinforces Indupro's identity throughout every user interaction.
THE FINAL DESIGN
The final design for the Indupro product received overwhelmingly positive feedback from the team. Initially, they had envisioned a bright, vibrant theme. However, after an insightful feedback session, we collectively decided to pivot toward a primary dark background. This strategic choice not only enhances the visual impact of the design elements but also cultivates a distinctive and inviting ambiance for the product. The dark backdrop elegantly highlights the visual aids, while the warm accents imbue the overall experience with a sense of sophistication and warmth.
.gif)
