ADYLITICA

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.

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.

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.

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.

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:

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”?

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.

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

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.

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.

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.

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

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.

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

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.

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. 

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.