Massive project, many obstacles

When we first kicked off a massive, technical project for a client, I’ll admit, I was nervous. With a fast and fixed deadline, lots of moving parts, in-depth collaboration with many external vendors, and lots of unknowns, this was a project that seemed doomed from the start. So in order to help keep track of the dizzying amount of work ahead of us, we created a Kanban board.

Visualizing the big picture

The Kanban board is a tool to help visualize the work for any project.  It provides a level of transparency that allows anyone, even someone unfamiliar with the project, to understand the status of a project at a single glance. 

It starts with story cards.  A story card (a sticky note on the board) is essentially a description of a task that needs to be completed.  Each developer picks a card from the “Open Work” bucket, writes their initials on it, and moves it to “In-progress” column.  When the task is complete, they move the sticky to the “Ready for QA” bucket, grab a new task, and repeat the process.  QA then tests each task in the “Ready for QA” bucket, and either moves the card to “Complete” if there are no issues, or sends it back to “In-progress” if bugs are found.

Our approach

When we first started the project, we were waiting on quite a bit of work from external vendors, and there simply wasn’t time to wait for this work to be delivered if we wanted to meet our deadline.  By placing tasks that were waiting on vendors into the “Blocked” category, we were able to reduce confusion over what work was available and clearly see how much work was “on hold.”  As more vendor work was delivered, those blocked tasks were moved to the “Open Work” bucket, and team members could start working on those tasks without needing to wait for status updates. 

Each morning, the team gathered around the Kanban board for a 15 minute, stand-up meeting that involved each team member answering three key questions about their progress:

1. What did you work on yesterday?
2. What are you working on today?
3. What is blocking your progress?

As team members answered these questions, they moved the stickies from column to column, giving an up-to-date picture of the overall status of the project.

One of the major benefits of this system was that it helped visualize bottlenecks – are a majority of tasks blocked?  Is QA overwhelmed with work?  Does the amount of open work look achievable with the time remaining?  Any outsider could view the board and instantly understand the status and health of the project without having to interrupt a single team member. 

Results

In the end, the board was an overwhelming success.  The team all agreed that the board made collaboration easier by clearly identifying which tasks were available to work on, who was working on each task, and how much of the project remained.  It helped us hit our deadline in spite of the setbacks and challenges we dealt with along the way.  The Kanban board is one tool that we will certainly try to use again in Springbox projects moving forward.

Last month I attended the Android Developer Conference in San Francisco. Being an Android enthusiast, I felt right at home. During the 3-day conference, I was overwhelmed by how many devices are already running Android, and how many future devices will be—from phones to tablets to new devices called “wearables.” It seems there is no end to the future of Android development.

During the conference, I attended several classes and presentations that gave me the latest and greatest there was to offer in the developer realm of Android. Here are some of the highlights:

Android Fundamentals: What I Wish I Knew When I Started! [PDF]

Chris Haseman, author of Android Essentials and Lead Android Developer at Tumblr, gave a presentation that laid out some major Android Fundamentals. He discussed the Main Thread, the life line of the Android system, and the importance of developers limiting their interactions with it. As he put it, “Hang out with it as you would an ex-boyfriend or ex-girlfriend, which is to say, as little as humanly possible.” Haseman also highlighted the importance of testing apps as bugs are inevitable, regardless of the developer.

Pragmatic Android Layouts [PDF]

Kirill Grouchnikov, Software Engineer at Google, spoke about utilizing Android layouts to effectively display content. He emphasized that the layout system is a key factor in helping users navigate applications and presenting content in a clear, consistent way. He recommended that developers stop and sketch their design to get a visual before beginning development. His main advice? “Use screen estate to effectively display your content.” Responsive design is essential in achieving this goal now that new android devices have updated how users will view content based upon screen size.

Testing Sucks – But It Doesn’t Have To [PDF]

Apkudo’s CTO, Nicholas FritzRoy-Dale, gave a talk on the importance of testing apps. As he stated, “Not all devices just work,” and testing is a pivotal point in any android developer’s career. With all of the android devices on the market, how are you going to test them all? Apkudo is a testing company that offers testing on 289 different phones and sends back data on how many devices an app ran on and where errors occurred. In a study, Apkudo took one application and installed it on all 289 phones—54% of the time it wouldn’t install and 64% of the time it crashed. This goes to show you how important testing is.

See PDFs of all the conference presentations

In addition to functionality, copy, spelling, grammar, and imagery, quality assurance testers can make a huge difference in the success of a web project by focusing on usability.    

Here are some tips for incorporating usability into your QA process:

Start with a clear user flow

Starting with a clear user flow helps to identify any pitfalls the production team may encounter while building a complicated system. Walk through them during the project’s early phases: if you are familiar with a project from beginning to end, there's a good chance you will catch inconsistencies.

Check search functionality and pagination

Paring down search results through the use of filtering and refining should be intuitive and directly relate to the content being searched. If a keyword search produces no results, instead of presenting the user with a blank page, it’s helpful to display copy letting the user know, "Hey we didn't find what you are looking for" or prompt the user to take another action such as an advanced search.

Once you have ensured the search functionality is clear, it’s time to focus on pagination. Pagination labels should reflect the result listing. Results can be listed alpha/numeric order, date, or relevancy, and the pagination should reflect the order. (I recently came across a search results listing in alpha order and the pagination read newer vs. older when the labels should have been “Next” / “Previous” or numbered.)

Pay attention to layout

Page layout should be clean and navigation hierarchy clearly established. Body content is balanced with the imagery and hyperlinks are easily identified. In the case of paragraph headings, is it obvious which heading is associated to which paragraph? If not, spacing may need to be adjusted.

Test form design and validation

Users should be able to complete forms easily and correctly. Error messaging should be presented to the user when required, such as an empty or invalid entry of a field. Many forms out on the web contain no indication denoting a required field and only after clicking “Submit” are you prompted to correct any mistakes.

Know your hyperlinks

Not only should hyperlinks be clearly identified, the user should have a clear idea of where they are going when they click it. Is the message of the hyperlink clearly conveying where it will take the user? Hyperlinks should take you directly to the material you are referencing. If not done properly, hyperlinks will frustrate the user and ultimately lose them.

Closely examine Flash applications

Flash applications rich in complexity (think training modules or videos) require close examination of user experience throughout the entire application. Is the text displayed long enough for the user to read and understand? Is there a static version of the Flash image that will display for users on iPhones and other non-Flash devices? Heavy embedded Flash applications also require you to evaluate performance issues, such as load time. 

Account for a global audience

If you are working with a global site, start by evaluating the copy for US slang and terminology. Pay close attention to form fields for city, state and zip which will not apply to areas outside of the US. If there are plans to localize the site for global audiences, will the copy and design be able to accommodate different text sizes in order to translate to other languages?

Evaluate training materials

Make sure all the steps are included and provide clear instructions to the user for how to accomplish their goals.  Illustrations outlining the training path make all the difference in the world.  Make sure to verify that potential pitfalls in the training path are cleared and that there are instructions for how to quickly resolve any issues that may arise for a new end user.  

When the Microsoft Advertising team asked Springbox to evaluate the feasibility of a concept for a client’s new campaign, it sounded like an interesting challenge. T-Mobile wanted to steam video from three concerts into four environments: Facebook, Xbox, Windows Live Messenger, and a mobile site. And they wanted to stream them in real time. We determined that live streaming was possible, if not particularly common, for the mobile site, Messenger, and Facebook, but at that time, not possible in Xbox. After consulting on the design of the experiences, we were tasked with building the Facebook tab, and other agency partners tackled Messenger and the mobile site. Xbox would get the same features, but with prerecorded video after the fact.

Working closely with Austin-based production company Giant Pictures, who had originated the concept for Microsoft, we identified the only two vendors at the time that were authorized to live stream video within the Facebook environment, and partnered with Ustream.tv to handle the streaming. We set about creating the Flash-based experience for T-Mobile’s new Facebook tab for the campaign, now dubbed  Live Rising. We built out features like the band bios, video players, Facebook Events for each concert, and fan interaction features including commenting, Like and Share buttons all over the place, and entry forms to win a trip to watch the making of a video by one of the concert artists: Ellie Goulding, Cold War Kids, or Rye Rye. With the Ellie concert up first, we were ready to rock when the bottom dropped out from under us, two weeks from launch.

In February and March, a series of updates to Facebook dramatically altered how applications are embedded within Facebook Pages, specifically affecting Page Tabs like our new Live Rising one. Tabs moved from a top navigation structure within the Page to a left navigation structure, altering the size of the Tab’s content area. Around the same time, Facebook added support of secure-socket layers (SSL) to improve security, and changed the sharing features used in applications, deprecating the Share button. Big changes for our design, and a lot of rework for the Rich Media guys, but we stayed on schedule.

The bigger challenge was the iFrame problem. Up until that point, much of our Facebook work, at least for Tabs, had been done on Facebook’s own infrastructure, using FBML. We would build them in Facebook’s environment, and they would run off of Facebook’s servers. The new rules announced in February required all Facebook applications, including the kind of stuff we were building for Live Rising, to be run in an iFrame, meaning the application would be built on, and run from, an external hosting environment that we would have to setup and maintain. Now, we are not a hosting company, but we know some good ones. We started calling them.

We’d get one identified, and then the new SSL requirements would stop us. We’d find another good one, but the potential load from the concerts (and all those T-Mobile fans) would shift our approach to a cloud-based solution. We ended up with our friends at OpSource, a cloud hosting solution with great support. With all of the Facebook changes, we had to rework how the commenting and Like buttons worked, and helped Ustream tweak how the video players and streams worked. But a few hours before the Ellie Goulding show, we were all set to live stream the concert into Facebook. And it worked beautifully. We found out later that the Microsoft team happened to be at a conference with their T-Mobile clients, and they all watched it together.

Our team got invited to the second show, Cold War Kids, here in Austin. It was a lot of fun to watch the guys from Giant Pictures running around shooting the show, and watching the stream on our phones from the audience. The concerts continued to gain viewers, and T-Mobile added a fourth show, Robyn, to keep the success rolling.

I recently attended Future of Web Apps (FOWA) in Las Vegas put on by Carsonified, a company that specializes in training and conferences to connect web designers and developers. Their other events include Future of Web Design, Chirp and Think Vitamin Online Conferences. I would highly recommend this conference to anybody interested in exploring the world of web apps. This conference was eye-opening, enlightening, educational and inspiring.

Session topics ranged from the cloud, geolocation, APIs, designing your business, getting in touch with angel investors, HTML5, big data, big databases and social networks. Here are a handful of sessions I attended that I won’t forget.

Add Location to Your Next Application

This was a full-day workshop where Schuyler Erle of SimpleGeo walked us through everything a developer needs to know to add a custom geo-location installation into your website. We were showed custom plug-ins, a free map-tile service and several places to get free data to use for geo-location applications. This was an amazing workshop that revealed new thinking and technologies I hadn’t thought to investigate on my own. By the end of the workshop, we learned how to create our own map tile server, which was way beyond what I expected to get out of this workshop.

What Happens When Business Meets the Real-Time Web

Tony Haile provided insight into the importance of real-time data and how to use it. Haile is the General Manager for Chartbeat, which is owned by Betaworks. He walked us through how other companies are using real-time data to help them provide users with better information and more clicks for the company. He also provided insight into how you should use real-time data if you currently do not.

LBS: Location-Based Salad

This was a short — but great — session. We were introduced to everything it takes to create a proper system to determine a user’s location. I learned about a few services, like Quova, that enables you to extend the current functionality of your location-based apps to provide users with useful information. This was a perfect discussion for anyone thinking about incorporating location-based data into  a website or web app.

HOWTO: Securing Your Ecosystem

This was a very informative talk given by Raffi Krikorian of Twitter. He went into different problems Twitter has run into over the years and the decisions they made to enhance the security of Twitter users. He focused on the future of web app security, what to expect from OAuth2, and how it is going to be improve security for everyone on the internet. It was very interesting to see how large companies like Twitter handle security issues for massive applications.

A Web of Apps

Todd Simpson, from Mozilla, gave an in-depth talk about where Mozilla thinks the world of web apps is headed. Mozilla has uncovered some big pitfalls surrounding web apps and solutions that make using web apps easier. For instance, they are moving forward with the idea that users do not need to register for every new app they use. The thinking behind the idea is that there should be a universal place to register for web apps and a centralized means of user authentication. This place is called browserid.org. Mozilla has also produced a way for web apps to communicate with one another even if the apps weren’t built by the same people. Features such as these will increase the functionality and the usefulness of web apps and could very well make them more desirable than desktop apps.