Sleep + Recharge
UX Research, Visual Design, and Content Writing
Email Newsletter
Focus
Infographics
Content Writing
Research
Science Translation
Visual Design
Email Newsletter
Cohesive Read
Tools
Sketch
Adobe Illustrator
Photoshop
Keynote
Unsplash
Preview
Adobe Acrobat
Overview
With 89% of people in the Nation reporting sleep problems, a read on how to get a better night’s sleep and how sleep works seemed relevant for people who may want to learn more about their sleep patterns in a simple and engaging way. This project takes sciencey information, which can be dense at times, and utilizes infographics, a natural tone, and connected hierarchy for an informative, clear, and practical read that may apply to readers’ lives and benefit their quality of sleep.
Current Problem
Research on health, and research in general, may take more time to understand and fully read than most people are willing to give to the enterprise. The time, technical terms, and effort to understand the article or paper may create a cognitive overload of information, where readers are more focused on piecing together the writing rather than on understanding the message. Because the effort it takes to read the science may override the enjoyment of learning something new, people may disengage from the content. This ultimately limits how often people search for information on health and how people may be able to relate to and connect useful information to their lives, when awake or asleep.
Envisioned Goal
The intent is to communicate science on sleep in a way that is engaging and absorbable (succinct, informative) with the potential to be effective in people’s lives.
With this, there is a focus on emphasizing important and relevant information but communicating it in an engaging way (interesting, dynamic), so that content is enjoyable and remembered. This way, people will be informed about science, while having the ability to apply it to their lives. It is accessible for every type of reader.
The goal is to clearly present the message, about sleep processes and benefits, with the least amount of cognitive effort, so that people will be able to learn about health, possibly feel bemused, and choose to actively apply the content to their lives. They will be able to share their knowledge, interesting insights, and new opinions with other people as well.
Keywords & Phrases
Sleep, Cycles, Waves, REM, NREM, Sleep Benefits, Sleep Stages, Recommended Hours, Koalas, Rest
Science Translation Problem and Accessibility of Science → Application to Life Goal.
Problem and Goal Frontload.
Project Objectives.
Bring together a proto-persona’s key points, visual design elements, and visual and written content for a learnable read that packs a friendly punch.
01 . . . . . . . . . . . . . . . . . . . . . . . . . UX Design
02 . . . . . . . . . . . . . . . . . . . . . . Visual Design
03 . . . . . . Communication Translation
01 UX Design
Define Research Topics + Synthesize Findings + Connect the Pieces + Plan for Visuals
The Design Focus
◈ Find and Select relevant research.
◈ Utilize infographics, imagery, and other visuals to share the information.
◈ Draft a plan for the visual concepts based on how people learn content.
While we know that the topic for the email newsletter is on sleep, we need to define what topics will be highlighted and presented to people through visuals and text. So, an initial research phase scoped out the types of sleep topics being shared online and what themes seemed to appear more often than other themes. Based on the research findings, some more common and repetitive, and some less frequent but fascinating, the visual plan was loosely drafted, so that it had the flexibility to be adapted down the path of this project creation.
02 Visual Design
Select a visual theme, (nature), with an emphasis of layout, hierarchy, and colors.
The Design Focus
◈ Content and Text Choice, with titles like “Benefits,” “How to,” and “Cycles.”
◈ Layout, white space and hierarchy, with a focus on room (space) to breathe and process content.
◈ Color choice, use color to highlight key visuals and text and elevate the context through their connection (pairing) and tie them together, by linking colors to text and to focus area. (Idea of a visual beacon?)
Visual information can capture and portray a message and connect various topics together through the order in which it presents (selected) content, identified as its hierarchy, and through the way it is pieced together on a page with image sizes and text placement, its layout. The overall/ main sleep theme is meant/ intended to be a rejuvenating and restful topic (what does this mean) for readers, so colors and font were chosen to represent this naturally occurring process (in nature) as well as nature (natural environment), where sleep occurs universally and in tandem with the light of the day. The layout and hierarchy will intend to connect this theme and related content in a way that would shape how the science is told and learned through visuals of various kind and text of various intensity.
03 Communication Translation
To the point text (clearly stated; succinct) and related imagery (build off of each other) and an engaging and conversational tone (speaking to readers) and how in an experience of speaking conversationally, people could feel relaxed enough to listen, absorb, and assimilate content (piece together).
The Design Focus
◈ Tone of voice (another word for that), chill, human, understandable, clean, “your own speaking to others,” transmits clearly.
◈ Passive to active learning (look this up later) content taken off of the page and into life.
◈ Back and forth learning with text and related images throughout the read to encourage learning with the overall message with related topics . . .
Once the sleep topics are selected, I want to share the information (message & topics) in a conversational tone that would (activate) to engage the reader. Interacting with the content, will also work to efficiently share topics and connect them together (3) so that readers have the possibility of actively incorporating (folding) what they’ve remembered into their lives, if it seems relevant, piques their interest, and clearly indicates how it may benefit them. With the text and imagery being placed in ways (wc) that intend to strengthen the learning process, - with/ through images - which gives, provides, anchors and visual understanding to the content - speaking with the text (in conjunction) which gives context to the images, people will be able to connect to the message and apply the learning to / in how they sleep. The idea here is that it can be cooler and more “presient, focal, notable, noteworthy, salient,” to know the benefits of why you are doing something or how it works, or interesting facts about it. I think it makes it more relatable and exciting . . . maybe, you’ll also want to give it a try (Try it out more) too!
Sleep Content & Research Pivot
Prioritizing what information to share and what topics work together for a substantial and engaging read.
Pivot ⸾ Sleep Questions ⸾ Redirection ⸾ Selection ⸾ Message
During my investigation on sleep topics, I ended up with content that ranged from sleep stages to sleep benefits, to what makes you fall asleep. The more I searched the more I realized how much content was out there. With this continuing expanse of content, I realized that sharing too much content with a broad focus might actually cause readers to be distracted and be surface level.
So, I had to consolidate the information that seemed related and could connect enough to provide enough similarity but variety to focus the content, provide more depth for the reader to process, and be a good starting place, where readers could look into the topics in more detail later or move through their own reading tangents at their own pace if they’d like to. (break up into 2 sentences) From the research ^, 5 themes were chosen.
Narrow in on 5 Topic Themes
The themes are landing points for people to take in content and learn about sleep pathways.
Cycles
Benefits
How to Fall Asleep
Sleep Stages
Brain
Impact of Sleep on the Body
Ways to Improve Sleep Patterns
Defining the Sleep Process
How much Sleep is Best for Various Ages
Sleep Cycles Around Us
With a general population of people, who are the users of this read, the benefits of sleep and how sleep interacts with the body appear most applicable. Specific explanations on the process, cycles, and quantity of sleep are places to jump in to learn more details, with interesting facts interspersed through the writing and visuals.
Sleep themes + their pathways
Users
The intention is a strong current. Some UX . . . Transition = night and day. Short and sweet!
Pivot → Sleep → Questions → Redirection → Selected Message
During the day, we take in a lot and at night we get to process, similarily, we have out story composed of x objectives, focus, themes within the context of the problem, goal, what happens.
. . . . . . . . . . . . . . . .
Everyone Universally
(With xyz statistic people and sleep) From this, the benefits of sleep were shared From this, the benefits of sleep were shared From this, the benefits of sleep were shared From this, the benefits of sleep . . .
Assumptions |
Constraints |
Behaviors |
Frustrations |
Needs + Goals |
Lorem ipsum dolores, Lorem ipsum dolores, Lorem ipsum dolores, Lorem
Lorem Ipsum , Lorem Ipsum, Lorem Ipsum, Lorem Ipsum , Lorem Ipsum, Lorem Ipsum, Lorem Ipsum , Lorem Ipsum, Lorem
Theory
Lorem Ipsum
Hypothesis
Lorem Ipsum
HMW
How does the read piece together and communicate its message to the users, how does this assembly give context to the message, could be learned and assimilated well, and retrieved for actual use in their lives
Goal
Lorem Ipsum
Strategy
Lorem Ipsum
~ Problem Statement ~
+ + + Energy
CONTENT COPY: “Keep the body’s defenses strong & capable. During rest, you create protective antibodies, which combat illness. You also build up your energy, so you can fight bugs and stay healthy.”
⬆ Social & Emotional Skills
Intention / Why:
Benefits, Context, Share
Intention / Why:
Stronger Immune System (P1 of H3)
Intention / Why:
CONTENT COPY: Sleep quality, quantity, and satisfaction impact how energized you feel for the day. Increased sleep satisfaction = stronger feelings of energy and positive emotions.
CONTENT COPY: When you are well rested, you are better able to recognize emotions in other people. Getting good sleep sustains your emotional empathy, so get some rest and emote!
Intention / Why this starts and people would be interested . . .
CONTENT COPY:
+ Lower rates of ♡ disease
+ Preventing depression
+ Lower Inflammation
+ Greater physical output
+ Increased concentration
How To Do It
Intention / Why: Wrap it Up & Link/ Connect to the next section
CONTENT COPY:
+ Less Noise
+ Cooler Temperatures
+ Consistent Time for Bed
+ Get a good pillow
+ Be active during the day
Email Design Process, Piecing it Together
Reader’s Sleep Stages + Cycles
Sleep Process, what is being shared, related to everyone.
With people naturally moving into sleep, (even) with their different jobs, travel, and destinations, it seemed relevant to share about the sleep process, how it happens to everyone, How much sleep they should get across their life span, depending on how many years they’ve lived here, what there age is.
Rapid Eye Movement (REM) + Non-rapid Eye Movement (NREM) in Sleep
REM | Lorem Ipsum Dolores, Lorem Ipsum Dolores, Lorem Ipsum Dolores.
NREM | Lorem Ipsum Dolores, Lorem Ipsum Dolores, Lorem Ipsum Dolores.
3 Themes Revisited
Visual Design
UX Design
Science Reframe
4 Sleep Stages, Infographic # 1
Visuals and text combine for a (coherent) take on the sleep stages and their details.
What happened here in the design process and the intention for the user!
Visual Design:
UX Design:
Science Reframe:
Science Visuals
4 Sleep Stages, Infographic # 2
Visuals and text combine for a (coherent) take on the sleep stages and their details. New Colors and Icons!
What happened here in the design process and the intention for the user!
Visual Design:
UX Design:
Science Reframe:
Sleep Infographic 2, Time Graph
Full Night’s Sleep, % in Each Stage
CONTENT COPY:
Intention/ Why: List how much sleep is recommended for different age groups simply and in partnership with the doughnut graph, which shows how long overall you would be in each stage during sleep.
Toddlers: 11 - 14 hours
Children: 9-11 hours
Teenagers: 8-10 hours
(Young) Adults: 7-9 hours
Well-Aged: 7-8 hours
Use a second graph to relay information connected to the stages, shown through the 1st infographic. The second
The second graph had enough information related to it that it could be contained in it’s own infographic and its own section. While this section stands on its own it also links with the 4 sleep stages by capturing the total amount of time (around) a person is moving through the 4 stages at night, while the above (1st) graph indicates 1 cycle of sleep versus the total cycles of sleep a person may move through during sleep. Additionally each cycle varies slightly in how long a person is in each stage so this graph intends to show the overall % , which would be different for each cycle, a person averages 3-4 cycles a night, and most likely nuanced for each person as well.
Stage 1
2- 5%
Stage 2
45-55%
Stage 3
15-20%
Stage 4
20-25%
With a general population of people, who are the users of this read, the benefits of sleep and how sleep interacts with the body appear most applicable. Specific explanations on the sleep process, the cycles, and quantity of sleep are places to jump in to learn details on sleep with interesting facts.
Specific explanations on the sleep process, the cycles, and quantity of sleep are places to jump in to learn details on sleep with interesting facts interspersed throughout the writing and in the.
A mix of colors, layout, and graphics add, provide another dimension. With interesting facts interspersed throughout the writing and in the visuals to draw readers into other cool places.
Layout
Visual & Text Choices
Color
Lorem ipsum colors and design choices
Hierarchy
Specific explanations on the sleep process, the cycles, and quantity of sleep are places to jump in to learn details on sleep with interesting facts interspersed throughout the.
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
With a general population of people, who are the users of this read, the benefits of sleep and how sleep interacts with the body appear most applicable. Specific explanations on the sleep process, the cycles, and quantity of sleep are places to jump in to learn details on sleep with interesting facts.
Specific explanations on the sleep process, the cycles, and quantity of sleep are places to jump in to learn details on sleep with interesting facts interspersed throughout the writing and in the.
A mix of colors, layout, and graphics add, provide another dimension. With interesting facts interspersed throughout the writing and in the visuals to draw readers into other cool places.
Layout
Visual & Text Choices
Color
Lorem ipsum colors and design choices
Hierarchy
Specific explanations on the sleep process, the cycles, and quantity of sleep are places to jump in to learn details on sleep with interesting facts interspersed throughout the.
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
Text Choice
Lorem Ipsum Dolores, Lorem Ipsum Dolores, Lorem Ipsum Dolores, Lorem Ipsum Dolores, Lorem Ipsum Dolores
Sleep + Recharge Concept to Newsletter, but for email!
Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum.
Write here . . .
Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum.
Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum.
Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum.
Resources, Links, & Articles
Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum.
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum.
Lorem Ipsum
Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum.
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum.
Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum.
Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, Lorem Ipsum.
Reflection
Statistics Page . . . Click around and search for new facts , science, and summaries ! : )
With 89% of people in the Nation reporting sleep problems, a read on how to get a better night’s sleep and how sleep works seemed relevant for people who may want to learn more about their sleep patterns in a simple and engaging way.
Link , Science Data
People spend on average 10 seconds reading a brand email (“Statista” Link) Benefits ~ “People are more likely to remember visual info.” (Link)
People spend on average 10 seconds reading a brand email (“Statista” Link) Benefits ~ “People are more likely to remember visual info.” (Link)
People remember around 80% of what they see versus 10% of what they hear and 20% of what they read. (Link)
People process images 60,000 x’s faster than written or typed text. (Link) Or the average time people spend asleep or how much sleep on average is recommended for xyz adults.
People spend on average 10 seconds reading a brand email (“Statista” Link) Benefits ~ “People are more likely to remember visual info.” (Link)
People will spend less than 15 seconds actively reading on a website. (Link) People more strongly remember content when images combine and support the text. (Find Link!)
People process images 60,000 x’s faster than written or typed text. (Link) Or the average time people spend asleep or how much sleep on average is recommended for xyz adults.
People spend on average 10 seconds reading a brand email (“Statista” Link)
People remember around 80% of what they see versus 10% of what they hear and 20% of what they read. (Link)
Project Notes
What’s up with the users?
Bring it back to the users after setting up the process for creating the newsletter. Protopersona imagery. = can show a graph here too ! UX
TEXT
like a car road or a link . . . . .
VROOM !!!
🏎
🏎
🚲
