Week 9

Abstract Our learning objectives for the week are:
  • Articulate the anatomy of a typical web page.
  • Lay out a website page that conforms to agreed-upon aesthetic principles.
  • Explain tactics to incorporate into the design process to account for responsive design.
  • Identify common responsive design patterns.
  • Explain accessibility and why it is important.
  • Describe your role in designing accessible experiences.

Post 1: Responsive Design

I remember the first time I used the internet. I was in the library at school, probably around 1995, as I was using WebCrawler, Altavista and Lycos as search engines. We had to use all three to find content as not all pages were indexed on all engines. Google didn't exist, neither did YouTube or Wikipedia.
You had to have a landline to access it, and back then, you were charged by the minute. Smartphones didn't exist, and neither did broadband.
Over the next ten years, internet access and speed changed dramatically. Desktop computers were the norm, and we even began communicated via text message. As mobile technology advanced, so did the demand for wireless mobile internet access.
In the early days, both desktops and mobiles displayed the same website. You had to scroll, drag and click to use them. Pinch and zoom didn't exist, and up until 2003, nobody cared about mobile brand experiences. The bubble forced people to look at the figures, and someone realised they were missing out on the growing percentage of internet traffic coming from these smaller, mobile devices.
Companies large and small started using SMS to send customer loyalty offers and exclusive promotions. Media outlets started to send news alerts and thought it was a good strategy because SMS providers guaranteed reliable delivery to consumers.
Blackberry changed mobile user behaviour, and adaptive design was born.
Adaptive design Adaptive design used multiple fixed layout sizes. We could detect the browser size within media queries and serve a layout most appropriate for that screen.
Then Apple introduced iPhone, and smartphone users expected to be catered for. Google also started to rank sites based on how Mobile-friendly they were, and businesses realised mobile devices were not going away.
It started to become extremely difficult for developers and designers to keep track and provide consistent experiences across all platforms.
In response to the ever-changing web, designers like Ethan Marcotte (Marcotte, Keith and Robert, 2011), sought to devise better ways processes and coined the term "responsive web design".
Responsive web design Responsive web is an approach to web design that renders pages well on various devices and screen sizes, using the same code base. The codebase has three components; fluid grid systems, flexible text, images, and media queries.
  • Fluid grid systems ensure that elements have consistent spacing, proportion and adjust to a specific screen width based on percentages.
  • Flexible text adjusts, making text legible, regardless of the end user's device.
  • Flexible images are a methodology where smaller (or larger) images are delivered based on your device and connection speed.
  • Media queries allow for multiple layouts of a design, which use the same HTML-coded web page.
This approach allows websites to look great and work well on any device, helping businesses and users maintain a consistent experience which increases retention. It also allows us to consolidate analytics, tracking, and reporting. Decreasing time, cost and content management.
  1. 1.
    Marcotte, E., Keith, J. and Robert, C. (2011). Responsive Web design. A Book Apart.

Post 2: UX Prototype - Engagement

From last week (week 8) I had a new question to solve:
From last week (week 8), I had a new question to solve: How might we get people to answer and ask questions without it being too annoying
I wanted to encourage men to open up and talk to each other, but I didn't want it in the users' face.
The best way I thought of doing this was to look at where I could inject self-reflection features at each part of the engagement funnel. I created the engagement funnel buy creating mind-maps for each mind-set then consolidating them into simple lists as per below.
The engagement funnel is as follows: Awareness - I've just become aware of your product through offline interactions and exposure to traditional media. I have a visceral feeling I need/want to use it, so I've downloaded it.
  • Gain an understanding of what the company does
  • Gain an understanding of product integrity
  • Possibly learn about the company history
  • Gain confidence in the level of expertise of the brand
Consideration - An expression of consideration has developed, and I would like to put you into consideration for engaging. I may have come through exposure to new media, been referred to the app, or had it shared to me through user-generated content.
  • Evaluate our product against another
  • Find proof points
  • Find detailed information
  • Begin or experiment with the conversion features
Conversion - I've already done my research and are now ready to convert. I may have used your service before and want to redo my last journey.
  • Onboarding
  • Payment
Pre-engagement - I've converted into a live user and want to be aware of changes. I'm also looking for information that may aid me during the engagement or post-engagement. I also might want to change my mind about things.
  • Pay any fees connected to my event
  • Monitor features and keep track of any changes
  • After-sales support
  • Evaluate the service and be reassured by proof points
During engagement - I'm taking part and want to make use of any product features that would enhance my experience and give me joy.
  • Companion features that record 'in-play' activity
  • Customer Support if things go wrong
Post engagement - After I've taken part, I want to be supported whether my experience was positive or negative.
  • Customer Support if things go wrong
  • Review the previous event
  • Re-purchase the previous event
  • Companion features that record 'in-play' activity
  • Exit features - such as deletion of account
By analysing my engagement funnel and looking at the customer intent at each stage, I thought it best to inject self-reflection features at the onboarding, pre-game and post-game stages.
At onboarding, we'd ask probing questions. Asking the user to take a moment to think and address the questions with sincerity. Trying to get them to take calculated risks at self-revelation.
Pre-game, we'd measure mood, and post-game, we'd measure mood and every 36 hours ask probing questions.
Last modified 1yr ago