Apple released WatchKit last week, and our iOS team has already begun developing a few Watch apps. It’s still too early to know if we’ll look back at this week and call it a seminal one the way we did when Apple released its original iOS kit to developers in 2008. But we think there’s a good chance. Especially given that Morgan Stanley analyst, Katy Huberty, said in a recent note to investors that 30 million Apple Watches in the first year might be a “conservative” number.

So what do you need to know?

More functionality than expected

Many developers expected only basic functionality with the release of WatchKit, predicting complete functionality to arrive next summer when version 2.0 comes out. Apple, however, has pleasantly surprised us by including actionable notifications to controls, glances, Handoff, and more. We’ll explain what all this means below, but the bottom line is that we have much more control over the Apple Watch than we originally thought we would.

The basic architecture

Think of the Watch as a custom “view” of the information on the iPhone, with some basic ability to interact. The iPhone contains the code that actually makes everything happen, including reacting to taps, changing values, etc. The brilliance is that everything happens in the background via Bluetooth — so from a development perspective, we are not developing to two devices, but instead to another screen from the core device.

So, for this first version, we should really not be thinking of the Watch being able to run apps, but instead just extensions of existing iPhone apps.  We expect true independent Watch apps to arrive summer of 2015.

New approach to layout

Apple’s come up with a completely different approach to layout, which we think is brilliant given the small screen size.  You basically use “groups” that are either vertical, horizontal or nested.  Then you can apply some styling like background color, margins, etc.

Notifications & Glances

Our position continues to be that…

Continue Reading Article

A Note on NDAs – while an Apple developer account with NDA is required to download Xcode betas and actually use WatchKit, all of the reference documentation is publicly available at this link.  The programming guide is similarly available publicly here. Since all of this information is public, we don’t have to worry about NDA trouble.

From a developer point of view, WatchKit provides a very bare-bones framework for building watch apps; the kit contains a grand total of 15 classes, including 11 subclasses of WKInterfaceObject  which represent UI elements like buttons and labels. Each of these, in turn, presents an extraordinarily simple interface consisting of two to five “write-only” setFoo:  methods with no way to obtain current state. By far the most complicated WatchKit object, WKinterfaceController  (the rough equivalent of UIViewController ) has 27 methods and properties; contrast this with UIViewController’s 90! There are…

Continue Reading Article

The hamburger icon has become a frequently used icon in mobile apps and websites ever since Facebook released it in September of 2013 as a part of their A/B tests. Today, it has many other names: list icon, navigation menu, triple bar, stack menu, basement menu and the list goes on…

cassie-post_hamburger-icon

The icon represents a hidden side menu users’ cannot see from an app’s main view. When users tap on the icon, however, a menu slides open to reveal the app’s main navigation.

 

There is a great deal of criticism surrounding this three-horizontal-line icon. Some UX designers argue that users don’t intuitively know what the icon represents, or how it works. Another argument against the usage of the icon is that  hiding an app’s main navigation leads to lower discoverability as users cannot see the navigation options available to them consistently. Users must tap the icon and dive into the app’s side menu in order to access any other content in the app. Once they close the side menu, they are left with no contextual cues letting them know where they are in the app, or the choices available to them as the menu is now off the screen. This also ties into the fact that side menus are not easily glancable, requiring users to take action (e.g. tap the icon) to open the menu and see the options and notifications they might have.

But with each piece of criticism comes a respected justification for using the icon and side menu. One could easily protest the fact that users don’t intuitively understand the icon and say that like most patterns, the hamburger icon will become better understood as time passes.  Because it’s a “new” icon, there might need to be a period of learning and user acceptance before users become completely comfortable with this icon and pattern.

A user’s understanding of what the icon represents also depends on…

Continue Reading Article

Recent advancements from Google are making it easy and more exciting to implement new interactions into apps. With the release of their latest OS (5.0 Lollipop) and updated design guidelines, it’s clear one of the main principles Google is focusing on is motion:

“Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.”  Google Design Guidelines

Basically, they’re encouraging us as designers to think more intentionally about using motion to create the kind of transitions and small interaction details that delight users, but also serve a functional purpose.

Using After Effects

Motion is a critical component of the user experience that’s often overlooked by UX designers. When it is thought about, it’s often difficult for designers to communicate how and when different design components should move, and how they should interact with other elements. Sure, some default animations are simple to explain, but more complex and unique interactions are not always easy to present and detail in static comps, which brings me to this point:

Every UX designer should know how to use After Effects.

You don’t need to know all the ins and outs like you do with Photoshop or Illustrator, but you should have a basic understanding of After Effects so you can easily and articulately communicate the meaning and purpose behind interactions to clients, as well as the developers you work with.

Common Complaints

Some of you may be reading this thinking, “But Jesse, learning After Effects is too hard” or “it takes too much time.” While these statements might be true, they only apply if you’re really diving into the more powerful features that After Effects provides.

Learning After Effects only takes watching a couple short video tutorials to help get you started. Lynda.com has some great After Effects training tutorials, as does Video Copilot (though they tend to be a bit more…

Continue Reading Article

s-hq-img1We’re pleased to announce that WillowTree, along with Macerich, and HGTV have teamed up to bring a visit to Santa into the mobile age this holiday season. Santa HQ, an interactive North Pole adventure, is an immersive and cutting-edge experience for children and families.

Macerich worked with WillowTree to revamp a traditional holiday experience by giving visitors insight into the world of Santa in a way that it’s never been done before.

“Our goal at Macerich is to enhance the customer experience in every way possible, and we seek out exceptional partners who share our passion and want to deliver exciting new opportunities that guests can’t find anywhere else,” said Ken Volk, Senior Vice President and Chief Marketing Officer, Macerich.

The attraction places Santa’s headquarters directly inside the mall, and instead of a conventional area for photo opportunities with Santa, families can tour through Santa’s workshop using unique and high-tech applications. WillowTree created Android apps built around two interactive experiences for children and parents alike to enjoy. Visitors who download the mobile applications or use one of the provided tablets on location at Santa HQ have a portal to experience magical displays that creatively marry the physical world with technology.

s-hq-img2

The Naughty or Nice O’Meter, for example, interactively scans parents and children to determine if they’ve landed on Santa’s naughty or nice list this year. After entering their names in the app, guests can watch two large screens dynamically scroll through Santa’s list, making it seem as if names were streaming directly from the North Pole.

s-hq-img4

“Taking advantage of Android’s flexibility also allowed us to incorporate Santa HQ light and sound shows into the Naughty or Nice O’Meter application, creating an even more engaging experience for families that you simply can’t get anywhere else,” said Derek Brameyer, WillowTree’s Lead Android Developer…

Continue Reading Article

Lollipop (Android 5.0) is rolling out this week.  This is the most important UX update in years (similar in impact to Apple’s iOS 7 update). Here are five critical implications for your applications and mobile strategy:

1. OS Fragmentation

The first thing to understand is how an Android OS rollout is a different beast from an iOS rollout. Apple basically pushes everyone who has supported devices to download the new OS, resulting in incredibly rapid adoption of the new OS.  Mixpanel is reporting that iOS 8 has almost 60% market share (chart) as of early Nov, less than a month after launch. Google on the other hand leaves it to each manufacturer to roll out the OS and to decide which devices to target. Google’s own Nexus line will of course be quick with users of current models receiving notifications this week to upgrade, but other manufacturers may be far behind. Kit Kat, Android’s last update, went live in September 2013, and over a year later, has just crossed 50% market share. JellyBean, the previous Android OS and now over 2 years old, still commands over 40% of the market (chart). It all adds up to a messy OS upgrade picture creating complexity for app developers where we have to support various legacy OSes for an extended period of time.

To Do:

We recommend updating your apps for Lollipop. Accompanying its release is Google’s new ‘Material Design’ standard which gives Android apps a more consistent look and feel, and contributes to smoother overall Android experience for users. While slow rolling a new Lollipop version might make sense to some extent depending on your existing app(s), the heavy, well-off app users in most companies’ target demo are always the first to migrate to a new OS, and they naturally gravitate toward the newest and best-designed apps.

2. New Look and Feel – ‘Material Design’

Google is creating clear differentiation vs. Apple on…

Continue Reading Article

WillowTree Apps announced today that a new report by Forrester Research Inc. provides guidance on choosing a mobile enterprise app project partner and recognizes WillowTree as one of the companies with a “laser focus on mobile projects and skilled workforce,” making them “a viable option for application development and delivery executives.”

In the September 2014 Forrester report titled, “Market Overview: Enterprise Mobile Application Services Providers,” Forrester recognizes WillowTree as one of the service providers that “foster innovation and develops unique approaches to mobile…[in the] enterprise service market.”

According to Forrester, the demand for enterprise mobile apps is increasing as companies recognize that employees need real-time information to win, serve, and retain customers. In addition, emerging technologies create new opportunities for brands to improve efficiency and engagement with customers.

This report states, “Enterprise mobile app projects are not like the enterprise tech management projects of the past. They require user-centric design, a high-velocity approach to development, and working toward an end state that is in flux.”

At WillowTree, we believe that we stand out in our approach to building enterprise applications and that we have the “special blend of skills” mentioned in Forrester’s report to set us apart from other mobile application development companies today. Specializing in field-sales solutions, mobile platforms engineering, and media delivery, WillowTree understands the nuances of designing intuitive user experiences and actively incorporates that knowledge into the enterprise apps we engineer. Our user-centric design approach is further complimented by a deep understanding of backend integration with legacy systems, resulting in fast and reliable apps with exceptional user experiences.

“We’re delighted to be included in this Forrester report,” said Tobias Dengel, CEO of WillowTree. “In the coming years we’ll continue to see large enterprises embrace the importance of digital transformation, as companies leverage the new architecture of mobile to drive revenues and cut costs. The potential is incredible — most of our enterprise mobile projects realize a 10x-20x ROI goal. Mobile design and development…

Continue Reading Article

Palette is a new API for Android that allows you to extract and make use of colors in an image. It also has a support library in order for older versions of Android to make use of Palette.

Google has made theming based on the colors in an image incredibly easy. All you need is an image bitmap and the Palette library, and you’re good to go. Google wants Android apps to have more colors in order to follow the Material Design guidelines, and Palette provides developers with a way to grab colors that will work well with images in our apps.

Palette gives you the ability to extract specific types of colors from your image or simply extract a variable number of basic colors. The specific types of colors include Vibrant, Vibrant Dark, Vibrant Muted, Muted, Muted Dark, and Muted Light. We also get two different text colors that will work nicely with each of the extracted colors.

To get started, add the Palette dependency to your build.gradle file if your targeted version of Android is lower than 21.

compile 'com.android.support:palette-v7:21.0.+'

There are two ways to actually create a Palette and extract the colors from an image:

  • Synchronously
  • Asynchronously

Synchronous methods:

public Palette generate(Bitmap image)

Pass only the image you want to extract the colors from as a parameter. This uses a default number of 15 colors, which should be enough to generate colors that correspond to the special set.

Continue Reading Article

At WillowTree, we ascribe a design process that is ‘fit for purpose’ of the product we’re building and the team for whom we’re building it. Instead of forcing 100% Agile (with a capital A) our design process is adaptable. It suits both project and partner needs by applying the right tools from our agile toolkit at the right times. Because our engagements can start everywhere from green field, just after some level of discovery, or picking up where another team left off — we have developed design tools that work for all of the above.

A User Story Map is one of our tools and works very well for teams who are familiar with agile processes, but less familiar when it comes to scoping a product or a new set of product features.

Using a backlog of user stories, this can be a tremendously valuable tool to fill in gaps or uncertainties in backlogs and ensure teams understand and can visualize the scope at-hand. User Story Maps typically fit in at the beginning of a design sprint when teams have a high-level idea of the scope, but need a way to understand what features will comprise the release(s) better.

Before you get started

To create a user story map, you’ll need a backlog of user stories (http://www.mariaemerson.com/user-stories/). These can be categorized by persona, business line, functionality, or a host of other categorizations that make sense for your project. They should have a priority associated with them, but you’ll probably find that most lean toward ‘high’ or ‘very high.’ That’s totally fine, but flagging the ‘must haves’ will be useful for the mapping exercise. It’s also helpful to consider which stories belong to epics.

For the purposes of the map itself, you can use whatever you want for documentation. The map could be a wall of sticky notes or index cards (I recommend you start with one of these as they are fast…

Continue Reading Article

Microchip Technology Inc. (NASDAQ: MCHP), a leading provider of microcontroller, mixed-signal, analog and Flash-IP solutions, today announced that WillowTree is its first App Developer Specialist to join the Microchip world-class Design Partner Network. Microchip’s new App Developer Specialist category, which designates an exclusive focus on Web and native-app creation, builds on their deep roster of traditional embedded hardware and software development design partners. WillowTree is an award-winning and experienced iOS, Android™ and Mobile Web app developer that enables Microchip’s customers to focus on the core of their Internet of Things designs and expedite development cycles, while ensuring an excellent mobile-interface experience for their users. Additionally, WillowTree wrote the first mobile app for Microchip’s Wi-Fi®Client Module Development Kit 1, which is newly available from theApple® App StoreSM and enables customers to quickly get up and running with the kit’s cloud-based demo. WillowTree can also modify this cloud-demo app to suit a broad range of customer IoT design requirements.

Microchip has long served the designers of connected embedded products, as well as the fast-growing Internet of Things market, with its variety of wireless solutions, sensors and eXtreme Low Power PIC®microcontrollers. Rather than trying to replicate the refined interfaces that users have come to expect from their mobile devices, many embedded designers would rather tap into that installed infrastructure to create apps for monitoring and control in real time and from any location. In combination with cloud-based connectivity, mobile apps are a natural way for users to interface with things such as wearable fitness monitors, security systems, home automation, garage-door openers and industrial controls. But that first experience with an app can make or break a product. Embedded designers can reduce the risk, complexity and time of app creation by employing WillowTree to do it for them.

“We are excited to have WillowTree Apps join our design partner ecosystem,” said Cheri Keller, Microchip’s senior worldwide design partner manager. “Their innovative, best-in-class Web and mobile app designers…

Continue Reading Article

In recent weeks we’ve talked a lot about Monkeypod, our cloud-based API design and virtualization tool that produces beautiful, living API documentation and allows teams of developers to collaborate concurrently to design APIs. Today we’re diving a little deeper and discussing Monkeypuzzle.

What does Monkeypuzzle do? 

Monkeypuzzle uses the Monkeypod API design to create a virtual API that serves as a nice starting point for developing client side solutions, and API integrations. Out of the box, it creates Json responses based on the Monkeypod models that are populated with random data.

But random data is not always ideal.

Continue Reading Article

Apple announced yesterday:

Starting February 1, 2015, new iOS apps uploaded to the App Store must include 64-bit support and be built with the iOS 8 SDK, included in Xcode 6 or later. To enable 64-bit in your project, we recommend using the default Xcode build setting of “Standard architectures” to build a single binary with both 32-bit and 64-bit code.

This means any projects in process need to switch to iOS 8 and 64-bit if they are going to launch after Feb 1. More importantly, all updates to old apps after that date will not be accepted unless the apps are updated.

To Do: Check immediately what iOS and what bit support (64 or 32) all you current public apps include, and begin making update plans for any legacy applications to ensure you don’t end up with an update you cannot submit.

As always, please do not hesitate to contact us if we can be of assistance.

Continue Reading Article