OUGD504: Design for Screen Evaluation

I do not feel I have fully achieved my potential for this brief, due to the time restrictions I placed upon myself by poor time management. When I started getting into designing the initial browser and icons, I had a real drive to research more into the field, helped by the CSS book as my guide. As this is the only module for exclusive screen-based design, I feel this brief has given me the right insight into what to do, and the design process to follow.

The overall outcome is nowhere near as successful as it could of been. The design quality and finish does not accurately represent ‘speed’, nor does it have the professional finish I was striving for. The colour considerations have not been implemented as well as they could have been, with ‘Green for Go’ and ‘Grey for Quality’ being the suggestive undertone, this has not been transpired to the final outcome, which is definitely something I would alter in the future. The menu has not been executed to fulfil the idea of quick, on-the-go browsing. This design could have been altered functionally and aesthetically to further meet the needs of the user, rather than the target audience as a whole. 

Looking back, I placed quantity over quality, where really I should of focused on making the browser optimised for mobile use, rather than trying to make the same basic design stretch over two platforms. I took this route for the brief (despite being pushed for time), as I wanted to challenge myself and gain a broader understanding of designing for screen as well as feedback prompting the brief in that direction. Online research was quite conflicting, so the UX & CSS Book proved useful once again in affirming actual pixel sizes.

Animation is definitely not my strength, so for time reasons I prioritised a fully working prototype over the finishing touches and video quality. I found using After Effects an interesting experience due to its vast potential, if I had budgeted time more effectively this is definitely a production method I would of explored, especially to get the quality details of moving type (as if the user was filling in the Filters), as well as it being shown on a Smartphone. 

The transitions between each page are meant to be effortless and progressive, always either a subtle push left (for backwards progression) or push right (for forwards progression). By incorporating subtle touches to transitions, the user experience makes them feel like they are getting somewhere in their hunt for a home. Never the less, the transitions need to be sharp and speedy, so not to hinder the pace of viewing and further push the idea of ‘fast’. 

When creating a prototype of the browser, it was a lot of trail and error after following the Adobe XD Tutorial. I have never tried doing anything like this before, so it was hard to get my head around where everything connected to- and to make sure the menu was fully functional on all pages. I struggled remembering to double end connect some pages, as well as incorporating an animated visual for going backwards with the swipe motion. 

OUGD504: Browser Developments

Creating visuals from the wireframes has been quite straight forward as everything was pre-planned. I  kept a minimal colour scheme, incorporating photography, subtle gradients and icons. As I am quite indecisive when it comes to implementing colour, I decided to maintain a relatively monotone pallet for now, with the intention of incorporating more greens when the basic structure is down and functional.

As I will be designing for web browsing, the interface needs to be universally adaptable and transportable from screen size to screen size.


Developing fluid sections //

Do not feel these suggest 'fast'. In addition, the overlay type detail negates from the quality of the images, not adding to them. Often people will take more on board from the image of a property than the words and description alongside it, this means that the photo should take priority, and perhaps a hover over animated feature, to tell the user where it is etc.

I have prioritised iPhone browsing, at 1334x750 to increase the usabiliity of the browser for people searching on the go.

Revised Wireframes

Landing page and Dropdown Menu

Search Results and Advanced Search

Recently Viewed and Favourites

- Same kind of flow to promote consistency, yet different enough so not to get confused by the two

Me page and Best of the Week. 

Property Page - 

The property page contains all of the relevant information, as well as links to the relevant supplier.

3 Different drop down menu options. I felt the need of a large button is imperative, so when on the go you are not getting stressed out by having to tap on tiny little buttons. By allowing a larger surface area, more pixels per page are being covered, giving a larger surface area for you to tap, taking the physical act of browsing to a larger, free'er space, rather than tight and confined. Also three different ways of implementing the colour scheme. The green was just something I was playing around with, which was not featured in the previous Hexadecimal Code pallet, but rather an adaptation of. These vividity of green was far too much, going back towards the childish websites aimed at students, rather than a quality service/aimed at both students and young professionals a-like.

Landing page with simplified Global Masthead. I decided to remove the 'Me' icon and replace it with a section on the dropdown menu.

Dropdown menu in #B5E5C6, featuring large buttons and free hanging feature. I opted for the more muted turquoise (over green), so not to look gaudy and overtly 'student'. When the website takes you to alternative pages, the remainder of the menu compresses, placing all of the emphasis and decision making on these few options. In addition, by compressing the navigational options the viewer can see everything on that one page, removing the need to zoom or scroll.

Instead of incorporating a back button or home icon on every page, the logotype 'HomeFind' also acts as a home button, and the 'Me' acts as a personalised homepage breaking down your requirements, with clear links to lateral sites customisable. When going backwards on pages, swipe the screen left to go back to the previous page at any point. Alternatively, use the menu to navigate around the page, or return to the landing page.  

Once you have entered your location, move in date and max budget, you will be taken to this page, with the need to scroll. To increase interactivity with the website, the user can hover over any of the images to bring up the address, alternatively tap on the icon to be taken to its personal page. If you are wanting something ultra specific, wether in area or facilities, the user can alter and filter the search criteria to better match their needs. 

By tapping 'show all on map', the properties will be listed as housing icons, colour coordinated with the letting agents main brand colour. This will allow the viewer to zoom and see what properties are the best location or more convenient for them. This also lets the viewer visually see what local amenities are in the area, as well as public transport links. 

 

Filter Search Criteria

This gives just as many options as on the web browser, condensed to a smaller format. Alternative shades of #585454 and #333333 to increase readability at a glance, as well as separating and giving a difference to each row of criteria. To select any of the criteria, all the user needs to do is TAP, and it will illuminate subtly and the toggle switch on the left will turn from Grey to White.

  

 Property Pages

When the dropdown menu is activated on any page containing busy information, so not to overpower the viewer the background opacity gets reduced to 70% maximise colour balance of the drop down.

Recently Viewed

I opted for a slightly more personal style here, incorporating Orator STD once more to show the most important information- where it is/what it's called and how much?. After spending the past month frantically house hunting myself, these are definitely the two main things the user will be considering in a hurry. To give a sleeker quality to the overall display, I extended the use of Monochrome rather than greens to suggest a higher quality approach, possibly more eye catching to the young professionals looking for something a bit more special. The user can scroll over the information to bring up what it includes (icons etc), or tap to be taken to the property page. Here, the user can also access their favourites (via the golden star), or filter their recently viewed properties by cost or popularity. When you're viewing properties, you see so many its easy to forget which ones you wanted to take further and which ones you didn't. By having a 'most viewed' filter, you will know which ones have your interest as they will be in order- most viewed by you at the top, least views (or 0 views) at the bottom.

The images are clear and fit slightly smaller than a full screen view, giving a clarity and room to breath to the viewer. I opted for this larger layout than a smaller, perhaps icon based layout, for the effectiveness at small screen. The viewer needs to see all the information clearly, not be zooming around whilst walking or scrolling past things because little information is given.

Favourited Properties & Best of The Week

Continuing from the layout of 'Recently Viewed', large image icons are provided with personalised text overlaid. When the user favourites a property, they will be given the option to re-name it to something more memorable. This personalised name is what will feature in your favourites, as well as an option to edit the property further, contact agents/share on social media, and view a full cost breakdown. Favourites are accessible through 'Recently Viewed' or through the 'Me' page. Looking back, it would of been a good idea to incorporate a favourites function on the Landing page, or even incorporate it on the dropdown menu.

Best of the week searches letting agencies all over the country, to bring you the top deals. Without that being said, it is questionable wether the viewer will fully understand what this function is for. Looking back, this should of been incorporated as a tagline/subheading rather than keeping the aesthetic minimal and simple. A map function is used to quickly and clearly show where properties are located, as well as the density of each cities rentals. I have only focused on selective area's for now, yet if the website was fully up and running, it would feature housing points all over the country. The user can further filter down these deals, so only feature content within their filtered requirements. 

 

Me Page

Me is a quick and easy tool to breakdown all of your search criteria, see your favourites, a full map view, cost breakdown and easy access to contact letting agents. If you are letting a room, this would also feature here as well. The envelope in the top right hand corner is a shortcut to your HausFind emails, as well as the phone being a shortcut to your contacts. Contacts include letting agents, any private landlords you have registered interest with, Haus Find's customer service information and even the contact information of your future housemates (if applicable).

To personalise the page, you have the option to upload a photo and accurately save all your criteria to be re-used in the future. 

 Map View / Cost Breakdown

When you want to see all of the properties together in one go, tap on 'Map View' and a exact location map of the area will appear. This will show you where all the properties are in relation to each other,  local amenities and the city centres. Using two fingers to zoom, the user can get a closer look of the map, facilities near by and see shops/takeaway/bar icons start to appear. Furthermore, by tapping on any home icon, the information of that page will flash up on this page, where you have the opportunity to go through to the full property page, save to your personal Google Maps or Favourite for later. The colours of each icon are derived from their Agents brand colours. If no letting agent colours are available, or it is a private landlord, the icon will remain black for legibility. 

The use of the large magnifying glass can be picked up and moved acting as a proper magnifying glass, when the user is on a desktop with a mouse. Alternatively, when double tapped (on any device), the user can use this tool as a 'Search' bar, acting the same as the quick search feature on the landing page.

The cost per week breakdown is shown here as a Pie chart, yet can be altered to whatever view the user is most comfortable with. The total cost per month (or p/week) is calculated from a total breakdown of costs (week or month view can be altered in 'Me' filters)- similarly to comparison sites such as comparethemarket.com. The total cost is worked out by Rent + Additional Bills (Approximate running costs) + Deposit + Admin Fee's ÷ Length of tenancy = TOTAL cost P/M. This figure will most likely be slightly larger at first than it will be in real life, and when you further go into the Cost Breakdown, the user has the option to add/remove things, such as TV Licenses, Council Tax and payment schedules. 

See a full working prototype at: 

https://vimeo.com/199704966

OUGD504: Branding, Colours & Type

Initial branding concept

HausFind

I have been working with HausFind as a piliminary logo concept, allowing a standard uniformity and positioning, so eventually the layout can work with any logo.'Find' is a key word associated with most home-searching tools. 'Find' suggests active seeking- something the user is participating in. Haus or 'House' has been abbreviated and turned German. Whilst appealing to younger popular culture due to the uprise of german techno, it also suggests German efficiency. In turn, this suggests the site will be quick, efficient and run smoothly (much like a well considered production line). This fills some of the aims I set myself for undertaking this brief, such as negating stress and improving simplicity through User Experience.

Alternative brand ideas

As I don't just want to copy a pre-existing website, the creation of a new name and identity is essential to fulfil the criteria of the problem at hand.

Hexidecimal Colours

Hexadecimal colours are a way of collating the RGB Colour system, making a unique colour code with the intention of screen based use. A Hexadecimal code is similar to the Pantone reference guide, giving an allocated  # rather than 'P'... It is not uncommon information that different colours have the potential to effect us in many ways. Visual Stress is a key aspect to modern day living, perpetuated by screen's, so trying to maintain stress-free browsing on ANY screen, regardless of User and screen-brightness is imperative. My initial reactions are that a soft colour palette is needed, to make the interface accessible to everyone a balanced colour pallet is needed. In addition to block colours, gradients and overlaid opacities, incorporating photography which complies to the same colour structure can aid mood, tone and emotion just as much.

Red

Red shades tend to trigger your stress response, making you more anxious, while lighter shades calm you down. A strong red (such as Just Eat), can make the user feel pressured and in a rush- an emotive quality I do not want to perpetuate through my design.

Blue

Blue is currently the most popular colour on the internet, possibly due to its calming effects. "Peaceful, calm and gentle, blue has tremendous power to manage stress. It's a very soothing color that helps calm your mind, slow down your heart rate, lower your blood pressure and reduce anxiety. Blue is believed to have a cooling and astringent effect. When choosing the right shade of blue, it's best advised to go for a soft and neutral shade for a calming effect."

Yellow

The yellow wavelength is relatively long and essentially stimulating. In this case the stimulus is emotional, therefore yellow is the strongest colour, psychologically. The right yellow will lift our spirits and our self-esteem; it is the colour of confidence and optimism. Too much of it, or the wrong tone in relation to the other tones in a colour scheme, can cause self-esteem to plummet, giving rise to fear and anxiety. Our "yellow streak" can surface.

Green

Being in the centre of the spectrum, Green is the colour of balance. The world about us contains plenty of green, so this indicates the presence of life, meaning we are reassured by green on a primitive level. The correct shade of green must be used, or else it can look tacky and cheap, alternatively being perceived as too bland.

Purple 

Purple or is known for luxury, with its history stemming from the bourjoise. It has Spiritual connections, suggesting, truth, awareness, containment, vision, luxury, authenticity and quality. However, the wrong shade of purple gas been linked to suggested Introversion, decadence, suppression and inferiority. A lighter 'violet' shade encourages deep contemplation.

Orange

Since it is a combination of red and yellow, orange is stimulating and reaction to it is a combination of the physical and the emotional. It focuses our minds on issues of physical comfort - food, warmth, shelter etc. - and sensuality. It is a 'fun' colour. Negatively, it might focus on the exact opposite - deprivation. This is particularly likely when warm orange is used with black. Equally, too much orange suggests frivolity and a lack of serious intellectual values.


Mono tones and base tones

Grey 

Grey is the only colour that has no direct psychological properties. It has the ability to mute a mage, image or cast shadow on information. As shades of grey differ, so does the emotive qualities it possesses. However, grey has been noted as quite suppressive. 

A complete absence of colour is depressing and suggests the world is turning grey (gloomy and unimaginative). As a reader are instinctively conditioned to draw in and prepare for hibernation. In addition, grey has a dampening effect on other colours used with it so shade must be selected appropriately. 

Black

My favourite colour and a Key in everyday browsing. Despite blue taking the top spot of most used colours for screen, shades of black and grey work in harmony to present clear information on almost any background. Black is essentially an absence of light, since no wavelengths are reflected and it can, therefore be menacing as it absorbs all the energy coming towards you. Black does not draw attention to itself, yet oozes subtle sophistication; it communicates absolute clarity. It communicates sophistication and uncompromising excellence and it works particularly well with white, yet colour combinations such as black and yellow can trigger other emotions, such as panic (as used for Warning tape & signs etc). 

White

Just as black is total absorption, so white is total reflection. It suggests, freedom, space on the page and essentially reflects the full force of the spectrum into our eyes. White is purity and, like black, uncompromising. It is clean, hygienic, and sterile, yet too much white (especially when contrasted with a vivid colour) can make them feel very garish.


Advice on colours for screen

In short, the best colours are the ones that suit the subject and your intended audience, and coordinate with each other optically and psychologically to enhance your meaning. Contrast is a minor point. So long as the page is readable, you have a lot more complex issues to deal with.

Exploring Colours

Blue, known for it's soothing nature is the most popular colour on screen. A vivid blue (e.g. rgb, 0, 0, 225) strains the eyes and makes the design look unconsidered. This is the standard hexidecimal code for unaltered URL Links, and often paired with Ariel typeface. My colour selection of blue features more muted tones to contrast this. Soft sky blues are implemented, still vary in tone and shade but ultimately effecting the brain differently. Green hue's are also introduced to, making more of a turquoise than a vivid blue. By fusing the connotations of blue and green together, we are presented by a soothing mixture, which even has hints towards the sea and beaches. By introducing this subliminal reference, the viewers subconscious may feel more relaxed and excited, suggesting a fresh change or break is coming.

Despite the brief's intentions to place emphasis on speed, this does not mean negating quality. As the majority of properties  available immediately or for one person only, the quality and photography of such is very often 'less-than'. Because of this, users may feel disheartened that they are about to move into a dump, so they need to be reassured in other ways that is not the case (even if it is). Purples suggestion to quality, vision and truth hints to the viewer that 'it can't be that bad'. By using muted shades, experimenting with rosier and flatter shades, and not opting for too pink tones, a gender neutrality is still present as no higher inference is placed on femininity.

Green earthy tones to suggest 'fresh'- a fresh world, the outdoors or a fresh start. I opted for a wider scope of greens to avoid copying other letting agents who are known for their distinct green. Unipol, some smaller local agents and even design focused interfaces such as Spotify use a vivid green, standing out with an authority and clarity unrivalled. By adjusting this colour mix, adding additional yellow and muted hue's, the premise has been altered but the psychological effects are still positively there. As I am unsure about including a blue-blue, further experiments with shades turquoise are present.

Understanding the competitors

Current housing websites and letting agents, often go for a 5 colour system. This may include two of the same colour in different hues or shades. It is very rare to see more than 6+ hues or shades used, and even rarer to see 6 or more individual colours. However, these rules do not apply for comparison websites. As I do not want the aesthetic to just say 'the same as every other house hunting site', it also needs to say 'comparison site'. 

The main typeface featuring throughout Housing websites and Comparison websites is Helvetica, with DIN coming a slow second. Containing different weights and a extremely legible San-Serif structure, both fonts communicate clearly information at small or large pt sizes, meaning a good result Pixels per centimetre on screen. However, the uniform nature Helvetica brings can become tiresome after a while, especially with everybody using it. Alternative typefaces for subtitles allow a personalisation and character to be brought forward, with a variation of DIN or Helvetica Bold being the top choice amongst competitors so far.

By looking into the competitors, I know what conventions to roughly work with, making the outcome of the interface as professionally looking as possible. I am not as proficient on Illustrator or Adobe XD/After Effects, the design qualities need to be up to standard to hand over to the developer to give them a proper understanding of what needs to be done.

Exploring Fonts

DIN is a German typeface, used for European number plates. The connection with german efficiency and europe convey the right messages, of 'a holiday' and speed. A thicker stroke width is featured with the Pro Bold version, which could be either used for body copy or subheadings. It is quite mechanical in structure, with a rigid San-Serif and low x-height. Due to the overall legibility and uncomplicated design, it has become popular for general purpose use in signage and display adaptations. 

30640 still remains to the same x-height and rigid structure as Pro Bold and 1451, yet takes more of an influence from Futura. This variation of DIN incorporates a curvature in the letterforms, which has the ability to give either a retro or extremely modern feel to the overall design, depending on Kerning/Leading etc. The incorporation of tall and thin numeric counters are clear, legible and proportional in structure. The thicker stroke may be more useful for determining the hirachy of information, by use in Subheadings or stating the price.

The type manifesto for Avenier states it proportional geometric sans-serif typeface, now a subsidiary of Monotype Corporation. Apple iOS uses Avenir for some of their map functions, as well as in the latest iOS 6 update. Influenced by simplicity and other early geometric San-Serif typefaces, Frutiger states he intended the slightly bolder variations (such as Bold or Next) are more transferable. Eg: white-on-black text would look the same to a viewer as black-on-white, this is important when considering the global masthead or colour schemes within my own website.

Shree Devangri 714 and Helvetica Neue are very similar in structure and overall appearance. Both being a light weighted San-Serif, legibility is clear and preservable at all scales. Shree however has a thicker width to the overall individual letter forms, meaning they are more naturally spaced on the page compared to Helvetica. This is important as the Kerning of Helvetica Neue would need to be adjusted, which could become a time consuming activity if the web-page information is changed around frequently. From a developers perspective, it may be easier to use a revised solution, such a wider set type to illuminate constant kerning. Alternatively, as Helvetica and Helvetica Neue is one of the most popular and most used typefaces on the web, for any reason if the server cannot download 'Shree', Helvetica may be within their pre-saved web font collection so it would download automatically. 

In previous design notes I considered the incorporation of a 'holiday' aspect, putting an excitement on the prospect of moving away quickly, rather than a sad looming corporate presence. As the target audience are predominantly younger (18-31), a acceptance of artistic or alternative design is more readily accepted. A typewriter aesthetic is created by the strict line aspect to the serif, which may suggest an informality. I'm not convinced that this is the most appropriate type solution as it neither says 'holiday' and 'escapism', more 'nostalgia' or 'untrustworthy', as often typewriters are related to postmodern ransom note designs, or old fashioned letters.

Taking further inspiration from the mechanical structure of DIN, Orator Std incorporates slight rigid serifs into its San-Serif design. A taller x-height with a narrower width is more effective with wider kerning, often referencing the typeface used for coding. This subtle reference may add an aspect of reliability and technological proficiency to the website, instilling a trust that they are comparing all sources and searching every avenues. This style of typeface is also often related to the slender type we associate with journey flip-signs, giving a sense of excitement through its 'otherness'. The letter structure may be slightly illegible at a distance or a small pt size, so this would be best used for subheadings or numeric information. 

Final Brand Considerations


Final Logo

<vectorizations>

Final Colour Scheme

A muted selection of grey-pigmented tones. The fusion of purple, green and blue bring a calming quality, also suggesting luxury and 'freshness'. By introducing this subliminal reference, the viewers subconscious may feel more relaxed and like a fresh break is coming. All shades are naturally muted to avoid the garish mish-mashed qualities of the competitors. In additional research of websites, the user naturally felt like they had entered a more official and considered place on the web. Much like you would walk into a clothes shop and make a judgement about the shop's aesthetics, the same initial aspect is present online. To avoid a garish, tasteless aesthetic, a small pallet is used of complementing colours has been created, allowing a professional uniformity but the ability to alter tones etc through a reduction in opacity.

Final Type Selections


Subheadings

Din Pro bold will be used for subheadings and titles. The thicker stroke width gives a distinction to the information, making it stand out on the screen. The rigid Germanic structure suggests speed and efficiency, two things I want the interface to represent.






Body copy

Universally legible and frequently used amongst iOS, Google Chrome and competitors. Light will be used for body copy, preserving the white space around it more, giving an open, airy feel. By using Helvetica, the interface should have a more trusted feeling from the user, as it is so globally known. 









Highlighted Information

Orator Std Medium for important information and numeric data. This brings a different style to the collection of San-Serifs, moving away from geometric standardisation and giving a slightly more exotic, experimental look. This should appeal to the younger target audience, whilst placing a hirachy on any information in Orator Std.