Tesla's Roadster, For Your Roof.

Last Friday, Elon Musk announced a solar roof made of glass Tiles. We've been hearing about this for sometime and now we're hearing all sorts of reasons of why this won't work. 

I'm skeptical of the skeptics. This is a fantastic step for the solar industry. This is Tesla creating a brand, and building excitement around what was supposed to be a compelling product. If it works, solar will no longer a commodity, but a true fixture of the home - the muscle, the skeleton and the brain of your home. 

Today, solar only has a ~1% market adoption. This is after 20+ years of large inverters & bulky panels. Only in the past 4 or so years, have we gone from bulky and funky to streamlined and sleek. The timing is perfect to start testing the waters with something significantly higher performance. 

Solar is a commoditized product today and sold inefficiently by sales-driven companies. It's why the industry is so heavily dependent on lead generators, because solar companies themselves cannot (and have not) generated the brand traction and recognition needed to move to a more organic sales model. The traditional solar lead-gen business will go strong for another year or so, but it will change rapidly soon thereafter. 

We're already seeing shifts in the solar model because of the need for differentiation. Sungevity is selling solar as a service, SolarCity is merging rooftop solar with actual rooftops. SunPower and SunRun are looking to control ecosystems through Apple-esque Equinox and BrightPath solutions. And of course, Google is investing in energy analysis, home automation and control. 

The future of solar will be through the consolidation of energy products into a new type of packaged product. The future of energy management is what this product signals. 

At the end of the day, Tesla is unveiling its first product in this area. This is not a product for a mature market. This is the equivalent of Tesla’s Roadster, for the roof. With Tesla, Elon started with the roadster, a high-performance sports car, meant to prove specific tech and establish a brand. That model has taken us to today, 8 years later, to a mid-size, consumer friendly, significantly lower cost, and significantly higher-tech model 3.  

Moreover, you’d think with the solar growth levels we’ve seen in the past two years alone, there would be a dominant solar brand out there - but the reality is, there’s not. For those in the solar industry, we know who the top 5 installers are. For the average homeowner, you’d be surprised how few people even know “SolarCity” - better yet, you’d be surprised how many SolarCity customers actually remember the name of their installer. 

As the Roadster of rooftop solar - this is Tesla pushing a combination of proven technology into an unproven market place. The number of homes that would qualify for v1 of this is going to be small: utility bill, utility co, shading, etc. Even psychographics are going to be a huge limiter. A complete roof rebuild with a completely non-traditional roof is something wealthy tech and environmental enthusiasts will risk - not the avg. homeowner. 

But…if Elon and his teams can pull this off, then v1 of the solar roof will influence many more generations of technology until we have the equivalent of a Model 3 for your roof.  And somewhere along the way, they'll introduce technology that homeowners actually want to buy. 

For an industry so steeped in future-tech, yet so risk averse, this is an incredibly exciting development for the world of solar.

Design Bravery & The Big Picture

I'm studying concepts and executions behind the elements of conversational interfaces. This is work I've done with past clients and companies yet it's been a bit of a challenge to explain the breadth of conversational interfaces in terms of understanding how humans act, before, during and after using the product. Yesterday, this article on UXMag: Designing for Emotion Requires Bravery popped up on my radar - and the video perfectly explains the customer journey - in a joyous and unexpected way. 


Conversational interface isn't only about intelligent chatbots and the personalities they employ. It's about creating a meaningful connection - embracing fears, anxieties, trust, hope and happiness. It's not easy to address these elements and all too often, designers and managers try to avoid the unpleasantness altogether. But we can't design around being human and having human experiences without leaving a lot of empathy and understanding on the table. 

What I love about this video, is that it illustrates the emotional arc of a human experience: fear, connection, and ultimately, the payoff of perseverance.

Understanding before Testing.

I'm subscribed to an interesting UX blog, and was recommended the below article on how design research was used to launch the NYTimes in Español. This post brought up some fun memories of my early startup days with Moodfish. 

The article is definitely worth a read, but theme I most connected with was researching interaction to uncover latent needs: 

As researchers, we are always on the lookout for what we call “latent needs,” meaning something that could make someone’s life better, but which they might not flat-out ask for.

One-on-one, contextual interviews are useful for helping us uncover these needs. During the first days of interviewing, we heard several participants say something along the line of: “In Mexico the news is only about things that worry you.” We took that to heart and started exploring what that meant to them. We learned that our participants were hungry for news that celebrated culture, that provided a sense of escape and enrichment, and that would be “fun for the weekend.” In response, we prototyped a sort of Sunday magazine feature, with stories about travel, home, love and culture, and shared that with the next participants. People loved it. That prototype eventually became what we are calling “Reposado.”

In 2008, I helped launch Moodfish, a site where people could find things-to-do based on what vibe they were looking for. Short of a couple mood-based online streaming services, we didn't have any comps directly in our space. Our closest competitor was the decades-old event listing services (newspaper and online). Those worked just fine for a lot people, but we thought we could do it better. One of my favorite parts of Moodfish were the early days when we interviewed concert-goers as often as possible. We wanted to get a better understanding of how they thought about live-entertainment. To do so, we generally asked them three questions:  

  • As they were going in:
    1. Why did you come to this show?
  • As they were leaving:
    1. Was the show what you expected? 
    2. Where are you going next and why? 

The goal of these questions was to learn how they heard about the show, what made them want to buy a ticket, and how the show experience might impact their next decisions. Secondly, we wanted to see if the tone or type of answers differed from beginning to end.

For a number of people, they had planned for the show far in advance and they went because they already had a ticket in hand. For others though, they chose the show among other options because it fit the vibe of what they were looking for. They had heard some things about the band, but they were really there because it 'felt like the best option.'

For a majority of people interviewed as they left the show, they described their experience using subjective terms vs. objective band descriptions and expected experiences. People were far more comfortable answering questions and expressing their thoughts on the way out than on the way in. These honest answers set the foundation for how we would eventually structure our mood-based search and grouping mechanisms. 

Nothing beats qualitative research when it comes to certain types of understanding. Emotion and intention, for example, really come through during personal interaction. 

We could have user-tested online and we would have captured some interesting insights. But based on more recent online-user testing experiences, I'm guessing the feedback would have been more filtered or constrained by the environment the user was in at the time-of-testing. In the end, while many things could/should have been executed differently, I still love how we went about our early product research. 

Alas, Moodfish is no more, but we still have our digital memories: 


Layouts - Wk4

It's been a full couple of weeks that I've missed on posts, but I don't think we missed that much. Week 3 was about understanding layouts and how they can affect interaction. The downside to Week 3 and Week 4's modules is that the whole concept of layouts seems like a course in itself. 

  • You can have something linear and super scroll-y if you want to create a story. 
  • You can craft a single no-scroll with ample area for interaction and simple messaging. 
  • Or you can craft a million combinations of something in between. 

Now that I've at least had a chance to look into the concept of layouts, I'm amazed at how designers don't throw themselves into a wall. This task was daunting and far more complex than I anticipated. For my task, I wanted to concept something around SolFox, a small startup I'm advising. While the content and the product content hasn't been fleshed out, the theme is using data to discover a deeper story about your customers, without spending much time in doing so. 

Here are the iterations I came up with. Explanations on rationale below. 

  1. Before I jumped into grid patterns, I wanted to figure out the feel. As you can clearly see, I'm an incredibly gifted illustrator. 3rd graders everywhere love my work ;)  Ok, while learning to draw is somewhere in my set of skills to be gained, for right now, I wanted to draw trees that felt like the design impression I had in mind. Something very direct and object oriented or something more fluid. Since I'm designing for something within the renewable space, I played around with different types of trees to get a better idea for the feel I'm trying to project. I chose a predominantly simple and bold version, but some elements of curve and whimsy.
  2. Once I settled on the 'feel', I wanted to find a grid pattern / landing page that was similar to what I was thinking and used that as a baseline reference for what the final product might look like. That's the 2nd image. 
  3. Next up, fix the spacing & padding. 
  4. Let's add some 'real' content and see how it all flows. 
  5. Adding in most of the relevant text. Adding in a new section that separates the objects from the main hero above the fold. Seemed too jarring to push someone from hero to lots of information. (PS. The dark grey boxes indicate pictures / background images)
  6. More padding and alignment fixes. 


Overall thoughts: WIth some pictures, things might look better. But this might get really busy really quickly. The font choices don't seem ideal for this, but I think the layout is the larger issues. If I need to add space for content, a more simple layout should accommodate for that vs. trying to cram it all in from the beginning. Maybe. 


There's room to explore more, but for next steps I want to start over with something much simpler and cleaner.


Visual Hierarchy - Wk 2 - part 2/3

In this design, we were given a few blocks of text and tasked with creating a visual hierarchy. "Play around with weight, spacing, alignment, contrast (shades of grey), and try to simplify your design as much as possible while still conveying hierarchy. "

For this, I wanted to focus on white space, and how that could bring out contrast without needing to bold everything. I love classic style text and felt it would be more appropriate for a sincere feeling vs. a 'headline' big shouty feel. Playfair offered me a sense of professionalism and whimsy. Lato was clean and easy to read - especially if I had to deal with a much longer post. 

I chose a two column layout (across 16 total columns) to help keep content separate (and I loved the extra white space between the columns). 

When I thought about design goals, I wanted to the user to focus on the copy if they felt it was something they wanted to read about. I kept the summary / highlight text deliberately lightweight so it wouldn't interfere with reading the copy. I didn't realize it, but choosing a lighter font style added enough extra white to accomplish my goals. 

UPDATE: Based on mentor feedback, these are 3 updated variations: TL;DR: 

Removed the 3rd column, shifted the timestamp closer to the cutout and experimented with two 2-column layouts. 

These are my iterations to v1: 

In terms of visual path, my take on this is: 
1: Headline
2: Author
3: Summary
4: Copy
5: Date
6: Carousel arrows

In the copy text, I chose to bold the first two as they would accomplish a few objectives: 
- Pull the eyes toward the copy text after reading through the summary / highlight, add a sense of gravity to the authors first choice of words, and to add enough weight where the eyes wouldn't naturally drift back to the headline. 

I kept the date toward the very bottom as that would allow easy scalability for anyone who wanted to see (quickly) how recently the article was written. Additionally, I wanted to keep the users eyes focused on the post itself, and date/time is an identifier, not actual content. 

I added the shadow box and carousel arrows as it was hard for me to envision this as a static landing page.

Visual Hierarchy - Wk 2 - part 1/3

In this particular assignment, were asked to create a visual hierarchy for what amounts to a twitter clone. My original thought was to look at what others have done for train-of-thought social sites, but this time around I wanted to hold off on exploration. My goal was to build as much as I could given my inspirations, and then if I got stuck I could poke around on other people's ideas. 

The exercise itself was complete within an hour, but it felt wholly incomplete. When I finished this, I couldn't let it go. The name and the tagline was begging for some extra focus. Something about Profound thoughts, 140 characters at a time… The brand Flitter reminded me of flutter and I wanted to make sure the logo was prominent, but didn’t steal focus from the why the user was using the application. It needed to feel ethereal while still showcasing boldness from "Profound thoughts". I figured the if the logo was meant to resemble the user’s thoughts, then the tagline itself was a thought of the logo. I tried two variations of the logo, tagline below (standard) and tagline above. I was surprised how well the tagline above the brand worked!  

Everything got much easier when I anchored myself on the brand logo. This was basically the brand promise and would set the tone for the rest of the user experience. From the logo itself, I created complementary shadows, font weights and styles and grayscale color palette. (We were instructed to avoid mucking with colors and graphics). 

WIth the logo complete, I had to change the rest of the layout to make everything more consistent. I figured Saturday night in the amazing city of SF... I should stay home and work on design. So, I spent the next six to eight hours throwing away a ton of design ideas that I thought would make sense until they didn't. 

Here's what I learned: 

  • Creating patterns or starting with a general pattern in mind greatly simplifies the rest of the design process. 

  • Creating themes and styles saves you a ton of work down the road.
    • I’d love to learn more about symbols, as that seems like it could have been useful to me. In place of symbols, I created one of my objects as I wanted it, and then created a 1x4 grid to ensure appropriate spacing.  

  • Minimal design (in the spirit of least amount of design needed) is tough. But in the end, simplicity puts focus where focus needs to be, and that makes the experience simpler and more accessible to the user. The page still feels a bit weighty to me... I bet I could remove the containers altogether, and use a simpler anchor. 

  • I also came across the question of, this assignment asked for 1 hour of work, and I completely went past that constraint. How do you as a designer know when good is good-enough? 

Creating a Landing Page - Wk 1

I've enrolled in this online design class called DesignLab and things officially kicked off on Jan 8th. Every week, we work with mentors to learn and understand the basics of design. 

Our first task was to create a landing page for a product called SuperGood Foods. We were given a basic sketch file and asked to create something that met the client's needs in terms of messaging and positioning. I'll keep better track of design iterations going forward, but here's the raw, v1, and v2. 

I'm still not feeling close to 100% on this, but I'm not sure what specifically needs to be tampered with. Maybe I'll revisit this design as I get further in the workshops. 

Sketch vs Keynote?

I've always appreciated good design, but I've always wanted to actually design the designs. Much like karaoke, what I envision in my mind isn't exactly what comes out. I've bought numerous sketchbooks, fancy felt pens and a couple drawing tutorials, but I'm usually discouraged by the presence of permanent ink.

Lucky for me, I've recently had a chance to work alongside designers in translating product vision and requirements into high fidelity designs. In the past, I used Keynote to translate ideas to paper. It was the equivalent of cooking, but instead of pots, I have aluminum foil, and instead of a stovetop, I have a piping hot car engine. It's not ideal, but you learn to make do with the tools in front of you. Truthfully, I've created some things that I'm quite proud of, but the process has been inherently inefficient. 


At any rate, I knew there had to be better tools out there, and hopefully, something with an easier learning curve than Illustrator (and without the nagging monthly fee.) That's where Sketch comes in. From what I've learned so far, creating each of these images and dartboards is a breeze - and I have far more control over the individual shapes! To create a similar video though, I'm sure there's a better tool out there that Keynote as well. That'll be another for another time. 


So here I am on Day 2 of learning Sketch. I've seen it in action a number of times, so it's not brand new to me, but there is a ton to learn and mess around with in the spirit of crafting well designed high fidelity wireframes. I know I'm going to get wrapped up in the image editing and creation, and Illustrator is supposed to be more geared toward this task, but for the purposes of keeping myself focused, it's easier to design with big picture objectives (landing pages, weather widgets, etc..) than free form learn-to-vector-draw. 


And Sketch vs. Keynote?  Keynote apparently worked for what I was trying to do, but the application isn't designed for creating wireframes and prototypes. 

Interaction Design Theory

-  ‎  Mihaly Csikszentmihalyi

Mihaly Csikszentmihalyi

Ever work with someone and they ask you to design something ‘fun’? First off, I love designing fun experiences, but then again, I’ve never been asked to design a painful experience - 90s era web pages not withstanding. Today, when presented with that challenge, my first response is always, “help me understand what you mean by fun”. The responses can vary between, “fun = X, Y & Z through design that addresses, 1,2 & 3” and “fun is something that you just know… you know it when you see it.” One our Supreme Court Justices used that last arguement in the 60s, so consistency is nice I guess. The trouble is, people have very different ideas of what constitutes fun. Once you understand their version of fun, understanding why it's fun and how it can be relevant is the next challenge. 

Recently, when tasked to design a financial health application for financial client, I wanted to look deeper into the theory behind what makes something fun. App stores are filled “better life” type apps, but few of them ever remain engaging beyond a couple months. I referenced a few of these apps for great examples of specific best practices, but I couldn’t manage to find an app as compelling as a games I’ve played for months and sometimes years on end. Instead of diving deeper into building a better version of existing habit and lifestyle apps, I wanted to draw more inspiration from game design. That’s when I was reminded of this article.

I’ve attached it here, and the highlights are mine

Below, you'll find the book in its entirety.