Design Influences

Every major product I have designed has had specific influences. Some examples:

Marketo
In 2007, when I was thinking about the Marketo UI I rewatched Minority Report (2002). The UI where Tom Cruise waved his arms in the air was the inspiration for how Smart Lists would drag items from the right to the left. Additionally, IBM Rational Rose, had this filtering system that I liberally paid homage to in the way filters worked.

Engagio
I was introduced to a tool called Lever, which is a recruiting tool. It inspired me to think deeper about Chrome extensions and how they can be a normal part of the user interface. They did a nice job with their extension.

Current Design
I am working on a project now that has strong influences from Slack, who clearly is killing it right now. Additionally, I utilized ideas from Atlassian Confluence. Graphically, I feel myself drawn to the interfaces presented in my current favorite show, Black Mirror. The style they have adopted is quite beautiful. It has a digital paper feel to it.

Sometimes it’s almost a wireframe
Usually monochromatic
Simple, unadorned
Heavy use of icons

When I am influenced by a design, it doesn’t mean it’s a direct copy. It’s inspiration. All good ideas are the combination of other unrelated ideas. The way two people merge to form a baby, two ideas merge to form a new idea.

How much does influence play a part in your work? Maybe it should a bit more?

New DirecTV UI Fail/Learn

As a designer, I always look at the design of things, especially user interfaces. Recently DirecTV updated their user interface in dramatic fashion. It’s very different than before. I could call it an epic fail, except that I hate that term.

It’s an Epic LEARN.

There is a forum thread on AT&T (who now owns DirecTV) about the “upgrade”. Here are some before and after pictures and analysis.

OLD

RECENT

NEW

Readability
Ok, the first thing, what do you notice? It should be the contrast ratio. The blue UI is bright and easy to read. The font size is large and the coloring is designed to stand out. In the dark UI, the font is thin and gray and small. Also, the ON states are much harder to see.

The person who designed the dark UI is 25-39 years old. Any older and they would have learned (first hand) that people over 40 can’t see as well as they used to.  I see this mistake in designers all of the time. People’s eyes degrade over time and there is a real benefit to clarity and contrast. Way too many designers are trying to make it look pretty rather than make it usable. If you are a designer or product manager, please make “readability” a primary requirement.

The Fade Sucks
Second “learning opportunity” is the giant black fade on the bottom of the screen. It’s hard to see in the screenshots, but it is extremely annoying. It flickers and hurts my eyes and more importantly, it degrades my experience of the thing its covering up. In the example above, why in the world would fading out the last item be helpful?  When I am fast forwarding a show I recorded, the fade obscures part of the screen making it harder to understand when to stop forwarding. The fade is poor design. It doesn’t even look pleasing aesthetically.

Information degradation
Related to forwarding a recording, it used to be easy to understand the different states of a recording. There is the current position, but also where the real-time mark is. This is very useful when watching a sporting event a little later than everyone else and you want to understand how much more before you catch up to real-time. In the new UI, its really hard to see that mark.

Performance
The UI (to me) feels slower. It seems slower to boot up and slower to navigate. It used to be snappy and now it feels like each click takes forever. This is such a crucial factor in any interface. Speed is a feature. And right now, DirecTV regressed this feature for me.

What to do?
I am so disappointed in DirecTV, I am actually considering cutting the cord in favor of other streaming options or …(shudder) Comcast. I already get (and am happy with) my internet access from them. I will have to research options for cutting the cord.

Designers beware. If you fuck with the experience in a negative way, you will lose customers. You moved my cheese in a major way and made it worse. You will have to live with the consequences. I hope you learn from this experience.

 

UX Tool: SubForm

These two guys apparently set up a kickstarter to build a new design tool, named SubForm. I just watched a few videos. It’s not available for download yet, but rather than go “stealth” the two founders decided to build tool in broad daylight. I have alot of respect for that. It jives with my personal value of transparency. Of course, it means your competition can see your work, but I have always found that the benefits of being open outweigh the benefits of being secretive.

The videos are interesting. The SubForm folks have really taken responsive CSS strongly into the design tool itself. It is really easy to make components adapt to the screen. I was imagining making a complex grid and could see how you could resize the columns and it would adapt accordingly.

My Figma grid is much more finicky.

Additionally, SubForm does a nice job with component states. These two features are missing from Figma and would be greatly appreciated. The UI seems pretty well thought out considering how many options they are giving people.

However, in looking through the videos, I definitely saw some missing features including Concurrent editing and Prototyping. It looks therefore (imho) that SubForm is really a competitor for Sketch more than a competitor for Invision or Figma or Adobe XD. Having a windows version helps in that battle. This is yet another reason for Sketch to be freaking out.

I definitely like the innovations SubForm is bringing to the table, but the bar for design tools keeps going up and up. Obviously, They are going to need more than 2 guys.  If they don’t add prototyping, it would bar me for my use case.

Also, side note. Why do all design tool videos focus on mobile design? Is it really the majority of design projects?  Am I the only one who makes desktop apps? My prototype has 62 artboards at this point.

I am still waiting for Microsoft to get in this game. What the heck are they waiting for? They built their business on Tools. They could easily buy one of these design tools and add a bunch of resources. Oh well, I think I am fighting the tides on that one.

Anyway, good job SubForm on innovating. Keep it up.

Concurrent / Collaborative Editing

Metcalfe’s law states that the value of a telecommunications network is proportional to the square of the number of connected users of the system. In other words, the more people using something, the more valuable that thing is.

My first few computers in the 1980s were islands, completely isolated from the rest of the world. It wasn’t until Prodigy and CompuServe that I realized there were other people in the world like me. My first modem was a 1200 baud. I think my dad paid $400 for it. Later, I was one of the first 1000 members of America Online which brought usability and graphics into the mix. Mainly, I used AOL to download software and modifications for my Windows 3.1 PC with a 286 chip.

The value of the computer rose exponentially with the access to other people.

Enter the internet. Obviously this blew away anything AOL could muster. I started working from my apartment with my then girlfriend. We had no Ethernet network so we would just throw floppy disks at each other around a large potted plant. We called our system FloppyNet.

During this time, I played online text games called MUDs. The cool thing was that there were other people in the game and you could see their moves as quickly and you saw your own. (“see” = see their words, it had no graphics) However, It was a multiplayer experience and I loved it.

After I started Koko Interactive in 1995 (a web dev company in NYC), we could finally afford a real network, but almost all of our software was still single player. Think Photoshop. One person opens it up and uses it and then outputs the results to a shared drive. My first product, Hotkoko, was an attempt to make a system through the browser where multiple people could work on something together.

Still, the system was limited. You had to refresh the screen to see updates. I wanted the real-time interactivity of the MUD with the GUI of the browser. Some games started popping up that you could play games in this manner like Second Life. However, for work related stuff, it just wasn’t there. Apps like Salesforce would (and still do) require refreshing the browser. Games moved forward, but work apps stayed behind.

It wasn’t until 2006 that I saw Writely and then Google Docs. Right in front of my eyes you could see the other people working. You saw their cursor, you saw their edits. It was a revelation. There is no doubt in my mind that Google Docs made huge inroads based exclusively on this feature. Microsoft had nothing similar and lost some market share and certainly some hearts/minds.

The technical capability in broadband access, computers and browsers has improved enough to allow for truly multiplayer experiences for work related applications. Last year, Figma became the first tool (to my knowledge) that allowed multiple designers to work on a project at the same time. Several people I know, who were die hard Sketch fans have embraced Figma in large part due to this feature. Designers previously thought, “Why would I need to design with another person?” are now embracing this new methodology. Adobe is working on a similar technology, albeit slowly.

I believe Pair Designing will start to gain traction to the levels that Pair Programming has in the last 15 years. Also, I can see more and more work applications adopting concurrent editing. Microsoft has made moves in that direction to make Office collaborative, even in the desktop. However, many other systems are slow to adopt the technology.

The reason for the slow adoption has to do with two factors. First, the technology is still not plug and play. There are some really good JavaScript libraries to get started, but the backend is not bullet proof yet. I have tried 3 different times to make concurrency work and have been stymied by the cost of the technology and the lack of commitment by product leaders.

The more tools which appear with an unfair advantage based on concurrent editing, the more it will become common knowledge that this technology is a key value driver. The more that happens, the more investment into the technology. It might sound like a chicken and egg situation, but I think it will get better at an exponential rate. We have Metcalfe’s law on our side.

We are still in the early days, but this design choice is compelling. It will get more popular over time. It takes some more effort to design, but the results are worth it.

Design Tools 2018 Prediction

I think the market for product designers stink. We have no real loyalty and minimal budget. I would never join a startup that targets me as a customer. However, there are plenty of players out there. Here is my prediction for 2018 in the space:

Adobe
The category king in many ways. Photoshop and Illustrator still dominate worldwide design. However, Silicon Valley and the early adopters have begun the revolt. Adobe has to re-earn loyalty from scratch the way Microsoft has lost Silicon Valley and early adopters as well for the OS.

For product design, Adobe has XD. I tried really hard to make it work, but it’s a a mess. It doesn’t really work, it’s missing features big and small. It seems like it will take them a long time to make this thing work. They are building in slo-motion. In 2018, I think Adobe will continue to slog through, but not make real progress. They will continue the slow and steady decline that will likely take 10 years to finally crater.

Figma
The newest competitor onto the stage, Figma has innovated in several areas. It is browser based and multi-player concurrent editing. It also has native prototyping built in. This formula is the right vision of the future. However, they are babies compared to established players. They need to work on performance, better prototyping and lots of details.

My prediction is that Figma will go viral in 2018 and they will freak out. In other words, success is not always a good thing. I think Figma may be crushed under the usage load and bright lights of a hungry audience. Their community is not scalable, the permissions system is really basic and there are bugs. Figma is my current tool, but I am really afraid for them. This could be a train wreck if they don’t rise to the challenge of success.

Invision
Invision has grown steadily in the past few years based on strong prototyping and commenting. They rely on Sketch and Adobe to power the actual design process. There are competitors in prototyping, but they have largely been niche players. However, Invision must be aware of tools that combine prototyping AND design like Figma and Adobe XD. This is likely sending alarm bells off in Invision.

2018 should be the year that Invision makes a move into the design space. The question will be whether they can execute or not. This is a life and death struggle that they need to win to survive. My prediction is that their tool will not catch fire, mainly because it is difficult to pivot like that and cannibalize your strongest partner (Sketch).

Sketch
The darling of Silicon Valley, this Illustrator look-a-like only works on Mac. I have never used it because I am on Windows, but people who use it will rave nonstop to anyone who will listen. HOWEVER, the lack of native prototyping has forced Sketch into a strong partnership with Invision. So here comes Adobe from one end and Figma on the other. Meanwhile your strongest partner (Invision) is going to start and compete with you. This is a serious flaw for Sketch.

My prediction for Sketch is grim. I think they are fucked. It’s possible they try to get into the prototyping game and compete with Invision (again a strategic dilemma). However, I haven’t heard anything in this vein. Ultimately, I think their lack of cross-platform use will be an Achilles heel.

Summary
This is a real battle for the hearts and minds of product designers world wide. We have little money and complain alot. We use a ton of resources and will switch to a competitor on a moments notice. We suck as customers.

Good Luck.

Product Responsibilities Framework v0.2

Product Responsibilities Framework v0.1

Frameworks for how to organize your product team are sometimes difficult to follow and figure out who does what. Product managers are often given too many job responsibilities and end up being spread too thin.

Lately, I have been thinking about this and wanted to redo my v0.1 framework and add in a few items like Adoption Marketing and Market Demand Research. Plus, I reorganized the structure to make more sense to me.

Take a look.

I believe in open-sourcing this sort of thinking. I don’t have a book, I don’t have a speaking tour. We all live through our jobs and wonder if someone has already thought of a solution to some problem. We all use Google to explore these ideas. It’s up to us to fill Google with useful things.  Here are my thoughts about product development, free of charge.

All I ask in return is never-ending adoration. (too much?)

Anyway, please comment, suggest changes, fork it and share your own. The text is copied here below.

    •  Intelligence
      • Market Definition
        Define a group of people with money and a problem?
      • Competitive Landscape
        What are the current solutions?
      • Opportunity Assessment
        How much money can be made?
      • Market Demand Research
        Define value benchmarks for feature categories
    • Planning
      • Problem Definition
        What are we solving for?
      • Environmental Constraints
        How much time, money and resources do we have?
      • Requirements
        What does the solution need to include?
      • Build, Buy, Partner
        How will we approach the solution?
      • Personas and Use Cases
        Specific cases of specific kinds of people
      • Roadmap Plans
        How will we sequence all of this?
    • Design
      • Solution Definition
        What is the offering?
      • Specification
        Detailed Build plan
      • Usability Testing
        Will the solution actually work in the real world?
    • Communication
      • Offering Definition
        How do we monetize and communicate this solution?
      • Offer Details
        Pricing, packaging, marketing
      • Sales Tools
        Collateral, pitch decks, battle cards
      • Launch Plan
        Training, documentation, support, onboarding
      • Adoption Marketing
        Use marketing techniques to make sure people use your solution
    • Analysis
      • Learning
        How did reality match up with the plan?
      • Usage Analysis
        Who? When? How often?
      • Financial Analysis
        Are we making/saving money as expected? Also win/loss analysis
      • Process Analysis
        Can we improve how we do things?

Enjoy. Let me know if it’s helpful to you.

Google Interprets Material in Many Ways

Material Design isn’t one single thing, even at Google.

I spent about 5 minutes taking some screenshots of different Google properties and their interpretation of Google Material Design. None of these are “pre-material”. Quick looks:

The new Google Calendar is much better than the original mess. However, they are stretching material in new ways. Notice the blue SAVE button on the top right. Also, the fields have background colors and icons on the left.

Google Inbox (to me) is a nice improvement over GMail. Notice the blue SEND button on the bottom left. Form elements are transparent with gray lines.

The new Google Contacts is very material-y. Notice the form elements and the SAVE button at the bottom right with no box around it.

In Maps, Adding a place is pretty lame. This feels pre-material, but notice the slightly different button at the bottom right.

The sign in is a big NEXT button with material form elements.

The edit home address in maps has a SAVE button on the top to the left of a cancel link. No background box here.

The new Google Analytics is still pretty old. Yuck.

Google keep has a DONE link (not SAVE) with no button box on the bottom right.

I could go on and on.  What is the point?

The Point
The point is that there is no such thing as perfect Material Design. If you are using it at all, you must realize that even at Google, they are making it up as they go along. They have rough guidelines, but even things as simple as form elements and SAVE buttons are done in a wide variety of ways. The shadows aren’t consistent, the placements aren’t consistent. Nothing is consistent.

If you use Material at all, you are in danger of looking “off guideline” because Material is not a robust enough system to cover every case.

You need to make your design be different enough to claim it is YOUR style. Don’t just ape the material guidelines. Have a style that is unique to your situation and case. One day Material will seem old and dated. Don’t be a slave to the fashion.