My previous site ran on Jekyll. Although I did love the power that came with the site generator, deploying any changes to it required me manually building a slew of pages.
Switching to Docusaurus allows me to stash simple markdown files in a /blogs folder and not worry about manually doing any sort of work.
Docusaurus is a project maintained by the Developer Advocacy team at Facebook. We're growing. If you're interested in helping make a global impact, please reach out!
The quickest way to go from an idea to an app is to create a prototype.
A prototype is a rough approximation of your app idea. Prototypes can be constructed simply using sketches on paper (paper prototype), fully designed in Photoshop, built on an iPhone or other iOS device, built using tools like Balsamiq, and even built in Powerpoint and Keynote.
Each tool provides different features and benefits. Some tools like UXPin provide easy ways for viewers to send feedback. Others tools closely simulate a native experience. Others, like Balsamiq, use a purposely fuzzy deisng motif to avoid focusing on details.
Your app idea probably sounds great to you. However, if it were built and placed in front of a customer it would likely lead to confusion. Prototypes help you flesh out your ideas by forcing you to packaging your thougths, simplify, and enumerate each of the features you wish to provide.
Building an app is expensive. When you factor in lost opportunity costs, developer and designer time, rent, and businesso verhead building an app without a prototype can be extremely expensive. There are several startups trying to help save designer, developer, and business time by simplifying the process for testing out ideas without building anything.
My personal approach to building products tends to gravitate around lots of time sketching, prototyping, and testing. In 2012, I was introduced to Keyotopia. I had never been able to quickly communicate my ideas to others until I used it in my last startup. It is now core part of my workflow.
Sketching Continues
The concept I have for Truffle really needs to be sketched out. Logically laying out screens helps to put stakes up around what the first version of the application will be.
simple launch screen
playing with a flexible height/width method for displaying covers
sketching out simple tinder-style gestures
a favorites page with built in email/sharing
I decided to place the pig at top of screen so it will be visible across pages. To its right will be a pile of truffles (one for each favorited book). Need to figure out how to make it not look like poop.
Playing with taglines
I have been playing with taglines for the launch screen.
Book recommendations for kids.
Judge a book by its cover. -- I like this one the best.
How kids find new books to read.
Kid-friendly book recommendations.
The app will have 4 major sections:
A launch screen
need to have a strong value proposition
An Onboarding process
I'm not sure how to handle this. I might just make the app have a guide, but not user accounts.
The core rating/swiping section
I will use a swipable gesture and custom classes for views
A place to view Favorited books
I will use a UICollectionView to show the books the user has liked.
Clickable Prototype
I took the sketches and composed a handful of screens. You may need to zoom out.
I designed the character, and top part of page in Sketch.
I compose and layout the screens in Keynote. I set slide dimensions to mirror an iPhone 5s (640w x 1136h). I use Keynotopia design library for the iOS 8 controls.
Next: Proof of Concept
This tutorial seems to do exactly what I want. I will be implementing the swipe tutorial in Swift.
Hello, readers. Today is Tuesday October 20th. This is the first post of 10 that will document the process I go through for turning an idea into an app. In this post I will be combining all of my notes and thoughts leading up to this project.
I have a couple goals that I wish to accomplish with this project. First I want to solve a proble. Second, I want to see if I can build something quickly. Finally, I want to document my effort in a way that other people can benefit.
I plan to cover as much as I can by journaling each day. The writing style will switch between journal and narrative depending on the amount of time I have.
I have broken out the next 10 days into 10-12 stages. Because of the nonlinear nature of the creative process some stages will be revisited several times.
Outline, bold items are being addressed in this post:
Identifying a Problem
Possible Solutions
Expanding on the Idea
Lessons Learned
Basic Requirements
Sketches
Another Character
Prototyping (Keynote)
Proof of Concept
The Backend
Building the App
Laying Out Screens
Defining Input
The Loop
Social
Polish
Done
Identifying a Problem
The problem I wish to solve is one that new parents face: finding a good picture book to read to your kids. There are many books out there written for kids. I don't know about you, but I'm tired of the classics. Just because it's a classic doesn't mean it's good. What about new and upcoming authors?
I recently wrote about how children's books are designed to visually appeal to children. My idea is that I can build on this natural behavior.
Possible Solutions
How does one solve the problem of finding a new book to read?
There are several possible solutions to this problem.
let parents and kids share book recommendations
provide a way to visually explore and find new books
aggregate periodic library book lists
Of these three possible solutions, the one that seems simple and interesting to me is the middle one "a visual way to explore and find new books".
Expanding on the Idea
What creative ways could I build an application that lets kids explore and find new books on their own?
4 riffs on the concept:
book battle - a system where books battle against each other for the top spot
would need a lot of users
may be hard to sustain
I imagine grungy theme music and a lucha dore/wrestling match between books
hot or not style app for kids books (could be interesting)
let users vote one at a time by choosing a sliding scale 1-10
would require knowing the users age
not sure how to gather that info
A tinder style app for kids books (could also be interesting)
swipe left for books you dislike, right for books they do
builds a list of books the user likes
how to send to parents? prompt user to give to mom or dad? email?
is a child's choice good enough for a parent to buy?
what other information might a parent want?
A giant visual book explorer
large visual map of books by cover
allow zooming in and out
might work better as a webpage or iPad app
Lessons LEarned
I have learned many lessons for building for mobile:
easy to overcomplicate
onboarding is hard
solve for onboarding early
UI needs to be very simple
account for tiny hands
account for "oops"
instant gratification
sound effect, animation, noise, something must happen
build something people will share
Basic Requirements
There are a small list of core features I think an application aimed at children should have:
be visual in nature
simple UX
use a cute mascot/logo/character
use vibrant colors
use lots of sound effects (pull to refresh, and for confirming user actions)
kidsafe
Sketches
For each idea I have sketched out some possible screens, words/names that I could associate to the project.
opihi/clam riff off oyster
scroll around
on click of book show similar books
on second tap show detail
book explorer
of clicks increases size of images
scales 1-1.25x
visual mosaic
sort by age of target audience?
book battle
grungy theme song
have an opening sequence animation
gestuee left or right
hot or not for kids books
the book a kid votes down blows up!
could possibly show a boxing match style graphic pitting two books against each other
how to show like?
thumbs up or heart?
I also thought up a character guide
cyclops?
robot?
play off nainai's book worm mascot?
combine the two: cyclops book worm?
what if the character guide was a full screen animated face?
the character could sit on screen and provide a guide for the user
more riffing
I sketched out a stylized title graphic: Cyclops the Bookworm
I also sketched out potential sound effects. I want this app to feel interactive.
sound effects for actions
when a user swipes left (no)
"mm, no!"
"hmm"
"no"
when a user swipes right (yes)
"hahaha!"
"yeah!"
"yes!!""
"woohoo!"
while the user is swiping... in middle state
"hmm?"
"hmm!"
"I dunno!"
Another Character Idea
I realized later that the cyclops bookworm might be hard to animate. Instead I tried to think up a different character.
I thought about how the process of finding a new book is like being on a hunt. I then thought about hunting for truffles. That is when I had the idea for a tiny truffle finding piglet could be the character guide and mascot.
I figure if I kept the character small then I could avoid having to do lots of animations.
Meet "Truffle" the friendly little piglet that will help your kids find the next great book to read!
Next: A Prototype
In the next post I will present a clickable prototype, built in Keynotopia.
If you've learned Sketch or if you know how to illustrate using vectors (Adobe Illustrator), you should consider giving PaintCode a try.
PaintCode is a Mac Desktop app that lets you control your designs programmatically. It is mind blowing!!!
Last night I set out to learn PaintCode. My idea was to animate Wormy the bookworm riding Timothy the train (no connection to the popular train series).
Here's the process I use for converting a Sketch3 into an iOS animation (or gif) with PaintCode:
Design in Sketch3
Export layers as SVG
Import SVG layers into PaintCode
Separate and link up layers to derived variables
Export as Swift or Obj-C
Create a view inside your app on Storyboard
Render images into an Array
Link the image array to an UIImage object
Build and Run
quick note: these are stages vs steps and you will find yourself hopping around each stage as you fine tune your designs.
Design in Sketch
Last night I decided to learn PaintCode. I was about to tweet out asking for ideas when I realized I have wanted to build a custom ActivityIndicator when people pull-to-refresh content on my app. (I'll be covering my experience going through tutorial later)
I opened up Sketch and drew a background... I made some hills, clouds, dirt, and a train track. The width of this background is 600px. This width will allow enough space for moving the background to the left as Timothy chugs along.
Next, I drew Timothy the Train (the original files are much more detailed). The bar connecting three wheels is a group of shapes. Later, I explain how to animate them in a realistic fashion.
I then cropped out wormy from one of the drawings I made prior. I want him to move up and down as the train wheels turn.
I aimed for a final target scene 400 pixels wide by 100 ixels high to account for the wider screens on the iPhone 6/+. To accomodate smaller screens, I use constraints and pin the sides to the leading and trailing edgesof the view. The height should keep the same aspect ratio depending on width of screen.
Export Layers as SVG
Sketch3 lets you easily export art in any popular format (PNG, JPG, SVG). Since you're drawing vector art you can provide a multiplier to easily scale up the resolution for higher levels of detail.
I exported each asset as a 4x SVG.
Import SVG Layers into PaintCode
You must ipmort the SVG layers from Sketch 3 into PaintCode.
PaintCode will maintain groups and layers from Sketch 3.
For this stage I had to go back to Sketch3 multiple times to adjust the distribution of track cells, clouds, and hills in background.
It is important to think through how you expect your animation to occur. Getting your source layers right before you start animating will save you headache in the end. If it's a simple loop, you might not need a background. Fewer layers means less complexity. Very complex scenes will render very large Swift/ObjC files.
Separate and link layers to derived variables
Here is a list of the variables I track:
In my animation I track how far the train has "traveled". The background graphic has an extra 200 pixels worth of image that is used to simulate movement. Once the train has traveled the 200 pixels, it is reset back to 0. The animation then continues this loop.
I also link the rotational value of each wheels to an expression derived from the distance needed to travel. Each wheel is comprised of a back blue section, 16 spokes, and a wheel cap. These are all grouped together as a Sketch3 Symbol (makes editing them all at once much easier)
The rotation cycles through 400 degrees. I map perform some math 360*wheelAngle/400 for calculating where the rotation of the wheel needs to be in order to complete a full rotation at the 200th pixel.
I link the x (left/right) position of the wheel bar to the cosine of the rotational value of the wheel. I then link the y (up/down) position of the wheel bar to the sine of the rotational value of the wheel.
I also link the y position of wormy to bounce around on the train.
Export as Swift or Obj-C
When your animations are working properly export the project to Swift or Objective-C.
A file will be generated with either one or two functions. The first, main function if run will generate the graphic for the scene that you designed. Input variables from PaintCode will be converted into required parameters for the drawing function.
Create a UIImageView inside your Storyboard
In this demonstration I will generate an animated image. To display this in my application I create a UIImageView in my Storyboard. I then expose an @IBOutlet imv of type UIImageView that I link in Storyboard.
Render images into an Array
Next I run a for loop and generate an array of images. These images will be iterated through for the animation.
I create an NSMutableArray to hold the output of the StyleKitName.imageOfTimothyTrain() function.
Link the image array to an UIImage object
Next I create a UIImage object im and link create an animated image composed of the array of images.
I finally set the imv UIImageView's image variable to the animated image.
I have noticed with my children that they are highly attached to their avatars. Netflix has a feature that lets families associate avatars to each person. The avatars are meant to visually communicate the account currently logged in. Since my kids are still learnign to read, these small square pictures serve their purpose well.
I have observed passionate battles over which icon is chosen. The avatar and associated list of ratings sets the tone for whatever they will watch next. This often gives my daughter a huge advantage because she tends to win these challenges.
Seeing how passionate they were about their avatars gave me the idea that I should include avatars as part of my app. If I could get kids intensely passionate about the books they read as they are about the videos they watch, then I think that'd be a major win for the world.
On Privacy
It is important to immediately address privacy concerns. When building an application or service that children will be using any and all information that can submitted by a user MUST be scrutinized before being distrubed.
The way a service implements avatars is a strong indicator of both the expected usage of the avaatars and the level of privacy that the service implicitly provides. When you see a service that uses user submitted photos (Facebook) you can correctly assume that those photos serve a social mechanism. When you see a service that uses computer generated avatars (Wordpress comments) you can assume that the service is either less social or not a social product.
Image Uploads
Image uploads are often my biggest concerns when designing a product. If a offensive photo were to make it into the system it would completely undermine and ruin the credibility of the product!
Solutions to this sort of challenge require manually reviewing each image that is uploaded. Properly reviewing every single image can be a huge but necessary burden. In my app's case I simply do not allow ANY image uploads. For identifying users I utilize curated and computer generated avatars.
Text Messaging and Commenting
Messaging between users is a place where offensive behavior can also occur. Some services will implment a limited set of curated messages.
Commenting is hard to manage. However, by segregating anonymous users from users that parents have approved of it can help to mitigate and limit unwanted interaction with strangers.
Low vs High Fidelity
There are generally two types of avatars: low and high fidelity.
Low fidelity avatars are generally abstract in design, low in information, and utilize geometric or organic shapes. These are often used when the user has not been identified, or as a way to visually differentiate between multiple users. Abstract avatars are often used to speed up an account signup process by randomly selecting an avatar thereby not requiring the user to select or upload a higher fidelity image.
Low fidelity avatars also move the onus of a web service away from the "person" and on to their activity/comments in the system. This shift is important for things like commenting systems where too much identifiable information provided (like a high resolution photo, and even a username) can influence the perception of the user. Extra information introduces biases quickly and can often distract from a products purpose.
High fidelity avatars are often cropped photos, or fine line drawings. This type of avatar is most useful for users that want to maintain a particular brand or identity across services.
High fidelity user generated or user submitted avatars allow for the most literal sense of identity.
The target audience of my application is currently parents and children aged 0.5 - 7y. This wide age range and lack of user sophisitication is a strong vote for using lower fidelity avatars.
Gender Neutral Avatars
The digital game company TocaBoca is one of my favorite product companies. Each of their products feature avatars that are purposefully designed to be gender neutral. In their game "Toca Tailor," there are two human avatars and two animal avatars. This allows flexibility when choosing a character that doesn't fit within the normal gender roles. I personally like the sloth character a lot.
In the game, you can dress up your character in dresses, blouses, pants, skirts, shorts, an shirts. All characters have access to each type of clothing. In addition, there are several different patterns and colors available for creating clothing. The mixture of different clothing types and different patterns makes for very creative designs.
I have observed other patterns across their products. In products that feature humans, they usually include one male, one female, and two ambiguous gender typed characters. In products that do not feature humans, they use different shapes, colors, and animation mannerisms (like method of locomotion, or gait) to skirt the entire gender question entirely.
Suffice it to say that I plan on providing a mixture of gender normalized types as well as ambiguous gender types.
Choice, Ease of Change, and Emotional Connection
Giving children the ability to choose their avatar identity introuces interesting behavior. For one, the avatar becomes her method for expressing her current emotion. For the other, it is distinctly his identiy.
One issue with allowing easy avatar changes is that the child who changes her avatar frequently pays more attention to the location of the avatar relative to the others when determining which one is "hers". I have considered adding more information like a first initial.
There is some evidence that supports having less options (The paradox of choice). I may cull back the list to a standardized selection. I am not sure yet and will keep monitoring the frequency of changes and the distribution of avatars across the entire userbase.
Static vs Dynamic Avatars
A static avatar is easy to create. Static avatars are usually an arrangment of several shapes.
Dynamic avatars (animated) are more complex. They require either pre-rendering the animations into gifs or movies.
The thing that interests me most about Dynamic avatars is the wider range of emotion that can be displayed. When a reader loves something it can for instnce be animated to smile. Lots of other fun concepts become possible as dynamic avatars are incorporated into an application.
For me, I plan on releasing at least one animated avatar to see if kids find it useful and engaging. However, the added complexity makes this a future feature that will have to wait a week or two after release.
The Use of Color
Color in an avatar is very important. Because color can be affected by a persons preference, inconsistencies in color reproduction across multiple devices, and a persons mood it is important to provide avatars for the entire range of color and, by extension, mood.
My original character design motif started with two-tone color palette. I used one dark color and one light color. Unlike a full color palette a two-toned color palette provides extra constraints because of the importance of negative space.
The line of reasoning I had was that a lower color count paired with an abstract character may provide more illustrative ambiguity but hopefully more emotional engagement.
After designing several of these two-toned characters, I did not observe a major change in level of emotional engagement across my two readers. However, I did find was that color preference and variety matters most for the reader that likes changing their avatar frequently and less for the type that has self identified with a particular avatar.
The Effect of Shape
Shape plays a critical role in how we perceive avatars. There are two common shapes for avatars: square and circle.
The square avatar has been commonly used for over a decade. Facebook, Twitter, and almost all social networks utilize the square pattern.
In 2012 there was a design trope that used a circle mask to cut out a person's face. This is still in use today and is helpful for driving attention to the face. The obsuring of the background drives a user to want to click on and see where the person was located when the picture was taken.
When you introduce character avatars into a system those characters are often merged into other graphics, background scenes, print collateral, and launch screens. These scenes provide a way for the characters to live outside of their bounding box. Square or circular bounded avatars then function as a reference for the user.
I am still unsure if embedding characters throughout the designs increases emotional connection. However, for the observant user they may find joy knowing that their character can be seen hidden at the edge of a design.
Curated vs Customized
Ideally you would believe that if an avatar provides user engagement and emotional connection, then a feature offering customized avatars would provide the most. One great example for highly customized avatars is the Nintendo Wii Mii. These Miis are generated on the Nintendo Wii console. They were also allowed to be "transported" and brought to a friends house so you could both play against each other. The success of the Mii is a strong vote of confidence that Customized avatars provide the most emotional engagement.
I recently found a font called The Face by Rory Harnden that provides an entire avat system within a single font. The designer used ligatures to make placement of each element. The elements start off simple, but as they are combined they become complex and very expressive and detailed.
If there is enough time for developing this sort of feature, then providing a customizable avatar can provide an extreme level of emotional engagement. However, in a pinch a selection of simple curated avatars is still a valid way to provide engagement.
The biggest challenge for an independent developer is the limitation on time and resources. For this reason I am providing only a curated list of avatars. However, in the future I plan on expanding and offerring more customization.
The First Batch
I drew a dozen and a half avatars using Sketch 3. Most are doodles, simplified designs of iconic characters, animals, and other creatures. My hope is to add more as time goes by maybe even releasing them seasonally.
My thoughts and observations on why my kids are drawn to and like the books that they like.
TL;DR overview
book cover: style, read similar books
method of discovery: library, word of mouth, friend's bookshelf, the book store
non-sequiturs and humor
narrator: rhyming, and word pacing
the perfect kids book
Judge a Book by Its Cover, It's OK
I've been trying to understand why my children gravitate to and fall in love with books. The most prominent, and obvious reason that my children gravitate to a book is its cover. It may seem obvious, but the condition of a book, the quality of the design, whether or not the cover is hard are all factors in deciding if a kid will pick up a book.
Books with a timeless design are ones that do well in this regard. Books like those of Eric Carle do well because he uses an abstract illustration style that uses high contrast colors. The abstract style also allows wide amounts of interpretation of the figures and shapes. Carle's books also have high sentimental and nostalgic value for parents. His book "The Very Hungry Catepillar" came out over 25 years ago. I, like many parents, am now reading it to my kids -- thereby increasing the likelihood that the book will remain a classic.
There are other types that do well with my kids. Books in a contemporary cartoon, thick-lined art style attracts both my son's and my attention. "The Dinosaur vs. X" series by Bob Shea has received quite a bit of reads. The signature of the book is the repeating pattern "Dinosaur versus..." every other page as the dinosaur progresses through challenges.
For my daughter, she highly prefers anything with a princess, ballerina, or when they're combined in books like the "The Nutcracker" get her attention. Books with girls or females on the cover also catch her eye. I've been unable to figure out the pattern she uses when finding books, but her style is deliberate in how she thinks about and searches for books.
Finding New + Good Kid Books = Hard
How we learn about a new kids book is important. The most common places we discover books is at the library, followed by word of mouth, a friend's house, and bookstores.
At the Whim of a Librarian
The library is currently our #1 place for discovering new kid books. At our nearby library there is a room dedicated to children's books. In the center of the room is a new and noteworthy bookshelf. This is where the librarian places either newly acquired books or books that have recently received press or awards. We recently borrowed recent Geisel Award winning book "The Watermelon Seed" by Grego Pizzoli. The book is a great example of a book with the proper attention placed on writing and simple yet communicative illustration. My kid's didn't particularly like the book. However, I attribute that to the book topic as it could do very well during summertime.
Librarians currently promote books in a time-inefficient manner. They use the space on shelves to promote books that either need circulation, or that they think could be of interest to their patrons. They will place books with their covers facing out in order to attract attention -- it works. I initially thought there was a process for which books were promoted, but at my library book choice depends on who is in charge. The kids are often drawn to the books with covers out so this makes up most of the books they select.
For me, I have been manually tracking the authors of books we've read several times. I then find them on the shelf and thumb through alternative books to consider. This lead me to creating nainai the reading diary for kids.
Worth a Shot
The next method for finding new books is from friends through word of mouth. It doesn't happen often, but when a friend recommends a book it's almost always worth buying outright. The latest recommendation I received was for "Battle Bunny" by Jon Scieszka a very creative and subversive take on a child's book.
The decision process for buying the book is dependent on the ages of the recommender's children. Book recommendations from parents with children within an age range of 0.5-1 years are easy buys.
Your Friend's Kid's Bookshelf
Another method for discovering books is from viewing the bookshelves of our friend's kids. Like word of mouth recommendations, the biggest vote of confidence for any kid's product is another parent displaying it in their home. On playdates at a friend's house, books left within arms reach are likely to be glanced at. Also, if one child begins reading then the others will follow. I mentally keep note of interesting books that my friends read to their kids for later borrowing or buying.
I'm a Sucker for Books at Museum Stores
Finally, and albeit most commonplace for impulse book purchases for my kids is at Museum and Airport book stores. The books are usually a last minute gift from traveling. Often the decision to buy is a mixture of nostalgia or an eye-catching design. Bookstores like the SoMa Museum store at SFO are places where I've found several great books. One of our current favorites is "Flip-o-Saurus" by Britta Drehsen.
It Does Not Follow
My son's continued interest in a book hinges on whether or not the book's narrator (me) can create a sort of verbal nonsequitor. He loves it if a book has a natural progression of story and unexpectedly turns goofy. I've observed that the most effective jokes are usually short and simple statements. A well-timed non-sequitor can send him into fits of laughter. He will often ask me to repeat the setup and punch line several times in a row.
For me, the narrator, I love books that fun to read for my audience and me. I am often acting in a ridiculous manner to further entertain my readers so a poorly written book stands out.
I have observed that most kids books fall into a couple camps: There is the beautifully illustrated book with poor writing or lacking depth. There is also the interesting book that got butchered in editing. Then there is the well balanced book that has a fun to follow story, and illustrations that are memorable or interesting.
It is extremely hard to find a book that is written well, paced well, illustrated well, and fun to read aloud. One particular well-written book is "Freight Train" by Donald Crews. The pacing of words is perfect. Often times my kids will join in as we read. It is as if the reader is a freight train rearing up to a crossroad, passing, and leaving into the distance.
Story vs Abstract Concepts
I think a book has most staying power if the story it tells is abstract and open to interpretation, but has a conclusive ending. Most often, for our kids, we read books from the library while hunting for books they love. These books become the books that we add to our home library. This generally means that if the first read of a book has too much of a conclusive ending then there is less likely of a reason for an additional read.
Examples of this are books like this are "Bee-Bim-Bap" by Linda Sue Park. This story is about a little girl helping her mother prepare the Korean dish Bi Bim Bap. Once it's done it's done. This sort of book would be most interesting to kids with families who prepare the dish frequently.
An example of a book with a more abstract and inconclusive ending is the Halloween-themed book "On A Windy Night" by Nancy Raines Day and illustrated by George Bates is a story about a boy returning home alone from trick-or-treating. The writer and illustators use of abstract concepts is very well executed. The illustrations communicate the fear a child's imagination creates while alone in the dark. This helps to deliver on the general concept of the book which is that our imaginations can trick us into thinking we're seeing many things that aren't there... or are they?
The Perfect Kids Book
This line of thought got me into thinking what the ideal kids book could look like:
have an abstract cartoony cover
bright contrast colors
hardcover book
a simple title
no more than 4 words
allow room for sequels
aim would be to be sold in a museum store
meant to be read outloud
story can be about nothing in particular
the characters in the story would go on a progressive journey
goes through two story arcs that leads the narrator to abruptly let out a loud funny sound
halfway through the book, include a repetitious sentence every other page
ends at a point where the characters make it back from their journey, slightly changed
I wonder how seasonality and culture factors into whether a kid likes a new book.
TL;DR I set out to build something that solved one of my own problems. I wanted to build something that I would use every single day. I learned swift to build an iOS app. It's happening.
Library's Closed
As a father of three, I spend a lot of time trying to find things to do with my kids. Most recently I've found that a rewarding and relatively cheap way to spend quality time with my kids is through reading books.
Me and my little ones take weekly trips to our neighborhood library where we hunt for and find the next great books to bring home. Everynight before bed we now have a ritual where I read a couple books per child. The order of books is chosen by a jostling and intense negotiation. Most often my daughter wins out and has her book read last. My son is satisfied with having his book read first. A good comporomise.
Over the past two months of this experiment I've learned that there is great satisfaction in your parenting abilities if your children like spending time with you (duh!). For me, having my kids demand that I "read a book now" brings me great joy!
It was around two months ago when I found myself hauling a giant bag of books to the Library. The library was unfortunately closed. I set the bag down and prepared to push the 25 borrowed books through the door. While doing this I realized I had forgotten which of the books I had just returned! I felt a momentary sense of loss. I wondered if other parents and their children are forgetting what they've read to their kids? These highly rewarding, albeit fleeting, moments spent together were now lost! With a handful of books left. I thought to myself, "Wait, I'll save them on Goodreads!"
I stood hunched over on the steps of the building. In one hand I held a copy of "Nighty Night, Little Green Monster" and in the other I waved my iPhone over a bar code. I eventually struggled through scanning each book. Returned each book and headed home with my now empty book bag.
A Simple Reading Diary... You Know, For Kids
That evening and into the next day I spent time gathering thoughts:
How common is it for parents to track these memories?
Do parents want to track what they read?
Would there be value if I could track the things I read to my kids? Could I track anything else?
What could I learn from this information?
Could I further involve my kids in the activity?
What if I built a mobile reading diary? Would my kids use it?
What if every parent I knew shared what they read to their kids?
Would I be able highlight particularly fun experiences shared together?
Would my kids find value in what we were doing? How could I show them?
Could I use something like this everyday?
Would my friends do this?
Could I build something that grew with my children?
Is there any value in sharing what my kids love?
Could I do this in a way that protects my and other kids?
Could I help parents transfer their love of reading to their children?
Would I learn something new if I built something?
I let these ideas bounce around.
I then did some research:
It is common knowledge that reading to your children is important for early mental development.
Parents are also extremely busy. Recent studies have shown that parents spend less than one hour a day with their children! One hour!
It is common for poor families to 1) not read to their children 2) to not own any books! :(
I learned that the way our brains processes printed books and digital books are different.
Younger people [16-26] prefer print over ebooks. cite
Understanding the effect Print vs eBooks have on the brain cite
Your ability to recall chronological events changes when reading on print vs electronic cite
I've found that people I surveyed with children prefer physical books over digital books for night time reading. We also try to limit or completely remove access to iPads and digital devices before bed.
I thought through other options parents like me have:
Yes, Goodreads exists. But their UX is poor and could be heavily simplified.
Yes, I could do it with a piece of pen and paper. But I wouldn't want to lose that information.
Yes, I could simply not track it. But from my anecdotal evidence if I track something I am more likely to continue to do the activity. Social is nice, but context is more important. How can I learn from parents of similarly aged children without having to ask them? Could passively gathered information provide enough signal to help me decide what we buy, borrow and read next? Maybe.
As I age I will continue to forget more things, so gathering this information now will help me recall it in future.
I left the idea alone until later that evening.
I found myself wedged between my 5 year old and my 3 year old. We were reading "Bobo the Sailor Man" -- one particular page in the book drives them into fits of laughter! I knew then and there that I wanted to be able to remember that moment!
To put it plainly, I have not been able to stop thinking about this idea.
Asking Some Friends
I next worked to validate some of my assumptions 1) that my peers read to their kids and 2) they track what they read.
I set up a quick poll on FB.
What I learned was interesting:
Most of the people (12 responses) I know with kids value reading to their children. They make time to read to their kids. I could not find a pattern in consistency -- some simply read when they can. One person even reads to their children over 16 years old!
The reading tends to be the job of the primary caregiver. Moms and dads can both be primary reader, but dads read the least consistently or only on weekends.
With this bit of information I confirmed that the behavior was something that people valued, and was not a completely alien activity.
OK. So, If I build something, people might use it.
Imaginary Users
Since I have already experienced this problem, it was easy for me to come up with a conceptual idea. To move it further than myself I needed to think through other types of use cases. To help with this exercise I imagined a couple ideal user personas based on myself, my wife, and my mother.
The 3 types: A mom, dad, and grandparent.
Kara, a busy, working mother of two. She has two children Jackson 3, and Ella 5. They read one or two books a night. Her husband is named Rick. Kara takes her kids to the library once a month. She is also part of a local mother's group that meets at a park near her house on Saturdays. Kara loves a few things: mocha latte's, Tory Burch, and brunch at Tartine. She currently gets book recommendations from her group in person or on FB, pins on Pinterest, and through recommendations on Amazon.
Rick works long hours as a Product Manager at a startup in San Francisco. When not traveling or speaking at conferences, Chris' weekends are spent with his family. He likes taking his kids to Dolores park, the Academy of Science, and SF MoMa. He tries to get a couple readings in on the weekends. Rick finds new books via word of mouth from friends, from Twitter, or when traveling through airports. Chris prefers finding books that emphasize gender neutral stories, illustration style and design, over the traditional stories.
Al is Kara's father. Al is 65, retired and lives in Irvine California. Al mails books to his grandchildren either through Amazon or by mailing a package every 3 months. He gets book recommendations from NPR, Good Morning America, Goodreads, and while visiting his neighborhood book store.
Armed with these imaginary users I thought through the next step.
Here Goes Something
I've been in the startup game since 2006.
I know I can build products.
I know I can build a team.
I know I can design.
I know I can code.
I have some time.
And most important... I know that if I don't build this It'll drive me nuts.
So I began building my app.
I loaded up Keynotopia and built a rough prototype in Keynote.
Over the course of the next week I manually prototyped with my kids.
Each night I would snap a photo of their faces followed by each book's ISBN. After reading each book I would ask them if they loved the books or not. I would also ask them to tell the story back to me in their own words.
When a book is new they quickly determine if they like a book. My kids quickly have an opinion about whether or not they like a book, but if they truly like a book, then they will request it be read several days in a row. A "favorite" in my opinion is a book that is requested 3 or more times. I adjusted my designs to let each kid voice their love for a particular book reading and also track frequency of reads.
Being willing to test out ideas and assumptions can be humbling. Finding the confidence in yourself that you can build something to completion takes a certain type of personal honesty that is hard to come by.
Not Too Swift
Once I nailed down my prototype I started building the actual app.
I taught myself Swift by building a couple test apps to test out core functions. My first app was a QRcode scanning app built from an online tutorial. I then modified it to scan ISBN bar codes (also known as EANs). I had an a-ha moment when the app functioned as expected. The app idea was feasible, and the hardest technical piece was not so hard to accomplish.
Next, I wrote a server side script to call an API with book data. My server script identifies books by ISBN and returns back information like author, illustrator, titlem and a couple other bits of useful information.
After I built this I focused on server methods for creating what I call "readings". This allows tying multiple readers to a single book. An interesting observation I had was that one of my testers added himself as a reader. This allowed him to track which parent read which book to his child. I immediately copied him by adding myself to all the readings I had done and my wife to the readings she had done. I am now in the process of making the reader flows for parents and children more intuitive.
Overall, this took me longer than I expected. Having to learn Swift while also interacting with new libraries and a new backend system. The biggest challenges were in understanding the way delegate functions, classes, and the Storyboard builder work together in iOS. The departure from Objective-C naming syntax, no longer needing to manage memory (ARC), and decent syntax auto completion has made building an app much easier than any time in the past 6 years.
Picking up the Swift is much easier if you already know Javascript. Lots of language similarities. You can cut out extra development by building on top of a platform like Parse. There are risk/benefits that should be considered when doing so.
Where I am Now
I am extremely thankful to the 20 testers currently using the app. Every email I receive with any feedback makes me very happy!
Some early testers joined on when things were much rougher. I've seen those people fall off, as can be expected. I hope to improve the application further so if they return they have a much better experience!
I currently try to release a new build everyday. My hit rate is about 2 per week. I'm making steady progress and should be getting closer to more frequent releases once I nail down a couple very challenging elements.
What's Left?
The next steps are to nail down about 7 core elements before expanding to a wider set of testing and enentually heading to the app store!
The Easy stuff
Allow editing dates - this one seems easy, but boy has it been challenging to nail down. I'm nearly there.
Activity indicators when waiting for the server - Right now users can double trigger certain events, an activity indicator would prevent them from doing so. The main benefit to an activity indicator is that the user knows something is happening in the background. A small spinning animation will show up at the center of the screen.
Improve the add reader flow - The add reader button immediately adds a user. I've had complaints from users that this is jarring.
do not automatically create on button press, but on save
Allow deleting readers - I didn't build this because I didn't have time, but some people have multiple readers clogging their screens.
Verify with question only an adult can answer - I want to add a verification step to ask a question only a parent or child > 7 can decipher.
Decide if removing a reader means removing them from readings and letting the user manually remove readings themselves
Remove from relatedReadings
A more efficient method for calculating favorites - I currently use a very inefficient method for pulling a user's favorites. I have another aproach that could make this faster and more useful in the future.
The Challenging stuff
Show onboarding graphics - I have some screens, but haven't figured out the right way to display them
How to better handle social networks, friends/follower? - This one is a huge one I need to nail down.
Double opt-in vs public by default feeds?
An activity stream?
Improve system settings page from static table and manual buttons to enumerated dynamic table T_T
Enumerated list
A full list of scrollable reader list
Add emails for periodic messages about their reader activity
After seeing this image shared on twitter by Urban Compass I realized that the data was inaccurate. I was also curious how Hawaii and San Francisco compared to some of the most expensive cities in the world.
I opened up photoshop and got to work.
I did some searches and found the cost of real estate per square foot, performed a simple math calculation, and then redrew them on the image provided.
Here is a link to the same graph with Omaha Nebraska included.
Here is a link to a Google Spreadsheet with my calculations and references.
Here is a link to the Photoshop files for adapting, or reuse.
Programmers love solving problems. The issue is that most times we are functioning on a lack of information. Within our minds we model a systems and processes that allow us to abstract away the need to think about any one specific piece all the time.
When we are building new functionality or when a hard to replicate bug is discovered it will set you down a series of paths and decisions that, if explored, sometimes, but most often won't directly solve the problem. Instead it will help to illuminate or inform future decisions and actions that need to occur.
This gif demonstrates how a simple premise like fixing a small issue can lead you down an endless path of decisions.
So how do you avoid these innocuous time sinks?
Assess priority
Give yourself a time limit (15 min)
Asking for help
Only productive interruptions
Structure of day
Assessing priority of the issue
A personal rule that I use is: quickly estimate the amount of time I expect researching or solving a problem I am having will take. If it will take more than 15 minutes, then ping my team.
Give yourself 15 minutes to solve a problem
If your assessment is that this problem will take less than 15 minutes, then go ahead, but first set a timer for yourself. If you haven't solved your problem within 15 minutes, then immediately ping someone on your team.
Sometimes you are working alone, or the team isn't available while you work in your timezone. This is where a simple self enforced timer can help rein in time easily spent wasted on SO.
Pinging your team for help
The goal of a team is to move quickly and build high quality products. The goal of everyone on a team is to enable their team members to move quickly. Communication is key and
The math works out too. Generally speaking a team of developers are generally highly paid. If a teams time is worth say $100 per hour, and a quick chat provides enough information to avoid 1 - 2 hours of another developers work then it is "worth" it in a financial sense.
If someone knows a system better than you then it even helps to set aside time to explore the system and ask questions together, and at the beginning of a project under taking.
Avoiding interruptions
Can a team that constantly interrupts each other work? In the short time some structure should be put into place to increase a programmers chances of success -- this means proper hand off, a deep enough system brief, and an open invitation to ask questions. In the long run it pays dividends because programmers are not spending time googling around in futility and have their heads spent less in understanding a system and more in sovling problems or improving products.
I am not a big fan of persistently on chat applications like Slack are, becaude there is a constant mental overhead for checking on conversations that slowly saps away your ability to stay focused.
Structuring your day
Although I am not a fan of everything Paul Graham does or says, his post on the Maker's vs Manager's Schedule resonated with me.
If you're an independent contributor building, debugging, designing, or problem solving, then it helps to keep your day broken into as few larger chunks possible.
I personally like to break my day into two major blocks with lunch separating the halves.
This gives you roughly 2 3-hour chunks of uninterrupted time to work.
For management types who work with software developers or designers, figure out how the folks on your team prefer to schedule their meetings. Some folks might want meetings late in day, early in day, or closer to their lunch breaks.
If you've ever had trouble focusing on deep techinical problems because of a dreaded upcoming meeting, then you'll know how important communicating and finding the right time for meetings can be.
I learned about the 15 minutes or ask a team member bit from my friend Nikhil.
Over the past 8 years I have started 6 companies. I sold two and one is growing fast. I have also advised dozens of ambitious entrepreneurs. Across all companies, I have built ten different products to varying degrees of success *.
Here is a list of general thoughts on startups:
Build something people want. It sounds like a no-brainer, but people need to be reminded to build something people want. When building products the quickest way to finding out if someone wants what you're building is to ask them! Finding a problem that people currently have is a good starting point. Validating that people have this problem and then building solutions that solve these problems is at it's core the most straight forward way to start out.
Focused experimentation. When building a new product it is unlikely that you will start out with a clearly defined problem. It is important to invest time up-front to clarifying a set of hypotheses that you are solving. Do everything you can to avoid building software at this stage. A mockups, design compositions, and test landing pages can help save a lot of time!
Stay Focused. Generally, a "see what happens" attitude creates products and projects that switch focus quickly and without structure will waste time. With a structured approach one can produce useful data points and insight. Start by including a general thesis statement and a couple testable hypotheses. These hypotheses should be shared with the entire team. Everyone on the team should understand what is being tested and why. The group can be allowed to work individually or in coordination with others towards proving or disproving the thesis. Any work beyond proving/disproving the thesis should be avoided.
Complexity hides shortcomings. I find that it is very easy to over complicate things. Complexity hinders growth and learning by distracting you from important matters. Complexity tricks you into a false sense of accomplishment (busy work). Strive for simplicity.
Ignore vanity. Obsessing over vanity metrics, unnecessary or seemingly random marketing gimmicks prior to product market fit, premature partnerships or collaborations with other companies that can distract the team from finding product market fit, and otherwise pointless expenses of time and energy are a good marker of an inexperienced or unskilled founder. How do you know a metric is vain? You want to brag about a certain metric, but you know that it has no bearing on your business actually making money.
Simplify! I don't know what you are building, but I can guess your product too complex. Go back to the basics. Build things that solve problems that real people have. In most cases cutting away to the deeper issue at hand allows you to find a very simple problem and sometimes (but not always) a simple solution.
Build for a vision. The entire team must believe in the vision and make every decision towards furthering this goal. Every ounce of energy not put towards fulfilling your vision is a waste.
BE BOLD! The emotional roller coasters of the startup life is not for the feint of heart. If your startup is struggling, delayed, or languishing, then days can feel like an endless grind. Be bold! Own it! Be it!
Always be selling. If you are the founder and you are not talking about your product, team, or service all-day, everyday, then you will lose. I played the humble card one too often. I apologized myself out of many opportunities.
Just one more feature! Stop pinning growth of the company on features. Don't tell people that you are waiting until you have feature "X" before you really push. What if you never complete feature "X"? Seems like quite a risky proposition and story to pin on your product. Do you really need to build "X"? Are you sure?
Wabi-sabi. Finding life balance and running a startup is futile.. Accept and embrace incompleteness and being in a state of works in progress. Trying to build product, acquire users, raise funding, stay focused, hire people, experiment, learn, communicate effectively, project a sense of control and vision, keep vendors paid, work to direct the team towards the companies goals while also fulfilling their own needs... can become a bit much. Prioritizing and focusing can help.
Probably not gonna work. Don't kids yourself. Most of your ideas are wrong. Act knowing that things may fail. Proactively construct your roadmap and sprints to incorpate, adjust to, and account for learning.
Reflect. Take personal inventory frequently and reflect occaisionally. It is important for small startup founding teams to find their center, but not dwell. It is also good from a personal standpoint to build a periodic history of lessons learned: listing what you thought would happen, what actually happened, and what you learned.
Curious Strive to stay curious, and interested, act as if you are still a young scientist that doesn't know.
Having a mission. Beyond startups, a founder that aims to fulfill a (healthy) personal mission is a force with which to be reckoned. Finding this personal mission is hard. It helps to experiment with ideas, but then to be very specific about what success means in the context of your mission.
Ex. My personal mission is to help and empower people. One way I aim to do this is by helping 1000 people build a home or pay for their housing. I want to empower people by helping them learn how to learn. The reason why I supported an acqusition by the cryptocurrency company OpenCoin was that I believed their goal of "distributing wealth on a global scale" fulfilled two things: helping give people money would let them pay for their housing. It would also help them be self sufficient for earning an income by working to lower costs for transmitting $ and for cutting out the multiple layers of people between transactions (c.f. Africa).
From a macro view, the points I have shared involve solutions that grow increasingly in complexity at the sake of a clear purpose. Maintaining a clear purpose is critical.
Notes:
Products I've built: I Can Has Cheezburger? kittehs, I Has a Hotdog! whargrrrbbls, co-authored a NYT Best-selling humor book under the pen name "Professor Happycat", built a couple social media plugins for Wordpress (plurk), MyChamberApp local and mobile advertising for Chamber of Commerce members, WhatChefsEat restaurant recommendations from chefs worldwide, LeiFresh shifting consumption of imported food by helping people track and buy locally grown food, HawaiiFareSurfer finding the lowest airfare from anywhere to Hawaii, simplehoney was a personalized hotel search engine based on traveler preference, IWantHoney was a mobile shopping wishlist that help people track and share the things they want, was acquired by digital currency company Ripple
