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 will be highlighted and presented to people, an initial research phase determined the types of topics being shared online and what themes seemed to appear more often than other themes. With a mix of online content readily available, select topics were chosen for a concise 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 flexibility to be adjusted during 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 visuals and text and pair them together.

Visual information portrays a message and connects various topics together in the order it presents content, it’s hierarchy, and the way it is pieced together with image sizes and text placement, it’s layout. The overarching theme of sleep is meant to provide restful content for readers, so colors and fonts were chosen to represent this naturally occurring process. The layout and hierarchy connect this theme, and related content utilize visuals and text, which combine for a stronger 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.

◈ Back and forth learning, with text and related images throughout the read.

A conversational tone engages the reader and provides fluency in relating to the message while giving opportunity to interact with content. 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 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. 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 realized sharing too much information with a broad focus might actually cause readers to be distracted and be

surface level. So, I had to collate the information that could connect enough to provide similarity and overlap but with enough variety to provide other learning topics for readers. This would focus the content while providing more depth for the readers to process. Additionally, the related but assorted topics become a place where readers may look into the topics in more detail and move through their own reading tangents at their own time and pace. From the research, 5 themes were identified.

Narrow in on 5 Topic 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 process, quantity of sleep, 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 extraneous effort when processing the email sleep message.

Theory
- A read with modern design choices will work to capture readers’ attention and motivate them to understand the content.
Hypothesis
- Infographics and a short read time will keep readers engaged because they will use a small amount of time to learn multiple facts.
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, 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 work, social life, and hobbies, she also has limited time to give for difficult and time consuming tasks, even if they could 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 abilties . . . 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 / 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

Sleep Infographic 2, Time Graph

Full Night’s Sleep

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

Stage 1

2- 5%

Stage 2

45-55%

Stage 3

15-20%

Stage 4

20-25%

moving through the 4 stages at night, while the above (1st) graph moving through the 4 stages at night, while the above (1st) graph 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.

% in Each Stage

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!

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.

Learn more