OUGD504: User Experience- Analysis of new Facebook Messenger Application UX

In the most recent update of the iOS Facebook messenger App, the user experience has been improved and manipulate it to simulate external experiences and influences more than ever.

The new functionalities include a instant camera short cut, possibly due to the extent of pictures sent to friends over messenger. To adapt to the ever changing needs of the market, Facebook have now made this easier than ever, reducing the steps the user must go through from 4/5 to 2/3, resulting in increased efficiency and hopeful visual communication amongst friends.

The update has adapted many aspects of Instagram and Snapchats interface, including the ability to add filters, manipulate text and create custom messages. Since taking over Snapchat, this lateral move is understandable from a business point of view, yet it may make the two social platforms too similar, therefore negating the use of something like snapchat.

On the other hand, I personally feel the interface's simplicity has been tainted. The board appeal of Facebook over numerous age groups and demographics almost gives it a USP which may never die out. Often grandparents are on Facebook, simply as a way of communicating with friends from the past who may be located all over the world- or just keeping up to date with the grand kids. If the messenger app continues to evolve appealing to a predominantly younger audience, Facebook could risk alienating secondary audiences or risk app un-instillation due to quite a vast change.

However, this could be counter argued by the extent older audiences play on the app, such as swiping right or left to now enable new features. As a 20 year old with a decent understanding of technology, even I got confused and stuck on new features- unknowing how to just send a message to a friend.
Facebook have added extra benefits to the app to reinforce its overall purpose- to simply and easily communicate with friends. The new features only applies when you hit the new centre button (the same as snapchats capture icon), in the bottom middle of the screen. When this is activated, two more functions are available, with a swipe left- All Photo's; with a swipe right- Message writing function in Helvetica bold (the same as Snapchats go-to 'in-snap' typeface). These similarities and overlaps are possibly due to Facebook taking over Snapchat, drawing influence form Instagram the way Instragram took influence from them, directly copying the 'story' function.

In conclusion, the interface of the new Facebook App update simplifies its overall intention of instant communication- yet may be swaying too much away from written spoken language. This has the potential to alienate sections of the audience, especially if they do not have the patience to investigate what the new functions do and just see it as 'confusing change'. The user experience for this reason has both been improved and possibly hindered as this is quite a drastic update, the experience could personally depend on how receptive the user is to change. The user experience none the less has been simplified, allowing more functions with ease at a swipe. The benefit of the camera function now means rather than pre-deciding who the photograph is being sent to, you have the freedom and flexibility to capture a moment and decide later- much like Snapchat. With the increase in older people using Snapchat and its many filters, it is understandable why this route has been pursued by Messenger, yet may negate the role of future social media platforms who operate in the same kind of structure.

Design for Screen - Research 01 (Websites)

When one is undergoing searching for a property, the natural thing to do is to explore on a desktop or laptop, rathe than an app. As the nature of house-hunting is quite daunting and official, you need complete trust in the service provided, with clear information and large informative pictures paramount for decision making.

________________________________________________________


weroom.com

Simplistic design and layout, easy to manage functions. However, no back button. This means every time you want to go back to the list of pre-found options, you need to re-imput your location and advanced settings. This increases steps and decreases ease for the viewer, possibly a turn off for some viewers.

House hunting needs to be quick / simplistic / easy to follow and understand / visual breakdown / cost breakdown / ease of contacting a landlord

Simplistic infographic, explaining the benefits of 'sharing'. To some, sharing with strangers may seem daunting, yet these friendly info graphics are simplistic in nature, possibly appealing to a younger target audience.

Information on the 'roomer', aka, who your new friend will be. Also the property. This could instantly be improved by a 'Contact Lina' button, and perhaps further cost breakdown. All we know is that first months rent is £355- is that including bills? What about the second months rent? Is it possible to extend the tangency longer than 31st May 2017 or not?

________________________________________________________

Spare Room.com

Really functional website, features great content and is adjustable to suit budget and personal specifications. However, the User Experience does not seem fully fit for purpose, as it is still causing stress rather than negating it. 

Blue is the most popular colour on the internet, with Spare Room.com featuring blue and orange heavily. The typeface looks dated, especially featuring Arial- the standard go to type which is installed on everyones computer. Spare room.com also feature hidden costs- including sign up fee's and 'Early Bird' sign up. 'Early Bird' is aprox £10.99 for 7 days, giving you access to over '1400 properties' and provides the telephone number for each landlord- something which I feel should be provided regardless! 

Uninspiring colour palette- resembellant of a prescription website or dated HTML, page width does not fit to screen- proving for a condensed user experience. All of the information just feels slightly cramped and claustrophobic, making the (already stressed out viewer) also feel like there is little breath room- or time for that matter. 

The  information feels overly cluttered, with little consideration given to the hirachy of information  or even which property is a best match for YOU. As a house share means you'll have to adapt to someones way of living, this experience should be as welcoming and proactive as possible- helping match personalities not just property requirements. The advance search filters are varied, yet still limited.

________________________________________________________

Air B&B

Unsuitable for long term lets, however simplistically chic user experience. Clear, modern graphics with large resolution pictures, giving a clear insight into what the viewers signing up for. 

________________________________________________________

Find a flat.com

Brought to you as a partnership with Spareroom.com, the same problems prevail when exploring housing options and user experience. The screen is once again, not fully fitting the browser, giving a cramped information.

________________________________________________________

Flatmate Rooms.co.uk

Great website, yet bad user experience due to no back button. After viewing the property and sending a message to the landlord, there is no way of going back to the filtered list, meaning starting the whole process again.

It seems little consideration has been given to split up relevant information- including a cost breakdown- in the initial information.

Straight forward- simplistic at a glance way of showing what the property has to offer. The three catergory split between 'About the household' 'Welcomed Flatmate' and 'Bills Included' gives the viewer a good side-by-side comparison, comparing the property to their 'ideal' preferences. Simplistic infographics- does not illuminate a proportion of the audience through symbol ambiguity.

Again, flatmate finder are asking for a payment method to access mobile numbers. Naturally, people in this situation are desperate, so probably willing to pay for this service as it can speed the process up, and remove a lot of the stress.  However, I do not feel this is a suitable action for the service to provided, the contact information should be there regardless.

Overall, web searching for properties for immediate access is a challenging process for students or working professionals to undertake. Some websites have made this a breeze- yet the design of others have hindered its potential. Keeping this in mind, I plan to conduct primary research on how people go about searching for properties, and what functions they would like to see.

Hard to read and distinguish between in in a rush

OUGD504 Design for Screen - The Design Process

Experience

Not quality of what they are reading, but the experience of interacting with print based media. Drinking a coffee in Starbucks alone, automatically alters when you're then reading a paper, it becomes like routine at times for many people and this is something I need to consider when designing solutions for my given problem.

Often scale of newspapers can become tricky, especially when stood up- perhaps in a tight environment where papers can squash and fall out due to the lack of binding. Everything can be both a positive, or negative experiences.

Research & Insight

Screen based research is equally as important as when designing for print. Consider:

Page Impressions

Unique Users: Specific characteristics, special requirements or unusual cases- what if one person doesn't fit the mould? Will they still be able to interact with it as intended?

User Flow: the journey one takes to actually get to the interface, and how they interact with it when they're on it.

One-to-One: Peer Analysis, qualitative feedback in focus groups or one to one.

Persona's: Putting yourself in the shoes of the target audience with a character persona in mind, walking through and interacting with it like they would.

SWOT Analysis: Strength/Weakness/Opportunity/Threats, both internally and within the external developing market 

Questionnaires: Any questions needed to solve the problem

Target Audience: You are not designing for yourself, and you are not designing for you client. Generally, the client is not the target audience of the product they're selling.

Can be individuals or companies, families or sections of the general public.

Is the interface designed appealing more towards men or women? How does this work and feel when put in the hands of the target audience?

Urban or Rural location? Whats their income? What devices do they use? How often do they engage with interfaces?

Economy or Premium? Whats the difference within the User Interface? As a user you'd want Premium to look and feel more luxurious. 

Consider why?

What is the specific reason they WANT to engage with the interface? Motivation (getting better or taking stress into their hands) and a Goal (to reduce stress L.T and have an overall better    ) is generally used. Do they need to do something to achieve a 'goal'.. Perhaps when the app can see 'phone mode' has been engaged, suggesting the user is ready to speak to an actual person? That in itself is a big step and therefore needs rewarding somehow. 

Is time on the interface seem essential or seem luxury and special? (Needs to be self indulgent)

Are they after something specific that none else can provide?

Do they need specific information about a product or service prior to engaging with it? (Yes, most people are sceptical so a thorough description is essential) 

 

Ideas generation

Come up with a range of idea's which are all completely distinct, in response to the problem

Moodboards/ Mindmaps/ Ideas Sessions/ 

Solutions

Minimum of two different idea's visualised through Wireframes and Sitemaps. All very sketchy and rough at the initial stage.

LoFi:

Comp: Mock ups on Illustrator/Photoshop, Interactivity through After Effects etc

Production

(only when a simple Wireframe and Site Map for 2 ideas has been created first)

Hand over all information to a programmer or coder for them to build fully

Site-Map

Get to any page, from any page. 

Need something to grab the users attention? 

Wireframes

Inform where information should be, making sure all information is where its meant to be. Put together a hirachy (importance of information), and how each page will interact with other pages/ how you get from one page to another.

Do not design beautifully at this stage, there is no point. Its likely things will still get changed around.

Next steps:

SWOT Analysis and further research, developing a range of idea's. 

2 totally different solutions brought to the Wireframe/Site Map stage.

OUGD504- After Effects Session 4

Timeline Layer Switches (eye on/off)
Shy layer:

Man ducking behind fence- used to hide layers without deleting them. Can tidy up dashboard/

Computer running slow?

Click on this to lower the quality of the preview to aid with loading times. Use Fx to turn on/off effects per layer. Motion blur adds a realistic slight blur, aiding realism by softening the edges etc. Must 'activate' the main motion blur Key Frame toggle as shown below (pt 2)

Lower the quality by clicking on
& making the line curvy

Adding Motion Blur

Activating the Keyframe for Motion Blur- will only work when this is selected

Adjustment Layers:

Any adjustment you apply to this layer, effects all of the layers beneath it. So, if you create a new Adjustment Layer, drag Black and White onto it- everything below this layer is affected. This allows you to block out or emphasise certain colours/effects.

Effects & Presets:

Drag and drop onto layer bar. There is thousands to choose from (similar to photoshop in parts)




Cutting out a section/Track Mat:

Draw rectangle, overlay it to the section you want to cut out. Use the below setting and play around with the settings until it works. This means you can bring in animated footage below, meaning it will only be visible where the rectangle is cut out.

Nesting Files:

Create a new composition the size of the still file:

By creating a composition at a smaller scale than the PAL- settings we usually use, means one animation can slot nicely inside another, without overlapping or being cropped at the edges.

Nesting Composition together (background and master)

OUGD405- Coding Lecture

HTML- Hyper Text Markup Language
CSS- Cascading Style Sheets *
Java- Android Language
Javascript- Advanced effects and added interactivity
SQL- Database Language
PHP- Server based Language
iOS- Apple Language
Ruby- Twitter


What languages do you/your developer need to know? If hiring the wrong type of developer, could loose big money. Very unusual for a developer to code in every languages, just like normal languages- some people specialise in one language more than others/cannot speak in some.

*Main two needed for standard web design. 21st Century designers need to have a good grasp on how these function, what they are and do.

Often, all webpages are not individually designed. There will be a series of pre-designed, functional web templates, yet the coding allows the database to pull up any information relevant (into the template), when the viewer clicks and demands the information. This is easier than pre-designing 3000+ webpages, whilst allowing the upkeep of the website much easier as the physical content is interchangeable. 

In the past, interactivity for technology/phone was done through flash. When Apple iPhone launched, nothing would compete with Action Script as it was unsupported on Safari and iOS browsers. Since, ActionScript has become obsolete, meaning that in the future- any of the above languages can equally fade out. 


Not designing for screen- designing for web browsers, such as:

Google Chrome, Firefox, Safari, Opera (used by Nintendo Wii), Internet Explorer

All of these translate HTML, as the Skeleton of the website. Web browser looks for HTML Files on Servers and then display the content to the user. However, the look and interpretation of the language can be interpreted differently on different browsers. Eg: one thing may work/look differently on Chrome than on Safari. This highlights the importance of knowing WHAT you are designing for, so it works 100% on that medium.

What devices would they be accessing it through?

Desktops, Mobiles, Tablets, Laptops, TV's. This will change the layout and aesthetics as the physical screen and template/orientation differs. Eg: iPhone 6 = Portrait  Web Browser from Laptop or Desktop = Landscape. This also impacts the UX and UI as the physical navigation alters.

Responsive Web Design is where it changes and responds to the device it is on.

You should be able to get to any page- from any page

The Hamburger Icon aids this, especially within Apple and Facebook- 3 horizontal lines which allows a slide out function to reveal tabs and navigation menu's. However, as this hides the icon people forget what is on offer- out of sight out of mind. By using the Hamburger icon, interactivity is interrupted and more steps are added (e.g.: clicking on icon, scrolling down perhaps, and finally clicking on the selected icon).

Nothing is Perfect, everything needs to be critiqued

Standard Screen: 96 ppi (higher quality images etc for screen) rather than 72 ppi. 

72ppi loads quicker on a page as smaller files.

Retina screens gave the option to display higher quality ppi, possibly challenging the quality of print (300ppi) someday. The higher PPI means larger load time, and a negatively effected UI. Most peoples attention span is approx 4 seconds. The average web user gives about 2.6 seconds until the page loads, if not there is a chance they could close the tab and go elsewhere. Design should load instantly, if not instantly then definitely <2seconds.

Accessibility

Screen Readers
- programs that read out the contents of  computer screen to a user. (Links to brief)

In Europe and USA its a law that every website should be accessible to everyone, e.g: blind/any impairments.

Then// This impacts the the design as the typeface is not installed to the website, it is installed to the users computer. If used a bisque typeface, or even one specialist to you, it would default to Times New Roman as that was a universally legible typeface accessible to everyone. On the internet the designer lost the control of pt.Size/Kerning/Leading which limited what could do on screen.

Now// Google fonts and Fontface kit means 'in theory' that you can upload a typeface and use it anyway. However, this allows the user to download the font from the website, breaking copyright legislation and allows the user to distribute it as they please (not a benefit and can perpetuate unfair practice and fraud). A licence is needed for the typeface (if its a Royalty typeface), or else source a royalty-free typeface (either specific for print or specific to digitally. Check small print and check there is no license fee attached to it or else billable at any point).

Its essential to consider who owns the rights to each section, as it has the ability (by being put online), to be distributed world wide.

Any type on a website is searchable by the search engine- images are not (there are ways around but not that easy).


HTML Coding:

Decides each element of a webpage with an open and close tag. They tell you something about the information- every piece of information has to be opened AND closed.

'p' means Paragraph. Research the alternative code formulas for headers, subheadings, images etc. All coding needs to be relevant to what it is opening and closing.

Opening tag: <p>           Closing tag: </p>

Needs to be include in each website- if not, it will not work:

<html>   +   </html>
<head>   +   </head>
<title>    +   </title>
<body>  +   </title>



Cannot rely on WYSIWYG Applications (What you see is what you get), as without knowing the basics of coding things can still go wrong through translation. A good example of this is Dreamweaver. Can't use Dreamweaver without knowing coding, the WYSIQYG is abysmal. MUSE is a visual website-mock up.

Meta-tags are what search engines use to find websites (Key Words). Not visible in website but within the structure of the website.


Learning   -              https://www.codeacdemy.com/learn/all

Codecademy is a good online way of learning the command line of coding, the framework and effectively how to deploy a website. The Hungry Sandwich Club learn't almost fully through CodeCademy, prior to employing a trained developer.

OUGD503- Responding to YCN Greenhalls Gin (1)

Responding to the brief

After exploring further briefs for the Responsive model, I had to consider the larger implications this brief has towards my portfolio. Despite a defined concept underpinning the UK Greeting Card brief, the relevance of greetings cards and stationary paraphernalia in my portfolio isn't really needed. I want to be aiming bigger, pushing myself and create a large body of work (ideally away from screen). In addition, after some informal research into UK Greetings Cards, the idea I wanted to explore was not really applicable to their current style, or target audience. The commerciality of UK Greetings Cards connotes possotive messages- pretty patterns and lots of colour. Sadly, I feel if I was to explore work like this, I feel it would be more worth while on a less restrictive brief that won't be monopolised by surface pattern design and illustrators.

The loose wording of the Greenhalls brief- "design a piece of creative"- suggests any medium is accepted rather than the confinements of commercial gift wrap etc.

Greenhalls:

Really established 1870 when Edward Greenall purchased the Dakins Gin Distiller, and subsequently inherited the Origional recipie. Dakins seems to be proud of its northern routes- sharing a hometown with Greenalls. 

http://www.ginfoundry.com/gin/thomas-dakin-gin/

Is Greenmails the alter-ego targeting the south, suggesting a countrywide unity? Or is it targeting ‘London’ to emphasise the Britishness intended through the brand?

• If anything, when one thinks of London Gin / 18th Century London - images of Sweeny Todd days are created, with streets littered with poverty and disease. By having ‘London’, aren’t they hinting to the negative aspects of the past more so than the positive ones? 
• London 18th Century: Grey, Grim, Disease  (the opposite to contemporary and modern)

They are currently positioned in the market as an old fashion, basic drink. The iconography and brand ambassador (the Queen), hardly promote a hip, youthful tone of voice- nor do they need to.  Their current advertising is relatively clinical, easy to understand and extremely legible. The appeal is on traditionalism- something close to Greenalls heart.

Official full logo to be used within all 'creative'- aspects of the logo (e.g. the illustrative crest or vertical green bar component) can be used individually if appropriate and wrapped in the Greenalls identity. The have expressed a desire not to alter the branding, suggesting they are happy with the way things currently are- are just slightly stuck on how to increase popularity.

The logo can be broken down into Futura Medium and Bodoni Old Style, with a minimal multi-green and white colour palette.

Target Audience


The 'creative' should be targeted at Millenials. Generally referred to as anyone born before 2000, yet when looking at statistics, this is actually a vast misrepresnetation.

Target Millennials :

People who drink Gin are interested in a quaint Gin drinking life (a bit like their mum).

World Gin Day: 11th June  - Could create an event or compose a launch night around this time? (Deadline March 23rd) 

http://www.independent.co.uk/extras/indybest/food-drink/best-gins-tanqueray-bombay-sapphire-10300262.html

Quintessential British Events:

Street Parties Jubilee’s   May fair (Mayday)    Bonfire Night      Picnic's 

Loosing your mum in the supermarket        Two busses coming at once          Queuing and then apologising 

The Countryside      Tea Parties         Boat Rides          Cricket         Croquet       BBQ's in the rain

Events through British History:

• Canals and UK’s Industrial Revolution, linking Warrington with London
• Bad reputation with Gin. Poverty and disease outbreak. Gin cheaper than Water, trend came over from Spain and lead to increased disease and poverty. 
• Religion (risky topic)-  especially with alcohol.   
• Overcoming adversity (War, Slavery, Bad modern times- relates to all the bad shit of 2016 *takes sip of G&T and all okay*)
• Fish & Chips

GIN  (Bad history turned good)

What’s gin to me may not be gin to you. And there is nothing "old-school gin-makers" love more than to gripe that some newfangled “gins” aren’t actually gin. 

There are two primary ways to flavor your gin: You can either add flavors to a distilled spirit and bottle it, or you can infuse botanicals into the spirit by distilling them together. Depending on your chosen method, you get a different kind of gin, and a different flavor profile.

For example, if you want to qualify as so-called “London gin” (eg: Greenalls), you are only allowed to flavor your spirit through the distillation process. This is obviously more difficult to do then simply spiking your spirit with a flavoring compound, but the style is revered by gin purists.

“Greenalls- since the start.. until the end” .. homecoming drink, used to celebrate and revel in excitement. Suggesting a positivity in the aftermath of 2016’s events"

Imagine you’re an old-timey sailor venturing into the malaria-ridden tropics. Quinine-containing tonic water will help ward off the parasite, but it does taste bitter! One way to make it more palatable: Mix it with gin. According to legend, this is how the gin and tonic was born.

Gin was introduced into England by soldiers returning from campaigning in Holland–hence the origin of the phrase “Dutch courage”

“ Like most attempts at prohibition, this proved a failure, and according to Gary and Mardee Regan in their book, The Martini Companion: “So drunk were Londoners at the time that plays had to be canceled because the audience were too befuddled to sit still and the actors too were too drunk to remember their lines.” 

The widespread evils caused by gin are vividly depicted in William Hogarth’s infamous “Gin Lane” engraving in which the “Gin Royal” tavern advertises “Drunk For a Penny” amongst scenes of drunken abandon, and a certain Reverend James Townley opened a poem of the same name with the daunting line: “Gin, cursed fiend….” "

Gin started to become more popular around 1870’s and reached its peak when the Martini was created.
Demand is higher than ever for gin in Britain. The number of producers has risen by over 100 in the past five years. And the juniper-berry-disaster-zone has been made worse by the sharp decline in    the value of sterling after Brexit.

"Whether on a hot day sipping cool gin and tonics, or out on the town nursing a martini, gin swings."- Nick Passmore, 2003, Forbes.com

http://www.forbes.com/2003/06/03/cx_np_0603feat.html


Brief Conclusion

People who drink Gin want to feel sophisticated, an exceeded self esteem due to the trends of the recent past. They want to buy a sense of idealism, that everyday could be this regal/refreshing - leading to a sense of improvement- just from drinking this drink. 

Greenalls brand identity needs to be carried through any form of 'creative'. My personal intentions is to challenge the brief and create an idea with feasible success.

OUGD503 - Responsive Initial Ideas

Nihalistic / Realist greetings cards and stationary paraphernalia

• considered the opposite of ‘cheery’ messages which beat around the true reason someone is sending a card. They are sending someone a piece of communication fundamentally to connect with them- send them a message or transmit a positive feeling as an act of good will. 

•  People also send greetings cards because they often don’t know how to say/word something. They want to tell their friends ‘happy birthday’ or ‘congratulations on your new house!’.. what they don’t celebrate are the true achievements in life which actually need celebrating. Personal hardship, deep emotional trouble or dark periods in individual lives or even as consolidation for a nationwide issue eg: ‘Sorry your friends elected Trump’ or ‘Fuck that looser, He was a piece of shit anyway’, applying the reversed concept to a range of audiences.
•   After doing some online research into current cards on the market that target emotional needs, it shook me how none of them were actually designed FOR the receiver. The person receiving this card will probably find it a surprise, someone would go out of their way to do something nice like that- but these words are foany. Their purpose and design suggest they are designed to make the sender feel better about doing something, rather than to improve the receivers mindset and long term quality of life.
• Granted, greetings cards by nature have a short life span, often thrown away after a few days. However, cards with significant meaning that touch an individual, perhaps a hand written message written inside is hard to let go of. Those few cards, wedding cards/anniversary cards/event specific cards are hidden deep in everyones houses for sentiment, a feeling that ‘it will all be okay’.
• When considering an primary audience of Mental Health sufferers, first hand research is necessary to best communicate what actually wants/needs to be heard. As person with severe mental health issues myself, metaphors and sad illustrations are just patronising. As are cards which give off the same vibe as a condolences/funeral card. 
• Despite conveying some difficult/unorthodox messages, I want the purpose to remain on betterment of the receiver. 
• Small tearable section the receiver can keep in their purse/wallet as a reminder on how to calm down
  
  
  -When you tell yourself ‘stop crying’ its a little card in your purse with some breathing exercises or similar message as a practical solution to ‘just get it together’. This is not a solution to prevent manic episodes (or bouts of depression), merely a tool accessible to help when such things arise.

Find Out:

1. Everything and anything that had helped people in the past   
2. Explore the connection between colour/design style and target audience

Outline of Concept:

‘Greetings cards to say the things you really can’t’.