April 22, 2020No Comments

What does it mean to be a designer?

This is a repost from my old portfolio. I originally wrote this article in January 2016

Today, I attended a presentation by Travis Lowdermilk of Microsoft that was put on by UW's HCDE graduate student association. The presentation itself was about the hypothesis driven design - specifically the progressive hypothesis model that's gaining popularity within Microsoft. Generally speaking, this model is a reaction to an older method of product development that was an iterative process with two primary modes: customer research and product development.

Under the progressive hypothesis model, customer research is split into customer research and problem research, and product development is split into concept development and feature development. In each of these four steps, the team develops a declarative hypothesis based on their best information, and this hypothesis is used to guide the research and development process.

The key question to ask during this process is: Who does your idea solve a problem for?

Anyways, enough about the progressive hypothesis model. I'm sure that there's information online for anyone who's interested.

This post is really about another concept that Travis discussed today, one that really resonated with me: what does it mean to be a designer?

Travis described himself as a "blue-collar" designer, saying that he "just wants to fix shit and make shit work." He revealed that he doesn't consider himself an amazing visual designer and that he even had some reservations at first about accepting the title.

I feel the same way myself. I know that visual design is not one of my main strengths. I grapple with the idea of calling myself a designer, especially as I've been applying to internships lately with titles like 'UX Design Intern' and 'Visual Design Intern.'

Travis explained that there's a lot more to being a designer than simply making things pretty-

At it's root, design is about solving problems. That's what I'm here for. I don't think I'm amazing or even very good at designing beautiful things. I know for sure that my drawing skills aren't superb. I don't know if I'll ever be- I just haven't used that part of my brain much, the 'right side' if you will. But I am good at solving problems. My analytical skills are strong. That's what my undergraduate education was all about, learning how to analyze problems. That's how I've spent most of my time and mental energy. I'm able to grasp the nuance of complex issues and explain nebulous subjects in concrete terms. Finding patterns, seeing underlying dynamics, making sense of ambiguity.

It's good to see someone who feels like me, who wants to solve problems the same way that I do, succeeding. It means that there's a place for me somewhere out there. But I'm still not sure about the title 'designer.'

Travis ended his talk with three pieces of career advice that I'll share now for anyone who's taken the time to read this far:

  1. Design without a problem is art
  2. Don't limit your design opportunities (there's more to design than just making things for screens)
  3. Learn how to tell your story

Thanks Travis.

March 6, 2018No Comments

Germs.ar Update 3

Just another quick update to the Germs project I've been working on. Previous posts here: Project Idea: Germs.arGerms.AR update 1Germs.AR Update 2.

Thoughts about approach to documenting this project

I have made a resolution to myself that I am going to be constantly writing about this project every day as I continue to work on it. Some posts will probably be similar to my last one (Germs.AR Update 2) which was basically just a dump of some code snippets and some quick screen captures that I took while working on the project. Hopefully many will be more similar to this one where I can talk a bit more about my thought process, and discoveries that happen as I work.

Rotation Component

Building off my progress yesterday, I spent some time today creating a rotation component for my germs. The code for the rotation component looks like this:

I had originally approached this component the exact same way as I had the random movement component from my last post, by creating a randomized vector and then using the values from that vector to setAttribute("position") but after digging around a bit in the A-frame docs and the THREE.JS docs I stumbled upon this article on github which provided some more info about the specifics of the implementation of the rotation component in A-Frame, and how that interfaces with the underlying three.js. For reasons I don't entirely understand, using setAttribute() here just seems to be the 'wrong way.'

As in it wasn't working at all when I tried. Who am I to argue with that?

Still, I think it's strange that you'd be able to update the position property one way, and the rotation property another - guessing here that it's something to do with converting back and forth between radians/degrees each time.

Anyways, having messed with the code a bit and seen that this was the way it was going to have to be, it didn't seem like there was a point anymore of creating and using a vector, so I was able to streamlined the code a bit. It took a bit more fiddling with values to get an effect where it looked like it was rotating in a a less jittery way.

Here's a short demo vid showcasing the germs moving and rotating randomly (and me looking really unhappy again - I like doing this stuff, I promise!):

Latest demo (live)

Note: this is still really slow to load, doesn't work on Chrome for iOS, and will need to be pointed at a hiro marker to display the germs! Here's a marker, for your viewing pleasure:

Next Steps

I spent some additional time looking up other A-Frame projects and thinking about where to take this next, and in the process came across a great article on Medium about using a raycaster for interaction and taking webAR demos outdoors without a need for a marker to anchor the AR content to. I'm planning to follow along a similar path soon in order to get some greater interactivity between my germs and the real world soon - having the interaction tied to a marker doesn't really create the kind of 'organic' experience that I had hoped for. I really like the ability to create an instance of an AR object in a way that relates naturally to the real environment.

Only problem: at least for now, it looks like the only way to really get doing some of this stuff is to build a specialized browser called WebARonARCore (for Android users) or WebARonARKit (iOS users). The iOS version requires an Apple developer account to build (which I don't have!) that costs $99 a year. Considering that I'm not necessarily planning on creating any iOS apps in the near future, I'm not that psyched about making a mandatory donation to Apple at this time. That said, I have been starting to take a look at some of the OpenFrameworks docs, in which case this might come in handy. Meanwhile I'll be doing some more research to look into other workarounds.

Other issues/questions/ideas looming on the horizon

  • How small can I get these germs before they stop displaying in the browser?
  • How many germ objects can I have floating around before it stops being performant?
  • Thinking about creating better underlying logic for germ behavior - random rotation and movement are too easy. I'm planning on looking into cellular automata and trying to make these guys a bit more "realistic"
  • Same goes for color - soon to be curating a color palette that makes this whole look a bit less "party" and a bit more visually cohesive.
  • Might have to look into learning how to do some basic 3D modeling in order to create some low-poly (fast loading!) germ geometries

That's all for now!

March 4, 2018No Comments

Germs.ar update 2

This post is an update on the Germs.AR project I've been working on: Original PostGerms.AR update 1

Super stoked on the progress I've made since my last post... Things are really coming along.

Latest version of the working code is live here. Be warned - It's really slow to load! (Probably because of the complex obj assets - will need to do some further optimization soon). If you are going to play with the demo, you'll want to use Safari (if on Iphone - as of this writing, chrome throws an error. I'm told it should be fixed in iOS 11.3). You'll also need to pull up the hiro marker on another screen or print it out.

  • I've integrated multiple .obj files now, so there are multiple types of microorganisms augmenting my reality. In the process I've realized that it's much more efficient for me to be running the code with atom live server and the marker displayed on my phone than committing changes to github each time to view the update through my iphone. (Please forgive me looking dead in the face - it's hard to screenshot, smile, and hold a phone at the same time!)

  • I've integrated a custom A-frame random color component to use during testing. It looks like a party now!

  • I've integrated a custom random walk A-frame component that has all the microorganisms moving around!

Here's a preview of what the HTML file looks like. Most of the "good stuff" is in the Javascript at the bottom.

Bonus: I've seen some strange behavior that occur when the Hiro Marker leaves the view of the camera... Here's an example:

I guess something in my room looks like a hiro-marker!

February 26, 20182 Comments

Germs.ar update 1

Ok - just a quick update here on my germs.ar project. Now that I've got a basic demo version of A-frame AR working, the next step was to try and get some germ objects displaying in AR. As a quick experiment, I downloaded some OBJ files from TurboSquid, and got those set up in my file structure so that I could load them in as a-frame assets. I found models for three different types of microorganisms, but for starters I created a demo using just one model. Here's the first germ I created:

With a little javascript, I was able to get an array of germs displaying:

I'm going to need to play with the scale a bit more to get these showing up tiny like I envisioned but for now, this is a good start. Also I may need to do some editing on the obj file - there are some weird artifacts that seem to be displaying along with the primary model. Still, a step in the right direction!

February 22, 2018No Comments

Project Idea: Germs.ar

I've got a new idea that I've been cooking up.

It all stems from a workshop I took a while back at Gray Area on web VR. In the workshop I was learning how to use A-Frame, a web VR framework developed by Mozilla. A-Frame is pretty awesome to use because it's HTML based so it's really easy to get up and running with it. It uses an HTML entity-aspect model (which was new for me), but is pretty simple to get a hang of once you wrap your head around it. This isn't meant to be a post about how to code in A-frame, but as an example, creating a red box might look something like this:

<a-box position="4 1 1" material="color:red;"></a-box>

Anyways, at the time I didn't really know what I wanted to do with VR, I just though it would be a cool thing to learn about. I had started experimenting around with some A-frame projects after I finished but making a weird vaporwave environment with some floating animals and Prince's Purple Rain playing was about as far as I got.


Fast forward a few months, I'm back from circumnavigating the globe, and I learn that now you can use A-frame for web ar. HOLY SHIT. I have to do something with this. (P.S. if you want to do something with it... Here is a good place to start.)

So I got an idea. And did what any normal person would do... Texted my friend about it:

And after some initial experimenting...


This is the start of big things to come...

Spencer James, Product Designer - Silicon Valley, CA

Email | LinkedIn | Github | Twitter

©SLJ forever