Krysta Curtis aims to add joy to the world through design.

100 Sketches in 3 Days

To inspire us to observe our environment in new ways, my UX instructor Kate Rutter at Tradecraft challenged my cohort to create 100 sketches in 3 days.  That’s a lot of sketches!  Shooting to spend 5 minutes per sketch, this meant I devoted a solid 8 hours to sketching.  I’ve selected my ten favorite sketches to share with you!

This is what this sketching assignment looked like from my perspective:

Drawing

I found myself spending a lot of my time drawing people – it’s so fascinating to watch how they interact with the world around them.

Giggles

Homeless

Dog

With my love of play, I couldn’t pass up a sketch at the nearby playground:

Glee

Not too long into the assignment I noticed how I started to observe my environment in ways I never really did before.  How often do you look up at the ceiling?

Fan

Sometime’s it’s helpful to sketch out spaces, for example when designing the layout for your furniture.  This is a sketch of the floor plan of the ‘UX Cave.’  It’s our tiny little basement room with tons of sticky-notes on the walls!

UXCave

I also created a few sketches of small objects close up, this plastic cup is my favorite:

Cup

Then I made sure to capture things that weren’t so up close and to capture some movement, like in the helicopter’s propellors:

Helicopters

And no, this is not a lightbulb :-)

Butt

Screen Shot 2014-08-28 at 11.24.58 AM

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

imgresAdobe 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

mobile_prototyping_tool_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

full206

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

Screen Shot 2014-08-28 at 1.10.00 PMWoah… 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:

photo (6)

 

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!

Should We Port to iPhone?

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:

Screen Shot 2014-08-10 at 1.48.28 PMScreen Shot 2014-08-10 at 1.48.22 PM

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.

unnamed

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:

Screen Shot 2014-08-10 at 3.18.22 PM

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!

logo

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!

I’ve something exciting up my sleeves – I will make an official announcement next week!  In preparation for my unannounced thing, I have taken the Clifton StrengthsFinder test to discover my career strengths.  The test determines your top 5 strengths out of 34 Strength themes.  The idea is that working on your strengths is a much better use of your time than working on improving your weaknesses.  And, you are much more likely to be engaged and satisfied at work if you are doing tasks that take advantage of your strengths everyday.

Lo and behold, my #1 strength is…. wait for it… Ideation!  Not terribly surprising seeing that I’ve already created a blog called Ideate To Win!

Here is the run-down of my top 5:

Ideation – People exceptionally talented in the Ideation theme are fascinated by ideas. They are able to
find connections between seemingly disparate phenomena.

Futuristic – People exceptionally talented in the Futuristic theme are inspired by the future and what
could be. They energize others with their visions of the future.

Achiever – People exceptionally talented in the Achiever theme work hard and possess a great deal of
stamina. They take immense satisfaction in being busy and productive.

Adaptability – People exceptionally talented in the Adaptability theme prefer to go with the flow. They tend
to be “now” people who take things as they come and discover the future one day at a time.

Strategic – People exceptionally talented in the Strategic theme create alternative ways to proceed. Faced
with any given scenario, they can quickly spot the relevant patterns and issues.

Exciting!

Follow

Get every new post delivered to your Inbox.

Join 1,020 other followers

%d bloggers like this: