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!