Ben Norris

I had the fantastic opportunity to participate in a wonderful virtual conference on Responsive Web Design by Environments for Humans. Sadly, I came in at the tail end of the first session, but I was able to catch all the others.I have played with responsive design a bit and just finished designing a site that is responsive. But I still didn’t have the fundamentals down of what it takes to design well for a responsive site. This summit helped fill in the gaps for me and I feel prepared to take on the world! My favorite thing was seeing some of the principles in action during the talks. Particularly with Zoe and Ben, they showed us what it was like to design responsively from the beginning or with an existing site. It was great!

Here are my sketchnotes from the event:

🎥 The Bourne Legacy

Birthday date

Last week, I posted about how being a Mormon meant that I was able to participate in a semi-annual General Conference. This week, I am posting about how being a Mormon means that I had the chance to participate in a very different conference. Every year for the past three years, The Church of Jesus Christ of Latter-Day Saints (the official name of the Mormon church) has held an LDS Tech Conference. This is a gathering of volunteers who come together to meet with employees to learn about the technology efforts of the LDS Church as well as to contribute to ongoing projects.

I attended this year for the first time and was richly rewarded. The conference spanned Wednesday evening through Friday afternoon, with a keynote address Wednesday, various presentations and speakers in the mornings, and then the chance to work on volunteer projects each afternoon. It was exciting to me to see all the different efforts that are underway to give more church members access to meaningful experiences through the use of technology. I also enjoyed the chance to truly contribute during the course of the conference. It will be great to see how things move forward, and I look forward to participating again next year.

Included here are my sketchnotes from the event.

A few weeks ago, I posted my sketchnotes captured live during the last LDS General Conference. As I noted in that post, I am also a Romanian interpreter, so there are always a number of talks that I am not able to listen to during the actual conference. Over the course of the weeks that followed, I listened to all of the talks that I “missed” and thought I would share the resulting sketchnotes.

📖 🛏 The Hobbit

By J. R. R. Tolkien

One of my co-workers shared an opportunity to participate in a webinar sponsored by AIPMM about UX design and Product Management. This defines the hybrid that is my life right now, so I was immediately intrigued. Brian Lawley from 280 Group and Mary Piontkowski from Macadamian presented on integrating user experience design into the product lifecycle. It was a fantastic look at how good UX practices can transform products and companies. Naturally, I sketchnoted the event!

One of my co-workers pointed me to these fantastic tutorials by Dave Crenshaw on lynda.com. I enjoyed them so much I wanted to immediately post my sketchnotes and share these with others.

I’m a Mormon. That means so many things, but this last weekend, it meant that I was able to participate in a semi-annual world-wide General Conference. Every April and October, The Church of Jesus Christ of Latter-Day Saints (the official name of the Mormon church) has five two-hour sessions, spread over Saturday and Sunday. It is a fantastic opportunity for us to come and be instructed further about the doctrine that we believe in, and to take a moment to pause from our hectic lives to concentrate on things that really matter most.

For over ten years, I have taken extensive notes at each conference. A couple years ago, those notes transformed into some of my earliest sketchnotes. I have kept that tradition up this year as well, even when it meant using my phone as a small red flashlight because the lights were all turned off in the meetinghouse. Yes, I am a nerd. But I love doing sketchnotes!

In addition to sketchnoting most sessions, I also have the opportunity to participate directly in the conference as a Romanian interpreter. Each language team is a little bit different, but for our team, that means that I get the English text for the talks a week or so in advance of the conference, and the Romanian text anywhere from a few hours to a few days beforehand. I prepare delivering the text, so that when the talk is given, I perform a simultaneous reading, striving to match the speed, tone, and style of the speaker. The most important aspect is to convey the feeling of the message and provide an experience for those who listen in Romanian that is as close as possible to those who listen in English. My favorite part is when speakers like President Thomas S. Monson give a talk, because you never know how much they will stick to the text, and how much they will speak extemporaneously and require live interpretation.

General Conference is significant as a logistical feat—providing access in 93 languages to reach most of the 14,441,346 members around the world. But the most important part is the chance to hear from living prophets, the same as if Moses or Abraham was alive to give us insight into how to live our lives better. What a unique opportunity! I am grateful to have been part of it. Now comes the real challenge: putting all these great messages into practice!

Here is a fantastic infographic from the official lds.org site about the conference (click to see more).

March 2012 marked the second annual Early Education and Technology for Children (EETC) Conference put on by the Waterford Institute. Since I work for Waterford, I had the opportunity to attend the conference. It was a fantastic gathering of people who were focused on how to improve the education and lives of children through the use of technology. I captured each of the keynote and featured speakers in sketchnotes and wanted to make them available. I look forward to a great conference again next year!

I love to write. Not the novel-creating, prize-winning kind of writing, just the act of scratching a pen across paper. Growing up as a child, I wrote all kinds of things and found that I enjoyed playing with letters. My dad is something of an artist, and I always dreamed that I would be too, but that seemed to elude me. Writing though—that was something I could do. My penmanship improved in direct proportion to the number of girls that I “fell in like” with as I wrote each one fresh new reams of notes expressing my undying, albeit fleeting, affection.

Formal education was the perfect forum to develop my love for writing. I had a different notebook for each subject, and took notes in every class. I would like to think that I also reviewed those notes at some point, but I wouldn’t swear to that. The more I had to write, the smaller my writing got, and I felt a great sense of accomplishment at using a fraction of the paper that other people used. This wasn’t due to an over-zealous eco-friendly bent, but sadly just to my pride. I got a sense of sick pleasure at the look of shock on people’s faces as they saw my notes, though their shock was probably more that someone would invest so much time and energy into something that then required even more time and energy to try and read later!

As I got to college, I started taking notes outside of classes as well. It got to be something of a guilty obsession. I carried around a pocket notebook, and recorded particularly meaningful conversations or my thoughts and impressions of lectures, talks, even Sunday School classes. This was all separate from my journal, which I also kept regularly. I created a cover for my pocket notebook to help it last longer, and used a small laminated sheet behind the paper to make sure that I had a hard surface so I could write smaller.

After I was married, my wife encouraged me to focus on developing my own style of stick figures or something equally simple. I began illustrating my planner with small, simple pictures and found that I loved doodling as much as writing. I graduated my pocket notebook to a small Moleskine that didn’t require my creating an additional cover, and started incorporating small doodles into my notes there as well. These became my first sketchnotes, long before I had heard that term, or knew that it was now socially acceptable.

My journey was nearing its natural arrival to the blissful land of official sketchnoting. Dan Roam’s book, The Back of the Napkin, freed me to start doodling and sketching at work. If anyone laughed or asked what on earth I thought I was doing, I had a published work to cite as evidence. I began seeking out opportunities to incorporate pictures into my work, and it became the running joke on my team to guess how long it would be into a meeting before I got up to the whiteboard and starting drawing something.

I started following Dan on Twitter and through him, I found mention of a clandestine movement called… sketchnoting. He unknowingly led me to a video of Eva-Lotta Lamm describing how she does sketchnoting, and the planets aligned. I had found my calling. Since then, I have transformed my work notebook into a sketchbook and began enjoying meetings much more. I also have a Moleskine dedicated to events that merit sketchnotes, whereas I use my other notebooks to practice with different meetings or events that I don’t actually want to capture and remember. One of my new favorite pastimes is browsing other peoples' work on Sketchnote Army.

The remarkable thing to me has been the way that people resonate with sketchnotes. People at work ask if they can sit next to me during company meetings so that they can watch me take notes. My kids even like to look at what I have done at work because there are fun pictures. Hopefully you connect with them as well. If so, come back often and I will keep posting my latest sketchnotes. Even better, give it a try yourself!

During the day, I masquerade as a Product Owner and UX Designer for a non-profit educational software company. This week I had the opportunity to attend a webinar put on by Hatch called “Teaching in the Digital Age: Smart Tools for Early Learners.” Brian Puerling from the Catherine Cook School in Chicago presented about how his school has been able to integrate technology effectively.

One point he made repeatedly resonated with me, and that is that technology should not be used for its own sake. This is true in all industries, but especially in education. There should be a purpose and a goal to every activity, and then technology can become a tool to help facilitate that purpose.

Some of the examples that Puerling gave struck me as fascinating. Even in working with preschool students, they are able to use technology as a way to open up possibilities and allow them to express themselves creatively. Students collaborate to create eBooks which are then published and presented at a publishing party to parents. Students works with a “tech buddy,” older students who serve as mentors on how to use technology, and in turn have tech buddies of their own. After studying a book or particular author, they have a Skype interview with that author and allow the students to connect in an extremely personal way.

Driving all of these examples was a concerted effort with dedicated planning to ensure that the outcomes would match the intended goal. This webinar was a great reminder of all the possibilities that technology offers educations, but also that only its deliberate use in proper situations will produce meaningful results.

Included here are my sketchnotes.

This second installment of my Stanford Human-Computer Interaction course went in a totally different direction. Where the first lecture focused around the efforts and experience of a single individual, this second lecture took a much broader look at changing landscape of technical production. The lecture was titled “Burning Man at Google, A Cultural Infrastructure for New Media Production?” and was given by Fred Turner.

The main point that I took away from this lecture is that the phenomenon of commons-based peer production is starting to change our industry completely. Products like Wikipedia, Linux, and many others are built on the efforts of volunteers, many of whom are highly skilled and are contributing in a different kind of economy than ever before. Contributors are not paid, and so this is driving a new kind of community where people build on each other’s strengths and skills without thought of compensation. As more companies recognize and start to harness the potential of this kind of production, projects of a different nature and scale will become our new reality.

Here are my sketchnotes.

Every once in a while, you make a discovery that makes you feel as if you have been living under a rock. For me, this happened last week as I discovered iTunes University. I had no idea that colleges and universities all over the country have been making premium learning available for free. Economics classes have always taught, “There ain’t no such thing as a free lunch,” but this proves them wrong! I found a seminar series from Stanford University on Human-Computer Interaction, so this will be the first in a ten-part series.

In this first installment, Dr. Shumin Zhai spoke on progressive user interfaces. He has been involved in the research and development of the gesture keyboard, an on-screen keyboard that allows for words to be drawn as a gesture instead of tapped out. The fundamental design principle that he discussed was the tension between ease and efficiency.

Ease refers to a design that allows a user to walk up to a new interface and use it without problem. It is a recognition task, so as a designer, you are building on what a user already already uses or intuitively knows. This is the principle behind the modern graphical user interface (GUI) that is largely responsible for the explosion of the personal computer.

Efficiency refers to a design that requires minimal effort. This is a recall task, so it relies on users learning the action to the point where they can perform it without instructions or scaffolding. This is embodied in the world of command-line computing where users can quickly perform tasks, but are required to independently remember the syntax required. A more everyday example of this design is keyboard shortcuts. Some people use these obsessively while most others never bother.

In the battle between ease and efficiency, ease almost always wins. This is mostly due to the fact that we typically value today’s time over that of tomorrow. So for a designer, the secret is to find a way to naturally move users from ease to efficiency. This is the task that Dr. Zhai set out to accomplish with the gesture keyboard, and he shared the principles behind this transition.

In order to move users from ease to efficiency, two things are required: information redundancy and chunking. Information redundancy basically means building in practice. Users have to perform the same actions over and over, and as they do, they can move from recognition to recall. Recall is much more efficient but also more cognitively demanding. With chunking, Dr. Zhai found that people learn things in chunks, not discrete items. So to have the greatest effect, the practice should be with chunks of information.

The great challenge for designers now is to explore ways to help users move from ease to efficiency in all different contexts. Sometimes it won’t be possible however, and in those cases, we need to design for users at both ends of the spectrum. As previously mentioned, ease almost always wins over efficiency, but it doesn’t have to completely replace efficiency.

Take a minute to look through my sketchnotes for more detail.

I am a nerd. I take notes in a Star Wars Moleskine notebook and can’t wait for the Lego Moleskines to come out. I also have a decent collection of gadgets—I currently use an iPhone, an iPad, a Macbook Air, a Macbook Pro and an iMac. So a national Digital Learning Day is a great thing in my eyes. My department at work all tuned in for the broadcast of the national town hall.

The event was hosted by former West Virginia governor, Bob Wise, and began with a short discussion featuring Arnie Duncan, the U.S. Secretary of Education, and Julius Genachowski, FCC Chairman, and then moved to Skype calls with schools around the country. It was a feel-good celebration of current efforts at the high school level to integrate technology more into the school day. However, our company is focused on early education, and there was nothing discussed for the elementary school level, so we skipped the last half hour. Overall, I wholeheartedly support this event and hope that this movement of incorporating effective technology into our school system continues to gain momentum.

Here are my sketchnotes of the event.

The most challenging and difficult occupation today is that of parent. Similar to most jobs, you are expected to learn mostly through on-the-job training, except that the training part is a misnomer. You have no supervisor, no one checks your work, there are no performance reviews; in short, you are completely on your own. Of all the things that might be required in our education system, somehow these skills were left out.

I attended a parenting class taught by Kathy Andrizzi on January 27, 2012, and have been digesting it since. The class was based on the principles taught in The Power of Positive Parenting, written by Kathy’s uncle, Dr. Glenn Latham.

I captured the event with sketchnotes and am including them here.

A few months ago, we started adding to our Product Management group at my day job. Previously, I was the only Product Owner, and I was swamped. Many people were confused about how we were going to structure our group and how they would work together with us. I created a presentation to explain how things were before our change, and how we expected them to become with the additions to our group.

I decided that the presentation should be one that I enjoyed creating, and hopefully everyone else would enjoy seeing as well. I grabbed a couple introductory images for each section, but then hand-drew all the rest of the images. There are almost no words in the slide deck, and it purposely does not stand on its own. This is not a slideument—a term coined by Garr Reynolds to describe a slide deck that is really a document. Without my presenting, the slides alone don’t make sense. Although I only included a few example slides here, the half-hour presentation contains almost 200 slides. Instead of creating complicated builds and animations on a few slides, I constructed the builds over the course of a few slides, and move through them quickly. The result is a deck that I enjoy and has been effective in explaining our organization and process.

Over the past couple months, I have been playing around in WordPress to try and create the site that I had in my mind. I was referred to WordPress by a friend and have been thrilled with what I found. I thought I would chronicle my journey to finally creating the menu of my dreams.

Step 1: Picture the dream

Step 2: Stop the trickery

#menu { background: url("benjaminsnorris.files.wordpress.com/2011/12/p…") no-repeat scroll 5px -40px transparent; height: 125px; }

.menu-navigation-container { margin-top: 95px; }

Step 3: Enter the magic

1. Assemble the sprite

Next, I extended the canvas of my image by a factor of three (for me that meant going from 140 pixels to 420 pixels). Then I selected everything that I had created so far and duplicated it twice. I took one of the duplicates and dragged it to the very bottom, and the other went in the middle. Tis meant I ended up with three rows of my images and page titles.

Finally, I got down to the real work. The final row was going to become the selected state for me, and that was going to be easier. I just wanted to change the color of the image as well as the page title. The middle row was to become the rollover state. I changed the color of the text, but the images we more complex. This needed to be fun to use, so I wanted to add a little something to each of the images. I sketched out ideas in paper with a Sharpie, and then when I had what I liked, I scanned it in, played in Photoshop until it worked with what I already had, and then I was set. That was the fun part!

If you’re trying this as well, it’s important to note the size of each piece of your sprite. I already knew the height of each row, but I needed to determine the width of each menu item as well. You’ll want to write down the width for each item, as you need it in the final step.

2. Prepping the page

#menu li { float:left; position:relative; display:inline; }

#menu li:hover > a,#menu ul ul :hover > a { color:transparent; }

#menu ul li.current_page_item > a,#menu ul li.current_page_ancestor > a,#menu ul li.current-menu-item > a { color:transparent; }

#menu { width:800px; list-style:none; height:140px; }

#menu li a { height:140px; float:left; color:transparent; }

3. Putting it all together

/Specify the piece of the image that should display for the Home menu item in its normal state/ #menu-item-59 a { width:75px; background:url(‘http://benjaminsnorris.files.wordpress.com/2011/12/presentation-design-sketchnote-menu.png') no-repeat scroll 0 0 transparent; }

/When the user rolls over Home, the image should jump down to the second line/ #menu-item-59 a:hover { background-position:0 -140px; /These are X, Y coordinates. So the image starts from 0 (the left edge), but down 140 pixels, and is going to show 75 pixels over since that is the width/ }

/And finally when Home is selected, the image should jump to the third line/ #menu-item-59.current-menu-item a { background-position:0 -280px; }

You do the same thing for each menu item. The only thing that will change for each is the X coordinate for each item. It will simply be the X coordinate of the previous item minus that item’s width. So, my second menu item is at -75px 0px, or 75 pixels to the right of the top left corner. My third menu item is at -200px 0px, and so on. Do that for each item, and you are set!

The finishing touch was spacing out the menu items, and making sure that only the right pieces of the image were displayed. My last bit of CSS code did just that.

#menu a { margin:4px 6px; padding:0; }

Basking in the goodness

I am pretty sure that making mockups for fun classifies me without question as a nerd, but I’ve come to grips with that. I took an existing website, www.lds.org, and created the mockups that you see below. They clearly illustrate the difference between basic and enhanced mockups.

Basic mockups

The purpose of basic mockups is similar to a sketch on a whiteboard, or a piece of scrap paper. You want to get something visual as quickly as possible so that it is easier to talk about it. Sometimes you need to explain your idea to someone else, and you know that a simple visual aid will help immensely. Other times, you want to explore the functionality of a site or application, and want to keep people focused solely on the function, not on the form. By using a fantastic tool such as Balsamiq Mockups that looks hand-drawn, you are able to keep people focused on what matters most. I have found these to be effective even in conducting some basic usability testing to see if people are able to use your application the way you intend. Iterating at such an early stage saves you significant time and money down the road.

Enhanced mockups

The purpose of enhanced mockups is to show that you have a solid idea that is well on its way to becoming reality. This is still not the final version, so as you are discussing it with people, their focus is not on the skin, but rather on the content and functionality. This is a great way to iterate with your graphic designer as you explore the layout and basic look and feel of your site. I have seen that people look at an enhanced mockup and fill in the final polish with their minds, so it allows them to avoid fixating on a small detail that you have done differently than they were expecting. At the same time, they are able to recognize that you are close to implementing something and they can get excited about the end product.

Basic Home

Enhanced Home

Basic Menu

Enhanced Menu

Basic Tools

Enhanced Tools

Neighborhood House Presentation

As part of a community-university partnership, I was part of a group that did an evaluation of the Neighborhood House in preparation for accreditation review by NAEYC, the National Association for the Education of Young Children. We were asked to present to the teachers as well as the parents about our efforts, and these are some slides from the presentation I created.

Color palette

University of Utah Economics Course

This slide deck was the introduction and beginning of the curriculum for an economics course at the University of Utah. I was asked for help, and decided to invest more time into recreating this deck because it would set the stage for the rest of the course. By pulling most of the text off the slides and into the notes, the presenter still has all the information, but the audience is not trying to read and listen at the same time.

Microeconomics Before

Microeconomics After 1

Microeconomics After 2

Microeconomics After 3

Microeconomics After 4

Microeconomics After 5

Opportunity Cost Before

Opportunity Cost After 1

Opportunity Cost After 2

University of Utah Economics Course

This slide deck was part of a series that comprised the curriculum for an economics course at the University of Utah. I was asked to improve them, and the following is an example of where I just did some clean up.

Capital Before

Capital After 1

Capital After 2

Capital After 3

Benefits Before

Benefits After

Costs Before

Costs After

In my day job, I am a Product Owner and UX Designer for a non-profit educational software company, Waterford Institute. In 2010, we tackled an ambitious release of our core educational product. I led a complete redesign of the teacher management interface. Our previous interface had been built over the course of many years, with new features being tacked on wherever possible. We started from the ground up, analyzing the primary jobs that educators needed to perform, and then designing an application to make those jobs quick and simple.

Included here are some screens from the previous version and mockups of the redesigned interface.

Login Before

Login After

Home Before

Home After

Student Before

Student After

Reports Before

Reports After

A friend of mine wanted to create a website for corporate finance professionals. His idea is revolutionary, and he wanted help creating a design that he could use in pitching his ideas. Included here are some of the screens that I created as part of two options for his evaluation.

Option 1 Login

Option 1 Home

Option 1 Data

Option 1 Charts

Option 2 Login

Option 2 Home

Option 2 Data

Option 2 Charts

Home education is something that we have been thinking about doing for a while, but after a lackluster kindergarten year, we decided it was time. Following many hours researching different curricula, approaches, and methods, we are using the Charlotte Mason method. She prescribes more of a philosophy about how children should learn, and it fit us and our family well. We found a great website, Ambleside Online, that has taken the ideas of Charlotte Mason and devised a curriculum that we have found to be extremely helpful.

To kick off our first year, on 4 Jun 2011, we attended the annual Utah Home Education Association convention in Salt Lake City, UT. There were a number of great breakout classes to choose from, and we felt like it was well worth our time in attending.

I captured the different sessions in sketchnotes and thought I would share them here:

All these years of waiting, and I have finally arrived online! This will be my first stab at a website as I gain some more mad skills and figure out how all of this works.

Expect this to change regularly, hopefully for the better. Stay tuned!