User Experience Design Seminar - Study Task 7

User Experience Design Seminar

User Experience can be considered within most user interaction products or services like websites, phones, and everyday items like hand dryers. 

"Experience" Not just "usability" 

"The role a product plays in a persons life" 

How does the product benefit the users everyday life, help aid everyday tasks.

Emotional satisfaction, users reaction of the product. 

Branding, identity of the company or organization that provides the product or service. Belief in the company through this is achieved through branding the company image. 

What is good user experience? 

More efficient it is at doing its job, time saving. 

Aesthetic, trend, fashion accessory. Influenced by a consumerist culture. 

Practicality. 

Simplicity, easy to use interactions. 

Interactivity.

Innovation. 

Personal to you, customizable and systems that fit your everyday life. 

iTunes & Windows media players.

iTunes is used even on windows operating system showing its acceptance of a default music player throughout the majority of society. 

Google chrome, safari, windows explorer. 

Google showing their popularity within all target markets of new media with there user friendly browser's with cross platform interactions between email, search engine, social media, cloud storage etc giving people instant access to the most important elements of there new media routines. 

Consider Garrets model of User Experience Design (UXD) to the function of my website concept. 

User Needs/Site objectives: 

To inform people on the history and aspect of Time attack and Drift while providing informative guides on how to get into the sport. Also a large body of media to be communicated in an easy to view way. 

Functional specifications/Content requirements:

Image and Video for content along with supporting informative text. Functional specifications, fitting to the target market I want to present a large body of images with short amounts of supporting text as the user is interested in viewing media not reading text so the use of text needs to be concise and easily communicated. 

Texts context are history based, informative language on what the sports are about, guides on how to get into the sport through explanatory language and use of image. 

Interaction Design/Information Architecture/Navigation Design:

Site map - Homepage > About Drift (History text, images), About Time Attack (History text, images), How to get into Time Attack (Guide, informative information, images), How to get into Drift (Guide, informative information, images), Media page (Videos and Image heavy)

Continuous scrolling page, long and thin page. 

Visual Design: 

Aesthetics: Bright colors with pastel tones. Bright to communicate typical connotations of racing. 

Simple, clean, structured layouts to present image media's clearly for the end user to receive in the simplest way. 

Interactivity within images, easy navigation of image libraries through click and selecting. 

UXD Methods 

User research:

Real life user research - goals of particular user groups, attitudes and behaviors while completing goals. 

Observations, questionnaires. 

Persona:

Documents that describe a user type based on research. Personas describe a specific person who acts as an exemplar of particular task. 

Photos - in action.

Key goals - do they have a specific task to complete quickly? 

Behaviors - what motivates them to use it? Feelings when using it? (Annoyed, frustrated), Do they have lots of spare time? What influences there choices? What puts them off?

"Must do's" and "Must nevers" 

Content strategy:

Based on user research, persona, documents as well as the overall brand/project strategies. What is the necessary content? Hierarchy? What content reflects brand identity? Use data? 

Task Models/Task Flows/User Journeys:

Example of thought process behind target audience and their interaction with there product/service. 

Wireframes 

Content

Structure

Architecture of the site/How it works

A/B Testing

Method of testing a validation of a system against the existing system. Good for rebranding and revitalizing websites and other medias. 

Persona for my website

To help me understand my target audience I created a persona to follow for the whole website concept to make it specifically targeted to my audience. 

Key goals:

Wants to browse racing & automotive images. 

Wants lots of images.

Enjoys looking at the engineering aspect in image formats.  

Has an interest in getting into racing and drifting. 

Wants familiarity to automotive aspects. 

Behaviors: 

Gets bored of text describing images would just rather view the image. 

Has little knowledge on engineering and wants to learn about it but gets bored with lots of confusing text. 

People who have knowledge on engineering get fed up of reading information they already know. 

Gets annoyed by long wait times and when they can't find the information/media they want. 

We must:

Be concise, precise and informative in language. Use minimal easily communicated text to get the message across in an easy to understand way to people who have no knowledge on the media they are viewing. Also avoids boring people who aren't interested/already know about the contextual side of the images presented to them.

Present images and information in a clear way. 

Easy navigational site system. 

Connote typical automotive and racing elements through color, type and aesthetics. 

Achieve instant recognition of automative and racing aspects through website concept and aesthetics.

Must not:

Cause confusion. 

Bore people. 

Have long load times. 

Task flow/User Flow for my website 

Basic idea of the user flow of my website, more of a casual browsing through the image strong content so they generally would just flick through the 5 sites loosely so a smooth navigation between these pages is important. 

Numiko Visit

Numiko Visit 

I enjoyed this talk a lot and took a lot from it, learning from one of last years graduates who has got a job with the company through past work placement has give me confidence in the transition from college to the creative industry. 

They're a Leeds based agency who specialize in digital & web design starting out 14 years ago with a main focus on animation work, 3D and flash work. 

Their first big break was with BBC in 2002 and have worked with huge organizations since and work on a lot of Broadcast work, Not-For-Profit (Charity), Government and Educational work. With the majority of big clients in London there doing extremely well. 

Main points I gathered from the talk

The talk helped me understand were web is going and the growing capabilities of it and potential influence it has over the creative industry. It seems to me like its going in quite a digital directions but when the concept allows print based media is still as alive as ever due to its tactile qualities and potential for more creative development in materials and process's. 

Iconography is an important aspect of web & digital design and the ideal icon image would communicate its intentions in the simplest way. 

Consider load times when creating websites for other devices, replace photograph elements with something more stripped down like vector line art. 

Use the target audience's psychology to influence the design process, let them have influence over the website aesthetic and concept through there feedback. A personal point I gained from this is that creating a customizable website that suits them would be a consideration but not sure how realistic this would be for THIS brief. 

Numiko Introduced me to responsive websites, websites that work across a range of devices with all elements of the site remaining consistent in proportion and layout. One aspect of this is the form of stacking, wich works well on narrow devices. Shown here in there design council website, it all narrows down and centralizes. 

Create a different grid system/screen size for each device to understand the guidelines to work within to create balance in the layouts and create fluid transformation between devices and different screen sizes. 

Consider the icons, images and typography when creating websites so the proportions remain fluid across all devices. 

To work across 2 devices a good starting point when creating websites is for every web page created create a grid system for all devices before moving onto the next web page. 

If something doesn't need to be there get rid of it, keep all elements on a page concise. Don't have any visuals that are not required. 

Understand the brand identity fully before creating a digital piece of design for them, consider the ethics, history, services, everything that make them up at current needs to be considered when producing work for them.

Grids on website design is ever important as it is for successful editorial and layout design to create balance and well communicated visuals and typography while also making an easy to navigate and use website. 

When designing a responsive site its good to start with the largest potential output most commonly a desktop screen before looking into how it works on smaller devices. 

When creating grids think about there use, a grid can be created for icon systems to keep them geometric, symmetrical and accurate as well as been used for typical layout design be it print based or digital based.

A grid can be created from commonly known grids and cannons or can be influenced by something more conceptually relevant. 

On the design for Europe project they:

Took the european flag.

Took a star from this flag.

Analyzed the angles and lines within this star and created a grid system from these that allowed them to create versatile shapes that they then included a combination of colors swatched from european countries flag to create abstract shapes that presented unity within nations. A very clever concept.

This same grid was then used to create the icons for the website.

Competition brief proposal informal crit

Competition brief proposal informal crit

Initial proposal 

I have looked at most of the design resources and have narrowed down to wanting to chose briefs from a definite 5 competition bodies due to the following opportunities that I can gain from them.

Royal Mint.

Penguin Design Awards.

YCN Awards.

D&AD 

RSA Student Design Awards

• Good external recognition from big creative companies.
• Recognized awards, trophies, and certificates. D&AD New blood and pencils & YCN Awards are recognized through creative industries.
• Potential work placement opportunities.
• Cash incentives. 
• Recognition within a large area of possible market areas to create design work for. 
• Ethical design work that takes considerations of social, economical and environmental work outcomes. 
• Lots of big companies like BBC visit these awards so potential employment from large companies would be a possibility. 
• Self achievement.
• Allow me to produce work that allow me to use my specialist practices (been able to pick briefs that allow these). Rather than been given briefs that don't allow me to explore my strengths. 

Chose 1 brief that I am going to focus most of my studio time within college, it should be the one that has the most beneficial rewards if I win. 

Chose 4 other briefs that will allow me to produce well considered and strong design work within the module's time frame, deadline days for these external briefs all need to be within the module deadline.

Definite Brief choice
Royal mint is a definite brief I am starting to look into, didn't realize the deadline is so soon but going to give a good go on it, mainly for the cash incentive and the sense of self achievement having something I made internationally distributed.

I had a look at some hints & tips on the competition to give me a little insight into what concepts and aesthetics they are looking for.

Symbolise Britain, I could do this through representations of:
Heritage & History 
British food, music, fashion, architecture, religion, engineering, trades, markets, royalty, nature/landscape, language, monuments. Past & Present. 

Make whatever concept I chose clear and concise and suited to a spread of target audiences and age ranges so 
it needs to be have an easily perceived appearance, nothing suggestive or vague. 

Gather other peoples feelings on Britain and get them to share what there most positive aspect of the country is gather old and young generation for a mix of opinions to combine together or present individualy into a visual output. 

What are my thoughts on Britain, what do I think makes it iconic. Present this in a visual. 

Think about how the aesthetics of the design will work with a 12 sided shape.

How it will work with the gold and silver materials.

Will the design bleed over the silver centre and gold outer ring or make use of both sections?

Think about use of symbols or emblems to fit with the common trend of presenting heraldic elements in the design. 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Crit feedback
Presenting the above proposal on what I had looked at and considering at the moment in the form of a very informal relaxed chat about everyones current intentions helped me think of a few more points to take forward. These thoughts came form feedback on my own proposal and points I took forward from others. 

Consider my specialist design areas a little more, think about what kind of work I want to produce. Areas I would like to work in are things like:
Branding.
Packaging.
Print based work. 
More conceptual work. 
Work that has cultural and social impact. 

Change the way people think about a product or service, alter common conceptions about these things maybe turn something quite bland with no appeal and put it into a much more positive light. 

Read and anaylse a brief and carry out the requirements to the fullest, but if you see more creative potential within the briefs extend them and produce more work to strengthen the brief outcome, offer these extended works to the client and if they don't want them they will always benefit my portfolio and grading outcomes. 

Think about positive political, cultural and social happenings and past events if I go forward with the royal mint competition, also think about how I can interact with 12 sides on these £1 coins like incorporating 12 points in with a visual variation of the London Underground map. (Create UK outline out of this maybe)

Cause shock and controversy in your work, maybe touch on past events that were quite negative and try put them in a positive light to again change the way people see things. 

Initial scamps for website & Crit feedback and progression plan

Initial scamps for website & Crit feedback and progression plan

Plan to work towards

After proposing a website idea forward regarding concept and content of the site in a previous crit I am taking forward the idea of a website based around Japanese Motorsport specifically informing the end user on the history and basic information on Drifting and Time attack with supporting pages providing in an informative guide on how to get into the two sports.

Supporting these informative aspects will be a media only page with a large range of the images I collected over the summer as my target audience is interested in heavy image content so a media specific page is the way forward. 

There will be 5 pages.

About Drifting (History, about the sport, images) Informative, Descriptive, Casual presentation of media and text)

About Time Attack (History, about the sport, images) (Informative, Descriptive, Casual presentation of media and text)

How to get into Time Attack (Clear, Concise, Instructional, Formal)

How to get into Drifting (Clear, Concise, Instructional, Formal)

Media (Images & Video) (Entertainment)

Grid Systems used
Deriving from the cannons and grid sessions as previously presented I brought in digitized versions of the grids I made in the session for me to work my scamps around to give me a structured system to work against for placing my text and image within the spacial areas of the web page.

I created a variation of the Van Da graaf by simply removing the double page spread aspect and creating a 2:3 ratio to work for for these initial scamps. It will work for basic rough versions but I need to do the next ratio for the grids around the common screen ratio of 16:9/16:10. 

I like the perfect proportions and positioning of the content offset to the top of the screen giving a nice sense of balance and focus on the desired presented content. 

A method of centralizing the grid guidelines through the de vina proportions coming from the golden ratio and golden section techniques we learnt. 

A modular grid, a Van Da Graaf variation with a modular grid, a column grid and a baseline and column grid inspired by Numiko's grid to work my scamps from. All ways of achieving structure within my positioning of content. 

Initial Scamps & Aims
I began by trying to figure out a number of unique methods of creating potential layouts with image heavy content in a structured, clear and interactive way where the end user can have a sense of control over what content they view as this is something thats lacking in other automotive websites as its just a large overwhelming mash of information presented in a garish and clashy way with no real organization.

So stripping it back and presenting image heavy content in a clear, simple, concise way with interactive elements will give a better user experience and more control over the site. 

Idea here was to have all the content on one page, a mash up of content but in a more structured way as opposed to other automotive sites that display it in a confusing and illegible way. 

The images would be framed by color boxes, when clicked would transition into a color box over the images displaying typography giving an interactive element to the site. 

Modular grid allowed a nice structure and interlocking of images and shapes that frame the images. 

Positive: Interactive, Refreshing aesthetic compared to typical automative sites, image heavy, high impact, structured.

Negative: Coding skills aren't great so working out how to do this idea would be a potential problem, slightly unfamiliar aesthetic and interaction to what the typical end user is used too so may cause initial bad first impressions, could be perceived as confusing. 

This concept was a little more conceptual, abstract and complex maybe a little too confusing for the end user. More suited to someone who appreciates design and art. The idea was to display the web page links in an abstract arrangement across the page.

2 options were available for the content page both with interactivity between the image libraries, an arrow navigation system on horizontal transitions (top right)

Or a smaller more abstract representation with the webpage name always been the centre point of the page with the interactive image system and typography positioned around this centre point (with navigation through circular icons links) (bottom left)

 

Modular grid made these abstract positioning of content balanced within the negative space rather than feeling lost within the space. 

Positive: Good use of space & nice abstract aesthetic, potential for good presentation of image content in large scale format, refreshing aesthetic compared to usual race or automotive sites. 

Negative: Abstract aesthetic and interaction system not relevant or familiar to target audience, again coding this idea I want to portray maybe difficult, image size may be too small to appreciate high detail images (bottom left)

Another abstract alignment with a series of full bleed images as the main background of the page with a number of abstract aligned color text boxes positioned around the page. These text boxes interact and change with the full bleed image that is selected at the time through a click anywhere navigation system. (Top scamp)

The bottom scamp is a more simplified minimal idea drawing central focus in through the grid I created with a continuous vertical cycle of images with fixed textual information giving a brief overview of the website positioned in the top left corner. Each image will have a transition option when you hover over an opaque color text box overlays the image giving brief pieces of information. 

The central vertical spine allowed a nice focus point for the eyes to taper into for the images while providing a nice spacial area for a long continuos scroll while leaving lots of negative space to place text within. No distractions just well presented images and brief textual information. 

 

Positive: Nice focus in on the centre of the screen providing a structured feel within a minimal and spacious layout presenting image with no distraction. Good for the target audience who is after image content with little textual content and refreshing compared to the visual clash typically seen in current racing/automotive sites. 

Negative: The above scamp with the alternating text box alignment over the full bleed image may end up hindering the viewing experience of the image, something I want to obviously avoid as the image content is the main focus of the site. 

These 3 websites followed a similar large scale image presentation based on a fixed page website deriving from  a column grid and Van Da Graaf inspired grid I created. 

These allow a good presentation of the image elements with easy to interact links for specific website pages with more content and information, my particular favorite is the top right for its interact element within the image library navigation clicking the circular icons to view different images. 

The top left is a little unrealistic as I have incorporated a scroll element to choose the images and Im sure this needs javascript coding wich is something we don't learn or really have time for but would be good for future experimentations. 

Modular grid allows a large image surface area and balanced out hyper links within the negative space, lots of fine tuning capabilities through these guidelines. 

Positive: Good presentation of large scale images satisfying end users purpose of viewing of the site, potentially easy to use interaction system's between the image selection, simple and structured layouts with minimal distractions allowing better focus on the images. 

Negative: Some aspects like the scrolling selection of the photos may not be achievable through my coding skill set, opacity text box over the image maybe seen as districting but this can't be ruled out until mockups with the physical images are made. 

This idea is simple enough in aesthetics but not sure about achievability with my coding ability's not been great due to it been new to me. 

The grid system I created allowed a focus within the central image and a guideline along the horizontal spine, good spacial balance is achieved through this golden ratio inspired grid layout so this minimal layout presents the images in a clear way which is good for the intended target audience.

The scrolling system cycles through the images horizontally zooming in on the central image which serves as a hyperlink for selecting that particular content page. 

 

Positive: Image only content giving a good first impression for the end user who is after lots of image content, nice interactive system of image selection. 

Negative: No support for these images explaining what content pages they can take me too, potential confusion of the end user thinking its just a continuous presentation of images with no further website content. As with the rest coding this cycle & zoom navigation of the image maybe a problem. 

These design scamps allowed me to use both the modular grid and column grid to allow more flexibility in the positioning of content on the page and a better organization and structure to the aesthetics and usability of the page for a better user experience.  

 

This was my favored scamp from these versatile scamps, although they look simplistic the consideration that went into the layouts gives a nice presentation of the content in an aesthetically pleasing and spacial balanced output. 

The Idea is for a single page website but on a horizontal scroll navigation, the homepage name will be at the bottom and the end user will able to scroll across to access more content giving an interactive user experience.

The interactive system is carried out even more through the navigation system between the images on each section, supporting text on the colored boxes gives short snappy snippets of information on imagery and the context of that particular section i.e. History of drifting. 

Positive: Good to have all the different pages content in one place giving a nice continuous flow of the browsing of the website which would be beneficial for the end user as they are more just casually browsing rather than been after specific information they just want to see a range of media with simple annotations. Nice sense of interaction and gives the end user a sense of control over what there viewing. 

Negative: The navigation of these images is achievable but the scrolling of the images through the homepage title may be difficult. 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Final Proposals 
I chose these 3 scamps to present forward in the crit for the variation between them in there interactivity systems and there aesthetic but the main concept been heavy image content with short snippets of informative and clear information as the end user is ideally wanting to see lots of images with only brief pieces of texts. 

I took forward this horizontal cycle and zoom scroll navigation for its clean and minimal initial presentation of image content giving the end user a positive first impressions as there intentions for the site was to view image content. The large amount of white space and central focus on the image is also refreshing for the end user as usual automotive websites are quite the opposite, usually just a mash up of busy images, color and texts creating a confusing eye sore. This idea is straight to the point. 

 

This clean presentation of structure is carried onto content pages with large images that take up the majority of the page, the grid used is the one deriving from the Van Da Graff for optimum positioning of the main body of content on the page creating a nice balance of space and pleasing aesthetic. 

The user then has short snippets of information presented on colored semi opaque text boxes for each image which they can cycle through with a simple to use navigation system of clicking circular icons to cycle through the library of images available. 

I like how the text box alters positioning to give that feeling of motion which is obviously relevant to automotive and racing inspired design outputs. 

Website navigation map

Took this idea forward for the final proposals due to the originality of it, it's a refreshing change to the usual automotive/racing websites with a more art & design inspired aesthetic but with the theme been "Japanese motorsport" this structured layout, interactivity and technical aesthetic can be a benefit to denote there innovation and technical engineering they portray in the cars they produce. 

The only problem here is my coding capabilities as Im not sure I can pull off the horizontal sliding element of the main content, the interactive images shouldn't be a problem though as they should just work as hyperlinks linked to the icons the user interacts with to click and change the image. 

 

Website navigation map

The final idea is something new I came up with taking bits and pieces from my initial rough scamps, its probably the most achievable in terms of my abilities of coding at the moment. The main page will consist of a preview of a number of images to give a first impression to the end user and a taster of the images and content available, these images will work on a vertical scroll with the links to the content pages and homepage header remaining fixed so these links can always be accessed for an easy navigation system.

The idea takes forward a previous mention of transitioning a shape or a full colored text box overlayed on the large scale images when the mouse is hovered over. The interactive images will be displayed on the content page and also share the same navigation system of clicking icons to cycle through the image library. 

 

Website navigation map

Plan I presented, Feedback and progression plan

I presented forward the idea of a Japanese motorsport website with an aim of been informative in some aspects while been also a resource for entertainment.

To do this informative language would be used but sparingly and in a concise and precise manner, so I don't bore the viewer as the typical end user who engages with these sites is after more media based content hence the proposal of a media only page with a large body of images and videos. 

Pages

5 pages would be presented -

About Time Attack 

About Drifting

How to get into Drifting

How to get into Time Attack

Media page. 

Feedback overall for all the scamps I presented was positive both for aesthetics, layout and content and upon discussion with a few peers I came to the conclusion I was been to ambitious in terms of the coding and interactive systems I had scamped out. The ideas were good just not very realistic with my skill set and time frame which I understand. 

The aspects that are realistic are the hover over elements and the interactive navigation system wich is based on clicking image icons so this will be the interaction systems I consider. 

Feedback from Danny suggested color was important to communicate to the intended audience, I suggested color choice of oranges and greens to give the end user a sense of familiarity from other automotive and race site that share these colors, although I would be using them in a more muted and toned down aesthetic as current racing websites are too bold and garish. 

To avoid this in your face garish asthetic I presented forward the stripped back and structured styles which communicated the content to the user in a concise and precise way and the use of negative space gave opportunity for images and snippets of text to breath and be appreciated. This was the most positively received proposal. 

Progression from here

Idea 3 is what I came to the conclusion was more realistic so I will begin developing more consider wire frames for this, proportioned sketches with all measurements and content worked out ready for placing into dreamweaver's coding system. 

Look into source codes of websites that share some of these suggested interaction systems (Hover over transition's, scrolling images with fixed links, interactive icon links to cycle through images) to help me learn how to emulate these interactions within my website. 

Look into color schemes to communicate racing, automotive elements and Japanese motorsport as a whole while keeping familiarity for the end user.

Begin editing and selecting the 500+ images I have as this is going to be difficult, edit them all appear consistent in there lighting, tonal ranges, highlights etc. 

Create a definite grid system to work too based on 16:9/10 ratio. 

Consider how videos will be input, use javascript or embed through youtube or vimeo to save hassle.