LevelUp Build Week 3 - Introduction to XD

Written on Wed 9 Sep 05:30 2015

This weeks agenda:

TimeActivity
1800Arrival & Food
1815Team Standups (by colour)
1830Introduction to XD
BA's / Dev'sXD
1845Bringing everyone onto the same pagePrototyping and XD tools
1900Team Work
2045RETROs (in teams)
2100Close and clean

Team Standups

Today’s standup was lead by Gabe who told us the devs learnt about Backbone, a javascript library based on the Model-View-Presenter pattern and designed for developing single page web applications. Since project development hasn’t started, we didn’t have much to say except for what we did last week.

Introduction to XD

We were given a short presentation by an experience design (XD) ThoughtWorker who spoke about the role he plays in a project. Experience design is a multidisciplinary profession that includes product strategy, research, interaction design and visual (graphic) design. People skilled in frontend development or psychology can become experience designers.

The purpose of XD is to be the voice of the owner - what does the client want? For example, when a customer visits a Woolworth’s supermarket in Sydney, the eggs might be in isle 1. When they go into a Woolworth’s in Lane Cove, the customer should expect the eggs to be in a similar location. Consistency in your product not only makes it user friendly, it ensures the user has a great experience so they know exactly where and how to find things without getting lost. XD think about the different user types such as placement of stock on the top shelf shouldn’t hinder a disabled customer from buying that product.

Prototyping and XD tools

After the presentation, the three XDs from each team met with the ThoughtWorker XDs, Marcus and Emma. To begin, we introduced ourselves and explain our backgrounds. One guy was doing an information systems degree and the other girl, a masters in communications.

We were given a crash course into prototyping using the mobile app by Marvel, not to be confused with the comic book franchise. We were given blank screen templates of the apple smartwatch on paper and our task was to draw the user interface elements for an alarm clock app. The features had to include:

  • Display the time
  • Ability to set the alarm
  • Turn on / off alarm before the alarm goes off

We spent about 5 minutes on the task while Marcus played some groovy music on his phone. The guys were really friendly and reassured us this exercise wasn’t a test so we didn’t feel any pressure. When everyone was done, each of us explained how our user interface worked and how each screen related to the other. Emma pointed out I had forgotten to include a way to link the screens together. Oops. As the watch screen is small, I also need to limit the amount of elements so that the user isn’t forever scrolling down the screen. The numbers in the scroll wheel when adding an alarm should pop out more so as to distinguish them from the squares surrounding each digit.

Information systems guy explained his design which included a way to swipe left and right to different screens with tabbed icons at the top. When Emma asked how the user turned the alarm on / off, he tried saying something but in the end, he admitted he forgot to include it. They did a good job picking apart the flaws in our designs, Emma admitted she was playing the bad cop, and Marcus the good cop.

Make paper prototype interactive!

Drawing interfaces on paper lets us quickly come up with prototypes that can then be field tested. The only thing missing is the interactive element and that’s where the Marvel app comes to save the day. Using the app, we took pictures of our design, one per screen. The marvel app lets you add ‘hotspots’ - resizable invisible rectangles - to the picture that can simulate a button that can be tapped. After you position and size the hotspot to your liking, you specify the screen after a user has tapped that hotspot. You can also choose a transition effect like fade or swipe. After we played around with it, we were given a list of alternative applications to use for prototyping, all are listed at the end of this article.

Team work

When I returned to my team, the devs were busy working on the emergency, home screen and joke tasks. The BA’s were working on the personalisation story As Allen, I want to change my personalisation info (age, gender, my contact, sponsor contact, heaviness) so that I can update that info whenever I want. As we started storyboarding the screens for the settings menu, changing gender and age, Jason got us thinking about how the devs would react upon seeing this story. It was simply too epic. Jason reminded us that each story should be valuable (from the INVEST principle) and that we need to prioritise the most important setting as the devs might not have enough time. So it was decided that we have a settings menu story like As Allen, I want a scrollable settings screen so that I can select each and add info as well as a story to add the sponsor contact so that the emergency button feature would work.

Nhung advised that we had two approaches for the stories, one is to create a story for the scrollable settings menu and separate stories for changing each setting. The problem with this is that the menu would need to be complete before each individual setting can be implemented. The second approach is the individual setting is implemented with the menu containing only one item. There would be no dependency on the menu screen needing to be finished first. Ziba spoke to the dev Gabe who said the menu can be easily implemented and it was possible that one dev could work on 2-3 settings at a time.

For the remainder of the evening, I worked on wireframing the settings screen. These designs show how it could work, not how it should work.

Retro

We had a couple ideas thrown around for our app name including Snooze Booze, Drink free, Piss Off, Wagon and Fridays. When we asked Rujia what she liked, she said she was happy for us to choose so we ended up choosing Fridays as one of the projects aims is for it to be discreet.

As tradition dictates, we ended the meeting with a ‘wooOOOooo!!’ cheer which initially, made Thomas concerned about our team’s sanity as he didn’t know the context, that we were team Ghost.

Prototyping Tools

Most of these have a free feature stripped version available:

Slide deck

Experience Design