UX/UI Design with Canada Learning Code

I’ve been watching this group Canada Learning Code for awhile and trying to summon the nerve to go to one of their workshops.  I worried that I would be completely out of my element and that I’d feel really awkward in a group of people more advanced than I was in the content.  I first noticed this group as they were offering coding workshops for teens and girl-specific sessions.   But when I saw this one, and thought “Design?  How scary can that be?”, I took a chance and signed up.  In my bio I often say that I’m a change agent for greater equity and access so the philosophy inherent in this emerging layer of tech is really relevant to my goals as a librarian, as a teacher and as someone who loves to be involved with participatory experiences in civic spaces.

Screen Shot 2019-09-26 at 8.53.09 AM

I came into the Axonify facility and there were about 15 tables that were filling up with women of all ages and backgrounds, by choice.  The event on this day was pay-what-you-can, a noble effort to make it even more inclusive.  I chose my preferred location, up front and with a sturdy wall behind me, and logged into the wifi.  One more thing that I really admire about the way this organization proceeds….their resources are licensed under Creative Commons 4.0 shareable and adaptable.  The mentor to participant ratio was 1:4….outstanding.  I had multiple people that I could pester with questions all day long.

Screen Shot 2019-09-25 at 9.22.09 AM

We started the day with introductions and definitions of UX/UI and some clear concepts were used to help us attain the difference between both terms.  This was complex to me….I see the veiled threat in the example on the right below, but I think you’ll agree that in both cases the software developers want to have you go to the next level with their product.  It brought up past experiences for me….that time I was due to present at a conference and my computer needed a massive update on crappy hotel wifi so I ran up a massive data bill….that time that Wikispaces died without anyway to save all of my content first…poor user experience, indeed.

Screen Shot 2019-09-25 at 9.26.25 AM

Most of the rest of the day we were forward thinking in terms of an app launch, but you can see how these moments of tension are a huge digital barrier to users.  This process used to circumnavigate this tension is part of the UX Design Process.  At this point, I couldn’t help but think about learning experiences and spaces that we design in education.  Using the process below, how might we improve our learning experiences through closer attention to this detailed investigation of the user?  Maybe the fact that we don’t is why so many students are disengaged.Screen Shot 2019-09-25 at 9.35.48 AM

When designing a product that’s main purpose is interactivity, you have to use a unique design process.  When this screen came up in the slidedeck, all the lightbulbs went off in my mind.  I immediately thought of my participatory culture gurus: Nina Simon who has redesigned museums with participatory culture; Henry Jenkins who pushes the boundaries at MIT in participatory media; and Jane McGonigal who designs games for humanitarian reasons.   One of the things I love so much about this cycle is the pilot and reflect piece, which I think we just don’t do enough of in school.  All the time I see great attention to the prep, the design and building but teachers all too often stop here at the first product, rather than making the time to participate in the pilot and reflection and then having the redesign happen based on that feedback.  I know it’s tempting to push on to the next curriculum unit, but that feedback cycle is the most authentic measure of success….way better than a teacher-given 78% on a mediocre product at its first stage.

So I’m getting clearer on UX but how is UI any different?  Then the instructors showed this example and suddenly I got it:

Screen Shot 2019-09-25 at 11.06.32 AM

Right?  You get it too!  So in the end, if push comes to shove, what is more important: UX or UI?  Always UX….the user experience is far more important than the interface.  Imagine if we redesigned standardized testing with this idea in mind?  Could we still gather data and intelligence about our students’ progress without imposing the cruelty and bias inherent in our current testing process?  I’d like to think so!

So here it is in comparison.

UX relies on:

Screen Shot 2019-09-25 at 9.25.54 AM

UI relies on:

Screen Shot 2019-09-25 at 11.04.29 AM

The message was clear: you can’t have one without the other and be successful.

We spent the rest of the day developing an idea in small groups based on this issue: how to improve voter turnout in the federal election.  We had to work screen by screen on paper and work out not only how our idea would come together in the app, but the navigation.  We used something called Marvel app which allowed us to take pictures of our drawings and then add navigation.

Screen Shot 2019-09-26 at 8.29.54 AM

Here is the final result: https://marvelapp.com/6824dhb/screen/61651180

I can see lots of applications for this app in class.  Even just trying to show the importance of navigation would benefit my students who are trying to develop portfolio-level work for their digital personas.

By the end of an hour a lot of us had similar ideas that became evident in our show-and-tell, but the small differences that had people in the room say “oooo!” out loud could only be harvested in this format.  The afternoon was a powerful lesson in just how rich collaboration can be.

Last year I took each of Canada Learning Code’s coding lesson plans for secondary school and forwarded them to each pertinent teacher.  Even if they didn’t use them, these staff members probably had the thought: ‘Hey the librarian is showing me something about coding related to my subject area.’  It’s a wave of very-needed change that’s ebbing towards all of us and so yes, the growing imperative is pushing me to do more to improve my own digital illiteracy.  I will definitely rely on Canada Learning Code to help me and I’ve already signed up to participate in HTML & CSS for educators.  Join me!

Additional Resources:

Here are the tweets I captured from that day: https://twitter.com/i/moments/1176119198155780096?s=13

Google’s Design library: https://design.google/

Nielsen/Norman group: World leaders in User Experience

Our instructor recommended this book for more information on UX/UI:

https://www.goodreads.com/book/show/18197267-don-t-make-me-think-revisited

The only college course in Ontario that I could find on UX/UI design:

https://mediaarts.humber.ca/programs/ux-design.html

Reality is Broken: Why Games Make Us Better and How They Can Change the World by Jane McGonigal

Reality Is Broken: Why Games Make Us Better and How They Can Change the World

I don’t think of myself as a gamer.  I have been known to play lots of those Flash-based Facebook games with my Candy Crush Saga friends, and occasionally a great puzzle-based novella will come along like Gabriel Knight 2,  Syberia or Ripper that I devour, but generally I didn’t think they were a big part of my life.  After reading just part 1, Why Games Make Us Happy, of McGonigal’s book, I started feeling that I could admit that I play Plants vs. Zombies and Game of Thrones Ascent almost every day!  Now that I’ve read McGonigal’s book completely, I know that it’s cool to be a gamer and I really want to believe that a game designer will win a Nobel Prize someday.

 

In Part II Reinventing Reality, McGonigal really opens up on the topic of how games can change our education system for the better.  I’m really intrigued with the idea of the game-based education being offered by Quest to Learn (p. 128). A very real challenge of my current position is to develop my staff’s comfort and skills with 21st century learning which largely focuses on digital fluency.  However, there are constantly battles between our current system and the growing desire from staff to collaborate and teach creatively.  The idea of redesigning the system from the ground up, the way that Quest to Learn has, is very appealing.  In hindsight, I know that the mindset of the administration and the staff has often been what held back change for the better design of our school and I wonder what kind of experiential learning the staff needs to help them grow in this direction.  We have a local company called Eagles Flight which worked with our department heads for one morning last January during exams, and essentially we played a quest game where we needed to get from one side of a desert to the other maximizing our resources, within a time limit and never having all the information we needed to play.  It was really fun!  Was it transformational?  No but it helped us to bond and gave us lots of fuel for good discussion for the rest of the day.

 

Having spent 5 years as a teacher-librarian now, one of the aspects of my job that I like best is how it gives me space to see the school as a whole system, and I can see the problem of the department silos.  At the risk of overglorifying the situation, I’m omniscient in a way that even the administration isn’t.  I’ve always enjoyed this role in my gaming experience as well, and was a big fan of many of the games McGonigal mentions in Part III, Chapter 14: Saving the Real World Together.  Besides Will Wright’s Sim City and The Sims, I was fascinated with the idea of Peter Molyneux’s game Black & White in which you need to make decisions for villagers based on moral quandaries. After reading McGonigal’s praise of the game, I dug out our old copy of Will Wright’s Spore and played through 4 levels with new appreciation for its design and trying to imagine what it would be really like to drop into the Ukraine, for example, and try to sort things out a bit. Maybe that’s the reason why I still like reality tv shows.  There’s a new one coming out this week called The Audience where 50 people make a life-changing decision for someone.  This experimentation in McGonigal’s “Saving the Real World Together” of taking a long view, practicing ecosystems thinking, and pilot experimentation (p. 297-98) are exactly the tools that I think we need our graduates to have exposure to.  One of the first computer games I remember loving is Lemonade Stand, where I simulated making a lemonade stand profitable based on fluctuating weather predictions and costs of lemon and sugar.  If I could remake school today, I’d start by making every single assignment follow McGonigal’s Saving the Real World criteria.  I might not be able to reconstruct my school into a Quest to Learn environment, but I can advocate for these 3 aspects in teaching design and that gives me hope that my influence will help save the world.  I suppose I need to see this through for the epic win.

Overall, Reality is Broken: Why Games Make Us Better and How They Can Change the World is a game-changer (excuse the pun).  I’ve started a Twitter List called Epic Winners that includes all sorts of people who are using games for positive change and deeper meaning inside schools and beyond.  It even lead me to find a library game that I’d like to try out called (what else?) Librarygame.   This isn’t the first time I’ve thought “I wish I could give a little surprise to a student who signs out the same book twice, or has signed out 10 books this year, or returns everything on time”.  Even if it was just a virtual badge to add to their student e-portfolio, I think they would appreciate it.  I know I would.

References

McGonigal, J. (2011). Reality is broken: Why games make us better and how they can change the world. New York, NY: Penguin Books.

 

View all my reviews