After we made Do it (Tomorrow) for iPhone we started to hear from people they wanted an Android version. Tricky thing was, we weren't Android users: we used iPhones.
Doing design can be a very personal experience: what special problems faced in day to day use can make a huge impact on the final design result.
So when we bit the bullet and commit to our first Android App, we had to figure out how to get not only a sense of what would feel great on Android but also what would be possible on the platform.
To figure this out we reached out to another indie developer who worked exclusively on Android, whose engineering chops we respected and whose designs inspired. We asked him, how would you design things?
We particularly focused on the Android widget, something totally alien to iOS. We figured the rest of the design and development should be able to flow fairly naturally out of our existing mobile design.
That's how we came up with our widgets, we iterated and redesigned and finally came up with a nice variety of widgets we felt carried the spirit of the App to Android.
When we first released Do it (Tomorrow) we had an icon to explain the concept of the App very clearly: a simple notebook to write down your tasks.
Due to some legal issues, we weren’t able to continue using the word “Todo”. That word belongs to an App called Todo and they own it.
Words on icons aren’t really our favorite anyway, so we decided to go with a more abstract concept that still portrayed a similar idea: a notebook for your plans.
We poured a lot into the icon creation process, and we looked at many many concepts before coming to this one. Our current icon is a version of this icon, modified to fit better into a flatter design world.
With AnySend our goal was to create a way to send from anywhere to anywhere. This was an ambitious project: it required making OSX, Android, Windows and iOS Apps
On every platform, our goal is to achieve harmony with the platform, to implement design and features in a way that works the way that platform works. On OSX we chose a toolbar icon, but how to represent files to send?
For image content we could show the image directly, but what if you selected many different files?
Another cool feature is pushing websites from one device to another. What if we showed the website itself as a preview?
Finally what should we show in the default case?
We made lots more previews, what happens if the images are slow to render or the websites don’t load immediately or the images are odd sizes? At the concept stage we have to think about a lot of different scenarios.
In the end some of these special previews didn’t make the cut. Going from concept to reality, lots of things change.
We love travel. We love going new places locally. Where should we go, what should we do, those are good problems to be solved by a notebook.
We’re also big fans of Foursquare, it’s a great way to see where locals go when you are abroad, and what to do when you just want to get out of the house.
What if we could combine the tips and maps of Foursquare with personal plan making and map making? Write down where you want to go, what you want to do.
In this super quick concept we explored that idea. Since that time some amazing new features for location and maps, so actually it might be something we work on in the future?
Sketchlens was an App we made for capturing sketches with your phone’s camera.
We were going for a concept somewhat similar to iUp Note - exploring ways to mix phone note taking with pen and paper note taking.
Just like iUp Note, we thought it would be pretty cool to create lots of designs for special notes, like greeting cards and postcards. To deliver these special designs, we built a small “store” where new designs would be added over time, but we also wanted to give free samples of special designs to try them out.
We played around with various ideas of how to deliver the free versions.
Lots of button iterations, from the simple:
To more obvious:
To whimsical:
We went with the dinosaur, it wasn’t the most clearly a button, but we thought it was the coolest option.
One of our first public projects was “Electron Zero”. It was a pretty rocking retro game that represented our first iPhone App on the store! To put our best foot forward we worked on a bunch of icons for the App to find the best option.
If you weren’t on the iPhone platform way back when, backgrounds could be either black or black, and Skeuomorphism was all the rage. Crazy times!
This is a good way to showcase our ideal methods for design that we’ve used since these early days, particularly for iPhone.
Design against the real environment. When we design, we try to very quickly test the design against the environment where it will be shown.
Make variations. Generally we want to make 3 great variations, and keep making variations until we are ready to decide.
Text is part of the design. What if we decided to call the App “ElectronZero” but when it was rendered on the iPhone the label was “Electr..ero”?
PS there’s a little foreshadowing here in the direction we’d take in future projects: Awesome Note for iPhone on our dock, we’re already thinking about how the phone is a great platform for notes and todos.
Everyday Notes originally was intended as a productivity tool that was oriented towards writing.
However in development we added photos and really liked the feature, it let you make very special entries, giving users of Everyday Notes a way to journal alongside productivity.
When it came time to make Everyday Notes for iPad we had to add Photo support, our goal was to match the iPhone version feature for feature and add some on top.
So how to add a photo?
Popover mode makes a lot more sense with iPad, there is no need to use the entire view.
How to show it once it’s in the book? We tried a new idea against consistency with the iPhone version
In this case we kept it consistent with the iPhone version. Some things seem like a good idea in a concept but aren’t really practical.
To one up the iPhone version we decided to add Photos to the week overviews too.
You can see a feature that didn’t make the cut in there too: Todos in week overview. We wanted a symmetrical design for the week view, but weeks have an odd number of days. What to do with the odd day? Todos would have been super cool but were too much and were left on “the cutting room floor”.
We developed stacks of icon concepts for Do it (Tomorrow).
Now we’re on version 2.5 of our icon, but version 2 was a very difficult decision and we looked into tons of ideas.
First we started with the idea that we would create an OSX version of Do it (Tomorrow). This still hasn’t made it past the prototype stage, but we were working on it with the idea of releasing it: so we thought about an icon in the OSX mold.
We started by following some ideas from other OSX Apps:
And we tried going for more traditional book dimensions
None of these designs worked for us. We went for a new idea: what if we framed our icon?
Framing was a great idea, in isolation. When we tested the icons on the device, framing made everything too busy, especially as we were trying to replace the word “todo” with a checkmark.
Finally for our V2 concept we went with a simpler concept
We built everything after this around this icon concept. Our current icon is built on this one. It was an extremely difficult decision, we came up with a lot of great ideas, but in the end this icon worked best in the most situations.
A significant portion of our project time is devoted to icons. We almost always leave this to the end since it takes so much time but is only necessary if we release a project.
For AnySend we had multiple prototypes way in advance of any icon considerations. As we got closer to release, we started to brainstorm concepts for an icon to portray “send files”
One of our top concepts, despite its relationship to “send emails” was a paper airplane. We knew emails was a close relation, so we had the idea: what about a non standard paper airplane design?
We liked this concept at the big size. Paper airplanes are cool, and this is a cool design for a paper airplane.
But then we thought about the icon at the small size, since many times with an icon you are looking at the small size. That’s why a strong profile is important.
After looking at this concept at the small size, we cancelled this direction and left paper airplanes entirely but kept “paper” as a design idea for the final icon.
One thing we’re going for is to help make routine things you do every day very easy and enjoyable, even if they are pretty mundane or a grind.
That’s where we were coming from when we thought about a notebook for writing down expenses. Most people are spending money every day, and lots of people would like to or are required to control and keep track of their spending.
This also shows an idea we had to extend the Do it (Tomorrow) notebook to more notebooks. We ended up doing that later in Everyday Notes
When creating a “new concept” icon for an App, we often start with sketches.
Sketches are easy to create and can test an idea very quickly. Our design process as always is: generate ideas, visualize and test multiple ideas, choose a direction, repeat.
In our first iteration of the Sketchlens icon was to put everything into the icon to make the concept easy to grasp: marry a camera with a sketchbook.Â
We wanted to portray an all in one simple integrated solution, like how Instagram marries a photo processing App with a camera.
When creating Everyday Notes we started with a pure technology concept: could we take the Do it (Tomorrow) book and make a multi-paged book that you could write in?
We made various prototypes of this, until finally Apple released an API for page turning that we felt was a very compelling basis for our book.
To turn our book into something that would be useful, the Everyday Notes concept was born: write whatever you want, every day. We used day planners and journals as our inspiration, but we wanted to imbue the design with character, a design that didn’t feel sterile, something that felt lived with.
In our original concept, we went very far into the idea of a used notebook, and we pushed for a lot of chrome to reinforce the idea that this was your personal notebook.
The flip side of the notebook, the Week Overview was always a tricky screen. The main notebook was extremely complex; how can we reduce complexity in the overview to keep most features front and center in the day pages?
The first iteration was pretty simplistic. Could we make it a bit richer?
The second iteration was still a bit too simplistic. We wanted to give you a week at a glance, not just a list of entries. What about listing out the week discretely?
We went with this design, and improvised the idea of scrolling the months at the top. It was pretty tricky to implement, but it sold the idea.
In a future version, we want to improve this: add photos, implement the weekend concept, variable height rows, editing and month views. But our focus has always been on the day mode, Everyday Notes has always been centered around the day experience.
Another tricky decision was how to end “editing” mode. We had the concept of a “pen” to substitute for the traditional “done” button.
The pen is cool, but actually it’s ended up being a problem for a lot of people understanding the App. In the iPad version we went back to the “done” button, and we almost went with a done button in the iPhone version
In a future version of Everyday Notes for iPhone, we should continue on the course we took with the iPad version: a done button is easy to figure out.
Apple has a “Settings” App that has a dedicated section for Apps so that you have one place to go for all your settings.
In theory this is a great feature, you would always know where to go to configure your App.
In practice we’ve had a lot of problems with it:
We couldn’t open the settings from within the App (iOS has fixed this)
Settings must be very static, only Apple can have dynamic settings
People are confused that they need to go to a separate App
So after a while we decided to add the main settings directly into our Apps and use the “Settings” App only for minor settings.
Another decision we had to make was how do you access the settings in Do it (Tomorrow)? The design goal of Do it (Tomorrow) is for you to have absolute focus on your tasks. We want to make the “settings” part of it be out of the way except when you really need it.
We played with various positions for the settings button
We also played around with the concept of settings getting their own “notebook page”
And we had the idea of “watercolor buttons”, sketch style interface
We really liked this sketch style, so that’s what we went with. And to access settings we went with a gesture, plus an early automatic reminder about enabling sync.
In the end, for 99% of people this works, but later when we designed Everyday Notes we decided to put the settings button in to make things super clear.
In a future update of Do it (Tomorrow) for iPad, we’ll probably go in the settings button direction, and maybe we’ll clarify the “Badges” option which means “Badge the App icon with the number of undone tasks on today”
When making AnySend we wanted to go with an icon that
Conveyed the idea of “sending”
Was different from common “email” icons
Had a distinct profile at a large and small sizes
We tried paper airplanes, but couldn’t make it work.
From paper airplanes, we went to other kinds of origami, and finally to the idea of an origami box-bunny.
We really liked this form and paper detailing, and we used this concept as the basis for all the final icons of Any Send
The origami bunny box is one of our favorite icons so far. In creating its final form we put another level of polish on it, but this original concept was where we made the design decision.
For Yellow we tried to merge multiple concepts into a single App. Yellow would combine a full mobile chat application with a full calendaring application to make planning everyday events as natural as sending an SMS or Whatsapp message.
To make that happen though we needed to make a calendar and a chat system and merge them together neatly. Yellow Calendar was an incredible challenge to take on and so we decided to ship as early as possible to test our preconceptions and not waste time making things that didn't fire our imaginations or satisfy the demands of mobile users.
But when we first launched we had a quandary: how can we communicate the tone of the app, the goal of the project?
We came up with a variety of options, but the idea we ended up with was a set of slides showing a wide range of uses. We brainstormed some ways to use the app and sketched up some simple slides.
To keep things light and fresh and avoid the stodginess of professional calendaring we made splash screens and login screens that enforced the concept of casual use.
In the end we tried to make the best difficult situation, even though nothing we made really clicked. The best experience is a natural experience that needs no introduction, but that's not always something that's practical to deliver at the right instant.
We started with an extremely playful look for Yellow Calendar for iPhone, hoping for something with a Skype like character and feel. Playful proved difficult, it made it a hassle to add new UI and the tone was loud: competing with the content.
So we worked to develop a more muted and productivity focused UI in later revisions:
With Yellow we did try to put content first and make our interface chrome fade away into the background, but that concept was difficult for us to realize because it was such a reversal from our previous efforts that put mood and style everywhere we could squeeze it in.
Yellow became quite a complicated app with a rats nest like maze of screens, and even though we tried to make for a simple and standard design, changing the fundamental design look and feel would require work on very large number of screens. By the time we realized this was a problem we had already shipped to the store so we decided to go with an incremental change that would sharpen up the most playful aspects but still keep the general look and feel the same.
With the major redesign in place we also took the opportunity to fully redo the way our calendar component worked and create an infinite time scroller.Â
Although this solution was evolutionary rather than revolutionary, it did a lot to bring the app closer to the original design vision of hewing closely to the iOS platform ideals.
With Google's award winning Material Design guidelines and UI framework, Google took a shot across the bow of iOS as the platform with the most design centric user interface. We've typically developed for Android last because we hear less user demand for it: but with the publication of the Material Design guide we sat up and took notice.
At this point in time we were building tasks for Yellow and we thought: how can we add tasks into Android taking advantage of this new model for Android design?
Although we never reached implementation of the feature, we came up with a rough design idea for how we might accomplish it.
We'd allocate a complete dedicated screen for tasks. Using the an action button to add tasks, it would constitute a full screen mode where you could focus 100% on tasks and ignore the rest of the App.
The disadvantage of material design can be felt too though. By creating a consistent look and feel the material design almost goes overboard and washes out the uniqueness of the design: it's almost a standard terminal into $APP_FUNCTIONALITY.Â
That might be great for certain apps, but one special aspect of a smartphone is its ability to morph into multiple utilities. If the interface is always too standard, the risk is that an app can't present the best possible way to do things for fear of violating the rigid standards.
turnnoffyourmind
vaporwave
origamiaround
tangentwithtanner
germansingergirl
pixelskylines