Ideate to Win

I was in a rather crummy mood as I left the office this evening.  I told myself, “Krysta, it’s OK to feel shitty right now… something shitty happened and just because 12 years have passed since it happened doesn’t mean I shouldn’t still feel it.”

I managed to arrive on the Bart platform JUST as my train was boarding.  Phew!  But wait… yet again, there were no seats available.  As I looked at the faces of the seated passengers I remember thinking, “Can’t you see?  I’m grieving over here… and all you’re doing is staring at your little phones without a care in the world-” I stopped myself, I realized I was going to need to take action to move past this bitterness.  But what could that be?

I put on my headphones and blasted “Henehene Kou ‘Aka” by Israel Kamakawiwao’ole.  (Hawaii is my happy place.)  Then I opened Facebook to look for my favorite photo of my dad – it’s the one of him as a kid holding his pet raccoon.  “Grr!  We’re in the tunnel under the bay and there is no internet!”  And then I remembered about my photo box.  “That’s what I’ll do, when I get home I’ll go through my box to see what photos I can find.”

When I arrived home, I found my antiquated box full of pictures from my prom, my high school graduation, my summer job at RIT and finally, the photos from the fishing trip with my dad.  These fishing trip photos were taken the last time I ever saw him… I can’t believe I had totally forgotten about this trip!  It was such a magical trip – even more so since it almost never happened.  I realized what I needed to do… I needed to capture this story so I could remember it forever.

So the story begins…

It was summer break after my second year as an engineering student at RIT.  I was working a summer job as a campus housing assistant and at 19 years old, I was having a ball.  This was the summer I had finally convinced my parents to let me bring my car to school – this was a very big deal for them!

In the middle of July, I started to feel a little homesick… I realized, “Hey, I have a car now!  What’s stopping me from taking the 6-hour drive to Jersey?  Oh, thats right… my job!”  I talked it over with my coworkers and they kindly swapped shifts with me so I could take a few days off the following week.  I called home to let my mom know I was headed home on an impromptu trip.

There are two things I remember vividly about that weekend at home.  The first was the fishing trip and the second I’ll get to later.  My dad loved his boat — and despite being laid off from his job of almost 35 years with no real alternatives for income, my parents sunk a sizable sum of money into boat repairs.  When I asked my mom why they would do that when times were so tough, she said my dad needed it as an outlet.  That it gave my father a sense of freedom – I didn’t understand this at the time.

To start the trip, my dad had to get the engine warmed up – I can still remember the roar of the motor, the splashing of the water and our dog, Lucky running around and barking with excitement!  “Let’s go, let’s go, let’s go!!”

First we needed to fill the tank with gas.  Ever see a gas station for boats?  It’s pretty neat.  We’d always go to the Good Luck Point Marina.  Here I’m posing for a photo-op with Lucky as my dad pumps the gas behind me.  I had to hold on to Lucky otherwise he’d run off exploring on the deck and get into all kinds of trouble.  Don’t get me wrong, Lucky was an amazing dog.  In fact, when we first got Lucky when I was 11, my father and I instantly bonded over him.

And… we were off!  It was about 30 minutes of rip roaring through the salty jersey bay to get to the channel that connects to the Atlantic.  Here we’re in line headed towards Barnegat Light – the end of the channel.  I love this picture.  It captures the essence of this trip so well – a carefree day with the warmth of the sun on my face, the relaxing sounds of the drifting boats, seagulls and nothing but the freedom of the great big sea ahead of us.

My father safely navigated us out to sea and found us the perfect spot to fish.  Here my father is throwing out the water anchor to help stabilize the boat as Lucky stands on the stairs to assess the situation.

Next, we put bait on our lines and dropped in our lures.  Almost instantly I had a bite!  I reeled it in to find a nice looking fluke on my line.  Just like magic I kept reeling them in for a total of five fish!   My father, however, wasn’t so lucky… he only caught one the entire trip. :-)

When the fish stopped biting altogether, my father pulled in the anchor and navigated our ship through the channel and back to port.  It was a fantastic day out at sea.

As I mentioned earlier, there was one other thing I remember about this weekend trip.  It was saying goodbye to my dad.  When it was time for me to head back to RIT, my father walked out to my car with me as I held Lucky in my arms.  I clearly remember thinking, “Wow, this is the first time I’ve felt like a real adult in the presence of my parents…”  I got completely swept up in the moment – I tried not to let my dad see that I was crying but I’m sure I failed miserably.  My dad put my bags in the trunk and I handed Lucky to him.  He stood there at the curb with Lucky in his arms as I got settled in the car.  I can still remember looking back at him through my rear view mirror as made my way back to school.  Little did I know, this was the last glimpse I would ever have of my father.

–

As I write this twelve years later, I’m realizing just how lucky I am to be working a block away from the beautiful San Francisco bay.  Whenever I find a few minutes to spare, I take the short stroll down to Pier 7.  Once I pass beyond the concrete sidewalk and onto the wooden planks, I find myself returning to the channel at Barnegat Light.  I feel the warmth of the New Jersey sun on my face, I hear the cry of the seagulls as they scavenge for food and I see the fishermen with their lines out to sea.  As I gaze out at the end of the pier, I pause to experience the freedom of the waves.  When I hear the purr of a passing fishing boat, it’s in these moments that I’m back at home, on my dad’s boat, without a care in the world.

–

Richard Walter Sadowski Jr.

December 30th, 1948 – October 2nd, 2002

Yesterday I created a set of iPad wireframes in Google Drawing that I wanted to quickly turn into an interactive prototype.  I found myself at a loss – there is really no clear cut solution for prototyping interactions on iPad.  And here’s one the thing you need to know about me… when I have an awesome new idea in my head, I need to work FAST!  In these moments I have little patience for learning curves or fumbling around with clumsy UI.  With that in mind, here’s a synopsis of how I found my way to my new favorite prototyping tool.

Adobe Flash

Adobe Flash used to be my go-to tool for prototyping screen-based interactions.  I had devoted a lot of time to learning this complex tool previously so I wouldn’t have to worry about the learning curve here.  However, I still find Flash to be a little on the slow side for quick sketch interactions and prefer to use this tool for more polished presentations.  Also… iPads and Flash do not get along!  So I quickly knocked this off my list.

Mashable’s List

I did a quick search for iPad prototyping tools on Google.  One of the top hits was a Mashable slideshow, 20 Excellent Wireframing Tools for Mobile.  Twenty???? Are you serious?  My patience was already wearing thin!  I browsed through each of the 20 tools scanning their descriptions to see if they matched my needs.  I chose to look into Flinto, InVision and Proto.io.

Flinto

I started with Flinto and watched the demo video on the homepage.  Neat!  The video demonstrates the ability to scroll screens while having static headers and footers.  It also seemed very easy to drag and drop wireframes into the website.  I dove in a little further – I took screenshots of my Google Drawing wireframes and popped them into Flinto.

I quickly came across my first issue – the proportions of my wireframes did not match the proportions of an iPad screen… there was an ugly black bar under my wireframe.  Doh!  To fix this, I found a photo of an iPad on google image search, dragged it into my wireframes and adjusted the proportions to match.  Problem solved!

Now I added a second wireframe and learned how to link them together.  WOW!  This was one of the most delightful experiences I’ve had in a while.  To link screens, simply draw a box of the tap area on the first screen and then click on the target screen.  A sleek red line is drawn to the target screen and when released, flows from the first screen to the target in a most delightful way!  This experience is great because:

• There are no drop-down menus to find the target screens.
• I don’t have to bother with figuring out a naming convention for my screens.
• I don’t have to navigate into different areas of the prototyping tool – it’s all handled on one screen.

Next, I sent the link of my prototype to my iPad…  BAM!  I had it up and running in just a few seconds.  I was pleased to say the least.  However, when I started navigated between my screens, I did notice a lag and the buttons weren’t as responsive as I wanted.  So I went on to the next prototyping tool:

InVision

I enjoyed InVision’s clean design and easy drag and drop functionality to add images to the project.  However, unlike Flinto, inking my wireframes together required opening up a new window, tapping a button at the bottom of the window and then using a drop down menu to find the filename of my wireframe.  Gah!  This took some fumbling around to figure out.

My immediate goal was to launch this onto my iPad to see how the navigation/tapping felt compared to Flinto. Getting the InVision prototype onto my iPad was just as easy as Flinto. Upon opening the prototype, I noticed the lag was just the same as Flinto’s.

Flinto was still my favorite!  But, I wanted to give the other options a try as well.  Next up, Proto.io:

Proto.io

Woah… Proto.io is hardcore!  There is so much going on!  The learning curve felt really steep.  This tool also seemed a little off-target for my needs – it seems useful as a wireframing + interaction prototyping tool more like Balsamiq.  Since I already had my wireframes built in Google Drawing I wanted to add them instead.

This was no easy task.  I resorted to looking at Proto.io’s help section without any luck.  Finally I did a search on Google and came across a forum with a clear description of how to do this.  This was way too complex for my needs.  Next I looked into Fluid UI:

Conclusion

I decided I could live with the slight tap/laggy issues on the Flinto iPad prototype.  Phew… I had finally chosen the perfect tool for my specific and super fast application.  And now that I’ve completed my prototype, I can say I’m very pleased with Flinto!  I look forward to sharing my prototype with you all very shortly!

One of the activities we do as UX Designers at Tradecraft is the ’20-Minute Whiteboard Challenge.’  It’s a great way to show others your design process and is commonly used during job interviews.  Today I paired off with fellow Tradecrafter, Veronica Martini who posed an awesome design challenge:

Facebook is adding a new feature that enables people to create profile pages for their pets.  Design a way to add other people’s pets as friends.

Take a look at what my whiteboard looked like after 20-minutes:

There were four steps to my process:

• Persona – To understand who I’m designing the feature for.
• Design Stories – To brainstorm some of the tasks that my user might want to do.
• Task Flows – To think through the user’s process towards completing their task.
• Wireframes – To visualize how the feature might actually work on a screen.

Veronica requested I design the feature for a mobile device.  This opened up an awesome opportunity – to add doggy friends using a ‘nearby’ functionality.  My wireframes explore the scenario of ‘Jenny’ bringing her dog, Bonsai to a dog park.  At the park, Bonsai hits it off with a little chihuahua named Robbie.  Jenny adds Robbie to Bonsai’s Facebook page so she can arrange to meet up with Robbie at another time.

Cheers!

At Plixl, we launched our first game, Mosaic Medley solely on iPads so we could get players into the game as quickly as possible.  Now that we have a publishing partnership I wanted to quickly evaluate the benefits of porting to the iPhone as well.  Using available data, here is how I came to a conclusion:

FYI – the numbers below are are all fictional.

• If we build the iPhone version, our publisher will increase our campaign to send an extra 1000 users per day.
• Life Time Value (LTV) is $1 per user.
• Apple takes a 30% cut.  (OK, this number is real).
• Profit sharing with the publisher is 50/50.

Therefore we can calculate an estimated increase in revenue:

1000 (extra users) * $1 (LTV) *.7 (Apple’s cut) *.5 (publisher’s cut) =

$350 per day of active promotion

This is assuming the LTV of the users sent from our publisher have the same LTV as our existing users (it may be more, less or the same).  Another unknown is how long the promotions would last or if there will be major changes in the market sometime soon.

However, adding the iPhone version to the app store should increase organic users by a small percentage and lastly, we’ll be able to monetize the extra iPhone users with Vungle, a video ad service.

From this quick and dirty estimate, we were able to come to a conclusion about investing our time into building the iPhone version or not.  Based on our real data and our time constraints – we decided to move forward.  Expect a release sometime in the next few weeks!

To prepare for the UX Design program at Tradecraft, I read “The Elements of User Experience” by Jesse James Garrett.  It’s the go to book for understanding how the many disparate parts of user experience fit together.  A must read for anyone interested in UX.

To help me dive a little deeper into the subject matter, I decided to select three aspects of the book that stood out to me and share the reasons why.

#1 Personas

Quoting from the book:

By putting a face and a name on the disconnected bits of data from your user research and segmentation work, personas can help ensure that you keep the users in mind during the design process.

These are the persona examples Garrett uses in the book:

This is awesome!  In my design work, I’ve always envisioned the end users to build empathy with them.  By using empathy, I can make sure that any feature I design will fit their needs.  However, my imaginary “users” have never had names, detailed personalities… or even a face!  By going a step further and creating full personas, I’ll be able to empathize with their needs much, much better.  This will be especially valuable when the product targets multiple types of users who have significantly varying needs.  Adding this to my toolkit!

#2 Conceptual Models

The book describes conceptual models as follows:

Users’ impressions of how the interactive components we create will behave are known as conceptual models.

The book goes further on to explain an example of a conceptual model:

For example, the conceptual model for the shopping cart component of a typical e-commerce site is that of a container. This metaphorical concept influences both the design of the component and the language we use in the interface. A container holds objects; as a result, we “put things into” and “take things out of” the “cart,” and the system must provide functions to accomplish these tasks.

This idea stood out to me since it’s something I’m familiar with in my experiences with game design – I’ve just never referred to them as conceptual models.  I’ve always strived to design game features that had strong connections with the way things work in the real world.  If there is no real world  parallel, it would be difficult to understand and would feel contrived thus breaking the immersive experience.

For example, in the Mahjong Butterfly game I designed at Namco, I wanted to create a meta-game to boost the engagement of matching Mahjong tiles.  Sure, I could have simply instructed the users to match X number of tiles to get some random reward thereby adding extrinsic motivation.  But, I knew adding a mechanic with a real-world parallel could create intrinsic motivation.

Since most people are familiar with the concept of caterpillar metamorphosis and I knew that nurturing creates one of the strongest emotional connections, I decided to create the conceptual model of nurturing caterpillars to raise them into butterflies.  Once I decided to go with the nurturing conceptual model, every design decision moving forward needed to fit within that theme.  For example, changing the tile artwork from the traditional dots and bamboo to honeydew and leaves created a feeding element – very intuitive.

In Mahjong Butterfly, players match honeydew and leaf tiles to collect food for their caterpillars.

I’m excited about having the term, “conceptual models” and a deeper understanding of the concept to add to my design toolkit!

 #3 The Five Planes

I’m new to the concept of the five planes of user experience – they are the surface plane, the skeleton plane, the structure plane, the scope plane and the strategy plane.  One aspect of this concept really caught my eye:

Woah!  I was initially taken aback and uncomfortable with this idea – most of my experience thus far has been using a waterfall production technique.  In the past, I’ve been most comfortable with having a very solid design before moving forward with any production.  Upon further reading, I started to realize that during my previous design processes, I’ve actually done some of this already.  But since I’ve never categorized the work into these five planes, it seems rather alien to me.  I imagine getting this technique right is a finesse skill that takes experience to master.  I look forward to exploring this concept and gaining some of that experience with my work at Tradecraft and beyond!

I’m extremely excited to announce my latest adventure, I will be studying UX Design under Laura Klein and Kate Rutter at Tradecraft!  For the next 12 weeks, I will be fully immersed in the field of UX Design all day, everyday.  I’m in the 6th cohort of the program, which includes 2 others in UX Design, 3 in Growth and 1 in Sales & BD.  I cannot wait to get started!