Jump to:

04

Natura Labs

Branding Strategy
Responsive Website

"Check out my creative direction and UX work on a zero to one web project"

In a rush? Watch this 4 minute Loom walkthrough instead

Project Impact

(What We Accomplished)
  • Brand developed, animations crafted, website built
  • 0 - 1 project in just 2 months

Naturalabs.io was a great opportunity to design a zero to one brand and website with full control. The founders at Natura came to me with a budget and an existing logo and effectively gave me full control over their brand, site design, and UX strategy.

The ideation, the product brief and scoping, the designs, and the branding are all done by me over the course of 4 sprints (8 weeks) alongside my work for Mode Mobile. Enjoy! 

Defining The Problem

(Who Is It For, Where Is It Used?)

This website is for Natura Labs Research, a company that uses machine learning to improve business practices. The site should reflect their innovative approach and high standards.

The goal is to impress potential clients and win awards for creativity and overall experience, so everything must be purposeful and harmonious.

Who Is It For?

The users of this site are likely to be affluent, organized, and have looked at many websites in any given day. The purpose of this site is to give them a moment of respite in a positive way. We want this website to be so cool that they would want to show it off to their friends.

This site is intended for Natura's clients as well as its creators. It should reflect the approach to research taken by the founders: methodical, precise, and data-driven. The site should be built on a foundation of efficiency and solid UX practices, while its outer shell should feature minimal animation, design, and bold typography.

The result will be a website that looks great and functions even better.

When & Where Is It Used?

Users of this site are likely using high-end devices, particularly on desktop. Therefore, this site will be primarily focused on desktop users and built using a responsive-desktop-first approach.

Mobile users will have a simpler experience that prioritizes speed, with fewer animations, graphics, and text blocks. This is because anyone viewing the site on a mobile device is likely on the go and needs information quickly. If they are near a desktop, they can use it for a better experience.

Building A Brand

(Type and Iconography, Color Theory, Sections + Components)

Influence and Inspiration

Bauhaus typography lockups, my recent trip to Japan, and Helvetica (the coffee table-style publication) were all influences for Natura Labs' branding. 

Although these three areas of inspiration span over 100 years of design, they all demonstrate a fierce dedication to order, minimalism, and functionality. Below is a collection of influences assembled to inspire this project.

Color and Type

Ccolor/shade styles were selected for their utility. As demonstrated in the "Color Usage Breakdown" chart below, the site would be primarily black and white, using green/blue/pink for graphics or points of positive or negative emphasis

Similarly, the typeface and various applications needed to be practical. Helvetica Neue was Natura's original font choice, although we ended up switching to Inter, a similar Google Font, for ease of web implementation.

Graphics & Icons

Natura means "nature of things" in Latin. I wanted to include naturally-occurring shapes within the brand to elude to this idea. Inversely, "Labs" offered a very sterile, scientific meaning to me.

The marriage of these two opposing ideas can be seen below, where I've taken simple shapes found in nature and stripped them down to a molecular level.

Sections & Components

My role for this website was to take the brand and site from ideation to first release, but also to set rules and educate the Natura team to take on future iterations of their own website. Below is an example of various type lockups, card alternates, and sections which could be used as a template to expand the site. 

A Finished Product: Final Designs

(High Fidelity Mobile + Web Screens)

Designing For Mobile

The Natura founders were able to provide me with user data which supported designing for a mobile-first experience. Many clients may browse on their mobile devices, and it was important to have an equally engaging mobile presence.

We did chose to omit some of the decorative animations on mobile to reduce load times.

Designing For Responsive Desktop

The desktop experience allowed for more creative flexibility. Given the brand's liberal use of text, I oped for small animations within copy to highlight important.

We also knew from previous user testing that the user base responded well to long-form scrolling landing pages, especially for new customers. This gave a lot of room to play with on-scroll animations.

Conclusion & Final Thoughts

  • Brand developed, animations crafted, website built
  • 0 - 1 project in just 2 months

The website and branding for Natura Labs was probably my favorite project of 2023. It offered every designer's dream: A strong budget paired with near-unlimited creative freedom.

The founders and I worked closely together on the research and branding process and it created a stronger sense of identity and understanding for them.

The end result, the website, in turn offered a closer connection to their users and has helped them create a more focused and effective sales pipeline.