Charlotte Cunningham

Paper Prototyping

A little while ago I went to a Lean UX workshop on UI Sketching at the WeWork studios in San Francisco (very cool space). After splitting into teams of three we were given a mobile app and user story to draw from which to prototype screens. Using the Prototyping on Paper app we created an interactive prototype right there. Pretty neat!

Our app to work on was, in essence, ClassPass. One user books a class on her phone, invites a friend to join, and they both sweat it out together in Golden Gate Park. I admit my experience with ClassPass influenced my sketching a little bit, but it was a great exercise to work alongside two other people (my UX Designer coworker and a Product Manager visiting on business from China) and compare sketches and ideas.

From the paper sketches we used POP to snap pictures and build the prototype to share with other teams and get their feedback. Again, pretty neat, and I look forward to my next opportunity to try the process again.

Not working? See it here.

Wandering the Desert, Part 1

A few weeks ago I took a solo vacation to Joshua Tree, Palm Springs, and surrounding area. Guided primarily by a 2009 “California Trips” book by Lonely Planet, I hiked almost every day of the seven I spent in the desert. When I travel to unknown lands I shy away from any serious planning, which usually serves me well (although I did miss out on securing a session at the Integratron) as it allows for unplanned bursts of energy and/or laziness.

One of the book’s chapters focused on hikes to desert oases throughout the region. “Finding” a desert oasis was highly appealing to me, especially since I wouldn’t be dying of thirst when I arrived and the trail would be clearly marked. So, hiking to oases was my primary directive for the entire trip as a means to achieving a stress-free, relaxed end. The first oasis I trekked to was the Hidden Palms oasis, located within the Coachella Valley Preserve, home of the fringe-toed lizard. 

Hidden Palms Oasis

Distance (round trip): 6.43 mi

Total climb: 2231 ft

Total time: 4 hrs

Download GPS track


Click to view

Click to view

The trailhead for this trail actually starts just down the road from the main visitor center, where I discovered most people do the short walk to the Thousand Palms oasis where there is actual standing water and one can see the San Andreas fault. I also learned that someone had introduced crawfish to the pool, and despite the best efforts of the staff, they were thriving. More recently, another person had dumped a bunch of koi fish into the pond. People suck.

Looking back from the beginning of the trail: the visitor center and parking lot can be seen off to the right.

Looking back from the beginning of the trail: the visitor center and parking lot can be seen off to the right.

This hike is not particularly scenic until one reaches the oasis, but one can see Indio and Palm Springs (and even the Salton Sea) to the South. As I walked through the scrubby, rocky terrain I encountered several lizards, a few bugs, and loud crows. 

Hidden Palms Oasis

Hidden Palms Oasis

After a relatively flat walk that eventually slopes downward, I came upon a gathering of palm trees. I was amused at how closely the oasis resembled childhood drawings, in which the trees spring forth from a yellow ground. While this one didn’t have a turquoise pool of water at its center, the soil gets much sandier and softer, and I assume in wetter seasons there is some surface water.

Aw, baby palms.

Aw, baby palms.

As you can see, these palms differ from your typical lawn palm in that the old, brown fronds are not trimmed (unless, apparently, there is a fire). Anthropomorphizing a bit, they looked like shaggy, bearded desert guardians, with little baby palms at their feet. I rested here for about 30 minutes and had a snack before leaving the peaceful shade of the oasis. 

Bye bye, oasis!

Bye bye, oasis!

The return trip was a bit more strenuous. I had applied my 50 SPF sunscreen twice at this point, and there was more vertical distance to cover as I meandered East towards Pushwalla Palms. I veered West back towards the visitor center along a ridge which came with additional views of the surrounding area. Again, not particularly beautiful but perhaps interesting from a geographic and geological standpoint.

By the time I reached the visitor center, I had drank all of my water and asked one of the staff members where I could refill my bottles. I was informed that there was no public tap, but I could obtain a plastic bottle of water for a donation (unless I was “dying”). Hot, tired, and a little perturbed, I sat down in front of a fan and waited to cool down. Normally, I would have angrily pointed out the irony of bottled water for purchase in a nature preserve whose primary draw is an oasis, but I refrained. The magic of vacation was already working on my jaded attitude, and I returned to my lodgings for lunch.

Coit Tower

A few months ago I finally–after living in the Bay Area for 8 years–went to the top of Coit Tower. Why? Well because someone who doesn’t live here was visiting, of course. I doubt I would have ever gone to Alcatraz a few years back if my mother and sister hadn’t made it part of their visit.

It was very pretty up there. San Francisco is a beautiful city and I know how very fortunate I am to be able to live here, even if I complain about its public transit on Twitter like, all the time.

New Tools

My work on BlabberTabber continues! I made the case for a lighter UI and cleaner aesthetic, and we collectively decided on dropping the dots because: too cluttered, potentially distracting, and not immediately clear to the user what’s happening.

I wanted to share my vision for interaction animations with the developers, but AfterEffects seemed like too much of a beast for what I believed should be a simple job. A Google search and a few articles later, I was using Framer. It’s awesome, and I love how easily it syncs with Sketch. I was even able to achieve some basic interactions using CoffeScript within a couple hours. You can see the clicks on each button, then the final screen that would show the duration of each (color-coded) speaker:

Then I got all ambitious and tried to make the red dot in the upper right corner on the finish screen do a little wiggle rotation thing and messed everything up. I think it would behoove me to spend a little more time learning the basics of JavaScript/CoffeeScript before I dive back in…

Happy Holidays

The season is here! It’s been here, really, since that whole red coffee cup incident. So when the task of concepting this year’s holiday card landed on my desk I needed to have a little fun with it. My first (good) idea was to do a “family photo” of my colleagues wearing customized ugly Christmas sweaters, but we didn’t have the budget. My research brought me to Tipsy Elves and I’m 95% sure I’ll be ordering this for myself very soon. 

Since we couldn’t do the photoshoot, I did some quick explorations of sweater patterns that said “solar” for our existing customers. I don’t know that I quite achieved that goal, but I rather enjoyed the exploration.

Audio App Icon Design

I’ve been helping a friend and his brother design their mobile app that employs something called speaker diarisation (the process of partitioning an input audio stream into homogeneous segments according to the speaker identity). We’ve been focusing on the front-end and the UI, and I am using some familiar tools (Illustrator, Sketch, InVision) and some new ones (Git, Trello) while familiarizing myself with Google design guidelines. I’ve added the project to a new section on my portfolio: Work in Progress if you’d like to see sketches and follow my process.

Speaker diarisation can be used to determine who spoke when and for how long. Anyone who has sat through a work meeting knows that often one person dominates the meeting. Is this human nature? Or a weird manifestation of American K-12 schooling? Sure I forgot how to find the interior angle of a hexagon, but I did learn how standing up, being loud, and gesticulating at a wall makes people listen.

Anyway. I’d sketched and doodled around many themes & ideas: listening, ears, talking, mouths, recording, data, speech, sine waves, tongues, volume, and in my research came across cymatics. I found some interesting approaches on Dribbble, and of course looked to Shazam, iOS-native voice software (like Siri), and the humble VCR for inspiration (whence the red circles). There does appear to be tendency towards a “dark” UI with black or dark gray backgrounds and glowing, smoothly animated interactive pieces layered on top. So, my plan is to fiddle a bit more with these icons and extend 1-2 out across the app screens and see what I come up with. So stay tuned (hah!).

Ghost GIFs

I heard or read somewhere that anyone born before 1985 has the notoriety of remembering life before the Internet. Guess who (just) falls into that category? THIS GAL. My tech-savvy mom had a 28k modem in our house before it was cool. One of my clearest memories from that time was painstakingly downloading a game based on the 1995 movie Casper. 

In the game you had to get through the plot of the film and save someone’s life (maybe). I don’t know if I actually made it through the entire game because it took so long to load. But it was fun, and I knew I liked the Internet. A few years later I was learning HTML (again thanks to my mom) and began building websites on AngelFire and Geocities. And you couldn’t have a site without one of these.



GIFs were like, so cool. Then they went away for what I assumed would be forever. But I was wrong. They’re back and playing big roles in email marketing, content, and the dissemination of all things cat across the Internet. Being an active participant in all three categories, I have a few of my own to share with you today. 


So there you are. Learning to build beautiful, seamlessly looping GIFs today seems harder than learning HTML in my early teens did, but a large part of that is probably adulthood. Adulthood has things like self-doubt and perfectionism, of which 1985-1995 knew naught.

Updated Portfolio

I celebrated a work-versary at Sungevity this month and I must say, much has happened since then! I have had the opportunity to work on so many projects, each with their unique objectives (creative and business), stakeholders, and formats. I’ve built landing pages, email templates, and infographics. I’ve beautified invoices, navigated Salesforce, and learned to design in PowerPoint – three things I would have said, “Impossible! It simply cannot be done!” to a year ago. But, here we are, and I have a year’s worth more of experience under my belt.

While I can’t share ALL of these projects on my site here, I have added a select few to my portfolio, which is now broken out into three categories: Infographics, Illustration, and Logo & Identity. Please enjoy, and stay tuned! I plan to add a section for Animation next because I seriously love gifs.

Let’s Go Build A House

Digitally, of course! I was working on some illustrations for a project at work that were never used, and so thought I might share one here. I liked this one in particular, and even made an animation showing how I built it out.

I spend plenty of time thinking about visualizing solar panels on roofs, hence the black bar on the left. If you couldn’t tell what it was, well, maybe I failed. 

I’m still using Adobe Illustrator for the bulk of my digital doodling, although it seems to be under attack from fellow designers after the latest CC2015 update. Whatever, I still say use whatever you’re best and fastest in, and for now that’s still Illustrator. Although I am liking Sketch more and more …

The final (unused) version.

The final (unused) version.

I Bought A Camera

Devoted fans may remember I studied photography and even earned a fancy BFA in it from the San Francisco Art Institute back in 2010. This was after I studied French. And now I do graphic design. Three pursuits in three decades = winning. 

After a series of unfortunate events I sold my Canon 5D MKII a couple years back and have been camera-less ever since. I’d been somewhat averse to buying a new DSLR, but the itch hit me last Saturday and I went for it. I bought the Fuji X-A2, a mirrorless outfit with interchangeable lenses. Then I took it for a walk in San Francisco’s Presidio. It was chilly and gray and virtually people-less. In a word, perfect.

Click images to view full-size.

Oh hey, that’s me! The tipping point for me choosing this camera was the 175˚ tilt-enabled LCD screen that makes selfies that much easier. I’m not very fun to walk with when I’m carrying a camera (we WILL be separated), so the burden of proof rests upon my shoulders.

Older Posts