OUGD504 - Design for Screen - Designing a user Experience

Have the idea, write it down, and then move on to the next one. Don’t judge, analyse or criticise them – that will come later. This frees you to be experimental, to step outside of ‘the box’, to be subjective, (or, at times, even more objective), inventive, original and fearless.

The ideas could be generated in the following ways:

- Mark–making and Sketchbooks

- Mood Boards

- Mind Maps

- Ideas Sessions

The results from the Ideas Phase, along with the brief and the research data, are compiled to create a clear design direction.

Lo Fi

This could be a sketch of the page–types, wireframes, or an HTML prototype. The point is to get something sketched out, in as complete a state as possible, and begin to solve those problems as they arise. The aim is to do it quickly, and cheaply.

Test and Iterate

Once you’ve got something that you’re happy with, the next stage is to test those results. Testing can be done formally at a usability lab, or in more guerilla fashion with colleagues, friends or family. The point is to get a real person using this lo fi product. That could validate any problem areas.

Design Comps

Design visuals of key pages are done in this phase. They can be produced in tandem with the lo fi work and should be as iterative. The difference is, the Design Comps focus on elements such as brand, colour & typography. They are not being done in isolation from any usability or interaction design though – in fact, the same designer can be working on both the lo fi and

Design Comps.

The Design Comps should be completed and signed off early in this stage. They should represent a cross–section of the site and form the basis of the unique templates that need to be produced.

The lo fi prototype now needs to be scaled up to a full production model. This is where it’s important that the iterative development of the prototype stays as close as possible to the Design Comp process. The last thing you need, so late in the day, is a huge gulf between the visuals the client has signed off and the prototype you’ve produced internally. That very problem – which happens a lot – is a symptom of there not being enough collaboration. Designers need to work alongside as many disciplines in the process as possible, particularly project managers, account executives, writers and – most importantly – developers. Design and development should happen at the same time following the Ideas Phase. All the pieces are in place for each discipline to pick up and run with.

Site Maps
Now you know what the content is, you can start to organise the information into sections and/or pages. The aim is to create a diagram of the pages that will be used to structure the interface. This is known as a site map and it will show how those pages are grouped together. 

Wire frames

A wireframe is a simple sketch of the key information that needs to go on each page of an
interface. It show the hierachy of information and how much space it will require. By creating a wirefame you can ensure that all of the information that needs to be on a page is included. It should focus on what information needs to be on each page and creates a visual hierachy to indicate order of importance.

Wireframes create the structure for the design phase, they inform what and where the information should be before designing how it looks. They ensure all the functions and information are included before the design phase begins.

OUGD504 - Design for Screen - User Experience Considerations

The main consideration when designing for screen is user experience as the centre point for design focus. 

As with the traditional process, the designer or creative team should conduct research. For a web project this could include the following:

Page Impressions – a request to load a single page of an internet site. eg. 1000 x each page has been clicked on (100 unique users clicking backwards and forwards)

Unique Users – the number of individual users to a site over a defined period, often a month eg. 100 different users a day. Look at peak times of websites being visited - use it as a problem or a strength. 

User Flows – a diagram showing a user’s journey, used to show most likely user experience. eg. Shows their journey to a website and how they engage with it while they're on it. There are websites you can use to access this information. 

Personas – Fictitious characters that are created to represent the different user types within a targeted demographic that might use a site or product. Think about how they would use your website. Put yourself in their shoes to test it in different ways. 

Use Cases – a description of a system’s behaviour as it responds to a request that originates from outside of that system.

One–on–One –person to person interviews - specific questions asked by the interviewer to gain a specific understanding of the interviewee’s behaviour/thoughts associated with a service or product.

Focus Groups – a form of qualitative research in which a group of people are asked their thoughts on a product, service, or concept.

SWOT Analysis – a strategic planning tool used to evaluate the Strengths, Weaknesses, Opportunities, and Threats involved in a project.

Questionnaires – a research instrument consisting of a series of questions and other prompts for the purpose of gathering information from respondents.

Market Segmentation – groups of peoples or organisations sharing one or more characteristic that causes them to have similar product needs. E.g. location, age, gender, or socioeconomic status.

Every user interface should be designed for a specific target audience - not for yourself or the client. For this reason it is imperative you understand who your target audience is.

Individuals:

What is the age range? 

My age range is students typically between the ages of 18 - 26

Will your interface appeal more to men or women?

Equally male and female students. Has to be gender neutral. 

Is you interface specific to a country?

Yes, England

Are the target audience based in urban or rural areas?

Urban areas, big cities such as Leeds and Manchester

What is the average income of the target audience?

Students loans, part time jobs, no real income. 

What is their occupation?

Students

How often do they use interfaces?

Daily, possibly even hourly. 

What devices do they use?

Mobile phones, laptops, ipads, self service machines. 

COMPANY:

What is the size of the company?

National, StuRents spans across the whole of England. 

Will users be using the site for themselves or for someone else?

For themselves and their housemates. 

Invent some fictional visitors from your typical target audience. They can and should

influence your design decisions:

Kate, 20, Second Year History student at Leeds University. Looking for a house in Hyde Park to share with 6 other girls. Wanting to find a house on a specific road to be close to her other group of friends, with all equal sized double bedrooms. 

Adam, 18, First year student moving out of halls. Wanting to find a house share as didn't make any close friends in first year. Has to be less than £90 a week, doesn't mind location as long as its less than a 20 minute walk form Leeds Beckett University. 

Louise, Erasmus Student from Canada, Needs to find a room for second term for around £80 a week. Preferably all girl house. 

Why

Why are/would users visit your interface. What is the specific reason the target audience would engage with your interface. Motivations:

Looking for a house to rent, room to let, place to live for a single term. Spending time on the website is an essential to find a house for the following year. 

Goals:

Users are looking for a specific house to rent / request a viewing on. 

The information is time sensitive so could change as more houses come on the website. However push notifications would alert tenants to different houses that become available. 

Users need specific information about the house / letting service to help them decide whether or not to rent it eg. Price a week, number of bedrooms, location, Reviews of landlord. 

What are the most important features of what you are offering?

Modern, fun and engaging interface. Different to its competitors. Offers a clutter free way of searching for specific properties. Push notifications available so yo don't have to keep checking for new houses. They come to you. 

Users can engage through laptop and mobile devices, and can engage as much or as little as they like. 

OUGD504 - Design for Screen - 3 Solutions

Problem: The pressure of moving out of halls and looking for a new house after first year can be a daunting and stressful experience for a lot of students. Groups of friends either rush in too soon to get a good house, then realise they don't want to live with that group of people, or put it off until last minute and end up paying considerably more. Finding the perfect student house can be a long and tedious process and is mostly down to of luck.

Range of different distinct ideas to solve the problem:

1) An app that makes finding student housing easy, fun and simple where everything is in one place, and easy to use. 

Either search for a specific house using the filters on the landing page, being as specific or vague as you want and then scroll through every house available matching your search criteria, from all different letting agencies.

Students could take a picture of a house on the street and the details outlining the house's availability, rent, tenants, number of bedrooms, letting agents, reviews and landlords would appear. Then it would give you the option of booking a viewing or looking at similar houses available nearby. Similarly to how taking a picture of a barcode outlines a products nutritional information and brand etc. 

2) A website similar to rightmove and StuRents that uses a more simplistic, modern interface, making searching for student housing easier, stress free, more engaging and more fun. 

3) An interactive interface in a letting agents that speeds up the process of finding a house, by selecting the features you want before going on viewings and wasting time looking at houses you don't actually like or want to look round, simultaneously saving the estate agents time as well. 

The results from the surveys and focus groups indicated that most problems students encountered when looking for student housing would not be resolved through the design of an App of interactive letting agents screen.  The most relevant and useful design solution would be a website. This also resonated with the fact that over 97% of all the students I asked said they used a desktop to look for student housing as it had a bigger screen, felt more trustworthy and was faster. 

OUGD504 - Design for Screen - Coding

Different languages of coding: 

What you see:

HTML - Hyper Text Markup Language
CSS - Cascading Style Sheets

The functionality / How things work:

Java - Android Language
Java Scrips - Advanced effects and added interactivity 

Server languages that communicates between a webpage and a server. If you were designing a website like sos you would need developers who know how to use: 

SQL (sequel)- Database language 
PHP - Sever Based language 

iOS - Apple language
Ruby - Twitter 

The iphone replaced flash and action script - massive shift in programmes, no one uses action script anymore. 

Designing for screen involves designing for browsers such as google chrome, firefox, safari, internet explorer and opera on devices such as Desktop Computers, laptops, tablets, mobile phones and televisions. 

Designers must take into consideration the screen proportions and orientations of devices and create responsive screen designs. eg:

Burger button: Drop down menu / list of different buttons - good for mobile phone devices.

Row of buttons at the top of the laptop screen. 

72 ppi is the default resolution of the size of file due to the speed of the internet that the user is accessing the page through. Users give a website 2 seconds to load or leave. 

Accessibility for all 

Text on the internet has to be actual text and not an image as it needs to be able to be read out by screen readers for users with visual impairments. This is the law. Photographs also need tabs to describe what is in the image. 

Have to find royalty free typefaces that can be distributed for free on screen. As typefaces can be downloaded for free and are accessible to everyone who visits the website. 

HTML

Works with open and closed tabs: <home> open </home> close

HOW TO MAKE THE EASIEST WEBSITE IN THE WORLD

WYSIWYG - what you see is what you get

<html>            - tells the browser what language you're speaking in 
   <head>        - this isn't visual in the design, can be used for added functionality
       <title>       
       ASOS
       </title>
   </head>
           <body>
           20% off for students!
           </body>
</html> 

This file has to be saved as index.html so it's accessible across the world. If it is not saved as this it will not open the page. 

Codecademy.com - good resource for helping you learn code 

2 Books to learn code - 

OUGD504 - Design for screen - Brief and Deliverables

BA (Hons) Graphic Design

Design for Screen 

Module ID:	OUGD504	Module Brief:
Module Leader:	Simon Harrison	Module Deadline:	10/01/17
Brief Deadline:		Outcomes Assessed:	N/A
Studio (Task) Deadline:	29/09/16

Problem

The pressure of moving out of halls and looking for a new house after first year can
be a daunting and stressful experience for a lot of students. Groups of friends either rush
in too soon to get a good house, then realise they don't want to live with that group of people, or put it off until last minute and end up paying considerably more. Finding the perfect student house can be a long and tedious process and is mostly down to of luck.

Objectives/Aims

• Create a service that makes finding student housing easy and fun 
• Show the status of every student house in the area and its availability 
• Receive notifications when a house matching your criteria becomes available
• Search specific requirements such as ‘distance from uni’ or ‘open plan’ living area etc. 

Target Audience

University students, Erasmus students and foreign exchange students between the ages of 18-25 focusing on Leeds with the potential to be expanded into other cities.

Requirements

Modern, engaging and easy to use. Appealing to this age bracket. 

Deliverables

Detailed wireframes/prototypes and mockups

Where possible working/animated/navigable 

Resources

Unipol, StuRents and other student housing websites.

OUGD504 - Design for Screen - Research into student housing and comparison websites

I did research into pre existing student housing websites to see what worked well and what needed changing.

Weaknesses of other student housing websites: 

• Garish and clashing colours
• Dated
• Everything on different websites
• Cluttered
• Hard to search filters quickly 

Strengths of other student housing websites:

• Sliders for price 
• Filters in one line 
• Minimal text and images
• Star Ratings on properties / landlords 
• Ability to select single rooms aswell as number of bedrooms 
• Semester Lets available 
• Tells you how many houses are still available on the website
• Flicking through pictures using arrows without having to view the house on a separate page. 

Examples of the landing pages for some students letting agents in leeds: 

Some of the websites are not as bad as others however none of them are particularly sleek or modern. A good landing page should include filters as the main focus so users can get on with their search straight away. Keeping the search for a house fun, engaging and exciting.

One of the better examples. Contains filters on the first page and a quick search option for number of bedrooms. Some of the filter options are confusing such as price per calendar month. This applies more to young professionals than students who would look for price per week per student eg. £80 a week. This layout is more neutral and less cluttered creating a more efficient and engaging look. 

Glaring and clashing colours, filters spread out in an overly complicated layout. Strange floral border, not modern. too many links and buttons dotted about. Can't get straight into the search. 

Awful colour scheme, use of map is very helpful and a good feature. The filters need some work. Thumbnails are less cluttered than other websites. Lots of different letting agents in on place which is helpful. Option to add friends into group to share houses and option to shortlist findings into one space rather than bookmarking lots of tabs. 

Lots of different filters and navigation options, overly complicated layout. unnatracitve colour scheme, not very modern. 

Awful landing page, very cluttered, complicated and dated. 

Modern landing page but extremely feminine. Easy to navigate with good positioning of filters. 

More modern and gender neutral colours. Restricted search options focussing on number of bedrooms as priority for the search.  

Muted colour scheme with a cluttered layout and too much information on the first page. Only filter option is number of bedrooms. 

Option for advanced search, quick search and saved search options which is useful for viewing new properties which meet your criteria. Use of illustration rather than images creates a 'younger' look but isn't particularly sleek or modern. Limited colour palette is more effective.

Search filters in one clear, uncluttered space. Gender Neutral colour palette. Easy to navigate. 

Engaging colour palette, easy to use filters, helpful, easy to navigate. 

My concept is similar to the way in which Rightmove students works as it has all the houses from the different letting agents in one place however it would be more modern, engaging and accessible from a number of different platforms. The filters would also be more specific and it would contain options for erasmus students / people only looking to rent for a certain amount of time etc. 

Through my research I found that 'StuRents' did the most similar approach to my idea in displaying a number of different letting agents on one site, making it easy to view all the other houses available in a concentrated area. 

Looking at other comparing websites I researched the elements such as layout, colour scheme and usability to see what worked well and looked effective. 

Trainline and sky scanner use gender neutral and calming colour palettes with a focus on a large engaging background image. The filters are east to change and select and you can't move onto the next stage without selecting the filters you desire. Their layouts are uncluttered, calm and engaging.