The AgilityFeat blog

At AgilityFeat we are more than just designers and coders. We are also thought leaders. Our team has spoken at numerous conferences around the US, Europe, and Latin America. We are leading the way when it comes to applying agile methodologies to nearshore software development in Latin America. Our blog is where we share those lessons with you, as well as news about what our team is up to.

Authors
Arin cole David Ford
Categories
Startups User Group Reports conferences Customer Development lean Lean Startup Silicon Valley startups Agile Events agile agile2012 Continuous Deployment Startup News AskADeveloper BizDev Travels published scrum speaking UX Nearshore Agile Costa Rica nearshore AgilityCasts DareToBeLean boston news training webinar Lean Startup Conf ATDD product owner retrospective Projects ADP West CI TDD wishlisting testing Verify/ATI coaching Real Time real time Real Time Messaging webrtc big data hadoop hbase ruby ruby on rails HTML 5 NodeJS Design design mobile Real Time UX San Francisco fixed price education distributed estimation xp kanban Agile Richmond AgileCville body shops rapid feedback Standup Minimum Viable Product MVP Pivot Split Testing Startup leanDC marketing Lean DC ALNDC APLNDC remote standup games Philly Charlottesville Coding Across America AgileDC points humor hours range XP2011 burndown Uncategorized LeanCville HereCostaRica rails railsconf entrepreneur responsive web design mobile application tablet InnovateVirginia AgileIowa ACCUS StickyMinds TechWell development product development QANews offshore Outsource lean startup machine outsource MoDevEast html5 Company Culture Pro Tips UVA entreprenuer database events usability product code
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
Year
2014 2013 2012 2011 2010

Free Agile Training

Posted By:

If you’re looking for a couple hours of agile video to watch, a way to help you go to sleep at night, or just from free agile training, then I present to you the following videos. Our development team at AgilityFeat is spread out around Cent...

Arin Sime

Free Agile Training

If you’re looking for a couple hours of agile video to watch, a way to help you go to sleep at night, or just from free agile training, then I present to you the following videos.

Our development team at AgilityFeat is spread out around Central America. When we bring on a new team member, we don’t always have the luxury of training them on how we do things in-person. But we also know that agile methods are still gaining ground in Latin America, and implementations of “agile” vary widely. A lot of times a development company here says they are agile purely for marketing purposes. For that matter, sometimes clients don’t even realize what they are asking for when they look to hire agile development teams!

If you want to use these videos as a substitute for sending someone to a expensive Certified Scrum Master course, then be my guest. But be aware that you’re missing out on more than a certificate suitable for framing. The huge value of any agile training with an experienced practitioner is that you get to ask lots of questions, and you can learn more about how best to apply agile methods to your specific circumstances.

While no training or video can substitute for the experience of working on an agile team, I hope you’ll find these videos helpful in explaining the basic concepts, and giving you a starting point. It’s around 2.5 hours of total video, so fix a cup of coffee and enjoy!

#1 Agile Principles

Explains the basic concepts behind agile methods, and why they are better than traditional “waterfall” methods.

Video 1: Agile Principles from Arin Sime on Vimeo.

#2 Scrum Overview

An overview of the Scrum process. Each step of the process will be described in more depth in the subsequent videos.

Video 2: Scrum Intro from Arin Sime on Vimeo.

#3 Building a Backlog

Covers best practices for writing user stories and creating a Backlog, which is your running list of features to be developed.

Video 3: Building A Backlog from Arin Sime on Vimeo.

#4 Agile Estimation

Explains why you are bad as estimation (yes, I am talking to you), and how agile methods attempt to combat the inherent problems with software estimation.

Video 4: Agile Estimation from Arin Sime on Vimeo.

#5 Planning Your Iteration

The Scrum planning process, and how to use Velocity to measure when enough is enough.

Video 5: Planning Your Iteration from Arin Sime on Vimeo.

#6 Daily Standups

How to lead efficient daily standups in a Scrum team. Example remote standup on Skype is included.

Video 6: Daily Scrum from Arin Sime on Vimeo.

#7 Demos

The Do’s and Don’ts of agile demos.

Video 7: Demos from Arin Sime on Vimeo.

#8 Retrospectives

Often overlooked by agile teams, retrospectives are a crucial way to keep strong communication within your team and make sure they are focused on continuous improvement.

Video 8: Retrospectives from Arin Sime on Vimeo.

Your Final Exam

You’re still awake? Great. Agile processes are really much more engaging then my mellow voice in those videos might lead you to believe.

We really value the short iterations and frequent customer feedback of agile processes. We work hard to integrate iterative design and UX processes without compromising agile principles. Therefore it’s important that we give our new team members some idea of what agile is all about before they start working with our clients. This gives everyone a base level of knowledge before they start on projects.

I hope these videos give you a little insight into agile processes, if you have any questions about how we do distributed development at AgilityFeat, drop me a line at Arin@AgilityFeat.com.



Are you ready for the real-time web?

Our team has deep expertise in UX, design and development for the Real Time web.

Don't fall behind on the latest technologies! Sign up now for monthly updates from our blog and our RealTimeWeekly.com newsletter which has the best content from across the web on real-time development with frameworks like WebRTC and WebSockets.

Oh yeah, we have a book too!

Web RTC and Designing Realtime Experiences

Posted By:

We are excited to announce that three members of the AgilityFeat Team were recently guests on The Web Platform Podcast. Mariana Lopez, Allan Naranjo and Arin Sime spent some time with the Web Platform Podcast crew discussing a broad range of topic...

Arin Sime

Web RTC and Designing Realtime Experiences

agilityfeat, web rtcWe are excited to announce that three members of the AgilityFeat Team were recently guests on The Web Platform Podcast. Mariana Lopez, Allan Naranjo and Arin Sime spent some time with the Web Platform Podcast crew discussing a broad range of topics related to Real Time Communications and Web RTC.

The discussion begins with an excellent overview of what Web RTC is followed by thoughts on the potential that Web RTC represents for developing experiences on the web. The podcast further discusses issues of security, privacy and user experience when building applications with Web RTC. Graceful degradation and offline experiences are covered as well.

If you are a developer, designer, entrepreneur and just someone interested in learning more about Real Time Communications and specifically, Web RTC, this podcast is for you. Check it out here.



Are you ready for the real-time web?

Our team has deep expertise in UX, design and development for the Real Time web.

Don't fall behind on the latest technologies! Sign up now for monthly updates from our blog and our RealTimeWeekly.com newsletter which has the best content from across the web on real-time development with frameworks like WebRTC and WebSockets.

Oh yeah, we have a book too!

Using publish/subscribe to synchronize presenta...

Posted By:

A common use case for real-time messaging between web clients is to keep something in synch. For example, in the Sensei tool that we built for one of our clients, each remote participant in an agile retrospective should be able to see the votes an...

Arin Sime

Using publish/subscribe to synchronize presentation slides

A common use case for real-time messaging between web clients is to keep something in synch. For example, in the Sensei tool that we built for one of our clients, each remote participant in an agile retrospective should be able to see the votes and comments made by other remote participants, and a moderator needs to be able to control the flow the of the meeting and advance the entire distributed group through each step of a process at the same time.

Another example that we’ve built out is for a webinar tool. We built a simple webinar tool that incorporates video and audio chat using WebRTC, and made that the basis of an e-book we’ve written for “Building Real-Time Web Applications using Node.js, Pub/Sub networks, and WebRTC.”

One of the features of a webinar tool is that when the Presenter changes the slide being presented, that same slide (in this case an image) needs to be displayed in the browser of all the participants.

The following is a sample chapter from our e-book that walks you through the code for how we keep the slides in synch in this webinar tool. You can see the complete project available freely on GitHub, and of course you can pick up a copy of the book in order to get our full explanation of how to build your own real-time applications.

What you’re building

The following video gives you a quick tour of what you’re going to build in this chapter.

SynchronizedSlidesExample from Arin Sime on Vimeo.


Chapter 8: Coding Synchronized Slides

Code Samples

Throughout our book, each chapter has code prepped if you want to start with that chapter and follow along, or if you want to see an example of our completed code at the end of the chapter. You certainly don’t have to do it the way we did, but it’s a helpful guide if you’re having any problems. By the way, this is a node application, so you’ll need to already have node installed and some familiarity with it to jump into this code. If you’re not familiar with Node, our book does provide a brief intro to Node and Express so you can still use the book without prior experience. Assuming you have node installed, then you can start the app by running “node server” in the root directory.

Prerequisite code for this chapter:

https://github.com/agilityfeat/webinar-tool/tree/designsetup

Completed code for this chapter:

https://github.com/agilityfeat/webinar-tool/tree/syncsetup

Introduction

In this chapter we are going to focus on synchronizing the slides between presenters and attendees. This means that when the presenter presses the Next or Previous buttons, or the number of a particular slide they want to display, then that slide should change on the presenter’s screen and all attendees’ screens using real-time messaging.

To see the full code for this chapter, check out this branch of the webinar-tool application:

https://github.com/agilityfeat/webinar-tool/tree/syncsetup

Setting up the Presenter “login”

The first thing that we need to do is determine if a webinar user is the presenter or an attendee. Only presenters will have the power to change slides. Only attendees have the power to post comments.

If you’re going to take the code from this book and make a proper webinar tool, then you should put in some real security with actual authentication. But I’ve always been a big fan of not bothering with the mundane things like logins until you have to, because logins are not that valuable by themselves.

Since this book is not about user authentication models and I don’t want to waste your time with that, we’re going to do a cheap trick to determine if someone is a presenter or not.

After this chapter, if you are an attendee, you access the application locally this way:

http://localhost:3000/

If you are a presenter, you should access it this way:

http://localhost:3000/presenter

That’s it! It’s not exactly secure, but it’s good enough for our learning purposes in this book. We’re just setting this up in the routes for our application:

In the routes/routes.ejs file, we’ve just added an additional route for ‘/presenter’ underneath the root URL route. Both will render the index.ejs file.

Then in our webrtc.agility.js file (this is the primary javascript file we’re putting the code for our book in), we’ve added a variable “isPresenter” to the agility_webrtc definition, and then in the init() method:

Now we can access the isPresenter variable anywhere in the layout to determine which view we should show the current user, and what functionality they can use.

Changing the responsive layout based on Presenter/Attendee view

If you recall what the webinar tool looked like after the design chapter, you were seeing only the presenter’s view. The next/previous buttons should not be visible to attendees, and the circle icons for each slide should only have a click event for the presenter. In the templates.html file, this is handled just by checking that isPresenter variable:

In addition to the slide controls, we should also go ahead and change the rest of the template for the upcoming chapters where we are dealing with attendee voting and comments. Those controls should only be visible to attendees, not to presenters. That is also handled in the templates.html file with our isPresenter variable:

This is what the Attendee’s view should look like now:

SlideSynchAttendeeView

Attendee view after handling for isPresenter

Note that the “Rate Current Slide” and comment box controls are visible to the attendees, but the Previous/Next buttons are now hidden.

For the presenter, the bottom of the screen should now look like:

SlideSynchPresenterView

Bottom part of the Presenter’s view after isPresenter variable implemented

Note that the Previous/Next buttons are back, and along the bottom we have some placeholder html for the eventual voting result displays.

Changing slides

Now that the controls are all placed on the page properly for our presenter, it’s time to hook them up to some code to change the slides. In our webrtc.agility.js file, we have added two functions to a setBinds method.

The first method will bind a function to the “onclick” event of any control with the class “.control” attached to it. If you look closely at the layout from our templates.html file above, you’ll see that only the Previous and Next buttons have the css class control attached to them:

Here is the first method for binding the Previous and Next buttons:

Notice that this function sets an is_next variable based on whether or not the button that generated the “onclick” event also has the “nextSlide” class attached to it. In this way we can use one event handler for both buttons and just determine the command based on attach CSS classes. If you wanted to add more buttons to the UI for some reason, this allows you to do that only in the templates file without additional code bindings needed (although we wouldn’t recommend filling the screen with extra controls!).

The rest of the method just determines the right number for the next slide, and then sets the image carousel to use that number slide.

There is one more function we want to add to the setBinds method. In addition to the Previous and Next buttons, we have also put a set of numbered circles on the layout inbetween the two buttons. Each numbered circle represents a slide in the presentation deck (more on where those are stored later).

To make those circles bind to a function for navigating directly to that slide, we also add this function to the setBinds method:

The code is simpler in this case because we know exactly what number slide we want to navigate to.

Synchronizing the slides across clients

There’s one last thing we haven’t explained yet about the code above, but you probably already noticed it. When you hit any of the slide navigation controls, the function ends with a method like this:

In either function, we are going to publish a message to our channel with a type of “SLIDE” to indicate a slide change. We have stored the slide number that we want everyone to switch to in a variable named “slide_to”, and we’ll pass that value on the channel as well.

Back up in the init() function of our webrtc.agility.js file, we’ve added a statement to subscribe to the pubnub channel:

Now whenever a message is published to the channel, everyone subscribed will receive a callback to the onChannelListMessage method. This callback method is defined in our agility_webrtc variable as:

We’ve setup this method to use a switch statement, where each case will be one of the possible message.type’s that we implement in our application. For now, we are only implementing “SLIDE” in order to change the slides. If a message with any other type is published, it will be ignored.

That SLIDE message will then call a method changeSlide(slide_number), which we have implemented right above the onChannelListMessage() in our code.

This final method for changing the slides is pretty straightforward. The options value that you pass in is the slide number to change to, and so the carousel holding the presentation images is set to switch to that slide number. We’ll go to slide number one if no options are passed in.

We’ll also change the value of an active_index variable, and use that at the bottom to add a CSS class called “active” to the appropriate circled number underneath the slides, so that we can show which one is the currently selected slide.

Testing the slide synchronization

At this point, your code to change the slides is complete. If you run “node server” and navigate back to the application at localhost:3000 in two different browsers. Use the http://localhost:3000/presenter/ URL in one browser, and in the other, just use the base URL http://localhost:3000/. If you are opening both in a Chrome browser, then open one URL in “Incognito Mode” so that you have two distinct sessions.

In the presenter view, you should see the navigation controls. Press any of the controls and you should see the slides change in the presenter’s browser. We have put three simple placeholder slides in the application, each with the same number in the slide graphic so you can easily see the changes.

As the presenter is changing slides, you should also see the same slide changed in the regular attendee browser window, with only a momentary delay. Notice again that the attendee has no navigation controls, and that the circled numbers showing which slide you are on are not clickable for attendees.

If you’re having any trouble getting this to work, you’ll want to fix that before moving on to subsequent chapters. These are the problem areas to look out for:

Browser type – Although PubNub supports any recent modern browser, our code is optimized for Chrome and Firefox. Try one of those if you have problems with other browsers.

PubNub keys – Remember that you need to update our sample code with your own publish and subscribe keys from PubNub. The variables containing those keys are located near the top of the webrtc.agility.js file. Just search on “your pub key” and you’ll find the credentials declaration. Remember that anytime you refresh your code from one of our branches in this project, you’ll need to put your keys back in so keep them handy.

Javascript errors – If you’re still having trouble, open the Javascript console in your browser (In Chrome, this is accessed by View->Developer->Javascript Console). You need to have a working internet connections, or you will see errors loading the pubnub.js file, and that the PUBNUB variable is not declared.

You can get a copy of our code for this chapter on the following branch, it’s always a good idea to compare your implementation to that or to just use our code as a base for future chapters:
https://github.com/agilityfeat/webinar-tool/tree/syncsetup

There’s one last fun thing I recommend you do now. Remember how the presenter on a mobile device has their own special layout with Previous and Next buttons? If you have your code deployed on a publicly accessible URL or IP Address, then you can bring up the presenter’s view on your iPhone. Pressing the Previous and Next buttons from your phone will now send the same slide synchronization messages to all connected users.

SynchSlides_PresenterMobileView

Presenter’s mobile view with navigation controls

I like to do that when using this tool at conferences. From my laptop, I bring up the presenter view and project it on a big screen. Attendees at the talk are looking at the slides from their mobile devices on an attendee view. I then use my iPhone from the Presenter’s URL and I can show them how pressing the Next button on my phone will advance the slide on the big screen and on their mobile devices. It’s a cheap way to get ooh’s and ahh’s!

Adding your own slides to the tool

It’s all working now, right! Excellent. But those three boring slides we put in our only good for testing the application. They don’t make for a very good webinar.

We’ve kept this application intentionally simple, and the presentation is just a series of numbered images stored in the public/images/presentation folder. If you want to change the slides, just update or add to those images.

SlideSynchPresentationImages

After putting in the appropriate image files, you also need to make the application aware of them. Look near the top of the webrtc.agility.js file for this declaration of the slide_pics:

Just add/remove images to the slide_pics and you will be all set! We’re using png’s that resize well, so you if you’re going to use this webinar tool for anything more than fun, make sure you pay attention to how the presentation images you use look on browsers, mobile devices, and maybe even projectors.

That’s it for synchronizing slides! If you’ve got some time on your hands and want to enhance what we’ve done in this chapter, consider allowing presenters to upload their own images, change the order of them, or allow the display of powerpoint files natively.

Pick up your own copy of this e-book

Now that you know how to do the basics of synchronizing the slides in our webinar tool, you probably have everything you need to build a simple real-time messaging application. If you interested in seeing more examples like this, or you want to go the next step and learn how we incorporated video and audio chat into our webinar tool, then make sure to check out our e-book “Building Real-Time Web Applications using Node.js, Pub/Sub networks, and WebRTC.” And to keep up with the best posts about real-time technologies across the web, please join us every week at RealTimeWeekly.com.



Are you ready for the real-time web?

Our team has deep expertise in UX, design and development for the Real Time web.

Don't fall behind on the latest technologies! Sign up now for monthly updates from our blog and our RealTimeWeekly.com newsletter which has the best content from across the web on real-time development with frameworks like WebRTC and WebSockets.

Oh yeah, we have a book too!

Share:

Design for your customers first so you don’t pe...

Posted By:

This week I read a good TechCrunch article about the importance of putting your customers first. While this sounds obvious, author Ron Miller is making a crucial point when he says to put your customer “at the center of everything you do, or you c...

Arin Sime

Design for your customers first so you don’t perish

This week I read a good TechCrunch article about the importance of putting your customers first. While this sounds obvious, author Ron Miller is making a crucial point when he says to put your customer “at the center of everything you do, or you could be risking the very survival of your business.”

He continues that because of social media, customers don’t have to pay attention to your branding or your marketing material anymore. They make buying decisions based on sometimes what their friends recommend, and they are quick to ditch your online business for another one if they don’t have a positive experience on your site. As Miller points out, “you simply don’t control the message anymore.”

Miller makes the case that you must “Put Your Customers First Or Perish, Seriously.” I made a little play on that title by saying you must Design for your customers first, or perish.

I think that distinction is important because often we design for internal customers, or ourselves. Other times we design for the loudest external customers. But we may not take the time to interview average people about their experiences on our website. Those are the people who will leave our site, never complete their purchase, never return for a second purchase, or even worse, talk bad about your business on social media.

This is a challenge that we have taken seriously at AgilityFeat. Earlier this year we spent a lot of time interviewing usability experts on how they conduct remote usability interviews. You can read about what we learned here. We learned that they face several challenges, including how they select users and get them into a remote usability testing session. People told us the process for remote usability testing has to be easy enough that they can hold remote usability tests more frequently.

Building easier remote usability sessions

We decided to tackle this problem head on and build a better solution, based on one of our favorite technologies: WebRTC. This allows for peer-to-peer video/audio/data channels directly in the browser. What that means for remote usability testing is that you can setup a video chat with a live customer on your website, and they don’t need to do anything else (other than be in Chrome or a WebRTC enabled browser). They don’t even have to leave your website.

This works great for remote usability testing, which is basically a “think aloud” session. We have blogged about “think alouds” in the past, and the basic idea is that you give the user a task to complete on the website, and then you watch them try to complete it. You aren’t leading them on very much (or at all), because you want to see them try to do it themselves. Seeing their video and watching them move their cursor on the screen is very helpful in this situation. You can see non-verbal clues like frowns and furrowed brows if they can’t find the button they are looking for.

We’re working on a remote usability tool that enables this experience. It’s in early alpha right now, but we’re looking for a few additional test customers to help try it on their websites.

Here’s a few hints of how the tool works.

Identify users on your site

The usability researcher logs into a dashboard in our tool, and they see a simple dashboard listing users on their website right now, showing live users in WebRTC enabled browsers.

Screen Shot 2014-08-07 at 10.28.33 AM

The researcher can pick any of those visits and invite them to a conversation. A popup appears on the live website with a photo or video on it inviting them to a conversation. Something similar to this (all text/photo/video in this are customizable):

Screen Shot 2014-07-29 at 10.57.32 AM

Joining a usability session

After accepting the invitation and allowing the browser access to their camera and microphone, the participant sees a popup with the researcher’s video in it. The researcher gives the site visitor a task to complete, and probably promises them some gift for participating (a gift card or discount on their order for example).

The researcher can also see the video of the site visitor, hear their voice, and see their desktop so they can watch them navigate the site.

Screen Shot 2014-08-07 at 11.29.19 AM

In Testing now…

Are you interested in using an early trial version of this tool in your website? Please contact me at Arin@AgilityFeat.com and I would be happy to speak with you to see if you’re a good candidate for early betas in the coming months.

As Ron Miller writes in the TechCrunch article, it’s not enough to have a good product. He relates a story in the article about a company that made a good product, but he had bad experiences signing up on the website and later returning a product. To win over your customers, you have to provide a solid customer experience throughout – offline and online. Remote usability testing is one way you can make sure that your online experience has been designed for the customer.



Are you ready for the real-time web?

Our team has deep expertise in UX, design and development for the Real Time web.

Don't fall behind on the latest technologies! Sign up now for monthly updates from our blog and our RealTimeWeekly.com newsletter which has the best content from across the web on real-time development with frameworks like WebRTC and WebSockets.

Oh yeah, we have a book too!

Why I’ve moved to Costa Rica

Posted By:

About three years ago, David Alfaro and I launched on a great adventure together, building AgilityFeat into an international boutique software development firm. I was living in Virginia in the US, and David built up our operations in Costa Rica. N...

Arin Sime

Why I’ve moved to Costa Rica

About three years ago, David Alfaro and I launched on a great adventure together, building AgilityFeat into an international boutique software development firm. I was living in Virginia in the US, and David built up our operations in Costa Rica. Now we also have team members in Boston, Nicaragua, and Honduras, and last week I moved to Costa Rica.

When I talk to potential customers about AgilityFeat, they sometimes ask why we are based primarily in Costa Rica. The short answer is excellent technical and design skills, strong English skills, easy travel to our customers in North America, a relatively stable political and economic system, and time zone equality with the United States (which enables us to follow a very agile and collaborative process with our customers).

EscazuFarmersMarket

The farmers’ market in Escazu, near where I live

Now the question my friends and colleagues are asking me is “why are you moving to Costa Rica?” It’s asked naturally with a touch of jealously, since Costa Rica is a beautiful tropical country with a variety of great beaches, mountains, volcanoes, rainforests, and diverse wildlife. There’s no doubt why people would want to visit here. But as the head of a technology company with a customer base primarily in the US, why would I want to work from Costa Rica? Here’s why…

#1: To be closer to our team

For the last several years I have travelled regularly to Costa Rica to work with our team in person, for team building events, and to bring clients here. In addition, we’ve brought many of our team members to the US to work with clients too. It’s well worth the travel expense, and it makes us stronger as a team.

But while living in the US, I missed out on the more spontaneous get-togethers. I’m looking forward to spending more time in person with the amazing team we’ve built.

ProjectKickoffTeamResized

Part of a project kickoff team from last week with a new AgilityFeat client

#2: To focus on side projects

Not all of those get-togethers will be over beer. Alright … most will. But we will be talking business too, especially several ideas that we are working on to create profitable “side businesses” for AgilityFeat to supplement the income we make from our core services business, and to hone our own entrepreneurial skills.

This is something we’ve talked about several times in the last few years, and failed to apply the proper focus or incentives to make it actually happen. Earlier this year we took a more disciplined and lean approach, and we are making good headway on several promising ideas. Not all of them will survive the profitability test, but we are taking a solid approach to figuring out which ones will.

I am looking forward to being here more because I see this as a very important strategic goal for AgilityFeat and me personally. Being here in person will help me to keep those projects moving forward and to work closely and efficiently with our team members working on them.

#3: To improve my sales tactics

AgilityFeat COO Ford Englander and I have spent a lot of time over the last year or so fine-tuning our marketing and sales practices at AgilityFeat. While we still have a lot to learn, we are definitely getting better. So why in the world would I take the risk of moving further away from our potential customers?

Other than the personal risk of driving a car on the streets of San Jose (you have to see it here to believe it sometimes), moving away from our customers is the biggest risk of this move for me. But I am approaching it from a “theory of constraints” perspective.

If I cannot meet potential customers by attending meetups in person, how can I sell the quality of our team and work remotely? While I still will regularly travel to the US to speak at conferences and meet customers, being here means I have to do a better job of keeping the AgilityFeat website up to date (note to self: still needs some work), and utilizing other educational channels we offer like RealTimeWeekly.com and our book at RealTimeBook.co.

I am looking forward to the challenge of improving my sales tactics from a distance. By constraining the sales channels available to me, it forces me to become better at remote sales.

#4: To become fluent in Spanish

A big personal goal for me is to become fluent in Spanish. I have spent a lot of time the last couple of years on Skype with an excellent teacher from Ecuador (happy to share her name if you want lessons too). But there is only so much Spanish I can learn from a distance. Already in the last couple of weeks I have picked up more Costa Rican slang and become better at hearing, understanding, and yes, guessing, conversational Latin American Spanish.

Our team at AgilityFeat all speaks English. Costa Rica is a country heavily dependent on tourism, and so English is a very common second language here, especially in the tourist or expat areas. So the truth is I could get by without improving my Spanish beyond it’s current levels.

But I don’t want to. I started this adventure in Costa Rica several years ago in part because I wanted to expose myself to other cultures and the global economy, and a big part of the “success metric” for that is to become bilingual.



A silly video in Spanish by a Costa Rican about how when they give directions to a Gringo using Costa Rican slang, he has no idea what they mean

#5: For the family experience of a lifetime

It’s not just about giving myself that global experience though. I have my family here with me, and my wife Lauren and I are very excited to see them grow personally from this experience too.

BoysReadyForSchoolWe have enrolled our sons in a bilingual school, and they are already making friends there and starting to learn Spanish. I fully expect they will reach fluency before I do, and the experiences we are giving them here will help them to thrive in a world that is only becoming more globalized.

Every friend I’ve ever had who lived abroad as a child has told me what an amazing life-changing experience it was for them. No matter the difficulties they also had at times, it was an experience they would never trade because it has made them into more successful and well-rounded adults.

I am thrilled to be able to give that opportunity for personal growth to our children.


It’s not all coconuts and palm trees, but it’s worth it

Life here in Costa Rica is not all “Pura Vida.” There are traffic jams, good internet providers are hard to find, buying cars is a pain, private schools are expensive, many things are actually more expensive than the US, and I am suffering from “Amazon Prime Withdrawal” because I have to actually go to stores for things I want now. No more 2-day shipping, or shipping of any kind for that matter.

I don’t live on the beach, it’s not sunny every day, and I have not drunk nearly as many tropical fruit smoothies as I should have by now.

But I live an hour from the Pacific and 2 hours from the Caribbean. I can see a volcano from my bedroom window. We can go ziplining among howler monkeys on the weekends, or whitewater rafting in a rainforest. And the pineapples here are absolutely amazing. Life here is great.

We are all part of an amazing adventure here at AgilityFeat, and as always, we invite our clients to be part of it too. Every day that I spend here I become a better tour guide for you – so come visit us in Costa Rica!



Are you ready for the real-time web?

Our team has deep expertise in UX, design and development for the Real Time web.

Don't fall behind on the latest technologies! Sign up now for monthly updates from our blog and our RealTimeWeekly.com newsletter which has the best content from across the web on real-time development with frameworks like WebRTC and WebSockets.

Oh yeah, we have a book too!

UX lessons learned from a real-time 2nd screen ...

Posted By:

The dust has settled from the World Cup, and I have slowly weaned myself off the TV and back into family and work life. It was a very exciting World Cup to watch this year, and as a fan of underdog teams like the USA and Costa Rica, it was particu...

Arin Sime

UX lessons learned from a real-time 2nd screen experience

bryan_ruiz_CRThe dust has settled from the World Cup, and I have slowly weaned myself off the TV and back into family and work life. It was a very exciting World Cup to watch this year, and as a fan of underdog teams like the USA and Costa Rica, it was particularly emotional for me.

Building a 2nd screen experience for any live event should help viewers capture that emotion and share it with others. To play around with that concept, I built a simple World Cup screen chat application and used it with friends during a couple of the matches. Here is what I learned about real-time interaction design as both a developer and a user…

#1 It’s hard to type and watch

The point of the application I built was to focus users on predicting the next goal to be scored, and by whom. The secondary goal was simply a text-based chat application for users to share the experience with friends.

NextGoalBetaUse

The problem with a text based application in this scenario is that it’s hard to type your thoughts in real-time. A WebRTC based video or audio chat application would have been better to capture the emotion. I was typing messages from a phone, which is time consuming when you’re also trying to keep up with an intense game.

#2 Time sensitive actions require a simple UI

The main motivation behind this app was to allow fans to predict when a goal is about to be scored. From a technical perspective, this is no problem. I was using PubNub for the messaging backend, which is going to send the messages in less than a second which is plenty fast enough for human consumption.

There is a problem in the UX though – as a fan watching the game, I will often only have a couple seconds from anticipating a goal is about to be scored, to then be the first of my friends in the chat room to predict it. In those brief seconds, I must move my attention from the TV (with some fear of missing the actual goal), to my device, and then press the button to predict a goal.

That means the UI must be super simple. I can take my time to type a message, but that is not fast enough for predicting a goal.

In this app, I originally over complicated it. I wanted users to predict specifically who will score a goal. That meant choosing a player – but choosing a player by their name alone or from a drop down would be too time consuming.

I settled on trying a picture based system where you could pick the player by their face, and with jersey numbers in the picture ideally (though I was somewhat limited by the sample images I found on the internet). My theory was this would be faster, and also easier for those who don’t know all the players by name.

Screen Shot 2014-06-23 at 6.47.20 PM

When you click on a face, it sends a text message to the chat room saying you are predicting that player will score. Nice and fast, no typing necessary, just a click.

NextGoalPlayerViews

The problem with my initial solution was I had all the players for a team visible. This made it hard to scroll down to the right player and find them. In the second game I used the app, I limited the images to only those 11 players on the field at the time, and I also sorted it so that attacking players (those most likely to score) were at the top of the list. Sorry goalkeepers, you got bottom ranking on this view.

This change makes the app more complex (I had to keep track of who was on the field, and in my test app, I was doing that manually and then updating the images), but it was much simpler for the users. But frankly, it still takes a lot of time to pick a specific player who is about to score. It might be better in a future version to allow users to just predict a goal by the team. If you’re gamifying the app, then you just give extra points if they pick the right player who was involved.

#3 The micro-interactions matter

A second screen experience is all about real-time, and as both of the above learnings demonstrate, speed is of the essence. This means all the little details matter a lot.

In the first version of the app I made, after you clicked on a player’s photo to predict their score, you were scrolled back to the top of the chat log. Making the user scroll back down is of course unacceptable, so that needed to change to make the app usable.

Screen Shot 2014-06-23 at 6.21.44 PM

Messaging on the buttons should be clear, concise, and fun. I made the “goal” button spell out “Goooaaaallll!!!” like the announcers might shout it out – just to help encourage the emotion of the moment.

#4 Second screen is not for everyone

BrazilSadFanOur COO Ford Englander is a passionate fan of all sports. Ford was a good sport and used the NextGoal app with me some, but he had to drop it during the most intense parts of the USA games. For him, it could become a distraction.

That could be improved with better interaction design (for the record, our UX lead Mariana Lopez would probably like you to know she did *not* have a hand in how I laid out this app). But regardless, for some people a second screen social app is just not appealing. Don’t force them into it.

You may want to consider integration with other social media in order to not only bring others into your app, but also to help users interact with friends who were not interested in joining in the second screen experience itself.

For example, in this NextGoal app, it could be cool to allow a goal prediction to also be posted to Facebook or Twitter automatically. Or if I “won” the prediction of an actual goal, then I should be given an option to share that and brag to others outside the application.

Keep in mind though, that interaction with those other platforms must be seamless during time critical actions. It’s a bad idea to ask users to to preview and edit a tweet in order to complete making a prediction. Remember, that goal is about to be scored and I don’t want to waste any time!


Enhance, not distract

The theme of any second screen experience must be to enhance the experience of the primary content, not distract from it. That’s why it’s referred to as your second screen!



Are you ready for the real-time web?

Our team has deep expertise in UX, design and development for the Real Time web.

Don't fall behind on the latest technologies! Sign up now for monthly updates from our blog and our RealTimeWeekly.com newsletter which has the best content from across the web on real-time development with frameworks like WebRTC and WebSockets.

Oh yeah, we have a book too!

HTML5DevConf Video: 6 Months with WebRTC

Posted By:

Last May I had the pleasure of presenting at the HTML5DevConf in San Francisco. With me was David Alfaro, AgilityFeat co-founder, and Mariana Lopez, our UX lead. Also joining us remotely was Allan Naranjo, a software engineer at AgilityFeat and th...

Arin Sime

HTML5DevConf Video: 6 Months with WebRTC

Last May I had the pleasure of presenting at the HTML5DevConf in San Francisco. With me was David Alfaro, AgilityFeat co-founder, and Mariana Lopez, our UX lead. Also joining us remotely was Allan Naranjo, a software engineer at AgilityFeat and the development brains behind the application we presented.

Our presentation focused on what we had learned during our first six months with WebRTC, during which we built a simple webinar tool based on WebRTC using the PubNub api for both publish/subscribe messaging in the app as well as WebRTC calls. We built this tool as an experiment on our part to become familiar with the technology, and used it as the basis for a talk that we took not only to San Francisco, but also Washington DC, Atlanta, North Carolina, Virginia, and New York City. We also used this webinar tool as the basis of our e-book on Building Real-Time applications with WebRTC.

The HTML5 conference has now posted the video of our talk online, so you can watch it below. We had a lot of great questions from the audience, and we really enjoyed the conversations it generated. One of the interesting conversations this lead to after our talk was about the value of hosted STUN/TURN servers for WebRTC, using a service like XirSys. We’ve been using XirSys on another WebRTC project since that time and we can definitely vouch for it’s value.

What other questions do you have that are not covered in our talk? Did this create any ideas for your business? I’d love to hear about them – please contact me at Arin@AgilityFeat.com.



Are you ready for the real-time web?

Our team has deep expertise in UX, design and development for the Real Time web.

Don't fall behind on the latest technologies! Sign up now for monthly updates from our blog and our RealTimeWeekly.com newsletter which has the best content from across the web on real-time development with frameworks like WebRTC and WebSockets.

Oh yeah, we have a book too!

Toying with a World Cup second screen experience

Posted By:

This is a very stressful month for me, because I’m trying to balance work, family time, and World Cup viewing time. As a fan of the United States and Costa Rica national teams, it’s also been a pretty wild World Cup to watch. Costa Ric...

Arin Sime

Toying with a World Cup second screen experience

This is a very stressful month for me, because I’m trying to balance work, family time, and World Cup viewing time. As a fan of the United States and Costa Rica national teams, it’s also been a pretty wild World Cup to watch.

JermaineJones

Costa Rica has advanced as I write this against all expectations with wins over Uruguay and Italy, and the USA still has a good chance of advancing even after the heartbreaking last minute goal by Portugal last night.

In order to combine work and the World Cup, I’ve been toying with ideas for a “2nd screen experience” application while watching soccer/football games. Last week I threw together a simple application to allow chat users to predict who will score the next goal. With a a few friends, we tested it out last night.

Here’s what the application looks like “in action”…

NextGoalBetaUse

You have a pretty standard chat room in a responsive design, and you can pick any screen name you want right now. This is a quick and dirty hack to test the concept, so there’s no authentication or anything fancy yet.

On the bottom of the screen are images of the complete rosters of the US and Portugal teams. Click on any of the players’ faces, and you will send a message to the chat room under your name announcing that you are predicting that player is about to score.

Screen Shot 2014-06-23 at 6.47.20 PM

When someone does score, you could just type in a message to that effect, or you could press the handy “GOOOAAAALLLL!!!” button that I added. Nothing fancy, but it works.

Screen Shot 2014-06-23 at 6.21.44 PM

We tested this app for a while in the US/Portugal match yesterday and learned a few quick lessons about the UX of the app that I’ll share later this week. For now, I’ll focus on the implementation details and the value of doing this type of quick and dirty Minimum Viable Product.

This app took about 6 hours of work total. The first thing I did was find a chat room example to start with. I chose this example from the PubNub blog. I picked this one for two reasons:

1) I am already familiar with how PubNub works and have an account with them, so I knew this would be easy to work with and the messaging infrastructure would scale well if I get a lot of unexpected traffic.

2) Their example uses the jquery mobile framework, and so I knew that I could hack on top of their example without involving any other design or UX talent from AgilityFeat. We have plenty of that talent, and if we continue with this app I’m sure that Mariana and Daniel will want to redesign it, but this allowed me to build it quickly over the course of a couple evenings without involving anyone else, and yet I still get a decent mobile experience (very important for a second screen experience since most people are watching the game with their tablet or phone in hand, not a laptop).

Here is what it looked like in the mobile view … you would need to scroll down more to see all the players (click on the image to see full size).

NextGoalMobileView

The pubnub example is just a straightforward chat room, which I then integrated into a bare bones NodeJS and Express app and deployed on Heroku.

The first coding I did was to hardcode in the player images that I found online from their team websites. Putting the images and player names in the code was actually the most time consuming part. I would definitely want to find an API or some other source for this information if I were trying to follow multiple soccer leagues over a full season, but hardcoding it was sufficient for me to get a simple MVP up and running to test the idea.

NextGoalPlayerViews

I used a non-existent CSS class definition on each player image, and then did a class selector to apply one event handler for clicking on any player’s name. When an image is clicked on and the event fired, all it does now is put a message in the chat room indicating the player you are predicting will win. My concept was that choosing players during the heat of the game would be easiest by looking at their faces, ideally with the player name and jersey number on the image too. This allowed me to test that idea during the flow of a real game (that I actually cared about) and see how I could do finding players in real-time.

Notice the class “playerPrediction” added to the player image below … this was added to all the images.

And here’s the OnClick event that is fired for all images with that class attached:

That’s basically it! You can see the source code up on GitHub if you like. To see the rest of the code for sending the chat messages with PubNub, check out the main javascript file. We’ll play with it during a couple more matches this week, but I can already imagine all the things I would want to do with this if we make it into a real 2nd Screen Experience or real-time dashboard application.

Would you like to try it out? You can see the app yourself in all its current crude-MVP glory here:

http://next-goal.agilityfeat.com/

For now, the most important thing to note is that through the existing PubNub example, a few code hacks, hardcoding player data, and my willingness to show an unpolished application to friends to solicit feedback, I have already learned a lot. For only an investment of a few hours of my time over a few evenings. Now that’s the right way to build your first Minimum Viable Product!



Are you ready for the real-time web?

Our team has deep expertise in UX, design and development for the Real Time web.

Don't fall behind on the latest technologies! Sign up now for monthly updates from our blog and our RealTimeWeekly.com newsletter which has the best content from across the web on real-time development with frameworks like WebRTC and WebSockets.

Oh yeah, we have a book too!

4 ways Perfection is killing you

Posted By:

Whether you are a bleeding edge startup or a large corporation running agile teams, here are four ways that you may be abusing agile concepts and letting perfection kill your chances of success. Product Owner Perfection In an agile team, the Produ...

Arin Sime

4 ways Perfection is killing you

This is what angry customers might look like. Don't make them angry.Whether you are a bleeding edge startup or a large corporation running agile teams, here are four ways that you may be abusing agile concepts and letting perfection kill your chances of success.

Product Owner Perfection

In an agile team, the Product Owner (PO) is the “voice of the customer” to the development team.  They play an incredibly important role in the success of the project.  The PO will end up writing most of the user stories that describe the features the team will work on next, and equally important, the PO sets the priority of what to work on next.

Implicit in this prioritization duty is that the PO is also the person who says “go” and approves the deployment of new functionality to production.  So what happens when your product owner keeps saying “just do this one more thing and then we’ll deploy”? 

For a startup, this sort of “all or nothing” attitude will not just kill your project, it will destroy your business.  It will take you so long to satisfy that perfectionist Product Owner that you will end up missing your window of opportunity with customers.  Somebody else is going to build a less perfect version of your idea first, and they will win the customers before you even have a chance.

For a large company, Product Owner perfectionism is still bad.  It means that your schedules are going to slip, major initiatives will not be completed on time, and your agile team is going to look a lot like a very slow waterfall team.

Developer Perfection

Good developers are an essential part of a successful project, and so it’s easy to go overboard and hero-worship their technical prowess.  But sometimes that desire to be the best developer out there can kill your project.

Developers (in general) are very creative folk who take immense pride in their work.  The best ones also really enjoy playing around with the latest technologies and trying new things.  But even if you’re a non-technical leader, you can’t give them free reign or they will have so much fun building shiny objects that they will never get the project done on time.  I’m a developer by training … trust me on this.

Even if you can’t debate the details of technical decisions being made, you need to set clear boundaries for the team to work within.  If there is a fixed date you must have the functionality done by, communicate that from day one.  Make it clear that meeting that date is the most important thing, and you are willing to compromise on anything but that date.  The same is true for other project constraints such as budget or feature sets.  You can’t have everything, so pick one constraint at the beginning, and make it clear to the development team that is the constraint that must be met above all else.

If you’re project has no constraints (yeah right), then make one up.  You need to give the developers those guardrails.

Scrummaster Perfection

Are you agile enough?  I mean, are you truly Agile?  If you hear this a lot from your newly minted and Certified Scrummaster, then you are at risk of Scrummaster Perfection.

It doesn’t have to be agile methods like Scrum or Kanban, or even the Scrummaster as the culprit.  Perhaps we should just call this Process Perfection instead.

Any process should be judged by the results it produces.  Not the process results (aka documents and meeting rituals), but the actual value delivered to customers.  Are customers happier with us than they used to be?  Are they getting more value from us than in the past, and are we delivering that value more efficiently?  Than our process is working.  That’s all that matters.

It just so happens that agile methods tend to do the best job of delivering more customer delight more efficiently.  That’s why agile is popular.  But they can be abused and if you spend all your time worrying about adhering to some agile book you read, then you will not deliver much customer delight.

Please remind your Scrummaster and team that agile methods are not meant to be prescriptive – they are a set of guidelines and principles.  You can (and should) constantly change your process in order to better serve your customers.  As long as you are still adhering to the basic tenets of the agile manifesto, you can declare yourself agile.

From your customers’ perspective, they don’t even need to know you’re agile.  They don’t give a rip.  You should just be doing a better job for them than you used to.

Quality Perfection

I’ve already complained about perfectionism from our product owners, developers, and scrummasters, so who’s left for me to alienate?  I know, let’s pick on testers for a moment!

I am all for testing, both manual and automated.  I am also all for high quality software.  I hate it when a bug keeps me from doing something important on another company’s web site, so why should I accept anything less on my own?

The thing is … all bugs are not created equal. If I can’t accomplish core web site functionality on the most commonly used browsers, then yes, that bug has to be dealt with quickly and should be caught before it’s deployed to production.

But should bugs in older browsers keep you from deploying software now?  It depends on your customer base, but probably not.  You can probably live without a fully functional site in IE 8.  Or you can change the code for that browser to be simpler and not have as rich functionality.

If the bug is in an obscure part of your administration console that very few users notice, then maybe it doesn’t need to be dealt with right now.

The point is, many testers have a problem with perfectionism.  I find this to be particularly true with testers in large companies because in the past they were judged by the wrong metrics.

A tester should not be judged by how many bugs escaped the test environment and made it to production.  A tester should be judged the same way as the whole team – are we making our customers happy by getting them the right features at the right time with an appropriate level of quality?

Unless you’re building safety-critical systems, you don’t need to deliver perfect quality.   You only need to deliver just enough quality, focused on the right areas.

Is your perfectionism holding you back?

What is keeping you from deploying that code today?  What is keeping you from making that deadline next week?  It may just be endemic perfectionism in one or more parts of your team.  Go find that person right now and reset expectations with them before it’s too late.  You can still save that project if you act now!



Are you ready for the real-time web?

Our team has deep expertise in UX, design and development for the Real Time web.

Don't fall behind on the latest technologies! Sign up now for monthly updates from our blog and our RealTimeWeekly.com newsletter which has the best content from across the web on real-time development with frameworks like WebRTC and WebSockets.

Oh yeah, we have a book too!