The tech scene (especially in the Bay Area) has reached a point where it’s expanded way past techies. It seems successful people from all different industries are drawn to the promise, reach, and money in tech. Doctors, bankers, artists, and even educators are launching startups and talking about MVPs. It’s definitely exciting and inspires me everyday. But, building a great product is sometimes more of an art than a science, and first time founders make common mistakes. From a company that has worked with more startups than it can count, and has seen its fair share of first time product mistakes, here are some of the most common ones to avoid.
There is plenty of research to show that taking stairs is one of the best ways to work out without taking time out to exercise. Taking the elevator wastes electricity, and the stairs are a great opportunity to improve overall health. With this in mind, we wanted to encourage people to start thinking about using the stairs over elevators.
Though there are lots of great social health tracking apps out there, we wanted to try using wellness as an excuse to build community around a physical location (the Edney building staircase).
This week I returned from a 2-week trip through 4 cities in China. I was born there, spent a fair amount of time there growing up, and I also lived there for a year on a Fulbright fellowship after college. Today, I work as in San Francisco at Carbon Five as a product manager, helping startups and tech companies turn their ideas into software.
Although the purpose of this trip was family-based, and though I’ve been there before, seeing China’s adoption of mobile technology completely blew my mind. The growing differences between U.S. and China mobile applications made my stay pretty difficult in ways I hadn’t experienced or expected. While I missed my American apps, the sophistication of extremely powerful Chinese apps also took me by surprise, with just a handful of many-featured, multi-purpose apps dominating my usage.
Let’s get the bad news out of the way first.
Some of the apps that – straight up – will not work:
Facebook (blocked by the government for not censoring content and providing access to user data after the 2009 Xinjiang riots)
All things Google (including web browsing, gmail, drive and google maps)
What do I mean by not working? It’s not like you’ll see a notification like this:
It’ll look more like this:
Never have I ever upgraded so many Apple native apps out of my Appleware folder as I had to in China. But let’s move on to the good. Continue reading …
About a year ago I worked on my first Android app at Carbon Five. Having been an Apple junkie for years I decided to take a deep dive into the Android world. I switched up my phone to a Moto X (which I’m still sporting) and spent some time reading the Material Design guidelines.
I immediately fell in love with the guidelines because you didn’t need to be a designer to understand them or apply them. The digestible explanations of the fundamentals of design like grid systems, typography and color theory made it simple for our team to understand the behavioral and visual design used by comparing elements of our digital product to physical objects and how they would behave in relation to objects around them.
But, as a designer with a past in branding and advertising I had to step back and ask, If I’m following these guidelines word for word, how will I allow my brand to look and feel like itself rather than Google? I knew I had to answer this question before visually designing for the project I was working on and the best way to do that was find out: how other apps were using material design, who was getting recognition for using it well, and why?
After looking at dozens of apps I started to realize most apps were and still are using the guideline as a coloring book. They are grabbing elements off of the stickersheet that Google provides as a resource and changing up the colors of elements like buttons and cards to match their own brand colors.
However, the ones who are using it well and are getting recognition for it were flexing the rules to leverage their own brand identity. New York Times was awarded for “elegant use of typography” by Google in their Material Design Awards and they were hardly making any use of Roboto. Weather Timeline was recognized for “crafted simplicity” and were using four primary colors as opposed to the prescribed 1 primary and 1 secondary palette. AirBnB was featured on Play Store’s editor’s choice list and completely broke free of burying navigation in the NAV drawer.
3 Android apps and 1 talk at Droidcon DE later, having seen the good and the bad, I’ve created a 5 step process to help make sure we always maintain the identity of the brand while using Material Design.
Step 1: Reset Your Thinking
If you’ve been working on your app for a while, reset your thinking. Try and look at it like you’re on boarding to the product team and ask yourself and your team members these questions:
Who is your product for? Who is your Primary customer?
What’s the primary function? What goal is your customer trying to accomplish?
Why does your customer need your product? Is it addressing a pain point that they have?
How will it be used? In what space/context is your customer using this app?
Knowing what your product communicates to customers and potential customers and what people see, hear and think about your brand is a great way to identify what parts of your brand makeup are core to your visual and verbal identity.
Here at Carbon Five we have devoted project rooms to put up our product artifacts. I recommend you grab a role of tape and put up your findings from this step in your workspace. Surrounding yourself with artifacts that form your knowledge of a product will help engrain your findings in both your team’s understanding of the product and your own.
Step 2: Work With What You’ve Got
As designers on a product team we commonly inherit existing designs whether it’s a marketing site or a logo on a business card. Most often than not we have to incorporate some of these elements. Start this step by creating a minimal style tile of assets your brand may already have like logos, emblems, images, fonts and colors.
Again put up your findings in your workspace and identify what makes you unique when compared with Google’s Material Design Guidelines. You’ll also want to ask if your current visual esthetic communicates the tonality and context you identified in Step 1. If the answer is no, identify the minimum visual changes you can make to your brand to be on equal planes of communication visually and strategically.
Step 3: Rules to Follow
As you approach visual ideation and adding Material Design into the mix consider a few recommended rules to follow:
Respect Ratios The incremental growth that Google uses both within their design grid and typography is a great rule to apply. It helps set up a level of hierarchy in your app that is fundamental to any good design navigation.
Use Shadows Remember Material Design is a physical way of viewing digital objects and physical objects always have shadows.
Pattern is Language Apply as much of the visual pattern as you can because it’s the language your customers’ speak.
Step 4: Minimum Viable Design Customization If there are 2 things you can do quickly to customize your android app from out of the box Material Design it’s this:
Customize your color palette: This is the step everyone seems to be applying.
Customize your font: Customizing your font is the quickest way to making your brand feel more like you and less like Google. Roboto is a system font and it’s not necessary for it to be your font.
Step 5: Sketch it Out Keeping in mind everything you’ve learned about Material Design and your brand gather your team and ideate on paper how you can establish your own look. Sketch out basic UI elements like buttons, icons and cards and see how you can make them unique to your brand. Six up sketching is a great way to ideate this without getting stuck in the visual design phase too early.
Put these up along with your other artifacts and see what feels right for your product. Maybe it’s just as simple as rounded corners don’t match my branding or the system icons are too cute for my brand’s tone of voice. The goal here is to identify what changes/additions you can make to quickly identify your own look and feel.
Ultimately you want to be compliant, but not a copycat. Material Design guidelines may seem prescriptive but they’re really meant to be adapted for your brand. By getting to know your brand you can pick and choose what parts you should apply strategically.
The video of the talk is available above (thanks to the EmpireJS crew for it and being incredible hosts) and the slide deck is available below. Try out demos on our VR demo site c5vr.com with all the code being available through the site’s repository.
Finally, we’re holding a workshop in our Santa Monica office walking through the same concepts for the Android platform, using Google Cardboard and Unity on Wednesday May 20th at 7:00pm PDT. For $15 you get one of the limited spots and your own take-home headset so if you’re interested, please register here!
Tests help me write better apps. Writing tests informs my interface designs, expresses some of my intentions, and guards against regressions. As applications grow so do the number of tests I’m running as a regular part of my development workflow. If I’m not careful those growing test suites can slow down, become inconsistent, and eventually lose the trust of the development team. Fortunately, test driving software design is not a new idea and we can look to other languages and frameworks with good testing practices for inspiration on how to avoid pitfalls we encounter when writing tests.
I ran into a couple of cases on recent projects where I wrote unreliable iOS XCTests. Let’s take a look at what went wrong, what a better test might look like, and what tools we, as iOS developers, might be missing.
I have used Objection in several iOS projects as a lightweight Dependency Injection framework. If you’re not familiar with it, take a look. One pain point has been how to inject dependencies for UIViewControllers that are in storyboards. Your controllers are likely instantiated through segues or by calling instantiateViewControllerWithIdentifier on a storyboard instance. Wouldn’t it be nice to have Objection inject the declared dependencies from its context on these controllers? There is a simple way to accomplish this – subclass UIStoryboard and override instantiateViewControllerWithIdentifier. This technique is based on a stackoverflow post for how another DI framework, Typhoon, can be integrated with storyboards.
Chris Egy Rose and Patty Chang came to Carbon Five in spring of 2012 with an exciting new concept around facilitating human interaction and connected learning. The idea was to allow young people to connect with their friends, classmates and families through face-to-face interactions and a shared canvas. The interactive canvas overlay allows participants to use simple tools to create and draw with one another. The initial ten-week engagement happily turned into a rewarding long term partnership that shepherded the product and team through many iterations over many months, resulting in an outstanding, feature rich set of products.
Scoot & Doodle’s Scoodle Jam is featured in the Education section of the app store.
Here at Carbon Five, we consider testing the software we write to be crucial to the long term stability and velocity of our projects. We also value developer productivity. The iOS simulator is a very valuable tool for testing and development. Recently a major upgrade of a library prevented an iOS project from running and testing in the iOS simulator. We had a problem. A little bit of refactoring and a new CocoaPods podspec got things moving again.
Carbon Five is a full service software consultancy that helps startups and established organizations design, build, and ship awesome products. If you have a project you’d like us to take a look at, or are interested in joining our team, please let us know.