william wood presentation of work...william wood // ui ux // sins of cooksmarts 9.27.16 screenshot 1...

PRESENTATION OF WORKWILLIAM WOODCDES Thesis | Presentation 1 | January 23rd, 2017

CDES Thesis | Presentation 1 | January 23rd, 2017 | 1

How design live was the first opportunity to create a unified system of design to direct people and show similarities of design in a system. By creating wayfinding signage that paired with the schedule and the materials presented to attendees of the event, I was able to direct and coordinate their behavior at the event in a way that seemed unified and normal. By just creating the similarity people would be able to recognize elements of the event and would know if something semed out of place. I think this was my first real interest in how people interracted with my designs.

William Wood | How Design Live | Type Pragmatics | Spring 2016

Wayfinding Signage

C1

123

1 1

100-115

120-135

120-135

100-115

120-135

120-135

100-115

120-135

120-135

5’ 5”

3’1’ 3/4”

Suite 10

Suite 20

Suite 30

Door/Suite # SignageFloor Numbers

Roboto ThinBEBAS

Fonts

Icons

Restrooms

Elevator

Stairs


rebmuNegaPdraobpilC rebmuNegaPdraobpilC

ScheduleDay 3 SATURDAY, May 21

Design & Creativity

Design & Creativity

In-House Management

In-House Management

Vision & Leadership

Vision & Leadership

Branding & Packaging

Branding & Packaging

Creative Entrepreneur

Creative Entrepreneur

Interactive Design Interactive Design

07:35A08:30A

TOOLS AND RESOURCESBrought to you byADOBE

08:00A09:00A

EXHIBIT HALL OPEN

08:00A09:00A

BREAKFAST sponsored by Workfront

09:00A10:00A

SCI-FI MEETS REALITY: THE FUTURE OF DESIGN with Amy Webb

10:15A11:00A

A CALL TO COURAGEBlake Howard

MENTOR, MANAGE, AND MOTIVATE: HIRING AND MANAGINGGail Anderson

DESIGN AT SCALEDoug Powell

PANEL DISCUSSION:WINNING A SEAT AT THE TABLE 1Steve LamoureuxPeter Borowski

HOW TO GO FROM A CONCEPT TO A SCALABLE VENTUREKristian AndersonIlise Benun

CINEMATIC UXBrad Weaver

HARDER, BETTER, FASTER: IN-HOUSE AGENCIES AND WORKFLOW TECHBrought to you by inMotionNow

11:30A12:15P

HOW CAN ASKING QUESTION ACCELERATE YOUR CREATIVITYSam Harrison

STORIES OF INNOVATIONWayne Barringer

DESIGN THE LIFE YOU LOVEAyse Bersel

PANEL DISCUSSION:WINNING A SEAT AT THE TABLE 2Steve LamboreuxPeter Borowski

CREATIVE ENTREPRENEURSScott Boylston

INTERACTIVE DESIGN

TOOLS & RESOURCESBrought to you by MAXON

12:00P EXHIBIT HALL OPEN

12:15P01:45P

LUNCH ON YOUR OWN

12:45P01:30P

TOOLS & RESOURCESbrought to you by Adobe

01:45P02:45P

DESIGN GLOBALLY - THINK LOCALLY with Sagi Haviv

03:00P03:45P

A CHALLENGE FOR A GLOBAL AUDIENCEZiad Al-Kadri

MIXING PRACTICE WITH PASSION: CONFESSIONS OF AN IN-HOUSE DESIGNERMaurice Woods

VISION AND LEADERSHIPEmily Oberman

BRANDING & PACKAGINGHamish Campbell

SOCIAL MEDIA FOR CREATIVESRoberto Blake

INSIDE NPRScott Stroud

GEN Z IS COMING: ARE YOU READY?Diane Domeyer

brought to you by The Creative Group

04:15P05:00P

DESIGN & CREATIVITYPum Lefebure

THE ART OF MAKING DIGITAL TRANSFORMATIONNathaniel Axois

TECHNOLOGYMEETS NEURO-SCIENCEAdam Gazzaley

MAKE ENEMIES AND GAIN FANSFredrik Ost Magnus Berg

FIRESIDE CHATSteff GeissbuhlerIlise benun

MISSED CONNECTIONJosh Payton

IT'S NOT EASY BEING GREEN: PACKAGING DESIGNCincy Cooperman

brought to you by Pantone

05:30P06:30P

THE CROSSROADS OF SHOULD AND MUST with Elle Luna

07:15P EXHIBIT HALL CLOSES

06:45P07:45P

IGNITE YOUR PASSION PROJECT: A SIDE-GIG SEMINAR & CONNECTING EVENT with Terri TrespicioSponsored by Workfront


ATLANTA 2016

Color and object SystemsHOW DESIGN LIVE

AURARIA LIBRARYWayfinding and Signage CDES Thesis | Presentation 1 | January 23rd, 2017 | 2

Auraria Library signage project was a group project created in conjuction with Eve and Edward. Together we created a system of signs based on CMYK and and a foundation of easy to read typography to help guide people through the library to find what they were looking for. This was another project that piqued my interest in user experience because it forced me to think about what people would be looking at in our library and what key points would drive a decision of where they would go and how they would follow through with these decisions. It was also an opportunity to create 3D ren-derings of the library in Sketchup and that was super fun. I’m looking forward to doing the same process with the gallery space.


Cooksmarts was the big endeavor that really drove my desire for people to experience my work. I did research on how people currently interacted with the site through heuristic evaluations and work-flows from interviews. I then took the information to create personas and ideal work-flows for how I wanted people to interact with the site. From there I researched typography and colors that could be used to help drive deci-sion points in the user interface and I made designs to help people stay in the system and continue using the product with a helpful UI that would help drive decisions and keep the content engaging and intriguing. This was where I decided I want people to really interact with what I do and I really love researching how people interact with design and the world around them in conjunction. There’s just something really cool about that and it drove my interest in unpleasant design and how designs manipulate our behavior.

COOKSMARTSUser Experience

BE CONSISTENT THROUGHOUT THE SITEThe “menu” title is connected to two different op-tions on mobile without any clear indication to how they are different menus or if they are supposed to be the same menu. This negates the common convention of an interface where the user is unsure of where to go for the “menu” or where to go for navigation.

SUGGESTION:Choose different verbage for “navigation” or follow the convention of other mobile menus and reduce to the hamburger icon so users can more easily identify it’s association to navigation

MAKE THE STATUS OF THE SYSTEM VISIBLEThere is a clear indication that I have already favorited this menu option, and the system gives feedback when I choose favorite as well.

WHY IT WORKS WELL:This offers a clear indication that I have not only done an action, but the system has recognized my choice and leaves this option filled in when I leave/return to the page. This helps the user know what they have done and puts them in control.

WHEN THE USER MESSES UP, DON’T LET THE UI BE A D*CK ABOUT IT

If a user wanted to change a serving size after looking at a recipe, there is a little section call-ing out the servings with a dropdown arrow. This shows an indication that there is more information/something to be changed in this area. When the user clicks they are greeted with the shown box that doesn’t provide any help or options to change. It simply asks the user to step back and correct their prior mistake.

SUGGESTION:The immediate suggestion would be to make this an available option for the user to manipulate. By offering conventions similar to editable options, the user expects to be able to change that information and will be immediately frustrated if they are given the box shown. Don’t be a d*ck and let the user edit that option and ultimatey “fix their mistake”

William Wood // UI UX // Sins of Cooksmarts9.27.16

Screenshot 1

William Wood | Cooksmarts | Style Tiles | 11.27.16

Museo 300

BackgroundR= 234G= 234B = 234

TextR= 0G= 0B = 0

Selected StateR= 26G= 76B = 37

SecondaryR= 127G= 128B = 131

FeaturedR= 7G= 182B = 73

Lorem ipsum dolor sit amet, consectetur adipisc-ing elit. Proin maximus lacus elit, et volutpat ipsum laoreet vitae. Nullam dolor elit, cursus sit amet feugiat eu, lacinia et massa. Quisque ultricies sollicitudin viverra. Phasellus eu commodo felis.

Museo Sans 300Lorem ipsum dolor sit amet, consectetur adipisc-ing elit. Proin maximus lacus elit, et volutpat ipsum laoreet vitae. Nullam dolor elit, cursus sit amet feugiat eu, lacinia et massa. Quisque ultricies sollicitudin viverra. Phasellus eu commodo felis

Baked Chicken Parmesanwith marinara and zucchini noodles

Original

Button

For:

GF Paleo Veggie

Make this Meal

Wednesday

Meal Plans

Fresh and Inviting

William Wood // CookSmarts Final Presentation // SP16 User Interface Design I Pg. 4Pg. 4

HiFidelity Wireframes

This week from Cooksmarts

Weekly Meal Plan

Balsalmic Marinated Steak Saladwith marinara and zucchini noodles

Meal Style Serving Size

Original 2 People

Spice Rubbed Roasted Porkand roasted squash with pecans


Original 2 People

Add a Meal Save Meal Plan

Menu Groceries Prep Share



Original 2 People

Make This Meal

Curry Baked Salmonwith curried coconut kale


Original 2 People

Make This Meal

Make This Meal

Make This Meal

© 2016 Cook Smarts LLC

Terms of Use | Privacy Policy

Facebook

More SmartsConnect With UsHelp/Tour

TwitterBlog

Instagram

Learn

Pinterest

About US

Contact Us


Weekly Meal Plan



Original 2 People



Original 2 People





Original 2 People

Make This Meal



Original 2 People

Make This Meal

Make This Meal

Make This Meal

Vegetarian

Paleo

GF

Original



Facebook


TwitterBlog

Instagram

Learn

Pinterest

About US

Contact Us


Weekly Meal Plan



Original 2 People



Original 2 People





Original 2 People

Make This Meal



Original 2 People

Make This Meal

Make This Meal

Make This Meal



Facebook


TwitterBlog

Instagram

Learn

Pinterest

About US

Contact Us


Weekly Meal Plan

Balsalmic Marinated Steak Saladwith fresh greens


Original 2 People



Original 2 People





GF 2 People

Making This Meal



Original 2 People

Make This Meal

Make This Meal

Make This Meal



Facebook


TwitterBlog

Instagram

Learn

Pinterest

About US

Contact Us

Change to “Make this Meal” Selected state for better UI flow and

Add a Meal Button added to show new feature after looking through each meal

Move to drop-downs for recipe cards & highlight “Make this Meal” Option

Jessica was able to add meals to her Meal Plan that she has a better tast for this week and can now enjoy every meal she picked for this week.

Your custom meal plans

After adding the meal to her cur-rent Meal Plan Jessica is able to continue searching without losing the context of her meal plan. It’s always available in the top corner.

Recent meal plans

Add a Meal

Meal Plan

Recent meal plans

Add a Meal

Meal Plan

Jessica found a meal she was interested in. She can tap and quickly navigate through more information on the recipe and can easily go back to search.

Ingredients

She is then presented with the new “Add a Meal” page where she has suggestions for her based on ingredients from her other meals, categories based on the season, and recommendations based on other meals she has liked.

Recent meal plans

Create your meal plan

start from scratchRecent meal plans

Add a Meal

start from scratch

Recommended

Create your meal plan

She scrolls to the bottom of her Weekly Meal Plan after viewing all of her meals and decides to click on the “Add a Meal” button.

Add a Meal

Add a Meal

Jessica opens Cooksmarts on her phone to see what her Weekly Meal Plan looks like. Deciding that none of these options are what she is looking for, she de-cides to add her own meal to the Weekly Meal Plan

Your free meal plans

Jessica needs to travel from her Weekly Meal Plan to the new “Add a Meal” function of Cooksmarts and then pick a new meal from there.

1. Starts at Weekly Meal Plan.

2. Moves to Add a Meal.

3. Can Select between cate-gories and recommended meals.

4. Pick a meal and evaluate it with further information from the recipe card.

5. Add to Weekly Meal Plan.

6. Can return to search with-out losing context of meal plan.

7. Jessica can add meals to her Weekly Meal Plan and isn’t limited to just the weekly suggestions. Jessi-ca is happy, and so are we.

JESSICA SPARROW WORKFLOW(experimentalist)

Jessica didn’t fi nd any meals out of the Weekly Meal Plan that really sounded appetizing this week. She has decided to instead add her own meal from the new “Add a Meal” Function of Cooksmarts.

William Wood | Cooksmarts | Style Tiles | 11.27.16

Knowledgable & Inviting

Museo 500

BackgroundR= 183G= 183B = 183

TextR= 0G= 0B = 0

Selected StateR= 239G= 73B = 54

SecondaryR= 127G= 128B = 131

FeaturedR= 62G= 163B = 219 Lorem ipsum dolor sit amet, consectetur adipisc-

ing elit. Proin maximus lacus elit, et volutpat ipsum laoreet vitae. Nullam dolor elit, cursus sit amet feugiat eu, lacinia et massa. Quisque ultric-ies sollicitudin viverra. Phasellus eu commodo

Open Sans RegularLorem ipsum dolor sit amet, consectetur adipisc-ing elit. Proin maximus lacus elit, et volutpat ipsum laoreet vitae. Nullam dolor elit, cursus sit amet feugiat eu, lacinia et massa. Quisque ultric-ies sollicitudin viverra. Phasellus eu commodo


Meal style Serving size

Original 2 people


Make this Meal

Meal style Serving size

Original 2 people

Making this Meal

Original

Original

GF

Paleo

Vegetarian

Original GF Paleo Veggie

Make this Meal

Margot FeatherbottomAge: 25 // Student with no time to cook her meals.Margo chooses to cook for herself because she lives alone and is a bit of a picky eater. She prefers quick & cheap meals be-cause of her budget, but she doesn’t want to eat unhealthy meals as well. She has also recently decided to try and keep a vegetarian/began diet as her friends tell her it’s a great way to make sure she has the best healthy options on her plate.

Margo’s goals are to be as healthy as possible while working winin a budget. She is a huge fan of coupons, shop sales, man-ager sales, and getting the best food she can for the price. Be-cause of her busy schedule, another goal of hers is to be able to pick up all her groceries at the same time on her way home from classes or work.

Her concerns come up with getting healthy options and not spending too much time shopping, and not spending too much money. Because of her student lifestyle, these concerns are priority and she needs to be able to fi nd healy options fast without spending too much money.

Margo’s cooking skills are not the best but she is willing to put in the work to get her meal right. She preffers not taking too much time and will probably be multitasking as she cooks.

Gerald Eugine SagbirchAge: 64 // Retired navy man on a fi xed income.Gerald has all the time in the world now that he’s retired and lives alone. He primarily cooks for himself these days but he’s learned his way around from his time as a navy cook. Gerald knows what he likes and has got a few new dietary needs as he’s gotten older.

His goals are to enjoy his time cooking and making sure he gets a balanced meal with plenty protein. This guy loves red meat and he’s gotta have a full serving every dinner. Gerald is also a multitasker and likes to listen to music and snack on his ingredients as he goes.

His concerns are budget, getting exactly what he likes, and preferably buying in bulk. He’s not a tech kind of man but he’ll be fl ipping records on his Sears brand record player all day if you give him the chance. As he’s gotten older he also has to worry about cutting dairy from his diet.

Gerald is a fantastic cook and is not a fan of recipes or being told how to cook. However it’s always nice to have a recipe list at his disposal so he doesn’t miss anything.

Richy RitchelAge: 36 // Well off with a dog named Zeke.Richy has a very busy work schedule and tends to eat out a lot because of it. He does like to try and cook but when he does his meals aren’t as good as he expects them to be. His lady is also a little disappointed with his food when he does cook because his food always comes out a little bland tasting.

Richy’s goals are to be as healthy as possible, to splurge on the best ingredients, and get better at cooking.

His concerns are that he is easily distracted and he has to be looking at the recipe at all times on his phone and iPad. He follows the recipe to a T and if there’s a new trendy diet he sure as hell has tried it. He doesn’t want to eat out as much be he’s not sure if he’s really the best cook either.

Richy has little skill as a cook. He’s lacking in utensils, knowl-edge, and he never adds his own fl avor to the dish because he’s too afraid to ruin the recipe that is laid out for him. He also always has leftovers and never ends up eating them be-fore they spoil.

Cooking Experience Cooking Experience Cooking Experience

William Wood // 12.5.16 // Proto Personas Updated


RESEARCH

http://www.bbc.com/future/story/20131202-dirty-tricks-of-city-design

http://99percentinvisible.org/episode/unpleasant-de-sign-hostile-urban-architecture/

http://www.atdlaw.com/2012/06/30/small-defect-on-stair-case-can-cause-people-to-trip-and-fall/

http://www.bbc.com/future/story/20131202-dirty-tricks-of-city-design

http://99percentinvisible.org/episode/unpleasant-design-hostile-urban-architecture/

http://www.atdlaw.com/2012/06/30/small-defect-on-staircase-can-cause-people-to-trip-and-fall/


RESEARCH

http://www.popsci.com/unpleasant-design#page-4 https://qz.com/370163/architects-are-purposefully-design-ing-uncomfortable-park-benches/

http://zeromilemag.com/decorative-discouragement/

http://www.popsci.com/unpleasant-design#page-4

https://qz.com/370163/architects-are-purposefully-designing-uncomfortable-park-benches/

http://zeromilemag.com/decorative-discouragement/

william wood presentation of work...william wood // ui ux // sins of cooksmarts 9.27.16 screenshot 1...

Documents