USER RESEARCH TOOLS

January 2017

Here are some tools that I’ve used to validate & observe against some of my early design work. I prefer different tools for their varying purposes. Mostly, it depends on what type of questions I’m trying to get answered.

If you find yourself in need of…

 

Recruiting

  • Internal queries for internal (ie. Blazer)

  • Userinterviews.com for external

  • Taskrabbit if you’re in a pinch & need some onsite participants

  • Amazon mechanical turk for general population survey panel (fast & cheap)

Surveying

Recording:

  • Lookback for built-in-to-device recording, or on screen recording

  • Screenflick for screen only recording (with Soundflower plugin can up incoming & outgoing audio)

  • Occasionally Quicktime

Streaming:

  • Hangouts preferred since it hooks into most conference rooms easily if already on Chromebox

  • Quicktime will stream an iPhone’s screen to desktop which can be screen shared with hangouts or recorded with Screenflick

Prototyping:

  • Invision for simple click-through concept testing

Testing:

GIF Creation:

Eames

December 2016

And The Gang

December 2016

Angry Birds: Selecting & Previewing in a Movie Picker

October 2016

Stringing some learnings together…
This started out as a doozy because I wanted to learn/do so many things at once here. Instead, I decided to simplify my big ideas into three major things that I see happening within these two screens. Initially, I mocked this all together using simple shapes to make sure I understood the sequence of things, then I brought in the artwork once I rigged a working prototype together.
Here’s what’s going on:
A paged driver showcases the featured movies
  • In addition to the paged scrolling for each feature image, the carousel dots adjust with scale & opacity to highlight which movie in the carousel is being featured
When a movie is tapped, a detailed view appears with the option to preview the movie trailer
  • The challenge here was with animating in the movie details & animating out the movie covers from the home view
  • Having the pills trail in after was a fun personal touch :)
The movie trailer plays when a tap is triggered, the back button prompts the home view to animate back in
  • Playing the movie trailer in place was fairly easy to do with Principle, the only drawback was audio is not contained when exporting in Principle…at least not yet
  • Sliding back the movie covers in a personable way made this action very affirming
This animation was made with Sketch & Principle for Mac.
I originally studied Nimasha Perara’s file to learn and understand.
Download my source file here.
 “At all times, look at the thing itself- the thing behind the appearance- and unpack it by analysis: cause, substance, purpose, and the length of time it exists.” -Meditations
This is supposed to be a spinner!

October 2016

Thinking beyond initial constraints…
There is a huge and supportive community of Principle users out there, when I was thinking about how to animate a circular loading spinner I thought I was stumped because of Principle’s limitations. I didn’t know how to animate something along a path that was curved, but there’s a way! So I thought I’d read up on a few ways others have tried to do it and then re-learn how to do it myself.
In this loading spinner animation, what’s really happen is a clipped sublayer (basically a mask) is being revealed at the right timing to convey the sense that the load is happening along a curved path, but really it’s just the mask (which in this case is a white rectangle shrinking to reveal the circular stroke behind it). If you look really closely at the animation (because I blew it up), you can really see the masking take effect- at a small scale this isn’t detectable.
To give the spinner a bit more life and personality, I rotated the circle which at first glance doesn’t seem like it would do much, but given the masking nature of the construct- it now appears that the load begins at an arbitrary spot in the circle. Secondly, when the load animation is complete, I adjusted the scale and opacity of the circle to give it a sense of completion, just enough punch! …& then the load starts again. This just goes to show, we rely on these little animations to give user’s the feedback they need while we find the right information to display!
This animation was made with Sketch & Principle for Mac.
I originally studied Jonny Belton’s post to learn & understand.
Download my source file here.
 
Animating the Material Design Tabs Bar

October 2016

Starting is hard, there’s alot of resistance…
In the past, I’d spend so much time early on trying to get my Sketch files ‘just right’ before I’d begin to animate- I’d get a case of the need for everything to be perfect before proceeding on to the next step. The reality was, by the time I got my files ‘just right’…I’d get tired or lose the momentum and never begin the part where I’d learn to animate. So I’m taking different approach this time by setting some realistic expectations.
For the purposes of learning, I decided these mini UI projects weren’t about the UI designs- just the animation itself. So, instead of stressing out about getting the UI just right, I took existing common UI elements and learned to animate those instead. The initial stressful expectations were removed and I was able to focus on the part I wanted to learn. Now the work became fun again! Here I’ll share a few brief notes about what’s happening in the animation & provide a link to my source files so that anyone who also wants to learn can take a look for themselves.
How I thought about this…
The tab bar at its core is really about setting a tap event for a tab & showing an animation to confirm that the tab has been tapped. When a tab is selected a few subtle animations occur in a staggered way to affirm the user’s selection.
What happens when a user taps a tab…
  • a white circle grows from the center of the tab as its selected, as the circle grows it becomes more transparent. In this case the circle exists in the center of the tab at scale 0 and grows to scale 1.25 (or whatever scale you set) while simultaneously going from 50% opacity to 0% opacity. The circle has a natural ease in/ ease out so the motion feels smooth and natural.
  • if there was a tab previously selected then the scale & opacity in that frame are brought down to 0 seconds- because this was done in Principle (and assuming your circles have the same layer name), the animations between the two frames will animate between one another automatically. If you were to do this manually, what this means is the circle in the previous selected tab would do the reverse animation as the active tab- it would shrink down to scale 0 and increase to opacity 50%.
  • the activity bar below the tab slides over (from where it was prior) & lines up under the tab that was selected, this is slightly delayed just after the event was triggered & just after the circle animation occurs. For a bit of personality, the activity bar has a spring motion to confirm the that the entire selection of a tab is completed.
This animation was made with Sketch & Principle for Mac.
I originally studied Noodle’s file to learn & understand.
Download my source file here.
Notable readings to get past the starting block include Meditations, “Do external things distract you? Then make time for yourself to learn something worthwhile; stop letting yourself be pulled in all directions. But make sure you guard against the other kind of confusion. People who labor all their lives but have no purpose to direct every thought and impulse toward are wasting their time- even when hard at work.”
My Improved Approach to List-Making

September 2016

I’ve been a list maker for a long time…
Sometimes I’d write a giant master list to de-stress from all the things I need/want to do. Sometimes the lists are organized by categories with their own colors on my calendar. Sometimes they are small post-it notes that I can move around to understand the order of things. Above all, my reliance on list making has always been to make sense of all the things going on in my mind at any given time. I still make lists and for the most part they give me some framework for gathering my thoughts…but I’ve been trying something new that seems to be giving me not only the understanding that I seek but also the accomplishment that a giant list of aspirations can’t seem to do.
The problem with big lists is…
that I keep striking off items and adding new ones, this iteration and finesse all happens on one list and I’m left feeling a lack of progress- no matter what I do, there seems to be more and the victorious feeling of striking off a line item becomes diminished. Eventually I resort to abandoning the big list and whatever was left remaining is forgotten. It’s worthy to note that the items left remaining are the ones hardest to tackle, they are the bigger resistance items that require a deeper place of conviction and because of this abandonment they never seem to see the light of day.
So for now…
I’m trying a new approach which is a single list everyday that has no more than 10 things (that’s my preferred personal max). When each task is done, I strike it out. I don’t add more to the daily list & whatever doesn’t make the cut, I try to make the time to a) forgive myself for trying my best that day and getting everything completed- this is sometimes the hardest start b) build a gauge for what a realistic number of items on a list should be for me  c) reflect thoughtfully on why the remaining things didn’t make the list. If after thinking about it, I believe those items should reappear on tomorrow’s list, I put it back on the list and try for fewer items that next day. If an item is re-appearing on each daily list often without momentum, I can quickly see a red flag. I aim not to think about list making for any days beyond the present day and the day after that. I also remind myself that some days can have less items and that is okay- it doesn’t make me less motivated or have less ambition, I’m learning that some tasks take more time and concentration then others- as they should.
I’ve done this for the past week…
and have found it very satisfying. I see progress and clarity for what my intents are. I’m able to look back over a short history of lists and see where my intent was directed. A powerful insight that I’ve recently taken in over the course of thinking about lists recently is how much my relationship with list making has changed. List making was once a tool to create order out of none, slowly this tool caused demotivation because I overused it (crossing of small things, adding bigger things simultaneously) to compensate for avoiding the work that really mattered to me, & now with this new insight I’m using lists in a new way which I hope will release most of the resistance I experienced when thinking about the work that seemed hard or were scary to begin.
An example of list items that are I often abandoned is making time and space to write.
…not necessarily to ever get published or anything but just to clarify ideas and translate them in a cogent way. The act of writing about my travels in September or something as small as my new discovery about lists would always get pushed to the bottom of all of my lists. I think on many levels I was afraid of beginning, or I didn’t immediately see results & an inner voice influenced me to believe it wasn’t worth the start. Lately, I’m finding that reserved time for activities like this instill lots of insight for other events that are closely related like presenting ideas in a meaningful way at work or assessing information that I take in from signage, people, & content. Perhaps its not so much the list making that is important but rather the self- granted time spent internalizing, hearing, and sussing out what’s important and what’s worth doing.
To the Great Outdoors, the In-Between, the Artificial, & Back!

September 2016

Why does it feel like every September comes upon us so fast and kicks us back into gear after lazy summers of lounging and excessive free thought?
There’s something about September, she always gets me. Armed with an underlying current, September comes around the corner and reminds me how much time is left in the year & more overwhelmingly how much time has passed.
Some highlights these past few weekends include experiencing three distinctly different spaces that challenged me to be introspective and adaptive.
The Great Outdoors, Camping at Yellowstone, MT
I went with a few Carrots to check out this magical land-geysers and a mystic atmosphere rooted in a place where wildlife rule & are free to claim their space. We were reminded that nature runs the show with her ideals about what the weather should be- it caused us to work together, build camaraderie, & share stories. I’m certain the trip would have been different if everything had been ideal according to us. But, because Mother Nature had her way, we saw a new primitive way to co-exist & because of that I think we won’t forget this trip anytime soon.
The In-Between, XOXO in Portland, OR
Back in SF with a day to spare, I gathered my thoughts, recovered from a 24hr bug, & was on my way solo to an art & technology festival with a bunch of introverts. I recall feeling excitement and nervousness about going alone, but as with everything that I seem to take on solo- I’m almost always glad I did. I even went as far as to stay with Ellie (a former sewing instructor that I worked with years ago) and her husband. They set up a new studio/home in Portland and to say that this place is special would be an underwhelmingly (how is this not a word?) true. Together, they are the modern day Eames’- making their life/work a manifestation of meanginfulness, I felt inspired to be there and to be a part of their Build Your Own Business series. I even learned how to make a waxed canvas bag with Ellie- I’m still in shock that the bag hasn’t fallen apart & anytime I get a compliment, I’m more than happy to tell everyone how it came to be. The festival was equally inspiring, it took me back to my DIY roots- the speakers were phenomenal, we were invited to hear and participate in the journey of what it takes/feels/is to work on something creative & put it out in the world a la the internet. It reminded me of what I like to do, it also reminded me that somehow I forgot to do these things/rituals in busyness of the day to day. At XOXO, I challenged myself to be less of a list checker & instead respond to things/events/people that spoke to me and rest in-between. I got to see some of my favorite spots in Portland again, I got to slow down and ease back into being a resident of city life. I took the bus & walked everywhere, it was a great way to take in the surroundings. Time shed its lessons on me and I came back with vitality for a richer self- how do I retain these feelings? How do I stay with it?
The Artificial, Celebrating Evan in Vegas, NV
Not too long after we hopped on a short trip to Vegas for our friend’s birthday- my mind didn’t really know what to expect, except to know that I’d likely go into sensory overload here. Instead, the trip was uniquely awesome in its own right. A day at a very chill cabana/pool, learning how to play craps, dancing to some covers, and staying in to watch The 40 Year Old Virgin while some of us went out, trying my best at Top Golf…all of it was perfect. I slept, got much needed rest, was myself the entire time and I don’t think I could have asked for a better experience with good friends. It’s too bad Britney Spears wasn’t in town- there’s always a reason to come back.
Hello from XOXO in Portland!

September 2016

The weather here is absolutely unreal! It’s hard to believe that a week ago, it was thunder-storming and snowing in Yellowstone while we were camping. It’s my first time at XOXO and I’m amazed and inspired by all the nourishing energy this place has- everyone is welcoming and the talks are candid and very much honest. Sharing about the creative process and putting your work into the world requires such bravery. I feel energized, renewed, & ready.
I hope the Andy’s bring this back again someday, even if it takes a new form. I think we’d all benefit. I’m also amazed by the event stats (over 50% of attendees are first time attendees, 50/50 gender balance in attendance, completely family friend w/ child care on site, donations going to homelessness in PDX, accessibility on all shuttle busses- & more & more & more)- this is a lesson in feedback, iteration, collaboration! Thank you.
Summer Photo Reel

Summer 2016

So many awesome, fun, and challenging opportunities came up these past few months. I got to work on some tough product challenges and learn to share my work in a new light. My downtime was spent with great people, friends reconnecting & great weather. & Eames! 
I generally try not to do the overload photo share on social media- somehow it still overwhelms me. So, here’s some of the highlights so far- my favs are moving (again! this time it feels like home), visiting home (back to my roots!), & turning a new age (i’m growing up!).
Energy flows where attention goes

February 2016- It’s a Leap Year!

I read this from a bathroom and it stuck with me.
We got to visit with Maggie and David, to see some of the most beautiful parts of Napa Valley. Redd for brunch was one of my highlights- deliciousness!
Times with Eames on the beach are adventures I still wish I had more of.
&, I got to work on this fun graphic for our hackathon at Instacart!
&&, thanks Tara for our good chats and these beautiful flowers :)