My aim was to highlight the ‘Humane Technology’ approach in all aspects of the visual design language, so that the organization’s mission becomes apparent at first glance.

I helped increase traction and reduce drop-offs by rethinking the website layout, content hierarchy, navigation, visual design, and user experience. I did this through the inception of a scalable design system.

[Use the slider below to get a peek into the redesign]

I audited the content on competitor's websites to identify what they bring to the table to inform potential opportunities for ATIH to bridge.

I drew from learnings of website assessments to inform the overarching approach I would take for the redesign. They are:

To serve as a North Star, I iterated on multiple moodboards and finalized the one I created that was a reflection of the following characteristics — Streamlined, Neoteric, Minimal.

Inspired by Integrated Development Environments (IDE) that tech professionals use, I decided to use a largely monotone palette with a pop of color to draw attention to vital information.

The exisiting logo doesn’t convey anything about the technology aspect that is the main focus of the organization. It seems like it has more to do with an organization that caters to something in the field of neuroscience or cognition.

The new logo is an amalgamation of a rigid iconographic style human and digital pixels — the smallest units in a technological digital display. The logo and the word mark are used together across web channels. Additionally, a bitmap font in the word mark helps bring out a subtle contrast between humans and technology while still maintaining an overarching cohesiveness.

Two main typefaces — Manrope and IBM Plex Mono are used in the design.

As a sans-serif font with it’s rounded nature and simplicity, Manrope paves the way for a breathable design for important text content such as section headings.

On the other hand, IBM Plex Mono with its excellent legibility serves as the perfect body text. The two typefaces when used in conjunction in the design serve as a bridge between mankind and machine.

The color palette has been inspired by the varying colors used in Integrated Development Environments(IDE) used by software programmers for coding. IDEs use different colors to highlight and draw attention to necessary information. The same concept is being used within the context of the website to use color as a visual cue to make content more readable.

After a few explorations with grid layouts, I found the perfect balance in a square grid system to create more uniformity despite following a modular approach for page composition.

Through the redesign, my goal was to do a complete overhaul of the visual design system such that it caters to the broadly scoped global target audience of All Tech is Human.

Besides the website redesign itself, I created two additional design artifacts that could be used to boost revenue for the business.

Considering how ATIH is a non-profit, additional income streams would make them less reliant solely on donations. I designed a customized laptop sleeve as merchandise to cater to that.

I also designed a poster template that the organization could use to promote their events beyond web platforms.

[ABC]

"The way Kalpitha balanced vibrant colors with colorful imagery in the visual redesign was masterful, showing just how impactful her design mastery can be."

"Kalpitha's documentation was impressively clear and clean, reflecting her thorough and detailed approach throughout the project. The time and effort she put into this project were clearly evident, resulting in a design that significantly enhances the organization's visual appeal."

As my first experience designing an end-to-end scalable style guide from scratch, delving into the nuances of visual communication principles led to some key learnings.

01

Importance of effective critique

Engaging in regular critique sessions that were constructive helped me invite fresh new perspectives as I went about refining my designs. This also helped me look at my design iterations objectively by evaluating it against business goals and user needs in turn helping me get comfortable with not getting too attached to any particular idea. It also highlighted the importance of setting the right expectations for critique sessions by providing clarity at the start on what feedback I am look for, to pave the way for a productive conversation.

02

Incremental approach to design

While creating a design system and visual design style guide from scratch can feel like a colossal task, I learnt that starting small and progressively adding layers can help produce quality work by focusing on one thing at a time. Trying to apply multiple visual design elements all at once while creating components can lead to disastrous outcomes and also feel overwhelming.