Issuu on Google+

Haley A. Hawes


Binder BRANDING   /   USER EXPERIENCE DESIGN   /   USER INTERFACE DESIGN

“I search for answers in the stacks of paper that are jutting out from my coat pockets, and I think to myself how I wish I had more time to familiarize myself with my patients’ conditions.” — Joshua Liao, M.D.

Haley A. Hawes  /  Design Portfolio  / Binder


Caring for a child with special needs is overwhelming.

PARENTS Parents of special needs children are extremely busy. Between shuttling children to and from doctor’s appointments, trying to keep track of medical information, and helping their children complete prescribed developmental exercises, parents have a lot less time to focus on the real joys of parenthood.

DOCTORS Doctors who have patients with complex cases (such as special needs children) must spend extra time making phone calls and exchanging emails with other physicians to familiarize themselves with the patient’s situation. This inefficient method of collaboration leaves less time for each doctor to focus on providing the best care for their patients.

SOFTWARE Traditional Electronic Medical Record (EMR) systems only focus on data from a single institution. Because of this, they do not encourage collaboration between physicians that share the same patients. Similarly, applications for patient use only support the records from one institution, scattering their data into multiple formats and locations.

Haley A. Hawes  /  Design Portfolio  / Binder

Binder creates a system of “three-way-communication” that encourages collaboration between parents, doctors, and therapists.


WHY “BINDER?” In our research, we found that many parents of special needs children kept all important medical information in one or multiple three-ring binders. The concept of a binder also alludes to the ability to easily keep track of information in one central place, which is exactly what Binder does.

Three rings represent both a binder and the “three-way communication” between doctors, therapists, and parents.

The child is represented in the center of the three rings to show that the child is at the center of all communications.

Rounded terminals create a friendly aesthetic that reinforces the circular rings in the logo.

Open counters represent both the open rings of a binder and the system of open communication that Binder promotes.


Carefully planned for a simple, intuitive experience.

Sign In

Page navigation

Patients

Conditional Pages Page Actions Page Options

All Activity

Me

Doctors

Therapists

Notifications

Add New Post

FILTER BY POST TYPE

Messages

Documents

POST ATTRIBUTES Posts

All Posts

Medications

Equipment

Haley A. Hawes  /  Design Portfolio  / Binder

Exercises

Notes

Tests

Operations

Edit Post

Comment

Post Title

Post Type

Content

Upload Files

Special Instructions

Notifications

Sign Out


Easily access patient profile Messages, documents and new post

Filter activity by doctor

Ben Grimes gender age Male 7 yrs.

Links to full post

height 48 in. weight 65 lbs. conditions Down Syndrome Antrioventricular Septal Defect allergies Gluten intolerance insurance provider Blue Cross Blue Shield

Infinite scroll through activity feed

Leave comments on all public activity


Promoting collaboration to provide the best patient care.

DASHBOARD

CREATE POST

FILTER POSTS

ºº Put a face to the name ºº Quickly see notifications for each patient ºº Easily search through long patient lists

ºº Categorize by post type ºº Share files with others ºº Choose who to notify for each post ºº Keep posts private when necessary

ºº Choose which post types to view ºº Customize tabs to suit personal needs ºº View updates in real time

Haley A. Hawes  /  Design Portfolio  / Binder


Every patient, every connection. Right at your fingertips.

MESSAGES

ºº Easy collaboration with other doctors ºº Single or group conversations ºº Search conversations when needed ºº Push notifications compatible


Always accessible for parents on the go.

STAY INFORMED Parents have access to everything that’s posted on Binder, so they rest easy knowing that they’ll never miss anything important. Mobile users can enable push notifications for added reassurance.

Haley A. Hawes  /  Design Portfolio  / Binder


Detroit Green Roof Initiative WEB DESIGN   /   WEB DEVELOPMENT   /   INFOGRAPHICS

“When it’s really hot, many of us run straight to the fan or the air conditioning. This is especially true in urban areas that suffer from urban heat island effects. UHIs contribute to energy demands in the summer, straining energy resources.” — National Geographic

Haley A. Hawes  /  Design Portfolio  / Binder


Detroit suffers from the urban heat island effect

THE PROBLEM The urban heat island effect results from urbanization, where excess amounts of concrete and little vegetation causes the area to absorb more heat than the surrounding rural areas. This creates higher temperatures, which means higher energy costs and more heat-related illnesses.

Higher Temperatures

Higher Energy Usage THE SOLUTION Green roofs are literally roofs with grass or other vegetation planted on them. They are increasing in popularity due to the enormous benefits of implementation. The benefits include:

ºº Heat reflection: reduces the overall air temperature ºº Better insulation: reduces energy costs ºº Air filtration: helps filter pollutants out of the air ºº Absorbs rainwater: reduces water pollution ºº Fewer heat-related illnesses

More Pollution

Heat-Related Illness

Haley A. Hawes  /  Design Portfolio  /  Detroit Green Roof Initiative


About the Initiative

Learn the Facts

Navigation

First slide introduces the project and the mission statement

Slides overlap each other on scroll

Learn How to Help

See it in Action

Join the Cause

Download the App

Infographics showing key facts about the problem


Improvement through community involvement

KEEPING IN TOUCH Getting involved is easy. The sign up page is easily accessible at any time on the website. Emails are always opt-in so as to avoid privacy concerns. Promotional mailers contain the web address, but they also have an easy sign-up section that can be mailed back if that is the user’s preferred method of contact.

Haley A. Hawes  /  Design Portfolio  /  Detroit Green Roof Initiative


Teaching sustainability through gaming.

GREENTOPIA Users are given a city, modeled after Detroit, that is in despair. The objective is to improve the town by saving money, improving sustainability, and improving the welfare of the people. The game integrates with social media sites to earn support and gifts.


Beachbody BRANDING   /   PACK AGING   /   WEB DESIGN

Greenwashing is the deceptive use of green marketing which promotes a misleading perception that a certain company’s policies, practices, products or services are environmentally friendly. — Forbes

Haley A. Hawes  /  Design Portfolio  / Binder


Essence: the intrinsic nature or indispensable quality of something.

ORIGIN The brand name had to be both simple and representative of a friendly, soft, and natural persona. The word “Essence” has natural connotations and flows almost like water off of the tongue. One definition of the word is “the intrinsic nature or indispensable quality of something,” which is what the brand represents—the pure quality of nature.

CUSTOMIZATION Switching the “c” to an “s” and dropping off the “e” simplified the word. This not only made the logo shorter in length, but this also encouraged the soft flow from one letterform to the next. Deviating away from the common spelling also helps promotes copyright and trademark abilities.

Haley A. Hawes  /  Design Portfolio  / Essens

Essence


Space between logo and the edge of the badge is equal to one half of the height of the letterforms.

“S� letterform alludes to flowing water or a curving stream.

Badge stroke is equal to the thinnest stroke width of letterform.

Sixty-degree angle letterform stress.


No bells and whistles, just honest elegance.

Haley A. Hawes  /  Design Portfolio  / Essens


A system that works easily from bottle to bottle.

SYSTEMATIC All packages, from hand soap to laundry detergent, feature a clean and elegant design. Natural colors and an understated, yet fresh design ensure that each product fits into the consumer’s home design.

Simple, white, recycled plastic

Logo badge

Matte translucent bottle in color relevant to scent

Fully transparent graphic relating to scent that wraps around the front of the bottle

Scent, preceded by “Essence of...”

Product description/category


Bringing the essence of the ocean to the web.

SITE DESIGN

PRODUCTS

FIND US

The home page features an engaging parallax scroll that moves content through the transparent and slowly-scrolling wave graphic.

The product pages promote the free flow of information by listing all ingredients and the purpose that they serve in the product.

Users can easily find out which stores near them carry Essens brand products by inputting their location.

Haley A. Hawes  /  Design Portfolio  / Essens


Dynamic branding for multiple applications.

PANTONE 7458C

PANTONE 7524 C

PANTONE 577C

PANTONE 5135C

PANTONE 135C

STAYING FRESH Although the “splash” paired with the color blue is the primary graphic used, the graphic and color can be swapped out within the system to create a dynamic brand that is always fresh.


Sylvania PACK AGING   /   USER INTERFACE DESIGN

“There are a lot of old brands that are repackaging their image. Old brands can lose favor with the consumer simply because they look old.” — JoAnn Hines, CEO J.R. Hines International

Haley A. Hawes  /  Design Portfolio  / Binder


The challenge: make something as simple as a light bulb stand out on the shelf.

THE PROBLEM Too many packages feature the same shape and generic photography, especially products like light bulbs. These products are so similar from brand to brand, that there is really nothing that grabs the user and makes them choose a particular brand over another.

THE CONCEPT The hexagon shape is representative of the six colors that make up the visible light spectrum (indigo is no longer considered its own color). Similarly, the striped pattern peeking out from the inside of the package represents a spectrum of light created by the light bulb in the center of it all. The opening acts as a “switch” that “turns on” the lights to allow consumers to see inside of the package.

40w

60w

75w

Cool to warm colors = Dull to bright light

Haley A. Hawes  /  Design Portfolio  / Sylvania

100w


Designed to work well as a packaging system.

Color-coded SKUs allow different products to be easily identified

Product features offer more information to the consumer

Brand identity

Light bulb at the center of the spectrum, represented by a striped pattern on the inside of the package

Circular cutout cradles and protects the product from damage

Product specifications and quantity


Applying the new design to the Sylvania Energy Savings Calculator.

INCREASED EASE OF USE The steps of the calculation were streamlined to only include inputs required by the user; all the extra calculations spaces were a bit confusing in the original design because they do not require input, even though they looked like all of the other input fields.

Step 1

Haley A. Hawes  /  Design Portfolio  / Sylvania

Step 2

Step 3

Results

Share


Designed for a fast, informative experience.

EASY SELECTIONS

YOU HAVE OPTIONS

Sliders, selections, and number inputs are used for each input box so that keying in information goes as quickly as possible. No more QWERTY keyboards for inputs that don’t require text.

Reaching the end doesn’t mean you have to be done. The app allows users to easily share their savings with their friends or restart the process at the press of one button.


Beachbody REBRANDING   /   WEB DESIGN   /   USER INTERFACE DESIGN

The goal is to create the largest community of health and fitness support based on a three-pronged approach: (1) stay active, (2) improve your nutrition, and (3) share the experience with people around you. — Carl Daikeler, CEO Beachbody, LLC

Haley A. Hawes  /  Design Portfolio  / Binder


Designed to build long-term relationships rather than short-term sales.

THE PROBLEM Beachbody conducts nearly all of its business online. They do not have any retail locations, so all order processing is done online or over the telephone. Despite

Before

this, their website leaves a lot to be desired. There is little information hierarchy and each page seems overly “busy.” This can cause people to not be able to find what they are looking for and give up. There is also a huge opportunity for a new mobile app that was not being utilized.

THE SOLUTION The solution was a redesigned website that is much more streamlined with clear objectives and actions for people to take. The home page was cleaned up and now has a clear hierarchy of information. Navigation was also condensed into four easy actions. The website is responsive so that it presents well on mobile devices, and a mobile app was also created to allow users to track their workouts easily on the go.

After

Haley A. Hawes  /  Design Portfolio  /  Beachbody


Page navigation Conditional Pages Page Actions Page Options

Home

My Cart

Customer Service

Sign In

Shop

Connect

Fitness Programs

Supplements

Equipment

FILTER BY

FILTER BY

FILTER BY

Workout Type

Program Length

Workout Length

Trainer

Desired Results

Product Type

Flavor

My Profile

Gifts & Novelties

News & Articles

SuperGym

Messages

Beachbody Challenge

Coach

Message Boards

Live Chat

Coach Online Office

Pick a Program

Become a Coach

Schedule a Workout

My Business

Begin Workout

My Website

Pick Shakeology

Product Type

Program

Sign Up

New Food Diary Entry

My Clients

Enter Stats

Tools & Training

Color


Improved online shopping experience.

FILTER PRODUCTS

INSANITY

TIME > 30 Minutes CARDIO

60 MINS.

60 DAYS

30 – 60 Minutes 60 – 90 Minutes

Transform your body in 60 days with the most intense workout program ever put on DVD. Shaun T will push you past your limits to get the hardest body you’ve ever had. Plus 4 gifts!

3 Payments of $39.99!

LEARN MORE

LENGTH >30 Days 30 Days 60 Days 90 Days

DIFFICULTY Beginner Intermediate

SHOP

ºº Choose between product categories ºº Further refine results with filters ºº Hover tooltip for more product information

Haley A. Hawes  /  Design Portfolio  /  Beachbody

Advanced


CHECKOUT

ºº ºº Detailed view of cart and total costs readily available ºº Designed to make users feel like their information is safe Process broken up into easy steps

PROFILES

SHARE EXPERIENCE

ºº Users create profiles to help track their fitness goals can set up workout calendars, create food diaries, take progress photos, ºº Users view statistics, and more

integrated from major social media outlets (Facebook, Twitter, ºº Posts Instagram, and Vine)

up email reminders for anything from progress measurement days to ºº Set Shakeology ordering

ºº Constantly updated with user-generated content ºº Users feel like a significant part of the brand experience


Track your progress whenever, wherever.

STAY MOTIVATED Push notifications remind users to complete their workouts, log their progress, and answer messages. This setting can be turned on or off depending on each user’s preference.

Haley A. Hawes  /  Design Portfolio  /  Beachbody


MY BEACHBODY APP

WORK OUT WITH OTHERS

Beachbody users can now sync their Beachbody accounts with the new mobile application. The application gives users the ability to choose or modify a workout schedule, create food diaries, and track their progress with photos and statistics comparisons.

Sharing progress using Facebook and Twitter is as simple as a click of a button. Users can also chat with others who are doing the same workout programs as them to get more support and motivation.


West Michigan Graphic Design Archives WEB DESIGN   /   WEB DEVELOPMENT

The personal archives of older West Michigan designers are now at risk of being lost, which was the impetus for the West Michigan Graphic Design Archives, a place to gather, assess, and preserve the region’s legacy. — West Michigan Graphic Design Archives

Haley A. Hawes  /  Design Portfolio  / Binder


West Michigan Graphic Design Archives gathers, documents, preserves, and shares the best design work from West Michigan. THE PROBLEM Work from aging Michigan designers are in danger of being lost because there is currently no way to store and preserve its legacy. Many of this work just lives in many different peoples’ basements, gathering dust and taking up space.

THE SOLUTION The West Michigan Graphic Design Archives is a nonprofit organization that aims to collect, preserve, and share the best work that has been designed in, produced in, or commissioned by Michigan. Not only does this create historical value by keeping the Michigan design legacy alive, but it also provides an educational opportunity for design professionals, educators, and students alike.

Phase one inductees include work from Herman Miller, French Paper Company, and Western Michigan University,

Haley A. Hawes  /  Design Portfolio  /  West Michigan Graphic Design Archives


Extensive and careful user research stage.

WHAT DO OUR USERS WANT? A survey was distributed to design professionals, educators, and students living in Michigan. The purpose was to find out what types of design resources the target audience was currently using and why they liked them. This provided insight into how the site should be designed to best meet user needs.

Communication Arts, Behance

Inspiring, fun to look at, quick ideas How Magazine, Print Mag

Curated, shows only respected design work Pinterest

Stay on top of trends

What is your favorite design resource?

What makes this design resource great?


Applying research findings into the planning stage.

Explore

Visual Identity

Page navigation Our Story

Search

Contact

Search and filter to narrow displayed results Category

Category

Designer

Client

Date

Our Story

Creator

Client

Date

Contact

Projects tiled to fill entire container to create a dynamic and graphically interesting composition. Things That Matter Print - Editorial

Page navigation

Results

Project title and category shown in thumbnail view

Filter Options

Industrial Design Program Recruiting Posters

Page Actions Herman Miller Brochure

Poster

Print - Editorial

Project Continental Designs, Inc. Stationery and Business Forms Identity System

See More Like This

Crime Prevention Poster Program

Share

Haley A. Hawes  /  Design Portfolio  /  West Michigan Graphic Design Archives

Print - Promotion, Poster

Brass Quintet Poster and Stationery Identity System, Poster

Projects load in increments, saving load time


From Wordpress blog to customized CMS.

Custom Post Type FREE AND OPEN SOURCE As a nonprofit organization, the West Michigan Graphic Design Archives has little money to spend. This meant that the database system used by the organization needed to be free. Wordpress, being free and widely customizable, proved to be a great option because of this requirement.

Custom Taxonomies

Custom Fields EASE OF USE For the technically inexperienced client, the back-end had to be designed to be very intuitive and easy to use. This meant customizing the system to meet this specific need. Custom fields, taxonomies, and post types make entering new projects a quick and easy process, which means less technical support is needed.

Infinite Scroll

Customized Filter Plugin

Customize View

Search Autocomplete

Dynamic Slideshows


A clean, subtle interface that showcases the work.

PROMOTING EXPLORATION Infinite scrolling and large tiled images make it easier for users to get lost in the site. Each project page leads the user to similar projects, further continuing this feeling of a site that has never-ending content. The goal is to make users want to stay, as well as come back later.

FILTER Users can filter between categories, designers, and clients to find the project that they’re looking for. Tags can be canceled at any time.

Haley A. Hawes  /  Design Portfolio  /  West Michigan Graphic Design Archives


HELP WANTED The “Get Involved� tab is extremely important to this particular project because the client is a nonprofit. Volunteers and financial contributions are needed to keep it running, so users should be able to easily access information about getting involved if they are interested.

LIST VIEW

CONTACT

PROJECT DETAIL

Users have the option to choose how their results are displayed. Users can view more information about each project by switching from grid view to list view.

The contact form slides down from the top of the page, giving users a place to sign up for email updates and volunteer opportunities.

Large images were used to please this visually-oriented audience. All relevant project information accompanies the photos, providing an educational experience.


Thank You!


Haley Hawes Senior Portfolio