Ener.co is an energy efficiency start-up in New York City. They restore industrial air conditioners, which increases efficiency and reduces cooling costs. I re-designed their site to communicate their value to potential clients.
I started with a site visit to an NYC production facility to see how Ener.co worked first-hand.
Home sketch 1
After the site visit, I had a much better understanding of what Ener.co did. I used paper sketches to test ideas quickly.
Home sketch 2
Contact form sketch
Paper testing quickly let me see what worked and what didn't. The high fidelity mock-up reflected what I learned.
An "energy calculator" button that leads to a contact form helps us measure if users are actually interested in this feature.
BK Bumpkin is a growing garden design business in Brooklyn. They wanted a site that clearly explained their services and unique approach.
A visit to BK Bumpkin's plant store and later, an outdoor job, helped me understand the ethos of the company: unfussy gardens that brought beauty to backyards and apartments.
User flow for contact forms
Sketching out the contact flow for different services helped me see that a large, multifunctional contact form would involve several steps for users. Short, specific forms would work better for this site.
BK Bumpkin's handmade feel steered me towards an illustration for the homepage.
I worked with an illustrator to give them a sense of BK Bumpkin, the site's goals, and what I imagined for the homepage. The result was a watercolor illustration that communicates BK Bumpkin's brand instantly.
Illustrated elements alternate with photos to give clients examples of BK Bumpkin's work.
Simple layouts, minimal interactions, and dynamic photography tell the story of Brooklyn Aikikai, a martial arts center. As a nonprofit, they rely on fundraising to operate, and a visually powerful site speaks to donors and prospective students.
Navigation card sort
A card-sort helped me condense a large navigation into fewer categories.
Index card sketches
Initial homepage wire
My initial design focused on many micro-interactions to accommodate the large amount of content on the site. Testing showed me that this kind of interaction confused users.
Version 2 about wire
I changed the design to reflect users scrolling.
Strong visuals communicate what Brooklyn Aikikai is about: a space dedicated to training in Brooklyn.
The long scrolling format allows users to see a variety of classes at Brooklyn Aikikai while reflecting the physical aesthetics of Brooklyn Aikikai.
Inspired by Japanese scrolls at Brooklyn Aikikai and Edward Tufte, I created an asymmetric schedule format.
Car2Go is a great car-sharing service. I was excited to try it out, but the complexity of the sign up stumped me. So, I took a crack at re-designing it.
Top- Car2Go's home page has too many choices. The user doesn't know what to click on.
Bottom- "Join" allows users to go straight to sign up, while "Find a Car" allows users to experience the service before signing up.
Account creation comparison
Left- Car2Go's account creation immediately looks like it will be involved.
Right- I pared down user inputs.
Error message comparison
Left- Car2Go's error messages use words like "character", "value" and "input", which can be alienating or confusing to many users.
Right- I used simple, colloquial error messages.
Visual cues let users know where in the process they are, and auto-detection cuts down on user input.
Left- Car2Go's payment form makes users duplicate input and doesn't auto-detect the type of card.
Right- My payment form detects card type to reduce user input.
Saved card information helps users complete Car2Go's sign up process quickly.
A challenge with Car2Go is that the service has to account for complex legal and road safety rules. While this complexity can't be avoided, letting the user know where they are in the process reduces friction.
End of process engagement
A clear message lets users know what to expect next, along with another engagement option.
The goal of this redesign was to decrease the bounce rate, increase web donations, and make it easy for users to engage with audio and video content. My approach focused on simplifying choices, and creating an easy donation process.
Breaking down a large navigation
Donation form wire
Donation form wires
End of donation process
The end of the donation process doesn't mean the end of user engagement. A short audio segment emphasizes the importance of the donation, and invites the user to continue to engage with content.