DP365 DESIGN OPTIONS: WEB DESIGN www.chloe-fong.com
Chloe Fong (12837126)
t
TABLE OF CONTENTS Introduction 01 Aims 02 The Method
03
Five Ws and H
04
DISCOVERY Questionnaires
07-08
Key Findings
09-10
Company Profiling
11-13
Key Findings
14
PLANNING Information Architecture
17-18
Card Sorting
19
Final Site Map
20
Sketchboarding 21 Wireframing 22-24 User Journey Mapping
25-26
DESIGN Branding 29 Logo Design Content Writing
30-31 32
Images 32
Evaluation Further Development
33
Reflection
34
“6% of all hiring managers are more impressed by a candidate’s personal website than any other personal branding tool—however, only 7% of job seekers actually have a personal website.” - Forbes Magazine (Smith, 2013)
INTRODUCTION In a saturated graduate job market, having a well designed website will make any designer stand out from the rest of the crowd. This report documents and reflects on a user centred approach to the design of an online portfolio. Before the start of the design process, a short Code Academy HTML and CSS (the web coding standard) course was completed to solve technical problems that arouse. This report will concentrate on the design and usability of the site, not the backend side of databases and coding. However, source code and database access are available on request.
01
“ Every great design begins with an even better story.� - Anon.
AIM: To create a portfolio website to showcase the best work produced in order to increase employability.
APPROACH: A user centred approach was adopted as it falls in line with the process used to develop physical products. Using a familiar approach decreases the need of a steep learning curve.
METHOD: One of the leading methods for human centred design was created by IDEO. The chosen method was adapted from the guidelines outlined by the organisation’s Design Thinking for Educators Toolkit (2012).
02
THE METHOD: As outlined in from the IDEO’s Educator’s Toolkit (2014)
The evolution part has not been fully completed at the time of the report hand in, as it involves user testing via job applications. This part is planned to be done during the summer of 2016, after the completion of the degree.
03
CRITIQUE OF METHOD:
CRITIQUE OF SOURCES:
This method, although thorough, created many secondary problems, as it required inputs from users at various points during the design process. Many user centred design agencies where contacted, but very few responded. This may be due to the lack of incentive they have to participate in non-profitable work.
There is a limited number of peer reviewed user experience journal articles available on the internet, this may be because of the short history of the discipline and the ever changing technological advances in web development and design. Where applicable, academic references were chosen over free content sources. Data from Nielson Norman Group, the pioneers of the industry was used where available.
Five Ws and and H The 5 Ws and H are traditionally used by journalists to create content and connect with their audience (Foley, 2011). As connecting with the audience and creating valuable content is also needed for a portfolio, this method was used.
01. What is it?
02. When?
03. Who is it for?
A web based portfolio which demonstrates the skills employers are looking for in a design graduate.
Module deadline: 18th May, 2016. Approval of commercial work (intellectual property rights etc.) to be sought from previous employers/ clients by end of April. Once the portfolio site is live.
User centred design agencies and employers across advertising/ industrial/UX/ disciplines. The website will cater for both employment agencies as well as HR departments of those companies.
04. Why UX?
05. How?
Web and UX is a much sought after discipline. Wise (2014) states that successful new products are increasing driven by the customer’s experience, rather than the old model of technologically driven product innovation. Creating an employer centred portfolio website can therefore portray forward thinking to potential employers.
The portfolio will be included in all job applications. In addition, the link will be placed on business cards given out at the degree show and New Designers.
The questions above where centred around the portfolio itself. Which were not very insightful. It only gave a very surface level description of the story.
The following questions were added to drive the focus to user needs:
What do users want to see? This is addressed in the discover stage (pp 9-10)
What user behaviour should the site evoke? The behavioural goal of the user should be to contact the designer. The portfolio should evoke the desire to reach out..
When would the users see it? Direct inks from Twitter and Linkedin Page, speculative emails, when hiring a designer.
The user behavioural goal of the site was initally thought to be a job offer, but after speaking to a user research designer at UX Camp Brighton, it was obvious that this was not true. Good employers do not give job offers solely on portfolios, but rather an invitation to an interview. The user goal was therefore changed to make initial contact.
04
Discovery Phase
Online Questionnaires •
Wider reach
•
Little time and effort required by participants
•
Link can be attached to emails
Company Profiling
05
•
Due to lack of responses
•
Mirroring empathy (Kelly, 2016)
•
Personal branding
The discovery phase was used to generate insights on user behaviours, habits and preferences. A questionnaire was initially planned to gather all the data needed, however, due to lack of responses, company profiling was used to gather more data to inform design choices.
06
Questionnaires: This method was initially chosen as it is the most convenient for the users; a link and be easily opened directly from the device, it can be completed in their own time, and the whole process only taking <10 minutes. Another reason why it was chosen was the ease of sharing a link with a wide range of people within a short amount of time. Links were embedded in template emails to companies that specialise in user centred design.
It was later found that this method had a very low conversion rate. Not many employers had the time or the incentive to fill in a questionnaire. However, key insights could still be extracted from the information collected. Another method:,company profiling, was used subsequently to compensate for the low response rate.
Questions and Rationale:
01
Which are the top 3 things you look for in a design graduate? Multiple choice.
The top 3 aspects was used to determine the identity and layout of the website.
02
Who would you be more likely to hire? A multi-faceted designer/ an Expert
This helped determine content selection: whether the portfolio should showcase skills in many areas, or an in depth understanding of specialist topics. However, many participants felt that this question was vague as it depended on the job role.
03
Say you were looking for a UX designer, how likely are their other skills (i.e. CAD, woodworking, video making, etc.) going to influence your decision?
This question was added at a later stage due to some confusion from participants. A scenario was used to contextualise the previous question. Therefore, participantsâ&#x20AC;&#x2122; behaviours were more likely to be gauged.
04
The layout of the portfolio should ideally be... by skill/ by project
To inform the information architecture (IA) of the website, the content of each page, and menu bar.
07
05
How much will the aesthetic design of the website influence your choice in hiring a candidate? 1-10 scale
Brand Identity Questions
Layout Specific Questions
This is to determine the time needed to refine the smaller details of the site, i.e. typography, the editing of photography etc.
06 07
As above, but for the usability of the site; layout, user journeys, cross platform/browser compatibility etc. Both this and the previous question had very subjective scales, hence trends and findings were harder to identify.
How many projects are you likely to look at? (1-5, 5-10, as many as possible)
To determine the amount of projects presented. Too little may convey inexperience, too many maybe unnecessary.
09
08
On what platform would you most likely view the portfolio? Mobile/ laptop / tablet/ desktop
The current trend with web development is responsive design, where the site recognises the size of the display and adjusts accordingly. Results would dictate if the site needs to be optimised for various devices and screen resolutions. .
How much time would you spend looking at the whole portfolio?
If results show a short time, all information should be presented in a concise format at the top of the page. If users spend a long time on each project, details should be presented in a chronological format.
11
What about the usability (also excluding content) of the site? 1-10 scale
10
Please use 3 words to describe what an ideal portfolio is like to you.
This is to understand what employers are looking for, similar aims to the first question. As the question is open a placed towards the end, results can be triangulated.
Is there anything else you would like to add? A space for participants to add more information that is not covered in the questionnaire.
08
KEY FINDINGS: Please see appendix A for full results.
5 minutes average reading time
There must be a brief summary at the top of the page for each project so that users can get an overview quickly.
09
Creative flair and design process is what users look for
Portray the process of getting to a creative idea. The rationale and emotion behind each design.
â&#x20AC;&#x153;At the same time, the extra power of faceted navigation adds interaction cost by presenting users with more options to comprehend and manipulate. A simple filter can often be easier to understand and faster to use.â&#x20AC;? - Nielson Norman Group, 2014
The layout should be...
75%
25%
By Project
By Skill
75% of users will only look at 1-5 projects.
Display designs by project, but also allow users to navigate project by skill. This will be done with simple category filters, to decrease the time needed for users to find relevant projects. Care was taken to make the filters as simple as possible, to prevent information overload.
Place the most impressive projects first, to display on the top left corner, where users look first. (Laja, n.d.).
Professional: Research websites of corporate companies, and mimic their styles (see corporate profiling P11-13). Creative: Showcase a variety of projects as well as concepts including those that may not be feasible, such as blue skies ideas.
Professional, Creatie and easy to navigate were used to describe the ideal portfolio.
Easy to navigate: Look closely at UX principals, attend UX Camp Brighton to learn how industry professionals facilitate navigation of sites and apps.
10
COMPANY PROFILING
is an original method created based on the psychological theory of mirroring. Humans have mirror neurons in the premotor, somatosensory and inferior parietal cortex (Kelly, 2016) the neurons are responsible for mirroring actions, creating a source of empathy. i.e. being “infected” by a laugh or a yawn.
Empathy is used by many companies in branding and advertising to evoke user behaviours and emotions, in order to increase sales. The aim of company profiling is to mirror the brand personality and identity of ideal employers, to subconsciously convey a good fit within their design team.
A list of ideal employers from different design disciplines such as service, digital, advertising, retail, industrial etc. was complied. In order for the portfolio to appeal to this wide user group, common trends in terms of brand identity, company profiles, and potential projects that may interest them were analysed. The brand identity was taken form Aaker’s (1997) brand personality scale.
Pancentric Digital Projects inline with theirs • • • •
Research part of project Kelvin (Cultural probes and diary studies) Research part of invisible (emotional timeline, scenario analysis, and interviews) Proporta newsletter redesign to brand guidelines Gift with purchase ideas Brand Identity - Aaker’s (1997) scale:
A global service and digital design agency. They have a customer focused approach based on user research. Their business model is based on co-creation and design thinking.
11
• • • •
Insight focused (not in model) Innovative Sophisticated Intelligent
• • • •
Website Design Refined (attention to detail) Faded primary coloured highlights Black/grey on white High quality full width images
IDEO One of the world’s top design agencies specialising in human centred design. Their capabilities include user research, product and service design and development, as well as new processes for design. Projects inline with theirs • • • •
Project Kelvin (Cultural probes and diary studies) Blocks (emotional timeline, scenario analysis, and interviews) Helmet, crutch bag and other ideas Revolutionary ashtray
• •
Innovative Unique
• • • •
Website Design Clean Neutral colours Clear and to the point Focused on cutting edge thinking rather than projects
Brand Identity: Aaker 1997 • •
Successful Corporate
POSSIBLE A global digital agency creating brand value through technology focused solutions. They provide a full service from customer insights to content writing and product launches. Projects inline with theirs • • • •
Newsletter redesign Research and ideation of Kelvin and Blocks Harrods phone concepts Helmet
• • • •
Brand identity (on website) • • • •
Website Design Dark background Video heavy (intro for each project) Large full width pictures Quite text heavy in descriptions of projects
Bold Industry leaders Relentless Together (global)
Method An international industrial and digital product design agency. Specialising in customer insight driven solutions. They work on both digital and physical experiences, as well as product innovation. Projects inline with theirs • • • •
Blocks Kelvin Helmet Revolutionary Brand Identity - From their website
• • • •
• • • •
Website Design Minimalist Neutral colours to fit in with projects Image heavy Simple and readable
Insight driven Attention to detail Technological Beautiful 12
Huge Projects inline with theirs • • • • •
Kelvin (Research, ideation) Blocks project Newsletter redesign Proporta print advert Gift with purchase
• • • • •
Trendy Daring Charming Successful Cheerful
• • • •
Website Design Minimal text Image and video heavy Animated background Large font size for easy reading
Brand Identity Aaker (1997)
One of the biggest digital and marketing agency in the world. They use UX principals not only for design, but marketing and strategy development, taking a human centred, research based approach to their work.
R/GA Projects inline with theirs • • • •
Blocks Kelvin Newsletters Revolutionary Brand Identity Aaker (1997)
• • • • • • One of the biggest full service agencies in the world with offices in 5 continents. They specialise in connected products, both digital and physical; such as Nike fuel band, branding for Beats by Dr Dre., and Google year in search.
13
• • •
Digitally connected (not from model) Intelligent Market leader Unique Up to date Website Design Bold but clean colour scheme (red, white black) Image heavy Hidden menus Very little text, mostly videos
KEY FINDINGS: Although the companies selected make a wide range of products, experiences and services, there are many common elements in their branding, approach, and design styles, the following are key trends found among most of, if not all of the chosen companies.
The Frankenstein Company A fictional company made by combining the most common traits from the profiles, similar to a corporate persona.
Company Profile
Brand Identity •
Corporate
•
Innovative
•
Market leaders
•
Intelligent
•
User insight driven, experience focused projects
•
Global
•
Successful with a large client base
•
Ingenious, original projects
Projects to show them Web Design Style •
Clean and simple layout
•
Image and video heavy
•
Neutral coloured text and lots of negative space
•
Blocks
•
Kelvin
•
Helmet
•
Revolutionary
•
Proporta Newsletter redesign
•
Proporta print advert
•
Gift with purchase
•
Harrods middle east designs
•
Behind the scenes of this portfolio?
The design and personal branding of the portfolio attempted to mimic the points listed above, as well as include the projects they would like to see. 14
Planning Phase Home
chloe-fong.com About /#about
Work /#work
Information Architecture
Contact /#contact
Project Kelvin
Blocks
Research /#research
Research /#research
Idea generation /#sketches
Idea generation /#sketches
Development /#development
Development /#development
Branding /#branding
Branding /#branding
/projectkelvin
• • •
/invisible
Proporta Newsletters
Marketing Gifts
Harrods Cases /harrods
/NLredesign
Motorcycle Helmet /helmet
Revolutionary /revolutionary
/odm
Engraving Ad /engraving
To visualise the whole site in one view Quickly organise pages Template creation
Beachbuoy /beachbuoy
Small Project Layout Full Project Layout Home Layout
Sketchboards • • •
Quick Similar to 3-6-5 (Ideation technique) For all pages
Wireframing • • •
Grey scale template Quick to make (no graphics) Overview of the layout of the page
User Journey Mapping • • •
15
See the design in action User behaviour mapping See the journey in the user’s perspective
The planning phase is the most important part of the whole process. It was used to conceptualise how the site works. Badly done, it can cause user frustration and make the user experience negative. By following a rigorous process used in industry, user frustration is minimised.
16
INFORMATION ARCHITECTURE The information architecture (IA) of a website is the hierarchy of how pages on the site group together. A well organised IA provides structure and allowed users to navigate to the desired pages without errors. IAs can be described as flat or deep (Whitenton, 2013), each with different applications:
DEEP IAS •
Many layers of links
•
Amazon check out style
•
Good for guiding users through a process
•
If IKEA stores were websites
•
Minimises errors
Deep IAs are good when there are many pages, it groups the sub-categories of pages into broader categories, so as to not present users with too many choices. They are also good for guided processes such as Amazon checkout, to prevent users from navigating away from a rigid, set user journey.
Content is less discoverable (Whitenton, 2013), as many pages are buried within others. There is also the problem of naming broader categories, as there may be discrepancy between users and designers about what categories each page should be filed under.
17
FLAT IAS
•
Less layers of links
•
Anti chunking principal (lack sub-grouping)
•
Wikipedia approach
•
More unique user journeys
•
Content is more discoverable
Makes all pages easily accessible. If the user navigates to the wrong page, the error is easily fixed with a press of the back button. Flat IAs make the user journeys shorter if they are looking for a specific page, as they will not have to go through another page to get to it.
It is theorised that providing users with too many choices may increase drop out rate (where users leave the website). This is due to the paradox of choice principle, which states that users would rather not commit to a choice than make the wrong one (Schwatz, 2004). However, attempts to replicate the original experiment that led to this theory has had little success.
A broad IA was chosen for the portfolio for the following reasons: 1. Users are only likely to see 1-5 projects (see page 10), and are only going to spend a short amount of time on the website. Time used to navigate to the desired page means less time will be spend on looking at the work. 2. There is no defined user journey for users, a deep IA will cause user frustration if they cannot easily return to the homepage. 3. Many of the University projects span across disciplines, placing the same project in multiple category pages may come across as inexperience.
However, design changes were added to combat the negatives of a broad IA. A filter was added to under the “work” section, to subcatergorise projects into: • User Insight Driven • Brand Driven • All Projects This was done to shorten the user journey of potential employers from different design disciplines (i.e. UX, advertising, design engineering etc. ) navigate to the most relevant projects. For example, a UX design agency may only want to see user centred projects, whereas an advertising company may only want to see brand driven projects. 18
IA: CARD SORTING USER TEST After the flat IA structure was selected, the next part was to organise the pages into relevant groups. Every person’s view of the information space is distinct (Nielsen, 2014), which means that users may look for specific pages under a different category. A useful way of gauge the user’s view is to conduct a card sorting experiment. Where the title and a short description of each page is written on a card. Users then place the cards under categories that make sense to them.
IDEAS
ABOUT PAGE
Project: X XXXXXXXX
xxxxxxxx xxxx Short Bio xxxxxxxx
Optimal Sort, a free online card sorting software was used to conduct the test. As it is online, there was a higher chance of users responding. From the poor response seen in the questionnaire, there was only a slim chance of potential employers spending 20min on a card sorting activity.
IMAGE Short Bio
COMMERCIAL WORK
Project 1: XXXXXXXX
Project 1: Beachbuoy Project 1: Beachbuoy Updating Proporta’s Updating Proporta’s IMAGE best selling product: IMAGE best selling product: a waterproof phone IMAGE a waterproof phone pouch pouch
Nevertheless, an attempt was made. No industry professionals replied. 5 design students were recruited to complete the test.
RESULTS FROM OPTIMAL SORT
Although there were some correlations between results, there was a very wide variance in the categories generated by participants. The variance, coupled with the lack of participants in the user group, invalidates the results above. The final site arrangement was conceptualised after looking at the descriptions of potential jobs that were of interest and using affinity diagrams. (See appendix C for affinity diagrams)
19
Marketing Gifts
aving Ad
graving
Revolutionary /revolutionary
/odm
FINAL SITE MAP Beachbuoy /beachbuoy
Home
Small Project Layout
chloe-fong.com
Full Project Layout About /#about
Home Layout
Work /#work Contact /#contact
Project Kelvin
Blocks
Research /#research
Research /#research
Idea generation /#sketches
Idea generation /#sketches
Development /#development
Development /#development
Branding /#branding
Branding /#branding
/projectkelvin
/invisible
Proporta Newsletters
Marketing Gifts
Harrods Cases /harrods
/NLredesign
Motorcycle Helmet /helmet
Revolutionary /revolutionary
/odm
Engraving Ad /engraving
Beachbuoy /beachbuoy
Small Project Layout Full Project Layout Home Layout
20
SKETCHBOARDING is a method of ideation pioneered by Adaptive Path, one of the first UX design agencies. It was designed to be used before wireframing, a textless, imageless, greyscale layout of the website. The process is very similar to the 6-5-3 method taught in DP362 Product Ideation, and involves a quick burst of ideas, without restrictions or a “this can’t be done” mentality. A template of 6 rectangles is traditionally used. An idea is sketched in each rectangle within a minute (see below for template used). Allowing many ideas to be generated within a very short amount of time. At the end of the session, the ideas are evaluated, and the best elements are taken forward to generate more detailed wireframes (Adaptive Path, 2007) This method is said to be very effective, many speakers at UX Camp Brighton, a local UX conference attended, were advocating the its use in industry. This method was found to be very useful for ideation. Due to the time pressure, the quality of ideas were not perfect, but there were many surprising and useful elements within the rough ideas. It was modified to have 4 retangles over 2 pages instead of 6 on 1. See appendix D for Sketchboard ideas.
Title
Sketchboard Template Pros: As research had previously been done on UX design principals, they could be incorporated in many of the ideas. Cons: Although reading and workshops were attended, there was no way of gaining feedback on if the method was used correctly.
21
WIREFRAMING After the sketchboarding exercise, wireframing was used to consolidate the elements. They were also used as reference templates for page building.
HOME PAGE + ABOUT +WORK + CONTACT Top right menu hamburger, as per Huge Inc. and R/ GA. Full width header banner, as per many companies from research
Filters projects by skill so users can quickly get to the skill they want to see most
Sectioned by background colour so users can quickly scan
Z Eye Movement Back to top auto scroll as the page is very long
Social media icons to prompt users to get in touch.
22
FULL PROJECT LAYOUT
F Eye Movement
Short project intro for users to get the gist of the project quickly.
Links to scroll to relevant parts of the page. (Fast forward buttons)
Find out more link (opens in new window)
Research, Sketches, Development sections for ease of navigation
23
Each section has image sliders and descriptions, with a page pagination indicator
SMALL PROJECT LAYOUT
Project intro: Client / Industry / Brief/ Solution
Image slider to show project outcomes
Z Eye Movement
Sketch, a vector based digital design package was learnt in order to make better wireframes. Critique: Sketch was a relatively easy to learn programme, as it has many similarities to Adobe illustrator. Although it has
less functions for icon creation and illustration, itâ&#x20AC;&#x2122;s workflow is designed for web and app, making common elements easier to duplicate across screens.
EYE TRACKING PATTERNS
F Shaped Pattern The F shaped pattern was conceptualised by the Nielsen Norman group during an eye tracking study (Nielsen, 2006). The heatmap generated in the study indicated that people first read across the headline, then scanned down to skip to the information they need. However, this may only valid on text heavy pages.
Z Shaped Pattern The Z shaped pattern is based on the left to right, top to bottom flow of western languages. Based on the Gutenbeg diagram, it states that the most important information should be placed on the top left corner, and the least important should be on the bottom right (Johnson, 2009). This may be useful for image heavy pages.
Although these eye tracking principals were useful for the general layout of the site the patterns cannot be guaranteed. It would be ideal, dependant on participant recruitment, to run an eye tracking study using the equipment at the University of Brighton. 24
USER JOURNEY MAPPING A UX conference was attended to gain cutting edge knowledge in the user experience industry. User journey is the way a user will navigate through a website. Journey maps are used to evaluate the amount of steps it would take for users to achieve their goals. It is traditionally done at a later stage, when a prototype of the website is made. However, at the conference, a wireframing expert claimed that it may be beneficial to map as early as the wireframing stage (Power, 2016). To iron out usability problems before efforts are places to make a prototype. This method was used in the design of the portfolio as there is not a need to prototype such a simple website (it is normally used in pages with complex hierarchies and multiple user goals), and hence cannot be done at a later stage. Evaluation: This method helped imagine the site from the point of view of the user, which could have easily been forgotten during the design process. However, as the site is relatively simple and the user journeys are less rigid, the method did not yield any deep insights.
25
Mr. Employer Man (or Ms Employer Woman)
Entering Page Exiting Page
26
DESIGN PHASE Prefered by females: Conveys a softer image with the circles.
CHLOE FONG
CHLOE FONG
CHLOE 方
CHLOE FONG
CHLOE 方
CHLOE FONG
CHLOE 方
Personal Brand Identify •
Based on research insights
•
Logo and colour scheme
•
Typeface selection
CHLOE FONG
Content Writing
27
•
Using copy to further portray brand identity
•
What users look for in an “ideal” portfolio
The design phase of the website involved building a strong branding identity, based on the research data. Apart from the visual user interface, the content writing is also vital to the usersâ&#x20AC;&#x2122; impression of the website, and the personal brand.
28
BRANDING Prior to creating logos, a personal brand was established using both data from the research phase, as well looking at other job seekers from the market.
Market analysis: It was found that there was was a polarisation of practical and aesthetic graduate designers. On one end of the spectrum, there were many designers that specialised in the aesthetics and desirability and not function. On the other side, there were many very practical design engineers, coders and UX researchers, who do not posses the creative flair or the eye for visuals. The ideal brand positioning should be in the middle, as it will provide a competitive edge.
Visual designers
• • • •
Mainly graphic designers Beautiful projects How it looks, not how it works Do not posses the analytical skills
Creative. Analytical. A problem solver that truly understands people. www.robertbye.com
www.chloe-fong.com Brand Essence: The statements were derived from the unique brand position, as well as personal traits. www.sianvygus.com
Practical designers • • • • 29
Mainly engineering types Strong analytical skills How it works, not how it looks No creative flair/aesthetic sense
LOGO DESIGN
Inital sketches of the logos were done by hand, a mixture of sharps and rounded angles were explored: Sharp angles: analytical, practical, engineered Rounded angles: approachable, understanding, softer Integrating initials CF in script, as well as Chinese characters were explored.
CHLOE FONG
CHLOE FONG
After the sketching phase, 3 logos were short-listed and digitised. User testing was done to see if the brand essence could be seen in the logos. Participants were first shown the brand identity statements, and asked to point to the logo that they thought best fit the brand. Other test that was run concurrently was the with the typography; to stand out from the rest of the applicants, the Chinese character of Fong, 方, would be used. Participants who did not read Chinese were asked to see what it would look like to a non Chinese speaker.
CHLOE 方
CHLOE 方
CHLOE FONG
CHLOE FONG
CHLOE 方
CHLOE FONG
30
FINAL LOGO After feedback from participants, the following logo was chosen.
Main Logo: Icon only:
A horizontal version was made if the logo had to be scaled down to prevent the text from getting too small:
Brand Colours:
Typefaces:
Emotion: The colours of the website should complement to the projects, a nature inspired colour palette was chosen, alongside an orange contrast colour. Technical constraints: Web safe colours have to be used as screens are in RGB, as opposed to the CMYK ink used in digital print.
MONTSERRAT ALL CAPS H1 (50pt kerning)
Montserrat Regular H2/ H3/ H5
#ffffff
Raleway 14px #53722a
#b9c75e
31
#f55d14
#171717
p (20 Line height / Auto kerning)
Google fonts were chosen for the website. If non web fonts are used, they will be rendered as images rather than text. This will cause alignment issues in responsive design, where text cannot auto-format for different screen sizes. Another advantage of using Google fonts is the searchability of content, as google searches with complex automated algorithms, it will not recognise the content of images.
CONTENT WRITING The copy of each project was used to tell a story of the evolution of the idea and the underlying rationale. Research findings were used gauge the length and the tone. The following principles were kept in mind when writing for the target user: Concise: Users only spend 5mins on the whole website. Descriptions must be to the point. Passion: All survey respondents said that creative flair is what they look for in a portfolio Tell a story: Users also wanted to know about the process and rationale. Please see website for full content.
IMAGES 50%
Having an image heavy website became a problem later with the loading speed, which increase to more than 6 seconds for large product pages. Long loading times increase user frustration and in turn increase page dropout rate (Kissmetrics,2016), see chart on rightv. This was fixed by specifying the image size in the HTML code to prevent unnecessary downloads.
25%
Dropout rate increase (%)
Image selection was vital to the content. From the company profiling method it was found that most websites are very image heavy. Many images were subsequently pasted on the website.
Please see appendix E for page optimisation reports. 2
4
6
8
10
Page load time (seconds)
32
Further Development Technical Testing: Preliminary testing was done by browsing the site on desktop, laptop, tablet and mobile to ensure that the pages loaded and there were no major usability issues. Some issues such as text line height and image positioning were fixed so ease usability. The link was then shared with fellow students and friends to see if there were any further display/typography issues when viewed on different operating systems (PC/Mac/ Linux) and browsers (Firefox, Safari, Chrome Internet explorer). Usability Testing: True usability testing with the target user group has still not been done. User testing would be done using the think aloud protocol. Users will be give a specific task, e.g. â&#x20AC;&#x153;find a project that demonstrates an understanding of usersâ&#x20AC;? and they will have to not only find the page, but also narrate their thoughts during their journey. The results would show the true user journey, which may be different to the intended one. It would also be interesting to test eye tracking patterns, to look at a heatmap of were users focus their attention, and utilising the hot spots to convey the brand message, or to evoke the desired action of making contact. It is planned to test the website after graduation, when job applications commence, feedback will be asked from recruiters, and recruitment agency staff will be recruited to give feedback on the portfolio.
33
Reflection A passion and interest for interaction design was found during the course of completing the module. Although many of the methods overlap with physical product design, the user centred element is especially strong when designing for digital. Now, more than ever, having an online presence is all the more important in self promotion. It provides a demonstration of skills that can be share any time, anywhere, without geographical restraints. One of the skills gained, but excluded from the report was technical trouble shooting. Without advanced coding knowledge, errors on the coding and scripting side relied on online video tutorials, forum posts and using elements of code written by others. For example, after the site went live, there was an automatic update to one the scripts, a error in the updated scrip rendered all links useless. Searching through help topics and online tutorials, the site was taken down temporarily and the old script was re uploaded. Although the discipline of digital experience is very interesting, there are some constraints. One of the core rules in UX design, the reuse principle (Mehta, 2011), outlines that users do not want to learn a new way to achieve an objective, i.e they want to see the menu button on the top of the page. Radical innovation is not easily achieved as users are less likely to want spend time navigating to a desired page, and would rather abandon the task than spend time looking for a solution. The most useful learning tool throughout the process was attending the UX Camp Brighton conference, it not only provided insights to the design of the site, but also contacts in an industry that is experiencing rapid growth.
Top 6 skills gained through DP365
Self promotion + employability
Branding
Human Computer Interaction behaviours
Survey Writing
HTML+CSS
Creative Research methods Competence Before
After
34
REFERENCES: Aaker, J. (1997). Dimension of Brand Personality. Journal of Marketing Research, 34(3), pp.347356. Foley, J. (2016). A Simple, Sure-fire Way to Create Great Content â&#x20AC;&#x201C; The 5 Wâ&#x20AC;&#x2122;s & the H. [online] WPMU DEV Blog. Available at: http://premium.wpmudev.org/blog/a-simple-sure-fire-way-tocreate-great-content-the-5-w-the-h/ [Accessed 7 Mar. 2016]. IDEO (2013). Design Thinking for Educators Toolkit. 2nd ed. IDEO. Johnson, R. (2009). The Gutenburg Diagram in Design. [online] Psychology of Web Design | 3.7 Blog. Available at: http://3.7designs.co/blog/2009/01/the-gutenburg-diagram-in-design/ [Accessed 15 May 2016]. Kelly, L. (2016). How to use empathy in your design process. [online] Form For Thought. Available at: http://formforthought.com/psychology-selling-toolkit-mirroring-empathy-design/ [Accessed 12 Mar. 2016]. Kissmetrics, (2016). How Loading Time Affects Your Bottom Line. [online] Available at: https:// blog.kissmetrics.com/loading-time/?wide=1 [Accessed 1 May 2016]. Laja, P. (2012). 10 Useful Findings About How People View Websites. [online] ConversionXL. Available at: http://conversionxl.com/10-useful-findings-about-how-people-view-websites/ [Accessed 4 Apr. 2016]. Nielsen, J. (2006). F-Shaped Pattern For Reading Web Content. [online] Nngroup.com. Available at: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ [Accessed 8 January 2016]. Nielsen, J. (2004). Card Sorting: How Many Users to Test. [online] Nngroup.com. Available at: https://www.nngroup.com/articles/card-sorting-how-many-users-to-test/ [Accessed 15 January 2016]. Power, A. (2016). Effective Wireframing. [Talk] UX Camp: Brighton Schauer, B. (2007). Sketchboards: Discover Better + Faster UX Solutions | Adaptive Path. [online] Adaptivepath.org. Available at: http://adaptivepath.org/ideas/sketchboards-discover-betterfaster-ux-solutions/ [Accessed 15 Febuary 2016]. Schwartz, B. (2004). The paradox of choice. New York: Ecco. Smith, J. (2016). Why Every Job Seeker Should Have a Personal Website, And What It Should Include. [online] Forbes.com. Available at: http://www.forbes.com/sites/ jacquelynsmith/2013/04/26/why-every-job-seeker-should-have-a-personal-website-and-what-itshould-include/#611aeca3902e [Accessed 10 May 2016]. Whitenton, K. (2016). Flat vs. Deep Website Hierarchies. [online] Nngroup.com. Available at: https://www.nngroup.com/articles/flat-vs-deep-hierarchy/ [Accessed 3 Apr. 2016]. Wise, R. (2014). Move Over Product Design, UX Is The Future. [online] Co.Design. Available at: http://www.fastcodesign.com/3025274/move-over-product-design-ux-is-the-future [Accessed 1 Nov. 2015].
35
www.chloe-fong.com