Jacob Miller's Portfolio

Howdy friends! This is a nice little snapshot of my design portfolio. For you it's a list of things I've had experience doing; for me it's some fond memories. Let's jump into it.

Prototyping at Atlassian

I was hired at Atlassian for a singular purpose: to kickstart Atlassian's prototyping. At the time they had no prototypers nor prototyping as a process of their design workflow. I worked with the design teams to establish it as a staple of their shipping process and to make designers more familiar with how to build designs for research. In addition to this, I also built out tooling to assist in building and researching prototypes. Some things I built prototypes for:

It's likely better to show than tell, so here's two things I worked on that I was proud of.

Onboarding prototype

We wanted to find a way to better on board new users and show them the latest and greatest features. What we came up with was a method of showing a second virtual mouse on screen that showed the user a process, then had the user perform the same action. It tested incredibly well and was eventually integrated into the products.

Bowtie

The desktop application I made that allows designers to easily build code-based prototypes. Bowtie has all of our design system components built in, including fully interactive components such as modals/calendars/etc, as well as colors, typography, logos, and other branding. In addition it has templates that have every product built out in simple-to-extend static HTML, meaning designers don't have to wade through React or run any build steps to get up and running. Most importantly though it allowed for internal and external hosting of prototypes, allowing for protos to easily be tested and shared. Prototypes could also be embedded in our internal Confluence instance for ease of documentation/interaction. Go ahead and try that url / password if you're feeling keen. One note - it will expire on September 22nd as any external protoype expires after 30 days for security.

Prototyping at Microsoft

As a design prototyper at Microsoft, my role was to vett new ideas for their value to the Microsoft stack. The role was interesting in that I was always working in a new domain. In the five years I was at Microsoft I created prototypes for:

It was a great role and I loved the fast-paced nature of it. The ability to switch between design and code quickly is what keeps me feeling fresh and excited to work on new things.

Prototype Example: Sports Vertical for Bing

We wanted a richer experience for sports results when searching Bing.com on mobile devices. Click through each of the videos below to see the prototype each step of the way.

previous
next

Existing Product

This was the start. The search results are pretty plain, and really don't offer anything other than a schedule and the score for the most recent game. It didn't feel immersive, it felt like your standard search.

Iteration 1

We felt like a large hero image would captivate the users' attention more. We added a couple new rich sections too: game highlights, game stats, news, and schedule. Each of these could be expanded into a larger view.

Overall user responses were really positive, however many users asked to see the exact play that the hero was from. In addition, they didnt really like the expanded view removing them from the main page's experience.

Iteration 2

One of the big problems was we couldn't get photos from a game that was currently live, which meant a hero image would be outdated while the game was going on. To counteract this, we figured a team helmet might be better for a hero image so as not to confuse users with an old picture. We tried a parallax effect on it as well just to give it more depth. We also changed the expansion model to an inline expansion after feedback from the users from the previous iteration.

The new expandos tested really well, but users would often get lost in the expanded view. We really needed a way to navigate within the expaneded views as well. Also not a single user even noticed the parallax, which was kind of a bummer for us since a lot of us thought it was nice. I suppose it's just overused in design today, leading to user blindness.

Iteration 3

Since users were blind to the traditional parallax, we tried buffing it out even more by adding in device motion. This one reacted to the orientation of the phone, and would shift around as you tilted it.

The result? All but one user completely ignored it. The one that noticed it said it made him feel sick. That's one of the joys of prototyping though - failing quickly. You catch bad ideas early for low cost.

Iteration 4

We added a tab model to the video. This allowed for navigation within the expansion items, and allowed users to naturally swipe between content.

This tested really well, and was eventually the model we handed off to devs to create. It's currently in development for production

Childrens' Books

I made a children's book! I really wanted to do something interactive, so I started drafting up some prototypes in html5. I experimented with a bunch of effects, animations, and small games, but I eventually decided to start small and only use a basic parallax effect to increase the visual depth of the artwork. I hired an artist to do the illustrations and a coder to port over the initial html5 prototypes. The html/js versions sadly didn't have enough performance on mobile devices, so I needed it in native code. Once I had those parts done I crafted the UI. I was thinking of making the UI more interactive for the kids, but after talking to several parents and testing it with kids, the biggest response I got was that parents didn't want their kids playing another video game. They said that too much gamification often led their kids to ignore the content of the story, and just pay attention to the game. So I kept it simple, adding only the parallax effect and the ability for a kid to have the page read to them. I hired a voice artist, had him record the lines, packaged it, and submitted it. Overall a very fun project which you can check out in the app store.

I have a second one in production now. It's amazing how much I've learned from the first one, I'm excited to see what I learn from the next.

Mouse over the ipad below to get a feel for it.

Right now I'm working on a platform to more easily create parallax pages. One of the difficulties with the first book was that the artist could never see their art in motion right away. They would hand it off to me, I would write the code to enable the parallax, then we'd make a list of changes and repeat until we got it looking right. The turnaround time on it was simply too long, and the work was pretty repetative on my end. I figured this process could be made way better.

I decided to make a site in node/angular that would allow the user to upload images, adjust the depth of each image, the x/y slide ratio, and the overall zoom of a page. This way the artist themselves could get it looking just like they imagined it in their head. Check out the video below to see it in action!

The site itself exports json, which the ios app imports to generate the pages natively. The combination of both has made it much easier to work with artists in creating new pages/books.

Ideally I'd like to make this product a platform for anyone to be able to use, with automatic publishing through the ios app. Feel free to check out the code here: Bookmaker on Github

Lama Rama

Lama Rama was a mobile game I was working on with some friends. We were in talks with Amazon to ship it as a flagship game with the release of their Amazon Fire phone. Tragically, our lead developer died and the game fell into stasis. I was in charge of all the the UI components and artwork. It was fun change of pace as I had never done game art before.

This was the intro screen. I went through a lot of logo revisions. The name of the app changed a bunch, and what we wanted to convery in it also changed. This wasn't the actual final version, but it's the one that I was most happy with. Initially the game featured a llama (as in the animal) who guided the lama (as in the Dali Lama) through the game. This was later ditched, but I liked the logo that resulted from it.

The many environments that the game played between made it a challenging project, but I enjoyed drawing everything from deserts to icebergs.

In the tutorial section, I tried to visually show how to use the accelerometer to play. This was one of the screens, but the game also includes a minigame at the start where the user attempts to pour tea by manipulating their phone in the same motion. This trains a user to rotate their wrist, which eventually lets the user swing the character back and forth on ropes.

A quick exercise for a hypothetical time travel application.

The user would set their destination date, or pick from historical events such as the construction of the pyramids. The app would also alert the user if they were in the wrong location to view the event they were traveling to see.

Once a date is picked, the user is given a confirmation page that includes three distinct keys to visualize the direction they're going. A graph showing the beginning and end points along with arrows, a button that changes arrow indicators depending on direction, and a text confirmation as well. This ensures the user doesn't inadvertantly travel back in time when they were really trying to go forward.

As part of the design exercise, I made sure to ensure that it was made for both ios' and android's design language.

Windows 8 Metro Apps

We had to create a couple Windows 8 demo apps to help illustrate some user interactions we were proposing for inter-app communication. They never saw the light of day, but it was fun creating apps in c#/xaml.

This one is an imaginary London transit app for a Windows tablet.

Other Open Source Projects

Dummy Data Plugin for Photoshop and Illustrator
Dummy Data allows you to automatically generate names, addresses, and other entities in designs quickly. Think of it like lorem ipsum, but for any type of data.

Mashup.fm
Mashup.fm is a community dj site. It's built on node.js, haml, sass, and love. It's in an alpha stage right now, but if you're lucky you can head to the dev site and listen to some jams, or you can just check out the static html prototype here.

Photomanipulation

This isn't strictly related to any job you might hire me for, but you should check out the blog post I made detailing the creation of this:

It details my workflow pretty well, and it will give you a general idea of what it'd be like to work with me.

Jacob Miller


808 366 1708
j@jjcm.org