Case Study — Earth Idea Co.
Reinventing recycling.
Project Summary
Earth Idea Co. is an innovation lab that connects firms who produce waste with firms that need this waste to enable ‘value-added recycling’, otherwise known as ‘upcycling’. Their goal is to use upcyclers, researchers, and creators alike to crowdsource their ideas to bring to market. My role was to create and design a landing page to gather early adopter user base for future lead conversion. This was a solo project where I was responsible for both UX and UI.
Timeframe
4 weeks
Task
Create a landing page to gather early adopter user base for future lead conversion
Platforms
Web (Responsive)
Design Methods & Tools
Comparative Analysis, User Interviews, InVision (Mood Board), Paper Wireframes, Sketch (Mid and Hi-fidelity wireframes), Keynote (prototype), Illustrator (Logo Designs), Photoshop (Mockups), Frontify (Style Guide)
DEFINE
Introduction
Earth Idea Co. is an open source, innovation lab that connects firms who produce waste to firms that need this waste to enable ‘value-added recycling’, otherwise known as ‘upcycling’. The goal is to discover new ways to design and create products using waste materials, and create higher value in recycling by using upcyclers, researchers and innovators to crowdsource their ideas and bring to market. For example, a company like Arcteryx is interested in innovative materials. The challenge then, is to create a jacket with these waste materials, while making it wind/waterproof. Ideas are then crowdsourced, and a prototype is made, which would be used to pitch to stakeholders (and production manufacturers) to use their new product design.
The Opportunity
At the time of writing, Earth Idea Co. is early stage startup and required an initial landing page to gather interest and capture target users as they prepare to launch a larger discussion forum, similar to Kickstarter, as a means to facilitate discussion and ideation amongst the community on upcycling ideas. The landing page to be designed would need to simply capture early adopters and interested individuals, which could later be used in marketing or launch campaigns.
DISCOVER
Research and Discovery
The first thing I did was to interview my client and their party. I spoke with 2 members of their small team and allowed them to each share with me the vision, the “why” behind their business — how did they want their users to feel when using their service/product?
Understanding the core reasons that derive the fundamental emotional connection between their users and their product/service creates a strong connection that reinforces the overall design language, and to communicate the goal of their idea, or the problem they’re trying to solve.
To start collecting ideas for the visual and emotional design, I asked my client to use adjectives and keywords to describe the “personality” of their business. These keywords would ultimately express the feel of the landing page.
Innovative but not reckless
Helpful but not criticizing
Passionately outspoken but not treehuggers
I think I speak for most people on this line of thought. When you think about the topic of recycling, or upcycling, what do you visualize? what objects or ideas can you relate to? Are there colors you could associate with? Outside of a blue recycling bin, recycled clear bottles, or a scrap yard, it’s challenging to identify upcycling to a common theme. Because of this, I decided to do brief comparative analysis on similar organizations to what I could find, and how they were expressing their message through visuals:
Hipcycle:
An eCommerce portal for upcycled goods. The color palette seems to use earth-based tones, such as oranges, browns and a pastel green. They also provide information on upcycling.
Bottle-Up:
An initiative conceived by six Dutch designers during Dutch Design Week 2015, their aim was to use the discarded waste produced through tourism to create beautifully designed, locally made up-cycled products that appeal to tourists and other interested parties.
Upcycle That:
A recreational blog featuring a curated collection of DIY upcycling projects and ideas.
Breaking this all down, I noticed that there were (perhaps unsurprisingly) a healthy balance of “earth” color tones (green, terracotta, blue). These colors would be leveraged later on once style tiles were created (more on that later).
Even though Earth Idea was an early stage startup, they had come up with an existing logo already. So, as part of the branding exercise, I took the liberty of exploring a logo design/re-design. I intentionally opted to not see the existing logo in order to have a fresh mind-set when exploring a design. Similarly, I conducted some comparative research on similar organizations and how their logos were designed to get inspiration:
At this point, I hit the drawing board and sourced imagery to create a moodboard in order to communicate the overall brand and messaging. I took inspiration from architectural designs, in addition to some DIY projects. Often times, architectural firms challenge the norm and push the envelope in creating environmentally sustainable structures, which often times use recycled or upcycled materials (such as a shipping container). These objects not only represented upcycling in it’s entirety, but the structured, rigid look and clean fine lines resonated strongly with several adjectives that were collected during my user interviews with the client. Many offices around the world also leverage recycled materials to create stunning work spaces — and these work spaces often give off a warm and friendly feeling, designed to foster collaboration and ideation, something that Earth Idea aims to do with their main product later on.
My process for typeface exploration followed the same thought process behind the two direction of style tiles (more on that a little later). I browsed through my font book and cherry picked any and all Sans Serif typefaces in two categories: a set with tapered/rounded ends, and a set with straight, sharp corner ends. I also identified fonts that stood out and contrasted the standard Sans Serif style typefaces, in consideration of headers/titles. I wanted something that would look different from an everyday font that users experience typically.
DESIGN
With images collected and typefaces narrowed down, I began to put together style tiles to explore color, typography, buttons, and other aesthetics. I explored 2 different directions with the same moodboard.
With this first design, I took the notion of “corporate” identity and emphasized it with the usage of blue and black to represent trust and strength. The color palette suggests subtle use of colors — #E19F66 as a base color, #0079A5 as an accent, and likely #F4F4F4 as a background. Buttons would take on sharper corners. The primary font, Josefin Sans, was selected because of it’s sharp vertices around the bowls and finials of each character. The x-height and ascender sections of all uppercase characters are substantially taller in stature in comparison to the lowercase counterparts, thus I felt that this typeface would be a good choice for titles or headers. The secondary font is Nunito Light. Out of all the sans serif secondary fonts I had in my pool, Nunito’s character spacing and line height would match Josefin Sans the most.
With this next design, I imagined a more playful, friendly vibe and had intended to leverage the usage of illustrations — a near-fully immersive web browsing experience that would take the user on a journey around the beauty and simplicity of the earth. Here, I pulled the softer, rounder typefaces in Dosis for the headers, and Quicksand for the body. Buttons were rounder around the corners. The corporate blue was shed, and in it’s place was a grass-green #00A969 as an accent color, and a pastel shade of green #C9ECEE, closer to turquoise, which I imagined would be a possible base color against dark text. A different shade of the earth tone, #DC794E “terracotta”, would be used a secondary base color, perhaps more evident in an illustration that would drive the look and feel of the site.
At this point in the design stage, I opted to loop in my client to collect feedback and thoughts around the two style tiles and rationale behind the design decisions. There were good things identified from both style tiles — thus, a ‘frankenstein’ style tile was created!
My client preferred the stronger, sharper typeface from the corporate-esque style tiles, but also added that she envisioned some of the imagery to also depict craftsmen in their element — working in progress, perfecting their product. There’s the element of precision, illustrated as such with the perfectly symmetric lines in architecture, but also the idea that no product is perfect, and there’s this rustic, messy process before it that should be appreciated. I collected more of this imagery, which would later be used as a hero image above the fold.
Additionally, I was slightly reserved at first with the color palette — I knew that 3 colors with strong contrast might be a challenge putting together a coherent design, but remained steadfast with the color combination, seeing as how the three colors seemingly blend harmoniously, thanks to their association with earth. The challenge was trying to determine whether the accent color would be blue vs green. This would soon be determined once I had wireframes digitized. But first, I took to a canvas to sketch out what the landing page would look like.
My client had already started preparing content ahead of time, and provided me with the copy prior to me starting on this project. As such, I was able to accurately and rapidly iterate on quick paper sketches with different approaches with respect to the information architecture. I chose to go digital with the sketch on the far right (above), as it would take cues of the design aesthetics from several of the architectural elements from the moodboard and style tiles.
Going into Sketch, I started wireframing mobile-first, keeping consistent by using an 8 (mobile), 12 (tablet), and 16 (desktop) column spacing system, separated by 16px gutters. Designing mobile first allowed me to better structure the content. Even when converting the mid-fidelity wireframes into high-fidelity wireframes, going mobile first helped me focus the design, and reduce the amount of distractions or eye-candy that would otherwise be visible on the tablet/desktop versions, given the extra real estate.
In preparation for the growth of their brand, I began creating a style guide that the discussion forum would later follow, which also outlines rules with regards to usage of typefaces, photography, and color usage.
Prototype
Summary
In hindsight, I would like to go back to logo exploration. Even though my client had their logo already created, I felt the logo could be further improved with more time and iterations.
Another area where I would like to have explored further was the usage of textures. During the client review mid-way through this project, the idea of “craftsmen”, and “work-in-progress” introduced ideas of textures and “roughness”. I had experimented with using textures in lieu of using the terracota base color, but was unable to find a texture that suited as a background to body text, while still retaining the color palette and overall look and feel to the design.
Overall, this was a fun project that I felt passionate towards, and look forward to when my client launches their service public!
