Sleep + Recharge
UX Research, Visual Design, and Content Writing
Email Newsletter
Focus
Infographics
Content Writing
Research
Science Translation
Visual Design
Email Newsletter
Coherent 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 seems 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 purpose is to communicate science on sleep in a creative but succinct way so that it has the potential to be effective in people’s lives.
With this, the focus is on emphasizing important and relevant information but translating it in an absorbable and informative way, so that content is more enjoyable, more interactive, and more likely to be 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 different lifestyles. 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 People’s Lives.
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.
To define what sleep topics to highlight and present to people, an initial research phase determined the variety of topics being shared online and what themes appeared more often than other themes. With a mix of online content readily available, select topics were chosen for an elliptical newsletter read. Based on the research, some more common and repetitive, and some less frequent but fascinating, the visual plan was loosely drafted, so that it has the ability to be adjusted for this project journey.
02 Visual Design
Select a visual theme, with an emphasis on colors, layout, and hierarchy.
The Design Focus
◈ Tone of voice and text choice, with titles like “Benefits,” and “How to.”
◈ Hierarchy, with space to take in, process, and connect content.
◈ Color choice, to highlight key areas and pair images and text together.
Visual information portrays a message and connects various topics together through the order it presents content, it’s hierarchy, and the way it is pieced together, it’s layout. The overarching theme of sleep is meant to provide restful content to readers, so colors and fonts were chosen to represent this naturally occurring process. The layout and hierarchy connect this theme and related sleep topics and other themes utilize visuals and text, which combine for a salient message and reader experience.
03 Communication Translation
To the point text + related imagery + engaging and conversational tone + mood match
The Design Focus
◈ Tone of voice, that is relatable, understandable, and clear.
◈ Passive to active learning, with content taken off the page and into life.
◈ Related visuals, with text and images interspersed throughout the read.
A conversational tone provides clarity and fluency for the reader to relate to the material and opportunity to interact with the message. For this read, interacting is looking at the visuals, taking time to process the content, and referring to it later, rather than disengaging by briefly scanning the material and leaving the email page. If it is relevant, piques their interest, and indicates how it may benefit them, the message may anchor with individual understanding and be applied with intrigue, curiosity, and engagement.
Sleep Content & Research Pivot
Prioritizing what sleep information to share and what topics work together for a substantial, focused, and interactive read.
Sleep Questions ⸾ Selection ⸾ Pivot ⸾ Redirection ⸾ Message
During the investigation of 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. I originally thought I would just write about sleep, but I didn’t realize how much breadth that encompassed. With this continuing expanse of content, I decided too much information with a broad focus might actually cause readers to be distracted while
narrowing in on themes would focus the content and provide more depth for readers to process. Additionally, the assorted but related topics are a place for readers to view in more detail and move through their own reading tangents in their own time and at their own pace. So, I collated information that seemed like it would connect by presenting similar and relevant writing with a smattering of diverse learning topics for readers. This variety and overlap of content would connect themes and fortify the sleep science message. From this preliminary research phase, 5 themes were identified.
Narrow in on 5 Main Themes
The themes are landing points for people to take in content and learn about sleep pathways. These are the chosen sleep themes from initial research.
Benefits
How to Fall Asleep
Brain
Sleep Stages
Cycles
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 sleep process, quantity, and cycles are places to jump in to learn more details, with interesting facts interspersed through the writing and visuals.
Sleep themes + their pathways
Users
People who need sleep, people who would interact with an online article on health, people who are normalized to the speed of the tech world.
Parent → Employee → Graduate → Aunt → Sister
With people sleeping for 1/3 of their lives, link, and with fewer than 1% of people needing less than 6 hours of sleep a night, link, the user focus is able to be generalized to most people. For the purpose of the email newsletter, the user group also consists of people who have access to email and are used to technology in their lives.
Protopersona ~ Abigail
Abigail is a city resident who commutes by train to work every day. She has her day job and her after work hobbies, which she takes time to work on in the early evenings at the local rock climbing gym and the pop-up exhibits around the art’s district. Abigail doesn’t have much time to read since most of her day she completes and learns software languages, and she relaxes with friends during her off hours. While she doesn’t get much time for extracurricular reading, since she likes to use her time for other activities, she does enjoy learning new information, especially if it has a good twist.
Behaviors
She catches up on business, news, and emails during her commute to work.
She shares links, screenshots, and interesting articles to her friend and family group chats via her phone.
She isn’t too concerned about sleep since she sleeps when she has the time. However, she wouldn’t mind learning other ways to rest and get energized for her day.
Abigail needs a seamless newsletter read that synthesizes relevant health information with visuals and easy to read text so that she can learn something new, incorporate it in her day, and feel like she gained something by reading or scanning, versus losing time and expending too much effort when processing the email sleep message.
Hypothesis
A read with modern design choices will work to capture readers’ attention and motivate them to understand the content. Infographics and a short read time will keep readers engaged because they will use a small amount of time to learn multiple facts.
Insights
Everyone needs to sleep; A read with modern graphics and concise information will work with readers’ lifestyles and processing styles.
HMW
HMW piece together the read and communicate its message?
HMW give context and saliency to how the message is learned?
HMW locate key information and share it in 1 place?
Goal
Create a sleep letter with modern infographics, a natural speaking tone, and concise text for a science article that is thought of differently and processed differently as well. Readers will engage with content that matches their way of life and ideal processing situation.
Strategy
Implement select design choices, with color, layout, and hierarchy, to translate science into influential and understandable content.
~ Problem Statement ~
Most People Universally
Frustrations
How does she make the most of her day with a mix of work, social, and family events?
She receives constant spam emails with promotions, online advertisements, and commercial news. If she reads email articles, she will glance at titles and images.
When she reads health articles, 1 topic might take up multiple pages. This is exhausting to read and process in a sitting.
Assumptions
She is immersed within the modern technological world and has easy access to smart technology.
Her inbox is constantly spammed with various random email promotions.
Constraints
Because she has a mix of priorities, with her work, social life, and hobbies, she also has limited time to give for extraneous tasks, even if they may benefit her health.
Needs + Goals
She needs emails to clearly state what they are sharing and to make things simple regarding clicking and scrolling through page content.
She needs short read times with a mix of facts consolidated together, so that she has something light to read while she gets ready for the hustle and bustle of her work day.
She wants to be able to learn something without overwhelming her morning cognitive abilities . . . it’s still early and she needs coffee.
+ + + 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 and Why: It is more common to learn that sleep influences people’s ability to feel equipped for their day. It is less commonly shared that sleep relates to emotions and social skills. This was an unusual but cool fact for people to learn.
Benefits + Sleep in the Body
Intention and Why: With people looking to prevent illness and combat its effects when they get a cold, it seems prevalent to start with how sleep influences the immune system’s ability to fight different bugs.
Stronger Immune System
Intention and Why: During research, the concept of sleep satisfaction was explained, where people may sleep a lot but have poor satisfaction and vice versa. So, I wanted to share how well a person sleeps relates to their well-being.
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 and Why: The benefits of sleep start the article, so that readers are hooked into learning how getting sleep may improve the quality of how they function during their day.
CONTENT COPY:
+ Lower rates of ♡ disease
+ Prevent depression
+ Lower Inflammation
+ Greater physical output
+ Increased concentration
How To Fall Asleep
Intention and Why: After beginning with sleep benefits and describing a few in detail, sharing how to sleep better wrapped up the section and connected benefits to action.
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
People’s Sleep Stages
What happens during the sleep process. With people’s different lifestyles and their work, family, and extracurricular activities, what happens physiologically is pretty consistent across individuals.
CONTENT COPY:
The Brain and Defining the Sleep Process
Falling asleep between 8pm - 12am gives you the best opportunity to move through your sleep cycle. The early and late hours of the night sync up with shifts in sleep patterns. So, you’ll have a better ratio of restorative and dream sleep stages before midnight. The brain moves through different wave patterns, and during this rest, memories are created and healing occurs.
Intention and Why: Describing what happens when people sleep seems like a main area that people would want to learn about regarding sleep. With a newsletter on sleep, learning what it is and its mechanisms is a main message to be shared after the benefits of sleep section .
The Brain
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
Sleep Process:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
People
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
Rapid Eye Movement (REM) in the sleep process
REM | The phase of sleep where most dreams take place. During REM, brain activity, heart rate, breathing, and blood pressure increase. The body becomes immobile and the eyes rapidly move while closed. Link
Non-Rapid Eye Movement (NREM) in the sleep process
NREM | The phases of sleep that are dreamless and most frequent. During NREM, breathing and heart rate slow down and become more regular, blood pressure lowers, the body is relatively still, and it is difficult to wake up. This process happens during 3 out of the 4 stages of sleep and the last 2 Non-REM sleep stages encapsulate the deepest sleep. Link
REM + NREM IN SLEEP
Sleep is characterized by eye movements that indicate what stage of sleep people are in, whether or not they are dreaming, and what physiological changes may be occurring.
What characterizes REM and NREM are the eye movements that occur during these processes. REM sleep, with frequent eye movements, occurs only in the last stage of sleep, where people dream. NREM sleep, with relaxed eyes, is a dreamless sleep that occurs in 3 of the 4 stages of sleep. Different brain waves and physiological states happen in each sleep stage.
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.
Science Visuals
The infographic visually represents the 4 stages of sleep and their own characteristics. REM + NREM are the beginning points of the infographic, because they were emphasized and frequently appeared in the online articles.
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.
Content Copy:
Non-rapid eye movement (NREM) and rapid eye movement (REM) characterize your 4 sleep stages. The stages determine how you relax, rest, and dream. A cycle of sleep through these stages takes 1.5 - 2 hours.
Instead of a sequential order of 1, 2, 3, and 4 through each stage of sleep, people actually navigate through stage 1, 2, 3, then return to stage 2, before progressing into REM sleep in stage 4.
The infographic identifies the type of eye movements, time in the first cycle, percent of a full night’s sleep, a few physiological changes, and brain waves that occur in each sleep stage. A full cycle of sleep through the stages is completed in around 1.5 - 2 hours.
Sleep Infographic #2, Time Graph
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 2nd infographic to relay information about the stages total duration, which connects to the 1st infographic’s 4 stages of sleep breakdown but with a focus on 1 cycle.
Stage 1
NREM
2- 5%
Stage 2
NREM
45-55%
Stage 3
NREM
15-20%
Stage 4
REM
20-25%
A third of people’s lives is spent asleep, and as we grow and develop, our sleep cycles change too.
Recommended Sleep:
Full Night’s Sleep % in Each Stage
The 2nd 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, since it captures the total amount of time that a person moves through the 4 stages at night.
While the 1st infographic indicates the time in 1 cycle of sleep, the 2nd infographic indicates the estimated time a person would spend throughout a full day or night’s sleep, of 7-9 hours, for an adult, where a person would average 3-4 total cycles through the stages of sleep, Link.
Additionally, this graph intends to show the overall %, where each cycle would vary slightly in duration for each person. The text pairs with the visual image by indicating how much sleep people should get depending on their development and age. Maybe write something more here.
⬤ ⬤ ⬤ ◯ ◯ ◯ ◯ ◯ ◯
⬤
◯
◯
◯
⬤
◯
⬤
◯
◯
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.
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
Tone of Voice
Lorem Ipsum Dolores, Lorem Ipsum Dolores, Lorem Ipsum Dolores, Lorem Ipsum Dolores, Lorem Ipsum Dolores
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!
A Final Newsletter which brings together UX Design, Visual Design, and Relevant Research for a Sleep Read that Keeps People Going.
The newsletter read brought together research, visual design choices, and a themed layout for a modern read that portrays content on sleep. The sleep information integrates into a visual design that brings together visual content that contains both imagery and text, so that people have a more coherent and collated health read to learn more about in a clear and connected organizational manner. These are the ways in which this project’s goals were showcased in the news letter read:
Sleep + Recharge Read
Project Goals + Visual Application
Benefits | Impact of sleep on the body
Goals: Lorem Ipsum Dolores
Visual Application: Lorem Ipsum Dolores
How to fall asleep | ways to improve sleep patterns
Goals: Lorem Ipsum Dolores
Visual Application: Lorem Ipsum Dolores
Brain | Defining the sleep process
Goals: Lorem Ipsum Dolores
Visual Application: Lorem Ipsum Dolores
Sleep Stages | How much sleep is best for various ages
Goals: Lorem Ipsum Dolores
Visual Application: Lorem Ipsum Dolores
Cycles | Sleep Cycles Around Us
Goals: Lorem Ipsum Dolores
Visual Application: Lorem Ipsum Dolores
Resources, Links, & Articles
“A sleep cycle lasts on average of 1.5 - 2 hours, so sleeping 7.5 hours is equal to around 4 to 6 cycles of sleep.”
◈ Sleep Cycle ◈
Active Brain During Sleep
“Some parts of the brain use more oxygen and glucose while asleep than when awake. We used to think that everything shuts down when we sleep, but scientists have discovered that our brains are active in sleep.”
Remembering Visuals and Words
“People will remember about 65% of what they see in a visual while people will remember about 10% of the information they hear out loud.”
◈ 24 - Hour Cycles ◈
Changing Sleep Patterns
Researcher Color Efficiency
“You have a master clock in your brain that is influenced by the light and dark of a 24-hour day. The circadian rhythm, from “circa diem” (around a day), signals your sleep.”
“The first 3 hours of sleep have the deepest stages of sleep (Slow wave sleep). Later in the night, people have more vivid dreams, in REM sleep.”
“Researchers spent 39% less time finding information in a document with visuals, colors, and charts.”
◈ Washing Machine Cycles ◈
Lack of Sleep and Focus
Improved Reading Comprehension
“During sleep, your brain is washed with cerebrospinal fluid, like a washing machine on cycle. This process helps to clean out toxins and refresh it.”
“Everyone who is has a lack of sleep loses concentration and experiences mood changes.”
“Reading comprehension is improved by 50% through the use of improved infographics and increases by 70% when color is used in visuals.”
Cycles, Fun Facts
Other Sleep Facts
Learning + Tech
. . . . . Link . . . . .
. . . . . Link . . . . .
. . . . . Link . . . . .
. . . . . Link . . . . .
. . . . . Link . . . . .
. . . . . Link . . . . .
⬖ . . . . . Link . . . . . ⬗
❖ . . . . . Link . . . . . ❖
◆ ◇ . . . . . Link . . . . . ◇ ◆
◈
◈
◈
People remember around 80% of what they see versus 10% of what they hear and 20% of what they read. (Link)
Resources
With a mix of online articles and a few publications, there was a way for people to be able to read more if they have the time and want to look into the topics in more depth. A place to share the resources was included at the bottom of the newsletter in the green footer. While key points were pulled out of the resources and into the newsletter, people still might want to take their own dive into the research and have quick access to the links so they can learn more about how sleep works and how it influences their life.
People process images 60,000 x’s faster than written or typed text. (Link)
Reflection
This project brings together health with design for people to learn more and see how things can work into their lives. Learning something is pretty cool, but when you see it work into your life, that can be even cooler, like the frosting on a sundae. After completing the GA course, the class was encouraged to work on a project that aligned with our interests.
Realistically, it took more time, energy, and organizing to complete the newsletter than I had initially estimated. With a better workflow, I think the creation part of the newsletter would be faster. This would result in more time for other projects and time to learn new UX skills and UX workflows for health-related projects or other topics.
People spend on average 10 seconds reading a brand email, and people will spend less than 15 seconds actively reading on a website (Link).
Next Steps
With a read that made its way to their email inbox, and would be either scanned, read for a short duration, and possibly not opened at all, the idea of asking for surveys and timed tests seemed like a detraction from the experience of learning something, possibly a little bit differently, from the sleep newsletter.
The focus of the project was on UX research, visual design, and communicating science in a way that was relatable and absorbable. While choosing to not get feedback from actual readers so they could enjoy the read without a follow-up survey before and after the newsletter was sent to them, important feedback could have been missed and insights from a synthesized persona rather then from a conceptual proto-persona may have changed the design too.
With the science communication focus, it would have been beneficial to see how the information in text, imagery, layout, infographics , and length translated to people. Additionally, some grammatical errors were caught and amended in the case study that could have been recognized earlier through usability testing. Overall, I think that the user experience was prioritized in the view of people feeling like they want to interact with the read, remember and explore content, and apply the information to their lives.
Reflection
