UX Academy MUXL

Week 1 – HCD or UCD

Week one opened with the 9 member sheepishly greeting each other and finding out about one another’s backgrounds, from Developers turned Designers, Marketing executives, and Graphic Designers all wanting to learn more about UX. The class size was a good number which allowed everyone to participate without feeling intimidated.

The first week run by Charlotte Gauthier the Lead UX Designer from The Guardian was focused around Human/User centred design. Starting by showing the various teams we would be working with throughout the course. Each team being split to give a wide range of backgrounds and experiences from the different participants. The first exercise was to decide a user-group that would benefit from a new email interface. A good range of ideas came forward, from a email interface focused on accessibility, to one focused on security which showed a good range of ideas within the groups.

Charlotte then focused the talk on what User research methods and processes were needed to validate the ideas. From Primary research, such as interviews, questionnaires and field studies, to Secondary research methods like benchmarking competitors and looking at previous studies. Then introducing us to tools like empathy maps, Persona cards and moving into NABC (Needs, Approach, Benefits, and Competition) that help make sense of the data gained.

Towards the end of the class we were separated back into our teams and given the brief for our course project, with the first week focusing on profiling our audience. With the ideas for the projects being a Healthcare app, a gardening tool, and ours a Trading skills app for the local community.

Week 2 – Ideation

Meeting with our teams again and exchanging notes on the week’s work, having found some  useful information from interviews carried out during the week. With the Health care app being reminded of a old A-Z book that mums and dads would use to get quick medical knowledge. To understanding that an app that dealt with neighbours working together, would have to be careful to create respect within the app’s community, as to not create awkward relationships in the real world.

We were then greeted with our tutor for the next two weeks Hara Mihailidou who is currently Head of UX at Just Giving with a whole wealth of knowledge from experience at Microsoft and O2. Today we started to look at Ideation using a few techniques to develop the concept from week 1, ready to make a proposal that would be ready to pitch.

We were taught a number of great tools to use, that helped take the initial ideas and expand on them. The ones that sprung out to me included Journey maps, where you take a persona and map out the user’s day, helping to find where the situation would be useful for your users. With two others techniques that help take the idea and look at them in a completely different way, with ‘Creative Stimulus’ using ‘Revolution’ technique. Here you take the rules created from your original idea and reverse them to see if this leads to new ideas. Also another I particularly enjoyed was ‘Random links’ which allows you to stop getting bogged down within the project you may be working on. By bringing in a couple of random objects you would then discuss what they allow the user to do (anything is plausible), then taking these notes and relating each one back to the original idea.

Week 3 – User Experience, Sketching, and story boards

With the class being run again by Hara we all presented our final idea, giving a short explanation to how we got there. Within our team we had found that our initial idea was too broad to focus on within the time frame. Whilst also finding it would be very difficult to help mums and families because of the trust you need with the person may help with giving the kids a lift to school or babysitting. So we eventually settled on focusing on first time buyers and helping them with DIY tasks. It was good to see the other teams present and how their ideas had been developed into one pitch.

One learning from each of the groups pitch which seems obvious, was that we each forgot to give a quick story of the user and the specific problems they face, showing where our idea would help. With this in mind we moved into looking at our design goals, seeing the pyramid diagram from Stephen P Anderson who looked into the psychology behind design, moving your product from usable and reliable, to something pleasurable  and meaningful, that will keep your users coming back time after time.

Hara then showing a great video from the master himself Don Norman. Looking at all the instances of designing fun into your products and what emotional cues the product should have to succeed, from Visceral, Behavioral, and Reflective.

We then came to one of the most enjoyable parts (for me) which was sketching, and creating storyboards, learning some quick techniques on how to quickly draw people to help get across the story we want to portray.

Using the personas that we first created in week one the teams drew out the storyboard that would show how our idea would intertwine into the user’s day and help them with their tasks.

Week 4 – Journey mapping, Information architecture and Wireframing sketching

Jiri the Principal Interaction Designer currently at Intruit was our tutor for week 4, bringing with him his experience from working for the Telegraph, National Rail Enquiries, among others.

Now with a true validated idea, from using the knowledge we have learnt from our user interviews we moved on to learning how we could start to structure the information we had gained, by looking into the Taxonomy and Information Architecture or our products.

The first activity of the night was to map out our user’s Journey using the storyboards and personas we had created from previous weeks. Quickly noting down all the activities our users would go through from initial problem to using our application. A great activity that really allowed us to dig into the detail of every process of our product. Then mapping out subtasks under the initial notes, reiterating the original line of activities as we went along.  This flowed nicely into creating our User Flows, discussing as teams how the users would move around the activities and subtasks, learning that further Journeys could be made when wanting to dig into the detail of further subtasks.

Armed with the User Journeys and Flows, along with the work from previous nights, we moved into sketching out our wireframes. First working as a real rough Low fidelity hand sketch to get the ideas on page, allowing us to easily discuss what should be included and changed.

Before leaving, Jiri gave us the homework to the create a high fidelity wireframe prototype  using proto.io along with a couple of useful links from BBC Gel, iOS HIG that look at existing patterns and design system that users already have a mental model of.

 

Week 5 – Prototyping and Rapid Experiments

I turned up early to see our tutor for the night Jiri grabbing a bite to eat before our class. It was good to get a quick chat with him before class, as we got to talk about how the academy was going and what my views on the class, along with getting a quick bit of advice over what I should emphasise within my CV and portfolio. With my background he mentioned I should focus on selling my experience from working with British standards to meet Ergonomic needs with the products I had worked on previously. Along with that he talked about his experiences when doing a masters, saying he thoroughly enjoyed it, and would still do it, despite the pressures of having a young family.

Moving onto the class we took a quick look at the wireframes we had produced using proto.io. Giving guidance on what areas we should adapt, opening it up to the whole group to ask questions. This then led us into the week’s topic of Prototyping.

First looking at the Double diamond diagram created by the Design council. Methodology suggesting that the design process consists of the 4 phases Discover, Define, Develop, Deliver. With Jiri saying that prototyping can fit within every phases as you look to evaluate your designs. Learning how Prototypes have many different guises and can be used to understand the problem space you are about to move. Showing examples of Rapid experiments where you jot down your interface on a piece of paper to test with a potential user. A very quick and easy way to test an assumption you might have.

Jiri started to go into detail of the various test he had carried out giving us lots of examples of Low fidelity test like sketches and dry tests where the prototype can be a creative piece that wouldn’t include any functionality to a ‘Wizard of OZ/ concierge’ test  where a model is produced that allows the user to think they are using a real product. Jiri gave an example of a text based prototype where his teams created a text messages service where they would re-write the received messages from users before forwarding them, allowing them to test an idea quickly and the user thinking that everything was running through a database.

Another test that Jiri recommended was the diary study, getting users to use a prototype for a period of time whilst keeping a diary of when they used the product. This allows you to understand how the user gets on with a product over a longer period of time. What Jiri found most interesting was once the diary test had finished, they allowed the users to continue using the product. Although Jiri no longer got the the diary, the analytics they got back were quite interesting.

We then moved to a quick practical where we drew out and used paper prototypes to test quick interactions with our projects, which was a great way to imagine the steps the user had to go through to achieve a certain objective. Leaving this week  with a couple of noteworthy comments  ‘A prototype is worth a 1000 words’ and you should make a prototype in the lowest fidelity possible to answer the question you have.

Week 6 – Inclusive & responsive design

Today we met our 4th Tutor Sophie Lepinoy who is currently teaching Lean User experience and has mentored start up businesses at Google Launchpad. She came to give us an overview of what we should focus on with Accessibility and Inclusivity when designing for our users.

Sophie showing some insightful videos of people who are visually impaired, and what tools they use. Showing us how to consider the page is structured so that the screen readers can run through the page in a flowing manner. The video led the talk into the meaning of Accessibility as trying to remove barriers that stop people from using the website, which could be anything from visual impairment to hearing, which could be a physical problem to an environment problem of where the user is viewing your site/app. Then showing the certain standards that our designs should fall under such as the Equality Act 2010 along with the guidelines and associations which are good to keep in mind WCAG (Web Content Accessibility Guidelines), WAI (Web Accessibility Initiative), W3C (World Wide Web Consortium).

The next topic which Accessibility falls under was Inclusivity that can range from Language, Age, Education, communities and many more of what your users might be. This led to looking at our designs from ‘Stress Cases’. Where a product may be used in the wrong way. An example was given of a user asking Siri “Siri, I don’t know what to do, I was just sexually assaulted”, with Siri replying “One can’t know everything, can one?”. Showing how not thinking of all the ways a user could interact with your product, no matter how bad can lead to making a traumatic devastating event, even worse for the user.

The first exercise of the night was looking at the wireframes we have already created, and seeing how they should be restructured to include what we had learnt from the day’s session. This led our team to not only look at how the page should be restricted but how users may become vulnerable whilst using our app. Making us look at what safeguards we might need to be put into our design in certain steps of the process, such as pop up warnings, as well as directing people to connect with users they may already know through Facebook.

After a small break we started to look at responsive design and grid systems, looking at the differences between Native, hybrid and Web, from how to to pick your break point to choosing a responsive grid that would suit your site, mentioning it should be looking at your content and how it is viewed at various viewpoint sizes before setting your breakpoints. Sophie finished by giving us some great resources to help decide a grid and setting a task to adapt our mobile apps to desktop.

 

Week 7 – Validating with usability testing

Sophie set out the agenda for the night. Looking into Usability testing methods and techniques. First making us aware of how prototypes can save millions in industry. Really highlighting the need to test your assumptions before pushing them into the real world. Whilst showing how building up knowledge in the area to gain empathy with the core users, as without this our designs are pretty much wishful thinking.

First we looked at the initial research we needed to gather to help validate our idea. Taking the brief that came from the client and beginning to understand:

the users situation,

their motivation

and their desired outcome.

To help learn what users are doing now to solve their problems.  Showing the quote below:

“This is exactly why we do user research: to find out what people are doing now to solve their problem, understanding what needs they have, and to understand how we can best help meet those needs. Then it’s time to work out what the project should be”

https://userresearch.blog.gov.uk/2015/05/27/doing-user-research-in-the-discovery-phase/

The talk moved into giving us some useful research methods and questions that we could use, whilst also showing a few examples from the book Just enough research by Erica Hall

“A healthy team is made up of people who have the attitude that it is better to learn something than be ‘right’”.

Erika Hall, Just enough research

Moving towards user interviews where Sophie showed short video from the book Sprint by Jake Knapp, that showed Michael Margolis conduct a user interview about a fitness tracker. Picking out some of the key areas to keep in mind when conducting an interview, such as:

Making the user at ease, and being conscious of your own body language and how this could affect the user whilst being fresh and enthusiastic,

Start the interview by spending 10 minutes talking to the user and finding out about them.

Make sure you listening and don’t interrupt and be appreciative showing your listening

Ask the users questions, or ask where their thoughts may have come from, eg a past app they may have used.

Make sure the user fully understands you are testing the product and not them

Give the user certain tasks to complete.

And finally finish with a quick debrief.

We then broke away for 20 minutes where we started to use the tools we had learnt that night to conduct our own interviews. First we decided on the user goal and what we might want to learn from the interview. Then turning these into tasks the users needed to complete and non-leading questions that meet the goals we set out.

Within the group one person interviewed a user whilst the rest of the group participated in note taking. It was good to learn this in a non pressured environment, and I immediately picked up some useful learnings, after committing the cardinal sin of jumping straight into the task, forgetting to learn about the user first. What was interesting was being able to see the problem and writing down the note just by seeing the movement of the mouse and the body language of the user even before they spoke themselves about the issue. Showing how important user interviews can be.

This leads us into the final week with some great feedback to add to further users tests carried outside of the academy to build upon our designs.

 

Week 8 – Stakeholder management and UX portfolios

Onto the final week, which was a fairly relaxed evening with Sophie filling in at short notice with the topic for the night being Stakeholder Management and Portfolios. Showing us how important it is to know who they are, what they want, emphasising the need to take these people with you whilst doing the project. Giving us a few key ways to keep people on board with workshops like Hackathons, Design sprints, and storytelling. Which all help to change attitudes in terms of how UX might be thought of in other parts of the business, with a major example coming from the book Sprint by Jake Knapp and Game storming by Dave Gray.

The talk then moved into how best to set up a portfolio, and how to use the work we had done throughout the course, and build a case study that would allow us to show the processes we have gone through when designing.

One of the best parts being right at the end where Sophie spent her time to have a look through the work we had produced over the last few weeks, as well guiding us on our online portfolios, giving us an insight into what employers are looking for, as well as a few pointers of what we should change. I found this a great part of the night getting great feedback in a non pressured environment and being able to chat openly with Sophie on ideas of how to adapt my site to best show off my work.

As the night came to a close a few of the students finished off with a couple of drinks with both Naveed and Sophie joining us, where we could talk about the academy and share ideas and what groups and events to join to continue learning.

 

Final thoughts

As someone who has been a front end developer, and product designer I really enjoyed the 8 weeks, which seemed to go in a flash. My highlights definitely being able to sit down with the tutors on a one to one basis from getting thoughts on masters degrees, to usability tests. I think it’s great if you’re new in UX or a beginner, in giving you the right structure to follow or just cementing what you may already have learnt whilst at work. Although what I would say is you get out of the course as much as you are willing to put using the nights sessions as a way to give a direction to the work you do outside of the academy.

A definite highlight is the tutors who have amazing backgrounds in UX who give a great insight to what they have learnt over their careers as well as Naveed who makes you feel at ease and is more than willing to answer any question you have, and always looking at ways to see how he can improve the academy in the future.

 

.

UX Books

Its not how good you are, its how good you want to be

Paul Arden

 

 

When Coffee and Kale compete

Alan Klement

 

 

Lean UX

Jeff Gothelf, Josh Seiden

 

 

Design for real life

Anil Dash

 

 

Dont make me think

Steve Krug

 

 

100 Thinks every designer needs to know about people

Susan Weinschenk

 

 

VR UX: Learn VR UX Storytelling & Design

Casey Fictum

 

 

The design of everyday things

Donald A. Norman

 

 


The Mobile Web Designer’s Idea book
Patrick McNeil

 

 

A web for Everyone: Designing Accessible User Experiences

Sarah Horton & Whitney Quesenbery

 

 

Making and Breaking the Grid: A Layout Design Workshop

Timothy Samara

 

 

Sprint: How to solve big problems and test new ideas in just five days

Jake Knapp, John Zeratsky & Braden Kowitz

 

 

How to make sense of any mess: information Architecture for Everybody

Abby Covert

 

 

Observing the User Experience: A Practitioner’s Guide to user Research

Mike Kuniavsky, Elizabeth Goodman, Andrea Moed

 

 

Interaction of Color,

Josef Albers, Nicholas Fox Weber

 

 

The Practitioner’s guide to user experience design

Luke Miller

 

 

Emotional design: Why we love (or hate) everyday things

Donald A. Norman

 

 

An Optimist’s Tour of the Future

Mark Stevenson

 

 

Hooked: How to build Habit-Forming Products

Nir Eyal

 

 

More Human: Designing a World Where people come first

Steve Hilton, Jason Bade, Scott Bade

 

 

The Shallows: how the internet is changing the way we think, read and remember

Nicholas Carr

 

 

A project guide to UX design: For User Experience designers in the Field or in the making

Russ Unger, Carolyn Chandler

 

 

Ogilvy on advertising

David Ogilvy

 

 

Niche Envy: Marketing Discrimination in the digital age

Joseph Turow

Accessibility Notes

It is important that we try to make our content as user friendly as we can. Here are some pointers that we should remember when designing, writing/ and building our pages to help our customers who are for example visually impaired or colour blind.

Images

Users can have difficulty understanding images that are not accompanied by a text description. Within the alt text try to:

  • Let the users know what the image is

  • What the image represents

  • If it is a link, and where the link will take you.

  • Where text is burnt into the image, write this in the alt text/ title tags of the image.

  • Don’t forget to add text to infographics.

 

Colour

Some users may find it hard to read content where there is not enough contrast between text and image. This can include:

  • Text overlay on a background image

  • Colours of text and background colour

  • Allow colours to contrast. Be wary of using yellow, blue and green close to one another. Black text on a white background is generally best practice, due to it being readable for most audiences.

  • Be sure to also distinguish blocks of content from one another using visual separation (such as whitespace or borders).

 

Links

Just like sighted users scan the page for linked text, visually-impaired users can use their screen readers to scan for links. So try to:

  • Properly describe where the link will go. Using “click here” is not considered descriptive, and is ineffective for a screen reader user.

  • The most unique content of the link should be presented first, as screen reader users will often navigate the links list by searching via the first letter.

  • Underline your links or make sure that there is a colour contrast between hyperlinked text and regular text, to help colour blind users find links.

 

Text

There should be enough space or the element should be able to grow, to allow users to enlarge font sizes by 3 times to help them view our content.

 

 

SEO Notes

General rule is to make the content as useful and as easy to understand for our customers. Google will see this, and raise our pages up the ranking.

When putting a SEO plan together you will need to allow around 2 months before you see any improvements through on Google. Ideally content pages should be very specific to a given topic—usually a product or an object.

SEO Checklist

To help you when building your pages please use the checklist below:

1 Title tags

Added within Management center, this one of the most important SEO parts to the page. PHD will be able to supply the best copy to use here.

2 H1 title tag

Wrapping your headline tag within a <h1>tag. At the moment Management centre automatically adds this to the page, but will also change the hierarchy name as well.

3 Headers

Wrap your content in the correct tags. Eg <h2>, </h2>, <h3>, so Google can see the page is correctly structured.

4 Content

Use engaging imagery, text content, videos to show Google that we have a breadth of content on our subject type, and make sure that content isn’t duplicated within your pages. Also provide unique content about the given subject of your page.

5 Text

Drop in the keywords you want to appear highly for, within the body copy and headers of the page. Don’t keyword cram as this will lower your page within Google. Brightedge tends to allow the same keyword to be used around 10 times in the page.

6 Keywords

Wrap your content in the correct tags. Eg <h2>, </h2>, <h3>, so Google can see the page is correctly structured.

7 Image size

Use images no bigger than 100KB and use tinypng.com to help reduce the size of your image without reducing the quality.

8 Image name

Within the filename of your images use the target keyword for that image.

9 Alt text

Properly describe the context of the image within the alt text, remembering to add in the keywords you are targeting for that image.

10 Link text

Within the anchor text describe the page you are linking to, so both users and search engines can understand where they are going.

11 URLs

Make URL’s friendly, by making these shorter and keyword rich.

12 Responsive

Make sure your page renders correctly at both maximum and minimum width.

13 301 redirects

Redirect old redundant pages to the latest version to reduce duplicated content and allow our old pages that are high ranking in google to have a destination.

 

What Google is looking for

“Remember that Google cares a lot about how visitors interact with your content. If users click on your page from the search page but then bounce back to search, this will drop you down the ranking”.

“Think about the searcher. Give the user the experience they need and the answers they want”.

Make your content — semantically, lexically, and logically.

  • A) is on-topic and relevant,

  • B) includes critical answers to searchers’ questions, and

  • C) has credible, accurate information.

 

 

LWS Accessibility talk

Billy Gregory @thebillygregory was very entertaining, but with a very important message. Talking about a tweet that he sent out over a year ago that he didn’t think much about at the time. This then caught on about, and he came over from Canada to talk through Some User experience eg SUX.

Billy Gregorys original tweet was:

“When UX doesn’t consider ALL users, shouldn’t it be known as ‘SOME User Experience’ or SUX?”

What was interesting was looking at the learning curve of various ages. Struggling to find a iOS app that his dad would understand using gesture based controls, and then looking at his daughters who were way more advanced than he was. Talking about how he is stuck in the middle,  getting a little bit more out of touch with how you the younger generation interact with technology, and pointing out all the different people that we need to be designing for from WWE wrestlers to visually impaired to people finding it hard to move, and how inclusive shouldn’t have no boundaries.

A few things that are half-arsed online

  • Headings
  • Lists
  • Forms
  • Focus management
  • Poor contrasts

What to focus on when building design requirements

  • Colour contrast and meaning
  • Structure
  • Focus and content order
  • Focus states
  • Touch target size (recent read that the average size of the thumb print is 40x40px)
  • Describe how custom components work

I would very much recommend to go to a talk of Billy Gregory, as he was very entertaining and gives you something to think about.

Leonie Watson presenting the accessibility techniques for SVG. Very much aimed at the Developer, but did highlight some amazing things you could do to SVG imagery to bring these to life for visually impaired.  Highlighting that within background imagery you can now be using a High Contrast Mode (HCM) detection script. What looked great about SVG + ARIA is that you can now start to explain graphs and animation within the SVG bringing them to life.

Within the question and answer phase, a lot was said about CMS’s that can’t achieve full accessibility and how sometimes the excuse is made that because they can’t be fully accessible that there was little point spend much time on this by client managers, but it was the thought from everyone in the room that making little changes along the way even if it is just explaining an image correctly can have a huge benefit.

In the QA at the end another thought was looking at the little icons that come as standard such as radio buttons, and how it does look cool to redesign these to match site branding, but how this can then also be becoming a barrier to accessibility. Another one brought up was how fancy date picker pop ups can be horrendous to use when only using a space bar or screen reader.