Week 3: Learning UX Design at Academy Xi – Don’t Stop Believin’

Week 3 at Academy Xi

“Enjoy the madness.” These were the words of advice that Guy Ligertwood gave me after we connected on LinkedIn last weekend.

It was Guy’s article “How to become a UX designer at 40 with no digital or design experience.” that originally inspired me to explore the world of UX design. And so I reached out to thank him.

But after a tough week at Academy Xi, Guy’s message of support turned out to be prophetic. As someone who had gone through a similar bootcamp, he clearly knew that it wasn’t all plain sailing ahead.

Yes, there was plenty of madness this week at Xi headquarters. It started out so well though …

Day 11: 18/02/19

You down with MVP?

First up, we learned about MVPs (which have nothing to do with sport). MVP stands for Minimum Viable Product. It’s an approach to prioritising features to create products that people want … and that a business can actually deliver.

The driving force behind MVPs are personas and story cards, which we covered last week. To create an MVP, we start with an MVP plot. This involves writing down insights and features on sticky notes (extracted from our story cards and personas) and assigning priorities.

An MVP plot looks like this 👇

An MVP plot
An MVP plot.

When creating a Minimum Viable Product (MVP), the focus is on building features that are “quick wins”.

Meet Cheryl …

We paired up to create an MVP for a new home page layout of The Sydney Morning Herald. What’s more, it had to appeal to someone who wouldn’t normally be part of the target audience.

The first step involved creating a “proto persona”. And we were told to have fun with it. So together with my classmate, Yolande, we came up with Cheryl … an exaggerated and satirical take on a persona who definitely wouldn’t be a typical SMH reader. Look, we were told to make it interesting, ok!

Next, we identified features of the SMH website on sticky notes. Then using an MVP plot, we mapped out all of the features that Cheryl would find appealing. This informed the design of the layout of our MVP version of the new home page (a simple sketch on the whiteboard).

Finally, we presented our MVP to the class and explained how we came up with a layout that would suit Cheryl.

An MVP for an exaggerated persona named Cheryl.
Our MVP plot, persona and new SMH layout. Sorry/not sorry to any Cheryl’s out there.

Back to the real world

After lunch, we were split into new groups to continue working on The Client Project from the last two weeks. This was a relief as I was getting bored with our original problem statement.

We haven’t received any feedback from The Client as to which problem statements they wanted us to focus on. So we spent the afternoon going through the MVP process for the insights on our new problem statement.

Next, we learnt about “User Flows”, which is a path a user takes to complete a task. This highlights the things we need to create when designing … and uncovers potential friction and pain points.

We started by creating an objective or task for each insight. Then we created a flow for each task to identify where users start and finish (and identify the design features they might need). The rest of the afternoon was then spent brainstorming ideas using sketches.

Rob finishes the day showing us photos of the various work spaces from his days consulting for big name clients. I wish he’d showed us this at the start of the course … because the artefacts are not that pretty.

I’ve been getting OCD about arranging nice looking compilations of sticky notes and artefacts. But Rob’s real-world examples show that even when you’re a UX guru, it’s not pretty! Heck, half the time you might be working on the walls of a hallway.

Day 12: 19/02/19

Information Architecture (IA)

Today, we’re learning all about Information Architecture (IA). It sounds complicated. But put simply … IA is about connecting people to the content they are looking for.

Site maps and website navigation are all examples of IA. So too is the layout of a real life shop (more on that later).

George Costanza: Information Architect?

3 Principles of IA

  1. Ontology: the overarching meaning (i.e. what we mean, when we say what we say).
  2. Taxonomy: the structure of that meaning.
  3. Choreography: how to ensure the flow through the structure is clear and untroubled.

The interplay of ontology, taxonomy and choreography needs to be architected before it can be designed. This is done using techniques such as card sorting and analysis.

What is card sorting?

Bad IA happens when the needs of the user are not taken into account. For example, when web designers use the business structure of an organisation or other subjective ways in which to group information on a website.

Card sorting is a user-centred research technique that taps into the “mental models” of users. That is, you can find out the ways in which customers expect to see information grouped.

The process involves writing down on index cards (or sticky notes) the elements that you wish to organise. Then you ask users (ideally 15) to sort them into groups.

These can be “open sorts” – where users organise cards into as many groups as they want and assign their own labels. Or a “closed sort” – where users have to match the cards to specific categories.

At the same time, you can observe and inquire about the rationale for the grouping – to discover the “why”?

The next step is an analysis of similarities and differences among people to uncover consistent patterns.

Student “Taco Tuesday”

We pair up to organise a list of grocery items. My classmate, Wade, organises the cards into categories based on how he would normally shop e.g. fridge, pantry, fresh fruit, etc.

Card sorting groceries
Card sorting a list of groceries into logical categories.

If I hadn’t seen Wade’s sort, I probably would have done the same thing. So I got a bit wacky and started organising items into meal categories such as high carb breakfast, low carb breakfast and “Student Taco Tuesday”.

While we had a good laugh, it highlights the problem of observer bias. You wouldn’t normally let a participant see the results of other card sorts.

Student Taco Tuesday. When card sorting gets wacky.
When card sorting gets weird!

Fake Woolies brief

For the last exercise of the day, we were given a brief to come up with a new boutique concept store for Woolworths. It wasn’t a real brief. But it had to appeal to a niche persona.

We had a lot of fun with this and created a persona called Stuart “Paleo” Peterson – a busy professional and strong devotee of Crossfit, lifehacks and the “Paleo Way”.

Our persona: meet Stuart "Paleo" Peterson.
Our persona: Stuart “Paleo” Peterson.

Next, we had to create some brand names and tag lines. I love doing this sort of stuff and came up with “PaleoX by Woolies: Xtremely Convenient”. In IA language, this would be the “Ontology” or the overarching meaning.

Next, we selected items from a master list of groceries that would appeal to “Paleo Stu”. After introducing our persona to two other classmates, we got them to do a cart sort based on how Stu might categorise his groceries.

It turned out that Stu prioritises his shopping based on meat and veg, with things like households items and personal care being secondary categories. These groupings are what is known as the “taxonomy”.

Finally, we had to build a 3D model of the store in only 30 mins using things like pipe cleaners, index cards and pegs. It wasn’t pretty. But it wasn’t meant to be. It was all about creating the layout and “choreography” i.e. a flow through the store that would be clear and untroubled.

For example, the meat and veg sections were the first things that Stu would see when walking into the store. And the less important items were deeper into the layout of the store.

Since “Paleo Stu” is time poor, we also included pre-prepared paleo friendly meals and a self-serve checkout. Plus, we added a “click and collect” window at the front of the store so that he could order ahead using his phone.

Now, if we hadn’t created the persona of “Paleo Stu” and done the card sorting exercise, the layout of the store would have been pure guesswork. Of course, in the real world, much more research would have been done in developing the persona of Stu (and getting more people to do the card sorting). But this exercise highlighted the power of IA in connecting people to the content they’re actually looking for.

Model of our PaleoX concept store.
Our “PaleoX” concept store.

Day 13: 20/02/19

Sunshine and technology?

Not quite! It’s a rainy morning in Sydney. But we’re getting stuck into some software today.

We start by learning about wireframes and protoypes. For those playing at home:

  • Wireframe: a blueprint of a product with content and a hierarchy.
  • Prototype: a preliminary version or simulation of the final product.

Think of it like this: house plans are a blueprint. A 3D model of a house is a prototype.

We put the concept together by drawing wireframe sketches of a simple three-step process you could do with an iPhone app (e.g. ordering a coffee). Then we took photos of the sketches and turned them into a working prototype using “Pop App”. Sounds more complicated than it was.

ATOMIC design

Next up, we learn about ATOMIC design. It’s a web design system analogous to chemical elements.

  • Atom: HTML tags e.g. form label, input, button.
  • Molecule: A group of atoms that combine to do something: e.g. a form
  • Organism: some building blocks to work with e.g. a distinct section like a header or footer.
  • Template: groups of organisms stitched together to form pages.
  • Page: specific instances of templates with real high fidelity content.

ATOMIC design is a clear methodology that promotes consistency and scalability on the web. Immediately, I can see the logic behind the new WordPress Gutenberg editor.

Sketch App

When it comes to UI/UX design software, Sketch is one of the “Big Three”. To get the basics, our first task is to recreate the layout of a website. It’s the first time I’ve used Sketch, but it’s intuitive and easy to use. Maybe that’s because I’ve spent a bit of time playing around with Figma, which is pretty similar to Sketch. Yet, I’ve noticed that some of my favourite designers, like Rafal Tomal, have been switching from Sketch to Figma lately. A new industry trend perhaps?

Adobe XD

Next up is Adobe XD. We play around to produce a higher fidelity version of our pen and paper wireframes from earlier in the day. And while our teacher Rob is a massive XD fanboi – I’m just not feeling it. So I’m sticking with Sketch for now.

Day 14: 21/02/19

Another day, another software platform! We start by going through AXURE (not a fan). Then after that, it’s onto Balsamiq (which I’ve used for years to create wireframes of website copy and email funnels).

If you’ve been keeping count, that’s five different software platforms in less than 24 hours – and we’ve barely scratched the surface with of any of them!

This is where the “madness” begins …

We’re directed back to our groups to work on The Client project. Not only that, The Client has given us feedback – meaning the priorities for each group have changed. Oh yeah, and here’s the kicker – we have about two days to come up with a working prototype for user testing next week. FML as the millennials would say.

Our new group comes up with what seems to be a reasonable plan of action. But we’re not all on the same page. Rob does his best to get us on the right track. But it’s just not clicking. The goals are unclear to the group. There’s too much software in the mix. We’re all using different platforms. It’s a disaster. I don’t know how we’re going to pull this off. Worst day of the course by far.

My internal monologue though👇.


Day 15: 22/02/19

For the first time in the course, I don’t want to go to class today. This group project is seriously “challenging”. Until now, I’ve had no problems with any of the group work. I’ve managed to work out any issues and get on with it.

As the day progressed, things didn’t get any better. I’m not going into the details other than to say it was pretty tough. But Rob promised he would help get our group back on track on Monday.

On reflection, I realised that most of the problems could have been avoided. If only we’d done a new MVP for the prototype AFTER we’d been given the new priorities from The Client. But somehow, we’d skipped this crucial step. This was the exact moment when shit went south. Instead of focussing on “quick wins” for the prototype, we were clashing over “bells and whistles”. Lesson learned.

A silver lining

The only thing that saved the day was an excellent UX writing workshop by Patrick Stafford (UX Writer at MYOB). I first heard that UX writers were becoming a thing in an article by Neville Medhora.

I love writing copy. And I’ve spent many years studying copywriting. But it was great to learn more about writing copy from a UX perspective. There’s no doubt about it … UX writing is something I’d like to do more of in the future.

Drinks and downloads

What better way to finish off a tough week than with a few beverages on campus. I finally met Ben Wong, the Co-founder of Academy Xi (super nice guy). And after “downloading” with a couple of classmates, I learned that things weren’t always “rainbows and unicorns” in the other groups, either. But they’d managed to work through their issues and make some actual progress.

I think that a lot of the “madness” is the result of trying to cram too much course content into a very short period of time. But it is a bootcamp after all. I hate doing things half-arsed. And while I’m learning to work much faster, it doesn’t feel like it’s high quality.

Despite many moments of madness this week (and some serious buyer’s remorse), I’m making some high-quality friends. Their encouragement and support have helped a lot. As I was finishing my last drink and getting ready to head home for the week, the song “Don’t Stop Believin” by Journey was pumping on the Academy Xi stereo. Talk about perfect timing. Dig in, Doug!

Reader Interactions