I am sure you will have some questions in mind, let me just answer them first:
1. Why do you share the numbers if they aren’t that significant?
I embrace transparency. I had a lot of respect to founders that share their revenue numbers, like Balsamiq, Freckle, Bingo Card Creator, jMockup, etc. And I want to do the same. I have nothing to lose for letting the world know how my app is doing, but it can give people a better understanding of how much you can get from Chrome Web Store.
2. I am interested in making Chrome Web Apps, should I do it?
Although my first three months of revenue on Chrome Web Store isn’t that high, but it is beneficial to get in early than get in after the market takesoff (hopefully that will happen). If you want to make an app, try making something that distinguish clearly with normal website, something that aren’t available elsewhere.
If you’ve got this far, awesome! Check this blog regularly because I want to some more stats in the coming months!
3:30PM: On my way home, I will clear as many emails as I can (side-note: I love emails!). If there are 2 negative ones and 2 positive ones, I always make sure I see the good after the bad. So I can maintain a good mood for the remainder of the day.
4:00PM: Arrive home, look at my to-do list on Flow. It is never a good feeling. 1. If the list is full of tasks, this comes up: how can I do all these in 4 hours? I am not superman… 2. If the list is completely empty, this comes up: what am I going to do? Just sit here and waste my time on Twitter?
4:10PM: Time for some marketing. It is never as excited as development, but I can’t make something unbelievably incredibly awesome but nobody knows about it, right? Nevertheless, finding the right people is really hard!
4:20PM: I usually start off by firing some emails to potential customers & bloggers.
4:40PM: Wow, they respond rather quickly. But nevermind, it is a rejection email. They don’t even use Google Chrome. I guess it’s my fault for not knowing what browser they use.
5:10PM: Wala, a guy I never heard of purchase OhBoard and email me saying he is going to recommend OhBoard to his 12 co-workers. Well, that form of marketing is unbeatable.
5:50PM: Let’s start writing something. Sometimes my brain get stuck, and can’t crank out a paragraph on marketing site copy in 20 minutes. Yet sometimes, I can write a whole blog post about getting things done in 20 minutes.
6:30PM: Time to plan for evening’s mini coding session. What am I going to do? Am I going to add a new feature or refine the current feature set? How can I fix the bug I’ve been trying to figure out for days?
7:00PM: Eat dinner and watch Jeopardy. So I can get *smarter*.
7:40PM: Shower time. I think this is best period for creativity. Seriously, 75% of my ideas come straight out of shower. More than half of the development & marketing strategies come straight out of my shower as well, and they usually work better than the ones that are not. Hot water works like magic.
8:00PM: Here comes the fun part: coding. I am embarrassed if I can’t fix that annoying bug, but that’s rarely the case. Usually, I am pretty motivated and crank out few hundred lines of code in 2 hours.
10:00PM: Time to procrastinate a little. Sometimes on Hacker News, where I will click on something entitled “How did I generate $4000 recurring revenue in less than 3 months“; or sometimes on Forrst, where I will some beautifully-made icons and carefully-crafted code.
10:40PM: Get a good night sleep, and always hope I dream about generating $4000 recurring revenue in 3 months.
Do you have this kind of constant-changing feeling too? Let me know!
Hooray! OhBoard 1.2 was just released in Chrome Web Store few hours ago. There are four additions to this release:
I am listening. I know it is bad to have a whiteboard app that includes no eraser. But that’s no long the case!
The new eraser button lines up alongside with the pencil button. So whenever you want to erase something (rather than undo), just hit the eraser button, and the cursor will change to a crosshair shape rather than an arrow.
I’ve been having a little bit of frustration when I can’t draw a straight line. I’m sure many share the same opinions too. So I added the Photoshop-like shift-to-straighten functionality. If you want to make a straight line, just hold down shift while dragging the mouse/trackpad.
Currently, you can export your drawing into .png image. But I added two more file type for those who want them: .gif and .jpeg. After you click the export button, you can choose whatever file extension you want. And the image will be automatically updated accordingly.
Shortcuts are always useful for advanced users. And since OhBoard has been out for more than a month, there are people who were already calling for shortcuts already. Here’s a list of shortcuts available:
N: New document
W: Delete document
S: Export document
E: Edit title
Up Arrow: Previous document
Down Arrow: Next document
Left/Right Arrow: change between pencil/eraser
Shift + Drag: make straight line
How to update:
Click Window -> Extensions (a new tab should be opened).
Click Developer mode (the blue link with a + icon on the right hand side).
Click update extensions now button (the third one from the left, the first one from the right).
Nothing seems to happen, but everything is actually updated in a matter of half seconds.
I launched OhBoard, my little whiteboarding app, in 10 days. I took my idea-cranking shower on December 12th, and I made my first $3.99 on December 22nd. It was only 240 hours apart. Pretty cool, huh?
I then decided to carefully craft a development guide for you. If you are planning to make a Chrome Web App, you are in luck! Because after reading this guide, you can do what I just did and start taking advantage of this huge market (10% of all Internet citizens) today!
Step 1: Come up with your idea
The listing on Chrome Web Store is still pretty small, nowhere near Apple’s App Store yet. So there are many things you can make.
I have a list of free, simple ideas you can consider using:
Also, before moving on, I recommend reading this article by two Chrome developer advocates: Thinking in Web Apps.
Step 2: Make your app
There are two different types of apps, hosted apps and packaged apps.
Hosted apps are regular web apps with a special file called manifest.json. Everything is hosted on your own server. But you have the advantage of gaining exposure on Chrome Web Store. When a user launches the app, they go straight to your site and that’s it.
Chrome supports allnativeHTML5features. In OhBoard, I use local storage that saves all your drawing in local computer and it is available at all time. Besides, you can also take advantage of geolocation, desktop notifications, and many more.
Step 3: Create manifest.json
Manifest.json serves as the manual for your app. It tells Chrome the name, description, version, icon location, etc. Most importantly, it tells Chrome what page to open when a user launches the app. You can also give your app different permissions such as unlimited storage, geolocation, desktop notification, history, bookmarks, cookies and more.
Here is OhBoard’s manifest.json:
"description": "A ridiculously simple whiteboard app for Chrome. Great for wireframing, sketching, diagramming, brainstorming, and doodling.",
"permissions": [ "unlimitedStorage" ]
Step 4: Create your icon
You need two icons. The first one is 128x128px, it is used on your app page, and it also represents your app on the new tab page. The second one is 16x16px, better known as favicon. It stays in the title bar and gives people a visual way to identify different tabs.
Don’t put an edge around the 128×128 image; the UI might add edges.
If your icon is mostly dark, consider adding a subtle white outer glow so it’ll look good against dark backgrounds.
Avoid large drop shadows; the UI might add shadows. It’s OK to use small shadows for contrast.
If you have a bevel at the bottom of your icon, we recommend 4 pixels of depth.
Make the icon face the viewer, rather than having built-in perspective.
Wherever you place both icons in your package, you must specify the locations in manifest.json (as mentioned above).
Step 5: Make your screenshots
Picture is worth thousand words. So making your screenshot correctly will increase your sales. Each screenshot is 400x275px.
Take a look at a few I did:
Few tips to keep in mind: The screenshots should only do 1 thing: show what your app looks like. Many people made the mistake of adding captions and putting testimonials and writing features and telling your Twitter handle. But you have the description field for that. Just show what it looks like so user can get a visual understanding.
If your screenshots and video aren’t that good, a golden description can still turn it over. Here are 3 well-known tips:
Keep it simple. Most people aren’t going to have time to read a 5-paragraph description. So the rule of thumb is to keep it as short as possible. Just tell what benefits and features do the app provide.
Use bullet points. Since people won’t read paragraph, listing benefits and features in bullet points will be a great idea.
Showcase testimonials. Maybe users don’t trust what you have to say, listing your customer’s testimonials can be a convincing call-to-action.
As always, there are two ways to go: free or paid. But in Chrome Web Store, there are actually 5 payment choices you can use.
Free. If you are new to create a Chrome Web App, releasing it for free and learn from experience won’t hurt you.
One-time payment with Google Checkout. Great if your app provides utility, meaning it saves users time or money.
Recurring payment with Google Checkout. This is perfect if your app involves any types of file storage.
Free trial. If your app is complicated, giving a free trial then charge for a fee will be the best solution, although only hosted apps support free trial at this point.
Your own payment method. If you don’t want to use Google Checkout, you can always write your own system that processes payment via PayPal.
I found a detailed but pretty technical tutorial from Google about how to check for payments using their licensing API. Note: it only applies to hosted app because packaged apps only supports Google Checkout.
Step 9: Test the app
After you’ve finished making your app, you can easily test it out locally in Chrome. Window => Extensions => Developer Mode => Load unpacked extension… => Choose your app folder.
Open up a new tab, you should see your app icon showing on the dashboard! If it is packaged app, make sure everything within the app is working bug-free. If it is a hosted app, as long as the icon links to your destination website, you should be fine.
Once everything is done, you can log in to your developer dashboard with your Google account to publish your app.
The procedure is fairly straightforward:
Choose Add new item button
Compress your app folder (with manifest.json and your icons) and upload the .zip.
Fill in all the necessary information about your app. This includes price, categories, language, long description, Google Analytics (optional), links, ratings, etc.
Upload all artwork. This includes screenshots & videos. You also have the ability to add default background & promotional items for the front page.
Preview the listing
Pay $5 one-time developer fee
Publish the app
A little helpful video by Google:
Also, take a look at the developer dashboard:
If you survived all the way to the end, great job! :) My lengthy tutorial should cover up all the basic about making your own Chrome Web App as well as any relevant links I can find from Google about this process.
In the future, I will continue to write more in-depth tutorials on more specific topics, so feel free to subscribe to this blog.
While I devoted a good amount of time in January on marketing research, I didn’t forget about OhBoard’s development at all. In fact, I’ve made solid progress to few must-have features (FYI, I don’t add every feature requests). And I decided to give you some information to keep you updated!
There are 4 main things that are coming up:
Eraser. On top of a pencil, you will have an eraser as well!
Shift to straighten. Just like in Photoshop, holding Shift while drawing will give you a straight line.
Shortcut. Every button will have its associate shortcut keys. Have fun, advanced level users!
Export options. OhBoard will give you the option to export in .png, .jpeg, or .gif.
These 4 features are not fully done yet. Only the functionality were completed, but I still have to tweak the interface and test them out. Expect the meaty update to be released in 2-3 weeks!
Few screenshots that can probably make you more excited:
Everyone wants to get things done fast. It has many benefits:
Your business can make more money
You can get motivated and confident
You can impress your friends
Of course, for me, it is about the first two, although having the third one can be handy too. :)
Anyway, over the past month working on OhBoard, I’ve came up and practiced some healthy habits that proved to work well. So to continue my philosophy of sharing everything I learned, I want to talk about six tricks:
1. Plan less
I used to plan very specifically on what I am going to do for the next 3-6 months. It might sound crazy, but once I had all these good ideas for my projects, I just wanted to put it on a to-do list, and assigned each the next available day.
Here’s what usually happened: I couldn’t get what I had planned for the day, and had to push to the next day. When the next day came, I tried to complete my previous tasks. But by the time I got sleepy, I never had a chance to start what was assigned.
So I decided to plan less. I didn’t plan any further than 3 months. For all tasks I needed to accomplish more than 2 weeks from now, I didn’t give specific actions and due dates. I only wanted to be super clear for the upcoming 2 weeks. Because it’s way to hard to predict the future. :)
(As you can in my to-do list on Flow, I had only planned 1 thing for today, 2 things for this week, 3 things for this month, and 5 things for next month.)
2. 25 minutes work, 5 minutes break
I can never sit for more than 1 hour straight in front of my computer. Not only my eyes, my fingers, my back, my shoulders and my feet hurt, my brain hurt even more. After 1 hour of high concentration, I got lost often time on whatever I am doing. That caused slow down in productivity and motivation.
So I tried to pause for about 15 minutes after each working hour. That worked pretty okay, except most tasks either barely took up an hour (miscellaneous things for support & marketing), or took a lot more than an hour (coding & design).
I then decided to cut it down to 25 minutes work time and 5 minutes break time. That showed to work out extremely well for me. During the 5 minutes break time, I could clear my mind and thought about what the next 25 minutes were going to be. At this point, I could plan things in details because the timespan was short. I could usually get all the way down to step-by-step directions. Then I started the work, which could be done pretty fast since I was already clear at what I was going to do.
3. Do not multitask
iPhone multitasking surely boosted up my mobile productivity. But multitasking was almost the entire opposite while I was working on OhBoard.
For any software company, tasks are most likely split into 4 parts: customer service, marketing, design & development. They require entirely different mentalities and different skills. For customer service, you need to be friendly. For marketing, you need to be strategic. For design, you need to be creative. For development, you need to logical.
I found it is extremely difficult and inefficient to work on them at the same time. Being interrupted to answer an email while designing a mockup sucks. Having to fix a bug while working on an article is not good feeling either.
What I eventually did was closing down all applications that aren’t needed for a specific task. Don’t open any of them until I got my task all done. 100% focus.
4. Structure your day
This is more of an extension to my previous tips of omitting multitasking.
I never “worked to death”. I never “burned out” while working. I actually thought my work days were pretty relax, unlike many others who claimed working 10 hours a day, and felt extremely exhausted every night.
Here’s my trick: I broke my work time into chunks. I had regular set time for specific tasks I need to perform every day. For example, I answered all emails during commute (for those who don’t know, I have schools daytime). Then I checked news when I got home ~4PM for 30 minutes. After that, I would start my 25-5 time periods, on I planned for the day.
Although I was trying my best to not break the rules of doing something else that I was not supposed to do, sometimes curiosity could attract me to click on an article (probably with a link-bait title). But as soon as I realized that, I forced myself to come back. And most of the time, the article ended up in Instapaper.
5. Find & Enforce your zone time
If you code, you should know what zone time means. It is a block of time that your (coding) productivity is at the highest point.
I found that my zone time is during weekends, when I had a huge chunk of uninterrupted time. I usually planned large periods of time for feature development on weekends. They were usually Saturday, 2PM to 6PM, 9PM to 1AM, and Sunday, 2PM to 6PM. That was 12 hours a week, which was long enough given my coding speed.
On any other days of the week, I would do anything besides development. Because I also found out miscellaneous tasks could be done more efficiently during short chunks of time. It worked extremely well in my 25-5 schedule. As I mentioned before, 5 minutes of planning, than 25 minutes of doing. They were just perfect for tiny things like editing copy, writing teaser blog post, answering few emails, and live-chatting with few visitors via Olark.
I encourage everyone to experiment for a little bit, find out what works the best at what time, and just use that schedule as much as possible.
6. Do it now
I think you’ve read for long enough. It’s time to apply them. I encourage everyone to practice these 6 habits. And I want to know how it works for others. Let me know in comments or email me at firstname.lastname@example.org!
If it doesn’t work, feel free to blame at me. :)
Also, if you have more tips that can benefit folks to get things done faster. Shout them aloud in comments!
Few hours ago, I released the 1.1 version of OhBoard. This update was exclusively dedicated for a frequent request: save canvas into image. I put a lot of thoughts into the user interface of this feature, because I thought this particularly will be something that people use very often in the future. So, it was crucial to get it right.
My ultimate goal was not only to keep it simple, but make it useful. I did’t want to blow off this great addition by inserting complicated procedures, I rather chose the most convenient route. I’d like to share with you today the direction I started from, the final results I ended up with, and everything in between.
Here’s the initial design:
Note: the overlay is activated when you click the Export button.
What I thought about this design:
The overlay mask was too light, I feared potential users will be distracted from what they are supposed to do.
The border of the image was also too light. I wasn’t sure if people can realize immediately that’s the image they should save.
The explanation text was small for first-time user. They might not directly pay attention and don’t know what to do to actually save the image.
What I thought about this design:
The mask/border color now looked natural and not distracted.
The explanation text was now bigger, but I still felt like it needed to be more visually appealing.
The cancel button was kind of off-balanced, and lonely on the side.
What I thought about this design:
Adding the highlight was a big difference visually, so the explanation text was all good for now.
Didn’t really buy into the dashed border, that still couldn’t show users that’s the image they should save.
Took away the whole cancel button and only allowed users to hit esc or click outside of the dialog. But felt like not every user are going to like keyboard shortcut or moving the mouse out of the dialog.
What I thought about this design:
Changed back to solid border, but with a darker color. Now it looked like a real image container.
Added a link for cancel with a lighter color. And gave a “hit ESC/click on the mask” title which essentially serves as a little tip for users who want advanced controls. It took care both sides of people.
Just felt right.
Overall, I think this is a great process. I will continue to make little improvements to the user interface as I use OhBoard even more heavily. And let me know in comments any feedback that you have about the design!