content design for mobile
TRANSCRIPT
![Page 1: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/1.jpg)
Design for Mobile Content
Ahava LeibtagPresident
Aha Media Group
February 2, 2017
![Page 2: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/2.jpg)
@ahavaL #webcondc
![Page 3: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/3.jpg)
3
![Page 4: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/4.jpg)
![Page 5: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/5.jpg)
![Page 6: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/6.jpg)
The Martian
![Page 7: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/7.jpg)
![Page 8: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/8.jpg)
8
![Page 9: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/9.jpg)
Designing for mobile is about content strategy work first and
then mobile design second.
9
![Page 10: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/10.jpg)
Steps to Great Content Design for Mobile1. Understand users’ needs2. Understand your business3. Understand the content ecosystem4. Create content models and core pages5. Prioritize the content
![Page 11: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/11.jpg)
11
Understand Users’ Needs
![Page 12: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/12.jpg)
12
![Page 13: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/13.jpg)
Backstory: He has been working for the same law firm for 12 years and business has been growing quickly. His administrator hired the previous two IT companies but neither of them could keep up with the firm’s growing needs and he was disappointed by their work ethic. He knows the firm needs outstanding outside help because they don’t have the resources to bring in an internal IT employee. He wants a company that will help anticipate the firm’s needs. He wants to hire a highly recommended company that is extremely reliable.
Age: 38Lives in: Bethesda, MDEducation: Georgetown Law School, Penn UndergraduateOccupation: Patent Attorney in Washington, D.C.HH Income: 250K (+50K)Family: Wife, Julie, 34, Graphic DesignerDaughter, Danielle, 11Son, Michael, 8
Lifestyle/Personality: • Drives an Acura and wife drives a
Honda CRV• Gym membership and plays tennis• Coaches Michael’s soccer team• Family travels twice a year to California• Shops at Brooks Brothers and J.Crew• Dines out often with clients
Devices and Channels: iPhone, iPad, laptop and desktop
News and Information: Reads the Wall Street Journal and world news online
Tasks and Objectives:• What kind of IT support do you provide?• How much experience do you have with the
legal industry? • Do you have after business hours and
weekend technical support? How responsive are you during those times?
• Is there an assigned primary technical consultant?
• Will you recommend and purchase hardware and software products for my law firm?
• What is your pricing structure?• Who are some of your clients? Can you
provide customer recommendations?
Adam J. Seeking IT services: “We need professional help with our IT.”
![Page 14: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/14.jpg)
Motivations
• Find an IT company that will be a good fit for his firm
Primary Questions
• What kind of IT support do you provide?• How much experience do you have with the
legal industry?• Do you have after business hours and
weekend technical support? How responsive are you during those times?
Secondary Questions
• Is there an assigned primary technical consultant?• Will you recommend and purchase hardware and
software products for my lawfirm?• What is your pricing structure?• Who are some of your clients? Can you provide
customer recommendations?
Actions
• Call with questions• Schedule a meeting
Possible Encounters:
• Search online• Referrals
Possible Content:
• Services• Portfolio• Support Hours
Possible Content:
• Products• Pricing• Customer Testimonials
Possible Modes of Engagement
Adam J. Seeking IT services: “We need professional help with our IT.”
![Page 15: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/15.jpg)
Motivations
• Find an IT company that will be a good fit for his firm
Primary Questions
• What kind of IT support do you provide?• How much experience do you have with the
legal industry?• Do you have after business hours and
weekend technical support? How responsive are you during those times?
Secondary Questions
• Is there an assigned primary technical consultant?• Will you recommend and purchase hardware and
software products for my lawfirm?• What is your pricing structure?• Who are some of your clients? Can you provide
customer recommendations?
Actions
• Call with questions• Schedule a meeting
Possible Encounters:
• Search online• Referrals
Possible Pages:
• Services• Portfolio• Support Hours
Possible Pages:
• Products• Pricing• Customer Testimonials
Possible Modes of Engagement
Adam J. Seeking IT services: “We need professional help with our IT.”
![Page 16: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/16.jpg)
Understand your Business
16
![Page 17: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/17.jpg)
17
![Page 18: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/18.jpg)
Business1. What are the business goals?2. What clearly defined problems do you have that are
impeding reaching those goals?3. What are the consequences of not reaching those goals?4. If you reach those goals, what will the outcomes be?5. Where are the political snares and pitfalls?
![Page 19: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/19.jpg)
19
Understand the Content Ecosystem
![Page 20: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/20.jpg)
20
![Page 21: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/21.jpg)
21
Ask yourself (and your team)• Formats: What types of digital content do we have currently? (All
formats: text, video, audio, pictures, infographics and so on)• Print: Do we have print content that needs to be incorporated? • Architecture: Where does the content live?• Business objectives: How much of an asset is it to the
organization?
![Page 22: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/22.jpg)
Categorize1. Focus content: which content is critical your customers and
therefore benefits your business?2. Guide: content that’s important to your users and beneficial
to your business3. Drive: towards content that people didn’t know they were
looking for, but is beneficial to your business4. Meh: content you’ll include because you feel you have to
22
![Page 23: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/23.jpg)
23
Drive(will hit business goals)
Focus(critical)
Meh(politically motivated)
Guide(important)Bu
sines
s Im
pact
s
User Needs
![Page 24: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/24.jpg)
24
Create Content Models and Core Pages
![Page 25: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/25.jpg)
25
![Page 26: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/26.jpg)
![Page 27: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/27.jpg)
www.ahamediagroup.com
The Core Model• Align content with business objectives• Support customers in accomplishing tasks
Business Goals User Tasks
![Page 28: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/28.jpg)
28
![Page 29: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/29.jpg)
29
![Page 30: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/30.jpg)
www.ahamediagroup.com
The Core Model• Align content with business objectives• Support customers in accomplishing tasks
Business Goals User Tasks
![Page 31: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/31.jpg)
31
![Page 32: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/32.jpg)
32
Why?Role Why?Content strategist Identify the most important pages on the
siteUX Designer What modules do we need on the page?
Graphic designer What’s important to emphasize on the page?
Copywriter and editors Create better content
Clients Includes them in detailed decision making
![Page 33: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/33.jpg)
33
Getting at the Core Model: Step #1
1. Find out the top 5 most important tasks for that page
![Page 34: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/34.jpg)
Getting at the Core Model: Step #22. Track the inward paths• What do people search for?• How can social media drive traffic
to that page?• What other sites and pages should
link to this one?• What other sources should lead to
this page?
34
![Page 35: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/35.jpg)
Getting at the Core Model: Step #3
3. Map the Core content
35
![Page 36: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/36.jpg)
Getting at the Core Model: Step #4
4. Map the forward paths
36
![Page 37: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/37.jpg)
By doing it this way, you don’t ask your users “where do you belong on this website?” Instead, you ask
them “How can we help you?”
37
![Page 38: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/38.jpg)
Content Models
38
![Page 39: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/39.jpg)
39
![Page 40: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/40.jpg)
40
![Page 41: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/41.jpg)
41
![Page 42: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/42.jpg)
Creating core pages or components 1. Identify core pages or content components that satisfy business goals
and user needs’2. Map inputs and outputs (how people land and where they go next)3. Model the content and identify the relationships between different
types of content4. Create buckets of content according to their relationships5. Prioritize which “pages” and content they need: What content
elements that you just mapped belong on a small screen?
42
![Page 43: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/43.jpg)
43
Presentation
![Page 44: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/44.jpg)
44
![Page 45: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/45.jpg)
45
Prioritize the Content
![Page 46: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/46.jpg)
46
![Page 47: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/47.jpg)
47
Not what do they need to see. Which order do they need to
see it in?
![Page 48: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/48.jpg)
48
![Page 49: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/49.jpg)
![Page 50: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/50.jpg)
Steps to Great Content Design for Mobile1. Understand users’ needs2. Understand your business3. Understand the content ecosystem4. Create core pages and content models5. Prioritize the content
![Page 51: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/51.jpg)
51
![Page 52: Content design for mobile](https://reader035.vdocuments.net/reader035/viewer/2022062821/58a292d31a28ab36508b5c1f/html5/thumbnails/52.jpg)
Thank you
Ahava LeibtagAha Media Group, [email protected]
@ahavaL @ ahavaleibtag
www.ahamediagroup.com