Third week slides of eMarketing Course at Hacettepe University taught by Ayca Turhan Topics covered within the presentation include: Digital Assets, Websites, Mobile Websites, Mobile Apps User Experience Testing For more please visit: www.aycaturhan.com/man423

1. Digital Assets & User
Experience
Ayça Turhan
Hacettepe University
Department Of Business Administration

2. Digital Assets: Websites

3. Digital Assets: Mobile Sites

4. Digital Assets: Mobile
Applications

5. Digital Assets: Social Media Profiles

6. Digital Assets: Social
Applications

7. Digital Assets: Videos & Other
Content

8. Today’s Topics
• User Experience Design
• Web Development and Design
• Writing for Digital

9. Digital Marketer’s Role
• Even though digital marketers don’t
have to be the one who designs and
develops digital assets, they must have
the skills to manage them and be a
part of the process.
• A digital marketer has to be tech-
savvy.

10. User Experience
Design

11. User Experience
• User experience (UX) is the overall
satisfaction a user gets from
interacting with a product or digital
tool.

12. User Experience Design
• The process of creating remarkable,
user-friendly and effective digital
assets.
• It is closely related with:
– Strategy and Research
– Web Development and Design
– SEO (Search Engine Optimization)
– Content Strategy and Creation
– Conversion Optimization

13. User Interface
• It is is the user-facing part of the tool or
platform.
• It is the part of the actual website,
application or tool that the user
interacts with.

14. UX vs UI

15. Core Principles of UX Design
• User Centric Design
• Usability
• Simplicity
• Credibility

16. User Centric Design
• Who is the user?
• What are the user’s wants and needs
from your platform?
• Why is the user really coming to your
website?
• What are the user’s capabilities, web
skills and available technology?
• What features would make the user’s
experience easier and better?

18. Usability
• Usability means how user friendly,
efficient and slick the digital product is.
• Sticking to standards is important:
– Navigation menus at the top or left of the
web page
– The logo in the top left hand corner, which is
linked to take the user back to the home
page
– Search boxes placed at the top of the page,
using standard wording such as ‘search’, or a
magnifying glass icon.

20. Simplicity
• Get rid of features and elements that
your users simply don’t need, and
focus on the core user experience.

21. Credibility
• If your digital assets don’t look credible
enough, people may not want to be a
part of the experience.
– Looks
– «About us» part
– Logos
– Content
– No spelling errors

22. Mobile UX
• Types of Mobile Assets:
– Mobile websites:
• m.facebook.com
• m.9gag.com
– Mobile applications
• Angry Birds
• Instagram
– Responsive Websites
• thenextweb.com

23. Mobile UX
• Limitations:
– Small screens
– Difficult inputs
– Slow connection speeds
– Slow hardware
• Mobile First: Create mobile experience
first, adopt it to web later

24. Mobile UX – What to do?
• Simplify
• Reduce loading time
• Encourage exploration
• Give feedback
• Communicate consistently
• Predict what user wants

25. Step By Step Guide To UX Design
• Conduct Research and Discovery
• Analyse Content
• Create the site’s basic structure
• Create a sitemap
• Build the navigation
• Create the layout
• Assemble other elements
• Define the visual design
• Conduct testing

26. Conduct Research and
Discovery
• Business
• Users
• Technology

27. Analyse The Content
• Do a content audit for existing sites
• Create a content strategy for a new
site

28. Create Site’s Basic Structure
• Information architecture (IA) is about
managing information – taking a lot of
raw data and applying tools and
techniques to it to make it manageable
and usable.
• Information architecture is crucial for
usability
• Categories and pages should be from
broad to narrow in a hierarchical
structure

29. Create Site’s Basic Structure

30. Create a Sitemap
• A sitemap is the visualised structural
plan for how the website’s pages will
be laid out and organised.

32. Build The Navigation
• Answer some questions:
– Where am I?
– How did I get here?
– Where can I go next?
– How do I get home?

34. Create the Layout

35. HEADER RIGHT SIDEBAR
CENTRAL
CONTENT

36. FOOTER

37. Wireframes & Prototypes
• Wireframes are the skeletal outlines of
the layout of a web page.
• Prototypes are a step up from
wireframes, in that they are interactive.

38. Wireframes & Prototypes

39. Other Elements
• Search: Many sites can benefit from
having a search function, both to help
users navigate and to make finding
specific information easier.

40. Other Elements
• Calls-to-action: A phrase written to
motivate the reader to take action.

41. Other Elements
• Forms: These are interactive fields
where users can enter their contact
details or other information.

42. The Visual Design
• Color:
– Color has an incredible psychological
effect on people.
• Images
– Lots of testing will help.

43. https://blog.kissmetrics.com/color-
psychology/

44. Testing
• The purpose of this is to discover
problems and gain insights that can be
used to improve the final product.

45. Testing Process
• Formulate a question to test
• Choose a test and prepare
– User-testing methodologies
• Hallway testing
• Observation and user labs
• Split testing and multivariate testing
• Eye tracking
• Surveys
• Find subjects
• Test
• Analyse
• Report
• Implement
• Start Again

46. A/B Testing
• A/B testing (also known as split testing)
is a method of comparing two versions
of a webpage against each other to
determine which one performs better.
https://www.optimizely.com/ab-testing/

47. A/B Testing

48. A/B Testing
• It’s an amazing method for finding out
the best method that works!
• It can be used to test:
– Site elements
– Ads
– E-Mail campaigns
– Anything you can think of in Digital
Marketing

49. A/B Testing Process
• A/B testing is a process and it can be
done multiple times before a final
decision is made.
• Tests must be run simultaneously.
• Testing must continue until statistically
significant results are available.

50. Simcity
• Original Version • Variation
43.4% more
purchases!

51. Web Development &
Design

52. Web Development & Design
• You can apply web development and
design principles websites and other
digital assets as well.
HTML5
PHP
CSS3
AJAX
Colors APIs
User
Elements
Javascri
pt
Images
Brand Photosho
p

53. Web Design
• Web design is the process of creating
all the visual aspects of the interface.
– Layout
– Colour scheme
– Images
– Logos
– Design elements (such as buttons and
links)
– Anything else that you can see.

54. Web Design
• There is a close relationship between
UX and visual design.
• Digital properties shouldn’t be just
beautiful, they also need to create a
good experience for the users.

55. Web Development
• Web development is the process of
taking finished web designs and
transforming them into fully
functioning, interactive websites.
• Three decisions that must be made:
– Static webpage or usage of CMS
(Content Management System)
– Server-side language?
– Front-end language?

56. Static Site vs. CMS
• On a static site, content can be
added by a web developer.
• A CMS can be used to manage the
content of a website. Today, many
sites are built on a CMS.
• Widely-used CMS solutions:
– Wordpress
– Joomla
– Drupal

57. Languages
• Server Side Languages:
– PHP, Java, Ruby, etc.
• Front-End Languages:
– HTML, CSS, JavaScript, etc.

58. Mobile Development
• Mobile websites:
– m.facebook.com
– m.9gag.com
• Responsive Websites
– thenextweb.com
• Mobile applications
– Angry Birds
– Instagram

59. Writing For Digital

60. Writing For Digital
• Online copywriting includes:
– Text content on a website
– Subject of an e-mail
– Text content of a Call-To-Action button
– Text content of ads
– Social media posts
– And more...

61. Writing For Digital
• Online copy must:
– Provide information to users
– Engage with them
– Convince them to take desired action
– Convey brand ethos
– Provide context and relevance to search
engines

62. Before Writing:
• Who is your audience?
• Which information do they need from
you?
• What do you want them to do?

63. Types of Web Copy
• Short Copy
– Limited time and space
– ie. Banner ads
• Long Copy
– Longer pieces of content
– ie. PR report

64. Call-to-action
• A descriptive instruction that explicitly
tells a reader what to do.
– Buy now
– Click here
– Try for free
– Download now
– Sign-up now

65. Call-to-action

66. Titles and Subject Lines

67. Search Advertising
• Limited character count for search ads

68. Social
• Do research
• Write shareable content
• Avoid overly promotional content
• Have a communication protocol

69. Long Copy
• News releases
• Articles for online syndication
• E-mails
• Blog Posts
• Advertorials
• Website

70. Your Content Has To Be:
• Clear and concise
• Easy to read
• Well-written
• Well-structured

71. SEO Copywriting
• A good copywriter must be familiar
with SEO.
• Audience & Search Engines

72. Contact Me
• e-mail: ayca.turhan@hacettepe.edu.tr
• Course Page:
www.aycaturhan.com/man423

73. Sources
• emarketing: The Essential Guide To
Marketing In a Digital World 5 Ed.» by
Rob Stokes and and Minds of Quirk
which is available at:
http://www.quirk.biz/emarketingtextbo
ok/