I’m on creative retreat at the moment. One of my self-imposed jobs has been to go through every one of my sketch books and sift out ideas, notes, …and sketches that I may have missed or prematurely let go.
It’s a pretty rude shock seeing, with the fresh eyes that time produces, how much a particular project consumes you. This time it was the Loupe talk I gave at Framer’s inaugural Loupe conference in 2018. I spent months on it. Probably very inefficiently, but definitely diligently; almost every weekend.
Here’s a small portion:
In retrospect, I should have started ‘speaking’ earlier—just out-loud, even to myself. I.e. less narrative arc-ing and more speaking from storyboards. Making an animatic, if you will. That would have probably minimised the zig-zag and misdirections that inevitably rose.
There are a lot of good reasons for killing-off the Gmail address and going with your own, custom email address. The current reality though is that a lot of folks still use Google Drive, Google Docs, and Google Calendar. Unless you want to fork out money for G Suite (and then once again give your data to Google), you’re in danger of cutting yourself off from collaboration.
This is a guide for those, like me, who wanted to cut the Google cord yet still be able to receive Google Calendar invitations and collaborate on Google Docs.
Setting up a non-Google email address
I like Soverin because they’re independent, have good uptime, and use clean energy for their servers. They are also extremely responsive if you ever need personalised support. You can use pretty much any email service you like, however. The Google process should still work.
Signing in to your usual email apps
Once you have an email address (and likely your own domain) from a service like Soverin, test it out using their webmail service. All good? Then you’re ready to set it up in an app such as Apple Mail. Soverin has support articles for both Mac and iOS that go into how to do this, as do most other email services. It’s usually quite straightforward.
Setting up a Google account
Follow the first few steps to create a personal Google account. Instead of creating a Gmail address however, click Use my current email address. Enter your non-Gmail email address and finish the process.
You should probably add a profile picture to your Google account. The default one, combined with a non-Gmail/G Suite email address, can look a bit suspicious to folks who invite you to collaborate on Google services such as Docs and Calendar. A photo of yourself, combined with a custom email address, will make it look like you’re just a G Suite customer.
Syncing your custom email Google Calendar with iOS and macOS Calendar apps
This is easy on macOS and, as of writing this, hard on iOS.
On macOS: sign in via the Google flow in System Preferences > Internet Accounts. Once signed in, deselect everything except for calendar.
On iOS: ignore the Google flow and instead sign in via CalDAV. Here’s how:
Go to Settings > Passwords & Accounts > Add Account
Be sure to swap out the email@example.com and yourgooglepassword with your own information.
There is another crucial field called Advanced Settings which, for whatever reason, doesn’t appear until you jump through some hoops. For me, that was a combination of tapping Save at least twice, re-opening the modal, or swiping and tapping aimlessly on the modal. Just keep trying and it should appear.
Once Advanced Settings does appear, tap into it and enter the following details:
Be sure to swap out the firstname.lastname@example.org with your own.
Tap the back (< CalDAV) navigation button, and then Save. It will likely take another few seconds to verify. It took me a few tries to have it work; so if it fails, give it more time and/or try again.
That should be it for most folks. You can now use your custom email address for private emailing and for Google services.
Making sure you don’t end up in the Junk folder
Some email services, such as Gmail, find custom email addresses suspicious and mark emails sent by them as junk. You can mark your email address as ‘safe’ by authenticating it through a method such as DKIM. I did it with my Soverin email address and haven’t had any issues since.
I just flew from New York to Brisbane via LA. It was an unavoidable trip due to visa legalese, but one that gave me a chance to explore carbon credits. I eventually settled on The Ocean Foundation’s SeaGrass Grow program, for which I spent about $40 to cover the one-way flight.
Googling ‘how to offset the carbon from my flight’ returns about five million results; the majority being informational rather than actionable. Many of the actionable ones that I explored expect the buyer to trust that the money will be put to good use.
I chose SeaGrass Grow because it’s the most cost-effective carbon offset program I’ve come across. Their own website does a great job of describing the benefits of growing seagrass over other offset options such as reforestation. The program was also personally recommended to me, putting the trust factor at ease.
Some carbon offset programs have calculators built-in to the process. I had to use an additional website (actually a few to get an averaged-out result) to calculate my ‘passenger miles’ before being able to return to The Ocean Foundation’s payment page. It seems like we don’t have consensus on how to do this math. It also seems like the calculators ignore changes in emissions during take-off and at different altitudes.
I would have given up if I weren’t fully onboard with the SeaGrass Grow program, so can’t see how most people will push through. It seems that a UN agreement for airlines to offset their own emissions will (weakly) kick into gear. That might explain why the baked-in carbon pricing on airlines’ websites have dropped-off lately. Still, I’d like to see non-negotiable carbon pricing on flights, today.
Organisations such as Climate Neutral look like a perfect fit for businesses. They handle the measurement, strategistation for minimising carbon emissions, and then offsetting emissions that are not yet minimised. Project Wren is another one I’ve come across, although it seems more focused on feel-good consumer experience than most-effective carbon offset methods. Options on offer today include “Community tree planting” and “Tech-enabled Amazon Rainforest protection”.
Given the chance, I usually won’t share my work or ideas in a public forum. I’ll attribute that to a fear of how my work will be received; a fear of rejection and isolation.
The shift from primary school to high school was probably where that fear was developed. It’s the time when I, amongst most others, began to consider image and status. The beginning of high school is also when nonconformity (being ‘different’) is frowned-upon by your peers.
Those image and status considerations stick around in adult life. Even after finding my ‘crowd’ I hesitate to let the work flow. There’s a blockage somewhere that grew from fear to a hardened anxiety.
I’m not sure if there is an easy way to clear the clog. My guess is that it needs to be slowly broken-down with high-pressure; an increased flow. I suppose the contents of said flow don’t matter too much. They just need to keep coming down the pipe.
Flow exposes that rejection and isolation are not real risks. Flow actually reinforces confidence and connects you to those who reinforce it once more. Flow gets stronger—not weaker—the longer it runs.
So, this is a note to self to get on with the job. Reject platforms’ metrics of validation. Put things out there (like this!) at a regular cadence.
Lexi and I visited the Guggenheim over the weekend.
My favourite thing in the museum wasn’t a piece of art—it was a page from Keith Haring’s journals book. Emphasis added by me:
My main problem with the computer is the restriction of the image, in that it is always trapped inside this box (on a screen) and, except in the printing, is very limited in its scale.
I was, however, interested in the tactile experience of drawing, which is very different on a computer. Time-lapse (and/or spacial displacement) occurs when a “mouse” is used to draw. This displacement of image and action creates a new problem to be solved by the “drawer”. The drawer then has the added ability to take the image and manipulate its color, size, and placement. The image becomes a workable entity restricted only by the limitations of the computer program, programmer, and the screen of the monitor itself.
There are endless possibilities to be investigated in this area.
Honestly, I don’t fully get what he means. He seems to be going back-and-forth on whether the computer is restrictive or not. What attracts me is his highlighting of something we now take for granted: computers are forgiving; things can be endlessly undone, redone, and changed.
Haring attributes this ability to the indirect manipulation nature of the computer(s) he knew. We now live in an age where image and action are one. (think Apple Pencil and iPad, for example). We now have endless manipulation of what is now direct manipulation.
I’m trying to get back into shooting with my X-T10. Below are some rusty shots from the day.
It seems like everyone has a use for Terminal these days but the people most uncomfortable with it (think PMs, designers) have the heaviest lifting to do. Shortcuts are so wildly helpful for making Terminal approachable—yet are somehow unexplained and impenetrable for those that need them.
Here’s my attempt to fix that.
The long way
Repeatedly typing in the same commands into Terminal is annoying, takes time, and is prone to mistakes. Let’s look at some examples of my common commands to illustrate this.
To navigate to my personal site’s local folder, I’d manually type:
That would almost always be followed up by the command to start the local Jekyll server to preview changes to that site:
bundle exec jekyll serve
And then I’d want to open this folder up in Atom. I don’t even know how to do this long-hand in Terminal so would probably just navigate to said folder via Finder and drag it onto Atom’s app icon.
A bit painful.
The quick way
You can shorten these commands into shortcuts of your choosing. My shortcuts for the above three commands are me, jek, and atom respectively. So to get those same three things done, I’d instead write:
Let’s give it a try. Open Terminal and type nano .bash_profile. This should create and open the .bash_profile file inside of Terminal.
Here’s what mine looks like with shortcuts already made at the bottom:
Notice the syntax that each of my shortcuts are using? Here’s a breakdown:
alias: as the word suggests, this defines the following will be an ‘alias’, or shortcut.
your-shortcut-name: replace this with your desired shortcut word; what you will type in Terminal to actually do that longer, gnarlier thing. If your shortcut is to open Visual Studio Code, you might write replace this with code.
"whatever-you're-shortening": if your shortcut is to navigate to a directory, you would replace this with "cd ~/My Folder/". If your shortcut is to open an application, you would replace this with "open -a App Name".
Simply add any of your desired shortcuts to the bottom of this file, above source ~/.bashrc. Save .bash_profile and restart Terminal. Your shortcuts should now work.
The pro zone
I don’t even need to fuss in Terminal now that I have an application shortcut for Atom. Instead of writing the command nano .bash_profile, I can use my fancy shortcut atom .bash_profile for a nicer experience. Just make sure to restart Terminal after saving your changes.
Keep an eye on an nearby engineer as they use Terminal. You might see them use shortcuts beyond applications and directories such as using gc for git commit. It’s all up to you. Colours, ASCII art, and things I’m yet to figure out are also customisable via .bash_profile.
Shout out to Stephanie Coleman who introduced me to all of this at Kickstarter. My .bash_profile lives in a Gist if you’ve like to use it as a starting-point.
These three design studio exercises are intended to elicit tangible attributes for designing product whilst keeping multiple people’s opinions heard and considered.
Credit to Chris Marotta from my time at ustwo for a lot of this. We worked on multiple projects together that made use of some or all parts. The photo examples below are from the Growing Up NYC.
An existing or in-process brand, product.
Yourself and hopefully another designer as moderators.
A group of participants (preferably stakeholders).
A (roughly) shared view of aforementioned brand amongst said group of participants.
Three design studio exercises that last about 20 minutes each. Try to do them sequentially and in the same session.
Have every participant spend 2 minutes writing on sticky notes ‘if this brand were X, it would be Y’ for each of the following:
Food & drink
The sticky notes can go up as they are created, or at the end of the 20 minutes. It depends on whether you want to encourage idea-riffing or encourage originality, respectively.
2. Organising attributes
Spend a minute as a group observing and clarifying the results of the above. As moderators, take fresh sticky notes and cluster similar ideas into high-level themes. Confirm with participants and then make it real by naming each theme.
An example: sticky notes take from different categories such as ‘warm’, ‘dependable’, ‘wise’, and ‘role-model’ might be themed as ‘Guiding Light’.
3. Creating brand attributes
For each of your new themes, and openly as a group, list attributes under the following areas:
Attributes from the Metamorphosis exercises can be recycled.
Stop when you feel attribute additions slowing or becoming worse in quality. Use this as your cutting off point—play back the group-created attributes to the participants to seal the deal.
What you do after the above exercises varies for the desired output. For most visually-orientated outputs (brand identity, visual design) the next steps is often beginning moodboards informed by the brand attributes, separated by area.
Last Friday was my last day at ustwo. After a few years there, and a range of agency experiences elsewhere, I’ve decided to take a step away from client services.
ustwo was (and still is) a special place. It’s been gut-wrenching to leave. Some personal highlights:
The fampany. As much flack as we give the thing, it did feel like a big ol’ family
Broken clocks, glass walls, and hoverboards
The structure of ustwo (fampany etc) and support of peers meant I had serious autonomy. Using LittleBits in the design process, augmenting a games team, and hosting Framer Sessions were all easy to do and encouraged. The flat nature of ustwo also forced some skills to develop I wouldn’t have elsewhere.
Later this month I’ll be going in-house: joining the mobile team at Kickstarter. Feeling super fortunate to be able to do what I like, at a public benefit corp, on a platform with such a strong impact on the arts.
Much love to my ustwo family. This reel still holds up:
It’s been just over a year and a half since starting Framer Sessions NYC, out of ustwo. Given the pace at which Framer has iterated, it feels like a good time to reflect.
How it started
Having Framer in my back pocket was a huge asset whilst doing freelance product design from late 2014 to mid-2015. Constant high-fidelity prototypes (and prototyping as a mindset/iterative design tool) really resonated with teams and clients.
I met Koen and Jorn (founders of Framer) shortly after joining ustwo. A month or so later I had Framer NYC set up and ready to go for November 5th, 2015. A relevant throwback:
Some anecdotal yet useful things I’ve learnt along the way.
You need help
Running the meetup is about 3-4x amount of the work that I anticipated. Take any help you can get. That includes basic logistics and set up help, as well as facilitators to run skill-level sessions.
This is especially true in NYC. I think the average turn-out for our meetups is somewhere between 30–50%1. Also—if it rains that day, cut your food & drinks order by half.
Get a sponsor
Food and drink for 20+ people gets expensive. Even just getting a space can be hard. Try to get a sponsor, or get your workplace to help out (like I did). It’s great for them too—if they know how to make the most of it (i.e. recruiting2).
Assume people will have trouble getting into the building, finding the space, showing their work, following along, etc3.
Aside from clear signage, you’ll need a strong yet flexible agenda. Without one, the meetup becomes an introductory course with a pretense of “I can leave this thing knowing Framer”…with inevitable disappointment.
Accommodate different skill-levels
Otherwise you’ll end up with a gulf: beginners and intermediates all falling back to extreme basics (with the expectation that they’ll learn everything in this meetup), and advanced and intermediates doing something extremely complex that is likely to scare some people off4.
Don’t limit your crowd
Framer is cool. There are some seriously creative use cases, and people behind those. Get out of just the tech and design circles—spread the word far and wide. Although meetup photos don’t reflect it too well, I’ve been pretty happy at how diverse our meetups are becoming.
Our current approach
Many of the above points are around format and delivery. Below is how we try and address that in meetups now. Our approach is far from perfect, but is the most successful so far.
1. Mingling (10–15 min)
Allow people to get to know each other. This happens organically sometimes, and not at all at other times. If you have some, your food and drink should be out in full force.
2. Intros (5–10 min)
Reiterate food, drinks, bathrooms, etc. Point out who are helpers, and who are special guests. Give people a heads up so they can prepare for the imminent Show and tell.
3. Show and tell (20–25 min)
Demo something that you have done with new Framer features (which there almost always are). Encourage others to come up and show their work, too5.
Have any special guests in town? Have them demo something6. This is something we’re still figuring out, but right now I’d say to do this after people do their individual demos7.
Have prepared a Framer 101 tutorial, followed by the step-by-step building of something simple yet real. Most learners of Framer are kinaesthetic; meaning the practice of making something (relatable, if possible) jives better than being demonstrated at.
Goal: If you can get newbies to leave feeling confident that Framer is approachable, that’s huge. Bonus points if they leave with a foundation of Framer skills.
Intermediate & advanced
Break out into groups for discussion and problem solving of individual prototypes. This tends to be hard, since there is always a spectrum of differing skill levels8. Ideally you will have moderators to spot divergent skill levels and conversations, and physically separate (and therefore foster) each of them.
5. After the meetup
Share a notes list on your group page with anything mentioned throughout the meetup. Allow others to add notes which might have been missed. Did you take any good photos? It doesn’t hurt to share those too, especially when spruiking the next Framer Sessions.
I started Framer NYC solo, with some generous logistics and event setup with the likes of ustwobies such as Simon Lindsay, and new friends such as Josh Dobson. Since then, Noah Levin and Jared Palmer have joined to help run these things going forward.
I’ve broadened my focus to other design tools such as Origami, where you may or may not hear my voice on the tutorial videos. I have a feeling these meetups will broaden over time, too.
Of those who RSVPed yes or expressed interested. ↩︎
Our most recent Framer Sessions (led by Noah) was at ClassPass. They had a recruiter float in sessions. Not at all interruptive; instead making the most of having so many talented people in one room. ↩︎
I think I had up to six signs at one point, with people still getting lost. I’ve also run sessions where unless pushed, no one is willing to come forward with prototypes or questions. ↩︎
A nice balance is overcoming the “this is too hard for me to learn” for beginners, and “I didn’t know about this neat trick/feature/approach” for more advanced people. ↩︎
This is by far the hardest part. Prizes don’t help IMO. ↩︎
Definitely do not put people on the spot—this should be something you’ve worked out with your guest prior to the meetup. Also don’t feel like you need to restrict guests to showing purely Framer work. If someone used it in their workflow, or even if they use something else, that’s still usually interesting for people. ↩︎
Understandably, people tend not to want to follow a guest’s presentation. ↩︎
Groups can be often overrun by niche and intimidating demos or discussions that arguably aren’t a good fit for Framer (ultimately a design tool for validating ideas). ↩︎
I’ve been fortunate enough to have been working with the Origami team at Facebook for the last six months or so. Without going into too much detail, our NYC launch last night was a super proud moment for myself and the team.
Thanks to Madelin for joining and then running the whole shebang. Also thanks to Matej, Andrew, Rob, Blair, Julius, John, and everyone else at Facebook1 for being both some of the nicest and smartest people I’ve been around.
The official Origami tutorials and examples are now up. Thanks also to Fisher for his expertise whilst creating the curriculum for these.
The full video of my demo has been uploaded on Vimeo. The other demos are under the same username.
Kara, Myles, etc. Seriously so many, and everyone is great, but I’ve gotta stop somewhere. ↩︎
Erin LeForce and I co-wrote this article for publishing on the ustwo blog. Since then, it’s been picked up by the Marvel blog (🎉!) and the principles have set a foundation for how we approach similar projects coming into our studio.
I’m going to use the co-publishing over here as an opportunity to give a shout-out to the full client-facing team:
One last thing: I’ve also used the co-publishing here as an opportunity to prune to the good stuff. And leave out a lot of processes, testing, and results. See the original blog post for those things. Alright. Let’s get to it…
ustwo has been working closely with organizations in health, wellbeing, accessibility, and now increasingly so in fitness. Working with a leading sports and fitness organization, we set out to improve the run experience. We focused on the varying degrees of interactivity for movement, and how we might transform relevant data into actionable insights. Our approach centered on simplification, automation, and contextualization of data.
The current situation
The majority of runners’ fitness apps are data-centric, with interpretation of this information largely up to the runner. This data-focused approach is often removed from an individual’s context for working out, making it difficult to interpret results and gather actionable insights.
Similar issues with interpretation and actions apply to dedicated wearables and fitness tracking devices. Raw data is often obscured or presented unclearly; often with an emphasis on accountability and social sharing. These devices serve well for reflection and short-term motivation, but do little to help with analysis of performance techniques, safety and long-term motivation. In addition, glass screens requiring precise inputs and conscious interactions often fail when combined with a moving body and unfocused attention.
“I usually put the phone in the pocket of my shorts, so it does get pretty steamy, any touch function is really, really difficult.”
—Pedro, Distance runner
“Just another thing to carry/charge… so they now live in a box near my bed!”
—Andrea, Leisure runner
Worth noting is the rise of naked running (running device-free—not actually nude) to combat the growing trend of runners suiting-up with multiple devices before a run. A runner’s dependency on a device can interrupt the body’s ability for self-regulation and conditioning. A digital presence in the fitness realm needs to be complementary to the runners ‘inner coach’.
“You don’t see a coyote or fox looking at their GPS to check their progress on prey.”
Over the course of the client project, we defined three major principles for designing for in-motion activities:
Simplification and Removal of Interfaces
In-run Feedback Based on Environmental and Behavioral Factors
Contextualizing Data into Actionable Insights/Feedback
Let’s dive into each.
Simplification and Removal of Interfaces
We often heard from runners that touch-screen interfaces are frustrating, and that glancing at screens is not habitual when in-run.
If screen-based interfaces are the today’s medium for data collection and feedback, how can we make interacting with them less frustrating and mentally-taxing? We made a series of prototypes using Framer, that allowed to ideate in the wild. We found that a focus on core workout controls (start, pause, resume, stop) work best.
Early trials brought unforeseen challenges such as variety in how people carry their device and also helped clarify what assumptions we had left to validate; such as how haptic (vibration) may support interactions.
In-run Feedback Based on Environmental and Behavioral Factors
What environmental triggers could we leverage to provide a user with actionable (and useful) feedback in-run? How could this feedback enhance a run? We experimented with audio and haptic feedback across a variety of in-run events and updates.
We also explored how data both collected from past runs and the environment could predict scenarios in which a runner would feel fatigue, need to change course, or adjust form. Pulling weather forecasts, traffic updates, and satellite images of the running paths alone would provide runners with insights as to when and where to workout, how to avoid injury, and even provide a user with tips on how to power up a tough hill.
Contextualizing Data into Actionable Insights/Feedback
Data that becomes contextualized often becomes an actionable insight by extension. Yet insights only truly become useful to a person when they are timely. At what points of a run is insight useful? What particular insights are useful? Here’s where we mapped key moments in a runner’s journey to insights that could become in-run feedback:
We began to see that elements of useful feedback as going beyond just timing. Could insights become more useful when executed through different coaching personalities? Where should these differing coaching personalities appear or not appear? Here’s what we ended up with:
Again, see the original write-up on the ustwo blog for how these assumptions were tested and the results from this testing.
Much of our thinking is centered on what technologies are afforded to us today. Knowing that devices are only going to get smarter and their components more miniaturized, what are the inherent elements that make up a run or workout, that are unlikely to change at all? Unlike a wearable device, a runner will almost always be wearing some form of active wear. What if the thread that makes up their shorts became an input? Could a runner gesture-down to pause their run while they get a drink of water, and later resume their run with a double tap?
Extending to other domains
We are beginning to find that the methodologies, patterns, and applications we are experimenting with go well beyond the fitness industry. Interacting with digital products while exercising is essentially interacting while impaired. Acknowledging this may allow us to extend these technologies and insights to other domains.
Our exploration surfaced issues with accessibility; visual distraction or unavailability. How might a person with arthritis better communicate with their loved ones through coarse gestures? How might a blind person navigate through a metropolitan transportation system? The opportunities to simplify and optimize products for impaired users begins to address an important shift—devices playing the supporting or hidden role rather than sitting at center stage.