Logo Design!

This is an exercise I’ve been both looking forward to and dreading at the same time. The logo needs to work at tiny icon size AND communicate the concept.

I’m satisfied with the progress so far:


Here’s some variations and a 70′s style retro colour selection:



Steve Daniels assignment – ”plagiarize something”

For this awesome assignment I chose to make a copy of Instructables: Three Fabric Buttons by Plusea.

Three Fabric Buttons are just that – neat-o plushie buttons that even more fun to push than regular buttons. They operate by running ” + ” through the circuit, which has common conductive patches in between neoprene and some foam you squeeze to connect. Positive goes back to a breadboard through a conductive tab on each button that you have to clip on to.

Before you read on, please glance at the source instructable. You’ll see they require you run power separately. I got halfway through replicating them when I realized how handy they’d be for future quick-testing of circuits / LEDS. I decided to improvise and give the circuit an independent power source and some equally helpful indicator lights to aid future trouble shooting (the indicators let you know for certain the battery has juice AND the button works so those parts will never be in doubt).

Adding those parts of course complicated the design, but because I was already following tried-and-true instructions, this gave me the confidence to improvise a bit and stray carefully from the pattern in a bid to improve the device.

Insights and pics follow, with VIDEO LINK and LESSONS LEARNED at the BOTTOM OF POST.


This is where I realized I could add a battery right to the design, and thus began the over-complication.

Without foam handy, I had to use felt as the intermediary layer – the little holes clipped in the material worked, so I went with it.

Here's where I also realized I'd love indicator lights, so I had to figure out a way to add negative into the mix, whereas the Instructable keeps things nice and simple by having only common-lead-patches. You can see the attempt to place the battery pack to the left and I'm thinking about how to continue constructing this without crossing any of the + threads with the - threads.

Testing that the fabric sandwich will give juice in the intended way.

indicator Lights SUCCESS!


  • Given how simple the exercise of repeating the fabric buttons was, I’m surprised how much I learned about working with the materials – I am going to continue doing some of these basic projects so that I’m up to speed on tricks and techniques for when my own ideas emerge.
  • by having the steps already clearly laid out, I was able to play and improvize with other things, and stumbled upon the double threading technique on youtube and ALSO it allowed me the freedom to attempt adding in my own power pack and circuit additions.
  • I realized how much I really and truly rely upon the malleability of digital, – no undo button! – , I kept thinking, “no I can change the stroke of stitches later” so I didn’t worry about how shitty they looked here, but it turns out there’s no panel I can open and just auto-align those things.
  • drawing on the fabric is not ideal, but by first drawing things onto cardboard or paper templates, you can simply pin the piece to the fabric and cut around it
  • BIG OBSERVATION → I wrestled with the simplicity of this, I kept thinking, man, Steve ain’t gonna be impressed with this, they’re just BUTTONS. But then it hit me – they are FUN. By changing the material, the simple button becomes FUN – this is a great insight for interface designs, I want to start making some plush interfaces


Prototype V4 finished, just in time for Showcase and Jury review.

In a couple days I have my presentation for the Student Showcase and META 2013 Jury review.

I’m working on pulling together all the equipment, signage and hard materials for my presentation, but the good news is the prototype is working smoothly.

The PhotoDare App social sharing service lets friends trade images from their photo libraries randomly with no choice in the pictures exchanged.

Have you ever wondered how someone else sees the world? We all take pictures for any number of reasons, and each one has it’s own story to tell. In fact, they’re more than just pictures, they’re a collection of the spontaneous moments of your life! But, when it comes to sharing these with friends, countless moments are captured only to be lost in the stream, or remain unseen for lack of the appropriate social setting. Sharing these “life stream” photos randomly is not without risk, but the genuine sincerity of the experience reaps instant rewards: shared appreciation of your life’s little moments, reliving of moments forgotten, and an instant conversation starter that’s as fun in person as it is miles apart.

Here’s a short video:

Now on to the graphic design!

With the wireframing out of the way and a Mar 1st deadline coming up, I’ve stripped out all non-essential tasks and feature work and have begun the process of coming up with a visual identity for Photo Dare.

For every screen in the wireframe where a layout and UI elements were identified, I now need to finish polished graphics for ALL pieces. There are about 25 different “possible” screen contexts that need to be finished. I have reduced the feature set and screens to about half that in order to meet the presentation deadline.

As usual this begins on paper…

Thinking about the icon design, the duality of all image trades, the relationship between sender / receiver, colour theory behind notifications, etc.

…and then moves into more refined elements in Illustrator and Photoshop.

CLICK TO VIEW – Icon development from left to right.

CLICK TO VIEW – each "context" of user interaction requires an icon that communicates the "action".

For each screen I had to go through between 25 and a whopping 95 iterations of the final layouts in Illustrator. The process begins with creating the mock layout in Illustrator, exporting to a jpg exactly the same size as the iphone screen, and then viewing it from the device to consider how the elements work in their intended setting/context.

Here’s the process for the main screen – this screen only took 45 versions (Animated GIF, may not render on mobile).



Here's my 95th attempt at the first screen the comes up when you have selected a past dare to view.




Temporary – Link to VCR dissemblance


Takin’ Care of Business + back to the drawing board

Jan-to-mid-Feb update: I’ve been focused on sussing out steps involved in launching Photo Dare App out into the real world. This included research and meetings around how to start a business; app design best practices; iTunes Connect; launch and income strategies etc.

In the remaining time I’ve gone back to the drawing board and started completely from scratch on wireframing the UI / UX. Past versions were OK for base amount of prototyping, but as features take shape they are raising a lot of questions – and subsequent decisions – that impact the “social service”, amount of screens and interface elements.

Here is a low-res picture of the clean version of the latest wireframe – it isn’t pretty to look at, but that’s not the point. It contains to the best of my ability the range of features I want, while excluding everything not absolutely necessary to get to a product launch. Each pen-drawn “screen” on the chart comes from pages of rough work – once I finessed a screen the way I wanted it, I redrew it to the chart below. As the chart grew I just kept taping together several pages in order to have one clear roadmap of the processes – there is a colour coding system in the “segues” that delineate the different streams of user interaction. I am a big fan of using CMap Tools, as well as OmniGraffle for process charts, but to be honest they were overcomplicating the process and I decided to stay strictly with pen and paper.

CLICK TO VIEW – a photo "merge" of the overall roadmap – this does NOT include the rough work, and is an intermediary step before starting graphic design.


If you’re interested, the most profound resource I found on wireframing was a video interview with Ryan Singer, the lead designer of noted web development company 37 Signals.

Notes / quotes:

    • what is the PROCESS you are taking people through – define this conceptually, and flesh it out into wireframing (discussion on screening your UI just for “Things for the user to do”)

    • it’s not about just “here is the data you asked for”, it’s about THESE ARE THE ACTIONS YOU CAN TAKE, don’t think about just displaying informaiton, think about GIVING USER CHOICES.



          • what am I doing here?

          • e.g. why am i putting a headline here, why am I writing this headline,

          • e.g. why am I putting this element here

          • What is happening, what is the dialogue between the system or app and the user ? What is the USER getting out of this emotionally, substantially, etc?

DO NOT GET CAUGHT UP IN PIXELS – always remember the design is first about the APPLICATION FLOW, not about the pixels – DO NOT DO VISUAL OBSESSIVE DESIGN UNTIL FINAL FINAL STEP


Proposal V3 finished: PhotoDare app

Submitted another version of the proposal – was a great chance to work on a much-needed re-write of the concept. Here’s a video that shows the prototype in action – right now I am still wireframing like crazy making sure I capture EVERY screen’s implications and uses before I dig into the visual design or “branding” / “identity” exercises.

Wire-Framing Intensive

Spent all weekend drawing, re-drawing and re-drawing wireframes of the user processes and UI of the now newly named PhotoDare App. Never realized how insanely important the wireframing process is until I had to go through it again and again and again trying to get UI elements to make sense.


StoryBoarding! –– Creating storyboards and re-creating them in HTML5, jquery, Phonegap


Sarah, my curator, was due to present the concept to others at a critique, so I spent a couple days leaving the technical stuff behind and getting storyboard scenarios created and then trying to re-create them in HTML5/Phonegap/Javascript.
Below is the result, it’s a real app but it’s built on html and uses Phonegap as a wrapper and controller for the javascript prompts.


Basic cam functions live and installed on device!

have hit several walls of lack of understanding around js but was overall stoked just to get something live on screen of my test device

Also, have been working on revising the concept:
SwapRoulette is an image swapping site and app that allows you to trade random photos with your friends from your mobile’s photo library. The key difference is, here the choice of photo you share is up to chance, presenting you and your friends with the ultimate ice-breaker.

We believe life is wonderful, strange and sometimes frightening. While it’s never been easier to capture photos and share those moments from your mobile device, it’s easy to forget to tell your friends. Who knows what stories are sitting untold in your gallery, waiting to be rediscovered and shared? Dive back into the spur-of-the-moments that YOU thought were photo worthy, and use them to start conversations – we guarantee you’ll share stories, relive memorable moments, and gain a richer insight into each others’ lives.

Yes, there is RISK; you could share something you didn’t want shared. Like you, we are careful about managing our online personas, and how much private information we share. But along with the risk, there’s all the gold nuggets of life’s photo worthy moments just waiting to be re-discovered and shared with friends. There’s no faster or more entertaining way to spark an interesting conversation with a friend – you can both enjoy going back in time and filling in the blanks. If you like it, you can leave the picture and the story behind it on the public site and share it with even more people.

Life is a constant transition between countless contexts – go back and discover and gain perspective on what they were. What were you doing since the last time you cleared out your photo library?