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

2 thoughts on “UX/UI Design with Canada Learning Code

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s