Fellow NY techie Kevin Marshall tweeted:

Builder tip: if a consumer can forget or ignore your product/service, they will…too much other ‘average’ available to bury your stuff…

— Kevin Marshall (@falicon) May 25, 2012

The tweet got me thinking about the difference between having a user forget about a product and ignoring a product.

There can be many reasons why a user may forget about a product/service. The one I find the most fundamental is the product does not deliver enough value to the user. A lack of value means the product is not providing the user with enough substance to make them come back on their own. The problem is not painful enough and/or the solution is not doing enough to solve that pain.

When users ignore a product/service it’s most often because a product is taking away value from the user. If there’s pain being created through the use of a product, then users will actively choose to ignore.

Which do you feel is more damaging?

Source Code

The full source code for the project can be found on github.com at https://github.com/tobins/PathMenuExample. Feel free to use the code provided in the example as you wish. Just say hi on twitter (@tobins) if you found this post useful.

Problem

The Path 2.0 iPhone app (http://path.com) uses an expandable menu to free up some extra real estate. The Path app places a button in the lower left corner of the screen. When the user presses the button, menu items expand out from behind the button in a circular pattern at a fixed distance from the main button. To close the menu the user either selects one of the options presented or presses the main button again.

The following is a quick overview of how I implemented a navigation system similar to the Path iPhone App.

Setup

To keep things simple I set up a single class named ExpandableNavigation that will handle all the work. It has an init method that takes in an array of menu item buttons (UIViews), a main button, and distance the menu item buttons should travel from the center of the main button when expanded. I did this because I wanted developers to set up and configure buttons either programmatically or using interface builder.

For example here is the code for ViewController.m’s viewDidLoad method:

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // initialize ExpandableNavigation object with an array of buttons.
    NSArray* buttons = [NSArray arrayWithObjects:button1, button2, button3, button4, button5, nil];
    
    self.navigation = [[[ExpandableNavigation alloc] initWithMenuItems:buttons
                                                            mainButton:self.main
                                                                radius:120.0] autorelease];
}

The menu item buttons (1-5) were all added to the ViewController.xib and wired to UIButtons defined in ViewController.h. The main button is wired to the “main” UIButton. Passing in the array & the main button to the init method sets up the initial positioning of the menu item buttons and attaches a touch event to the main UIButton for handling the menu expanding/collapsing.

IMPORTANT NOTE: Make sure the main menu button is in front of all of the menu items you want controlled by the class.

As you can see below, the init method is pretty basic.  It sets up some variables, aligns the menu items buttons to the center of the main button, and attaches a touch event to the main button.

- (id)initWithMenuItems:(NSArray*) menuItems mainButton:(UIButton*) mainButton radius:(CGFloat) radius {

    if( self = [super init] ) {
        self.menuItems = menuItems;
        self.mainButton = mainButton;
        self.radius = radius;
        self.speed = 0.15;
        self.bounce = 0.225;
        self.bounceSpeed = 0.1;
        expanded = NO;
        transition = NO;
        
        if( self.mainButton != nil ) {
            for (UIView* view in self.menuItems) {

                view.center = self.mainButton.center;
            }
            
            [self.mainButton addTarget:self action:@selector(press:) forControlEvents:UIControlEventTouchUpInside];
        }
    }
    
    return self;
}

Expanding

When the main button is pressed the menu item buttons associated to it will expand from the center of the main button to the distance given in the init method. The menu items will be animated to bounce out and be equally spaced along the 90 degree edge of a circle.

The expand method uses block-based UIView animations and CGAffineTransformMakeRotation to handle the expanding of the menu.

- (void) expand {
    transition = YES;
    
    [UIView animateWithDuration:self.speed animations:^{
        self.mainButton.transform = CGAffineTransformMakeRotation( 45.0 * M_PI/180 );
    }];
    
    for (UIView* view in self.menuItems) {
        int index = [self.menuItems indexOfObject:view];
        CGFloat oneOverCount = self.menuItems.count<=1?1.0:(1.0/(self.menuItems.count-1));
        CGFloat indexOverCount = index * oneOverCount;
        CGFloat rad =(1.0 - indexOverCount) * 90.0 * M_PI/180;
        CGAffineTransform rotation = CGAffineTransformMakeRotation( rad );
        CGFloat x = (self.radius + self.bounce * self.radius) * rotation.a;
        CGFloat y = (self.radius + self.bounce * self.radius) * rotation.c;
        CGPoint center = CGPointMake( view.center.x + x , view.center.y + y);
        [UIView animateWithDuration: self.speed
                              delay: self.speed * indexOverCount
                            options: UIViewAnimationOptionCurveEaseIn
                         animations:^{
                             view.center = center;
                         } 
                         completion:^(BOOL finished){
                             [UIView animateWithDuration:self.bounceSpeed
                                              animations:^{
                                                  CGFloat x = self.bounce * self.radius * rotation.a;
                                                  CGFloat y = self.bounce * self.radius * rotation.c;
                                                  CGPoint center = CGPointMake( view.center.x - x , view.center.y - y);
                                                  view.center = center;
                                              }];
                             if( view == self.menuItems.lastObject ) {
                                 expanded = YES;
                                 transition = NO;
                             }
                         }];                                                                        
    }
}

Note that the end point for the initial animation is farther than the radius specified in the init method. I did this so I could set up a second animation to do the “bounce” to the desired distance. You’ll see that in the completion block that I set up a second animation that returns the UIView back to the desired distance.

Collapse

The collapse method returns the menu item buttons back behind the main menu button.

- (void) collapse {
    transition = YES;
    
    [UIView animateWithDuration:self.speed animations:^{
        self.mainButton.transform = CGAffineTransformMakeRotation( 0 );
    }];
    
    for (UIView* view in self.menuItems) {
        int index = [self.menuItems indexOfObject:view];
        CGFloat oneOverCount = self.menuItems.count<=1?1.0:(1.0/(self.menuItems.count-1));
        CGFloat indexOverCount = index * oneOverCount;
        [UIView animateWithDuration:self.speed
                              delay:(1.0 - indexOverCount) * self.speed
                            options: UIViewAnimationOptionCurveEaseIn
                         animations:^{
                             view.center = self.mainButton.center;
                         } 
                         completion:^(BOOL finished){                            
                             if( view == self.menuItems.lastObject ) {
                                 expanded = NO;
                                 transition = NO;
                             }
                         }];                                                                         
    }
}

The collapse method is a little simpler than the expand as it doesn’t do a bounce when returning the menu items to behind the main button.

Extra Credit

I didn’t implement the Path 2.0 exactly as it is in the app, however this gives you a good starting point. Incase you’re interested, fork the repository and try your hand at one of the following:

* Calculate the ideal radius based on number of menu item buttons (and their sizes) passed to the init method and size of those buttons.

* Spin the menu items like the Path 2.0 App using UIView or Core Animation.

* Auto adjust the z-index of the views in the init method so that the main menu button is always on top.

Enjoy and don’t forget to say hi on twitter!

@tobins

Introduction
 
Coupons are a great technique for driving customer acquisition by giving your potential new customer an incentive to purchase your product. Additionally coupons can also be used as part of loyalty program that increases retention and repeat purchases from existing customers.
 
However when it comes to referrals you often see coupons (or discounts) as an after thought. What if you added the incentive during the purchase process to reward the person for referring new leads? With the state of social networking and social media, we can now implement savvy techniques to make new customer acquisition through referrals more powerful than standard techniques used by most sites.
 
One technique I’m eager to see put to use is Social Referral Discounts/Coupons. It’s the idea of incentivizing sharing via a social network during the checkout process. That is, giving the customer a discount in exchange for letting the merchant post a message to the customers social network.

I’d even argue that the following technique for offering discounts is more valuable than any coupons or promotions you offer because it not only incentivizes a purchase, but it also promotes an action that leads to referrals. Traditional coupons become worthless to the issuer once they have been applied to the customers cart.
 
How does it work?

In this fictitious example the customer comes to Foodzie.com to purchase a 6 month Tasting Box. When the customer gets to the checkout cart, they are presented with an option to save 10% off their purchase by sharing their purchase with their friends. While this option can be used in addition to traditional promo/coupon codes, our example simply replaces the promo/coupon codes with the Social Referral Discount.



When the customer chooses to apply the discount to their cart they are presented information about how it works and instructions on how to apply the discount. Here the customer is presented with the option to share the details of their purchase their Twitter stream or Facebook wall. Choosing either of these options will lead the customer to the respective services authentication/permission page.

After connecting with the respective social network the customer is brought back to the cart. Here they are notified that the discount has been applied and the total price has been adjusted. The customer then proceeds to checkout and pay for their order.  Upon payment the shop will share the customers purchase with the social network that was chosen.



Measurement

I’m a firm believer in MEASURE EVERYTHING and the beauty of this technique is that it’s highly measurable.  You see how many people your message was presented to and you know when someone from that audience has clicked through on the link and whether or not a transaction was completed based on this referral channel.  The one downside is that you don’t have a good idea of how many impressions your message received.

Additionally if you find a particular set of customers that performs well in terms of referrals, you can then focus on how to bring those customers back by offering them larger incentives.

I get frustrated seeing ideas come out of various accelerator programs and at least one or two of them are something I’ve “thought of.” It’s not that I am frustrated that another team is getting success/validation for their idea, I’m frustrated because I let my idea languish and spoil in my mind when I know I could have done something about it.

It takes commitment to make something from nothing, but I’ve been learning a lot lately from people in the NY Startup community on how to strategically build a product with as little waste as possible.  I’ve benefited a lot from Skillshare and the people who’ve taught classes that I attended: Michael Karnjanaprakorn, Vin Vacanti, Spencer Fry, and Chris Dixon.

After attending a few classes, I wanted to take some new thoughts and put them to practice. As David Cancel would say, Just Fuck’n Do It (#JFDI).

The next few posts chronicle how I went from a simple idea to a fully functioning (be it rough around the edges) product in 7 days.

Day 1

The Idea

Yumalicious (http://yumalicio.us)

It’s show and tell for people who love to cook. I love FoodSpotting.com, but it’s about the extraordinary food that you can buy and consume.  I also love Dribbble.com, it’s show and tell for designers. I wanted to merge the two and make them about something I’m passionate about, cooking!

User Flows

Before I started trying to figure out what sort of functionally I wanted to implement, I needed to think about how a user interacts with the site. I gave myself an hour to sketch it out and think about how someone would interact with the site I wanted to create. I knew the tasks I wanted them to do and they were as follows:

• Upload a dish with a photo, title and description.
• View the dish and be able to comment/discuss it.
• View a chef’s profile and the dishes they’ve submitted.
• View the newest dishes submitted to the site.
• Follow a chef
• Favorite a dish.
• Register for an account, login, edit profile, reset/forgot password.

Data Modeling

I love thinking about how to represent ideas as bits of information.  Looked at my user flows and began defining pieces of data that represented the information. I started from a high level view and thought about the distinct “objects” of information:

• User
• Dish
• Comment

From there I looked at how these objects were related and then started filling them out with details. It’s a simple exercise that only took a few minutes to do.

Wireframing

I will be honest; I love the idea of wireframing tools, but I don’t find them practical.

I sketch out the general layout of my pages in a notepad, but I do all my detailed wireframing within my project. After playing with Balsamiq, Visio, Omni Graffle, etc in the past I found that the best tool for me to plan out the structure of a page is using basic HTML and a smidge of CSS. It’s not that that these tools are bad, I just find I save time since I don’t have to do the work twice (once in Balsamiq and once during implementation.)

This also allows me to touch and feel my application as it evolves and limit having to maintain two versions of the same thing.

Scrum Time!

I love agile, but I’m also very informal and unconventional in how I do things. However a little structure goes a LONG way. I set up a scrum styled task board that only has 4 columns:

• Product Backlog
• On Deck
• In Progress
• Completed

Each task that goes into one of these columns is a simple User Story. A User Story is a short description that defines a piece of functionality. I took the list of flows and broke them down into atomic descriptions of functionality.  Here are some examples:

• Allow a new user to create a user profile and attach an image.
• Allow a user to log in to the site.
• Allow a user to upload a photo with a title and description.
• Allow a user to view a submitted photo.
• Allow submitting user to edit a photos title and description.
• Log a view count for a unique visitor to each photo viewed.

After I created a list of user stories, I then prioritized them. They were prioritized by how important the functionality was and their dependencies.  For example I would prioritize “allow a user to upload a photo”, but also prioritize “create a user profile” and “log in to the site” as user profiles were required to post a photo.

This prioritized list would then go into the Product Backlog. The product backlog is the prioritized list of ALL user stories you come up with for your product. Even stuff you want to implement 3 months from now. One thing to note is that while I prioritized the Product Backlog I also made note to prioritize in order of what I felt would make a “complete” first product. I drew a mental line in the sand in which I determine which things are “nice to have” vs. “must have”. The “must have” stories always were moved up the list.

Once everything was prioritized I then started moving tasks into the On Deck column. This column represented a small set of tasks I would like to get accomplished before the day ended. User stories would only make their way into the “On Deck” column when I was highly confident if it was something I could accomplish within a given period of time.  Typically this limited me to only have 6-8 items in the On Deck column at any given time.

I would move something out of the On Deck to the “In Progress” column once I was ready to commence work on those stories. Most of the time there was only one task in this column at any given time, but sometimes there were two or three if they were connected.

Once a story from the “In Progress” column has been completed, I move it over into the “Completed” column. Typically if there were more people involved I would have another column that included a “Review” of the story, however since I am the only one working on this project I would bundle reviews into the “In Progress” column.

After something was moved from “In Progress” to “Completed”, I would then promote a story from the “Product Backlog” into the “On Deck” column.

Any scrum/agile purists may cringe at this, but I deviated from a lot of parts because I knew they would only get in the way. My goal was not to make a process, but to make a product. I stripped down the process and threw out things that didn’t need to be there because I knew my limitations of working on this independently.

Technology

I love exploring new technologies, but I’m also a proponent of “go with what you know.” As a developer I feel confident that I can build what is required, so my goal was to flex more about the things I wanted to learn. Specifically I want to learn more about Product Management, Usability, and Online Marketing.

The goal for me was to “Just Fuck’n Do It”. I didn’t want to create excuses for myself by giving myself time to explore interesting technologies. This project was more about the idea than it was about the nuts and bolts.

For the technology I went with a fairly simple stack:

• Java
• Apache
• MySQL
• Tomcat

I like Java and I’ve been using Java for a majority of my career building technology for companies with large-scale websites (e.g. MLB.com, Nick.com, FoxSports.com, etc.). I know it and I feel confident in how to scale it.

Cassandra & MongoDB are great products. I really find them interesting, but I found that there were some things I didn’t want to deal with now. Either way I’ve architected the data access of the site in such a way that I can quickly migrate to another data store when the time comes.

For an MVC framework I went with Spring Frameworks as it’s fairly simple and VERY robust.

Implementation

After the “Product Backlog” and “On Deck” had stories in it, I began to get to work. The first items On Deck were:

• Create a unique user account
• Allow the user to log in
• Upload a photo
• View photo

These were items that I had determine were “vital” to getting the project going. The main purpose of the idea is to share what you’ve cooked. In order to do that you need to be able to create an account and upload a photo. After you create an account you may want to come back and upload more photos, this required me to let the user log in. When a photo is uploaded there needs to be a way to view it. That was what I wanted to get done after a days worth of work.

Instead I was able to move through those relatively quickly because I kept everything simple. I then moved a few more items from the Product Backlog to the On Deck column:

• Comment on a photo
• View user profile
• View newest photos
• View users photos

One downside of using the stack I was using was that I was repetitively creating similar objects over and over:

• Bean/Pojo
• Data Access Object
• Service Layer
• Controllers

Setting this up isn’t very complicated, but it was a task I was repetitively doing over and over. I talked about that with a friend and he told me to check out the Spring Data and I started using it for new Data Access Objects I wanted to create.

Conclusion

Day 1 was by far the most important day as it’s where everything is done to pave the way for the next few days. The planning and laying out the idea was time well spent. I may even argue that the planning was more important than the coding because it made the direction all that more clearer.

Next Steps

In the next posts I’ll talk about some of the more interesting UX and Technical challenges I ran into.

There’s a phrase I hear at entrepreneur events in NYC that makes me cringe:

“Fake it until you make it.”

It’s not so much what it means that gets to me. It’s the fact that it’s often misused or misunderstood. Not always, but a lot of times I see/hear it misused. The phrase comes from a psychology technique to build ones own confidence to overcome something that they are having difficulty with.  A good example is visualizing and becoming extroverted to overcome shyness in social situations.

Instead I see would be entrepreneurs taking this advice to portray them or their companies as something they are not. “Fake it until you make it” is not a way to rationalize lying, when it’s time to act on the misrepresentation of the truth you will run into problems. Be it about the size of your team, how much traffic you get, or how many clients you have. You don’t want to misrepresent quantifiable data because at some point false data will come back to bite you in the ass.

To me it makes more sense to acknowledge your limitations and position you are in. If you are a solo founder or a small team working on something, the best thing you can do is act within your means. There’s a fine art in managing expectations when you are aiming high and your resources are limited.

If you’re a team of 3 but your output is that of 8, then praise those accomplishments to show how good your team is. Don’t do your team a disservice by hiding their abilities behind a fake team.

If you are focused on how much traffic you are getting and aren’t where you would like to be, then focus on creative ways to get there and be proud of it. Saying you are already there means you have to make up for it and work double to get there.

If you don’t have many clients and inflate the number in hopes that it increases social proof, then consider that a client may prefer to work with a team that can focus more on their needs. You’ll be better able to establish trust and maybe learn more about your business by providing more hands on experience with a client that wants be a part of your success.

Building something from nothing is not easy, but lying about it won’t make you feel any better about your struggles. Wear those bruises as a badge of honor because you are going to be much prouder when you say “I made it so I didn’t have to fake it.” 

You’ve spent a lot of time and energy on starting a business - using your own savings, convincing others to work with you, and pouring your heart into it. Even though you’ve been at it a long time already, you’re still going at it…convinced that this is the next big thing! Or is it? At what point do you ask yourself if you should keep persevering? When do you call it quits?

I suggest that you should know before you even start. Let’s consider a simple version of raising funds to illustrate the point.

When you’re seeking investment capital from an Angel or VC, you are selling a specific vision. Included in that is a set of expectations of how you plan on executing that vision with the funds you’re seeking to acquire. Since the investors will hold you accountable for those expectations, if you can’t execute, you can be certain that they won’t invest in your business again.

In this scenario, it’s pretty easy to understand when it’s time to shut down your business. The funds will eventually run out. And when you run out of money to cover operations, it’s game over.

However, during the early stages - before funding - the rules of the game may not seem as clear since you’re not operating a business with investment capital. Instead, you and your team are putting in sweat equity by working nights and weekends, and I’ll argue that the blood, sweat and tears you are putting into your idea pre-funding are much more valuable than any amount of money an investor will put into your business.

Time is your most valuable resource because you can never get it back once you have used (or not used) it. You are basically an investor of your own time. So, before you embark on a project, make sure to sell yourself on your own vision; if you can’t do this, then stop here. Progress will be slow, and you will never be able to sell it to potential team members and future investors.
 
Once you’ve bought into your own vision, set up reasonable expectations on how to execute that you and your team can agree on and, most importantly, commit to. The best way to do this, so that you can track your progress, is to form milestones. (This is with the understanding that the process used to reach these milestones may change.) Here’s an example of a simple set of milestones:

• Finding essential members of your team within 2 weeks
• Building a prototype within 4 weeks
• Get 5 early customers into your business within 8 weeks
• Establish partnerships for distribution/acquisition within 10 weeks
• Get commitments from investors within 12 weeks

If you’re not meeting these milestones within a reasonable margin of error, then you should consider whether or not to continue investing more of your time and energy.

Success may be around the corner, but if you’re still struggling to get out of the gate six months after starting your business, then you need to have an honest discussion as to why. Identify the roadblocks and either figure out how to get around them or stop where you are. There’s no shame in folding a hand you know won’t win. You can always play another round.