PASSING THE TORCH OF DESIGN
A blueprint for Kotoo Earth and how the user interface developed the brand direction.
THE CLIENT:
Kotoo
Earth
THE ROLE:
Product Designer
THE TIMELINE:
Total Project:
-
4 weeks
Design System:
-
4 days
THE TOOLS:
Figma, G Suite, Zoom
THE PROBLEM
We have developed and designed a refreshed version of Kotoo. Now the design team needed to deliver a simple but documented design system/UI kit of all design patterns used in the project deliverables.
We spent the previous weeks conducting research and testing our designs to gain actionable insights on how to refine and refresh our design decisions. Now we needed to put all of those directions in one package that could be handed to Kotoo.
​
“The brand will ultimately be developed to match the tool’s user experience.”
​
THE OUTCOME
The Kotoo Design System, a thorough guide to tell the story of “why?” behind the design.
We collectively grouped all of our design work and elements used to create the screens in a cohesive manner. This design system will allow anyone working on the UI for Kotoo to have a point of reference for the choices made behind the design. This guide is also a starting point of the brand direction for Kotoo.
RESEARCH &
INSIGHTS
To start with our design work, we dug into some additional research as a team to determine some highlights that will help us iterate on our direction for the design. We looked into sustainability with a focus on carbon footprint management systems. Because global warming is becoming more important to consumers (especially millennials), there is a greater awareness of climate change and creative ways to approach the issue.
“The world is looking for answers and ways to feel good about helping the climate. There is a mass 'sustainability trend' arising that will have the biggest impact on business and consumers in the next decade because of increased awareness, education, and action surrounding sustainability initiatives.” (Best Company).
VISUAL COMPETITIVE ANALYSIS
We looked into some of Kotoo’s competitors and aspirational brands that would help us gain additional insights within the climate change industry. We looked into the following direct and indirect brand competitors and how they engaged with users while showcasing important information such as carbon footprints and offsets.
OROECO:
-
Leverages Facebook for community connection
-
A bit dated
-
Not as professional as other competitors
OFFCENTS:
-
Mobile App
-
Easy to glance data.
-
Engaging and Youthful feel
CHOOSE:
-
modern look.
-
Attracts a younger crowd.
-
Bright colors for CTAs.
REDUCE:
-
A modern, mobile app
-
Combines data to track GHG emissions.
-
connects users to UN-approved offset projects worldwide.
ECOLOGI:
-
Data-driven website
-
Presents data in a simple, colorful way.
-
No photos or illustrations used
ENFUCE
-
Professional look and feel
-
Easy to access
-
Older user demographic
YNAB
-
Fun and energetic platform
-
A quirky yet serious tone
-
Uses playful illustrations to delight users.
OUR WORLD IN DATA
-
Traditional data visualization website.
-
The client likes the way that data is displayed.
-
Data-focused audience. (Scientists and Engineers)
KEY INSIGHTS
From our research, some key insights were discovered. We used these findings as a basis for our design directions for Kotoo.
​
Branding:
Many competitors were geared towards a younger audience.
Colors:
Blues and greens were heavily used and often were tied into the environment.
Bright CTA’s were used to draw attention to users.
​
Iconography:
Simple and playful iconography was used in various ways.
​
Illustrations:
Only used in supportive ways on the welcome pages of half of the competitors.
​
Photography:
only used as a hero image on the welcome/marketing pages of websites.
THE DESIGN SYSTEM
THE "WHY"
Let's tell the Kotoo story, shall we?
With the final screens in hand, we really had to tell the “why?’ behind our design process. Our final task before the handoff over to our client was to document the elements and choices in a cohesive manner.
To tackle the style guide we divided the components into sections for each designer to complete. Because of my love of branding and storytelling, I was hoping to get the beginning sections. (Which I did!)​
BRAND
DEVELOPMENT
A modern nature journey through the Pacific Northwest
I had the pleasure of really developing the branding after our work was complete on the high fidelity screens. I took in all of the work that was collectively done and developed a story that our client and his team could use to ground Kotoo and develop the brand outside of our work. Based on our initial interviews from our client as well as insights from our research I provided Kotoo updated Mission Statement, Branding Positioning Statement, and tone and feel statements that matched back to the aesthetic of the new design.
MISSION
STATEMENT
“Doing the things that matter first. Not just doing the things that are possible.”
- Evan Maynard; CEO, Kotoo Earth
Kotoo aims to empower its users with the data behind their individual carbon footprint and the knowledge to make a difference.
​
BRAND POSITIONING
STATEMENT
Kotoo provides users with recommendations to make actionable changes to become carbon neutral. With a monthly subscription, Kotoo offers offset plans that tackle the largest sources of harmful emissions. This web-based platform analyzes a user's purchasing history to calculate a carbon footprint while providing the user specific data results and suggestions to make the best choices for their personal lives. Kotoo strives to be transparent in their approach to be data-driven yet honest with users in working together towards a cleaner planet.
BRAND VOICE & FEEL
Voice: A simple yet quirky approach to the rhetoric around climate change. We know there’s a problem; we don’t want to keep talking about the problem; we want to take action and solve the problem. We won’t sell you the pretty picture regarding the trees. We want to pull back the curtain of the pretty picture to provide you the data behind the picture so you feel good about what you are doing, and have better data sources to back that good feeling up.
Feel: The Kotoo brand feels like a modern nature journey along the Pacific Northwest. The clean, crisp air after waking up underneath the stars tells the story of what the brand’s goals are as it empowers users to leave no carbon. The data visualization should be as clean as the blue sky after canoeing down the river. The rows of trees that line the mountain valleys showcase the collectiveness that Kotoo wants to aim for: a few people making a big change towards a better planet.
PHOTOGRAPHY & ILLUSTRATIONS
From the branding I also broke down other major elements including photography and Illustrations. From our research we determined that we wanted to use photography on our Welcome Page as a hero image. We also wanted to present illustrations that matched back to the brand of Kotoo. I developed these guidelines for Kotoo in choosing photography and illustrations for future use.
FONTS
Throughout the design process I led the direction for the font choices for the new brand. Based on our findings we wanted to keep with Sans Serif font families and allow the data to take the forefront in the design. We tested font desirability and determined that these fonts worked best with the overall branding tone and feel that was determined for the new Kotoo. I presented this font family combination to the team, and they decided to move forward with the chosen font families and hierachies.
BRAND COLORS
Kristin led the charge towards Kotoo’s color palette and usage. Based on Natural landscape imagery we found for the platform, we all assisted Kristin in laying out how color was used. It was an integral part of the design direction and we wanted to make sure that the color usage and guidelines were clear so that any team taking over our design would understand the choices behind our decisions.
UI ELEMENTS
Abi and Yannick worked together to review our collective design and dissect it to basic elements like modules, icons and fonts. They each did extensive work to showcase layout choices and size guidelines for modules and pages. Yannick also developed a padding system for us to follow in the beginning of our design that we implemented throughout the screens. We all as a team also discussed how all of those elements came together and worked to create the Kotoo welcome page, info pages and pages of the user dashboard.
THE
COMPLETE
PACKAGE
The team wanted to provide Kotoo with a clear, simple guide for moving forward. We as a team developed a proper flow for the design system with section headers as well as a table of contents.
PUTTING IT ALL
TOGTHER
See the full Kotoo Design System below:
FINAL STEPS
Some added information to help our client understand the new design choices that supported the brand direction for Kotoo.
DOWNLOADS
& LICENSES
Because this was a team effort, alot of elements that were used in the final Kotoo deliverable was sourced by different members of our team. To make sure our client had access to all of the images and icons used, we provided sources and links to all of the outside elements used in the final project. ​We grouped all of our collective information on the final "Resources" pages of the Design System.
MY
REFLECTIONS
If you would have told me that I would have to extensively document ALL of my design choices in a file in 4 days I would have told you that that is crazy talk and asked you to seek help. But I did! This portion of the project was VERY intense, as we had a very tight deadline to make sure everything was properly documented and completed. We couldn't leave any loose ends for our client. Our team went above and beyond to make sure our hard work would be understood by the next group dedicated to the user experience and user interface for Kotoo Earth.
​
The torch has been passed and our work here is done.