Principles of User Experience by Dimelsa Palos

DIMELSA PALOS

Principles of User Experience

CONTENTS 01

I n t e r a c t i ve U s e r E x p e r i e n c e s I nve s t i g a t i o n s 4-13

14-33

34-53

R e d e s i g n o f a n E x i s t i n g We b s i t e

00.1 _ C O N T E N T S

App Design

D I M E L S A PA L O S _ FA L L 2 0 1 4

GR.107_PRINCIPLES OF USER EXPERIENCE

Interactive User Experiences Investigation PROJECT GOAL

PA RT O N E

The final goal of this project was to identify

I d e n t i f y t h r e e c o m p l e t e ly d i f fe r e n t u s e r

and provide useful suggestions for a complex

e x p e r i e n c e s . P r ov i d e d e t a i l e d n o t e s o n t h e

user exper ience . These suggestions were

current user experience.

to anticipate any possible complications

01.1 _ I N T E R A C T I V E U S E R E X P E R I E N C E S I N V E S T I G A T I O N

in the existing process that might arise

PA RT T WO

f r o m t h e m o d i fi c a t i o n s i n o r d e r t o p r ov i d e

Using both the instr uctor and classmate

a t houg hful us e r e x p e r ie nce d e s ig n.

fe e d b a c k a s a g u i d e , p i c k j u s t a s i n g l e u s e r exper ience to analyze it in greater detail.

D I M E L S A PA L O S _ FA L L 2 0 1 4

01.2 _ I N T E R A C T I V E U S E R E X P E R I E N C E S I N V E S T I G A T I O N

GR.107_PRINCIPLES OF USER EXPERIENCE

PART ONE I d e n t i f y t h r e e c o m p l e t e ly d i f fe r e n t u s e r e x p er i e n c e s . P r ov i d e d e t ai l e d n o t e s o n t h e cur r e nt us e r e x p e r ie nce .

01.3 _ I N T E R A C T I V E U S E R E X P E R I E N C E S I N V E S T I G A T I O N _ P A R T O N E

E XP E RI E N CE O N E _ S I L H O U E T T E C A M E O

Turn on the Cameo by pushing the power button in the right bottom corner. Open Adobe Illustrator. Create a blank new document in 8.5x11 size and save. Create two layers- one labeled “print” and one labeled “cut.” _Only what will be cut should be placed in the “cut” layer.

Create a design to print and cut.

Tell Silhouette to load register marks to your document by going to File > Silhouette Connect > Silhouette Registration Marks. Leave the default settings as is and click the

E X P E R IE N C E T WO _ F IN DI N G A BAS E BA L L G A M E AT S UN S E T PA RK

“Apply” button then the “OK” button to exit the prompt.

E X P E R I E N C E T WO _ D R I V I N G TO & T H R O U G H STA R B U C KS ’ D R I V E -T H R U

Hide the “cut” layer and print on your chosen paper.

Show the “cut” layer and hide the “print” layer in Illustrator.

Send the document to Silhouette Cameo by going to File > Silhouette Connect > Send to Silhouette Connect.

1 2 3

Grab car keys and throw them in your pocket or purse.

and the Cut Conditions. In this case everything will remain in the default settings.

Open the garage door and walk to the driver ’s side of the car.

there are fields all over.

Place your document on the top left corner of cutting mat as shown in Silhouette Connect.

Since the car door is keyless and unlocks when keys are near the handled, just open the door

Pick left, just because, and realize it was the wrong way to go– the sign says Field A and you

Open the Silhouette Cameo and place the blade on the blade size selector located in

Arrive at the park.

Be completely lost on where to go because there are no signs guiding you anywhere and

are looking for Field 1. 4

Stumble across a directory by mistake that is camouflaged into the surroundings.

Follow the way shown in the directory and arrive at Field 1.

Be completely lost again because there are no signs stating which side is for Visitors or for

Ask strangers from the left if they are with the Maroon Team. Get lucky and find out it is the

13 14

Home Teams.

Once in Silhouette Connect, choose the Page Properties, the Cutting Mat properties,

to the car. Sit in the driver ’s seat. 4

Make sure is in neutral position and then press the clutch and brake simultaneously. Then

Place cutting mat with document into the Cameo and while holding it in place,

Adjust mirrors accordingly through knob located on driver ’s side door.

press “Enter ” to load it into the Cameo.

Click the “Send to Silhouette” icon on the top right side and then “Send to Silhouette”.

the left hand side of the Cameo. Turn to desired blade size, in this case 2.

press the “Start Engine” (Start Engine Stop) button.

Place the blade into cutting position and lock it in by turning the blue knob to the right.

Press car brake and remove parking brake Press clutch and brake car simultaneously and place knob in reverse position by pressing down on the knob and moving it to the far left.

_The Silhouette Cameo will read the register marks and cut in the place specified.

correct side.

Once the cut is complete, press “Enter ” to unload the cutting mat and document.

Back out of the garage checking rear mirrors and rear camera to make sure path is clear.

Finally get to sit down and enjoy watching the munchkin play.

Gently pull off excess paper off the cutting mat that is not part of the composition.

Close garage door.

Gently remove the final design from the cutting mat and place in new desired location.

Turn pandora application on iPhone

Connect phone to car by pressing the “Media” button.

Adjust air conditioning to preferred temperature by turning the left temperature knob.

Back out of driveway and then press clutch and brake and move shifting knob to 1st gear. Adjust gears up or down according to traffic, stop signs, and stop lights.

Arrive at Starbucks and find the “Drive Thru” sign and follow the arrow. Then drive in line to the drive thru speaker.

Arrive at the menu and drive thru speaker and make your selection. After deciding, let the drive thru cashier know what you want.

While you wait your turn to arrive at the window, open your Starbucks application and click the “Pay” button on the top left.

Click the Pay button at the bottom of the screen.

Arrive at the cashier window and pay for your drink.

Enjoy your drink!

D I M E L S A PA LO S | P a g e 1 o f 3

D I M E L S A PA LO S | P a g e 2 o f 3

1 2 3 4

D I M E L S A PA LO S | P a g e 3 o f 3

EXPERIENCE TWO

D I M E L S A PA L O S _ FA L L 2 0 1 4 01.4 _ I N T E R A C T I V E U S E R E X P E R I E N C E S I N V E S T I G A T I O N _ P A R T O N E

EXPERIENCE ONE

EXPERIENCE THREE

GR.107_PRINCIPLES OF USER EXPERIENCE

PART TWO Using both the instr uctor and classmate fe e d b a c k a s a g u i d e , p i c k j u s t a s i n g l e u s e r

01.5 _ I N T E R A C T I V E U S E R E X P E R I E N C E S I N V E S T I G A T I O N _ P A R T T W O

exper ience to analyze it in greater detail.

P H OTO S O F U S E R E X P E R I E N C E

CUT T I NG YO U R OWN D E SI G N W I TH THE S I L H O U E T T E C A M E O

Turn on the Cameo by pushing the power button in the right bottom corner. _The power button is easily recognizable since it is the power symbol that is found on many electronic products. _Once the power is on, the Cameo screen will show the default settings and give two options: one to load the cutting mat, or one to load the paper without a cutting mat. It is not really obvious how to choose either one. There is only a black dot on the left next to the preferred setting but it is not recognizable at all. You have to push the up or down arrows below the screen in order to make a selection, otherwise the setting will remain the default which is load cutting mat.

Open Adobe Illustrator.

Create a blank new document in 8.5x11 size and save.

Create two layers- one labeled “print” and one labeled “cut.”

Create a design to print and cut.

Tell Silhouette to load register marks to your document by going to File > Silhouette Connect

_Only what will be cut should be placed in the “cut” layer, what should be printed should remain in the “print” layer.

> Silhouette Registration Marks. Leave the default settings as is and click the “Apply” button then the “OK” button to exit the prompt. _The default settings are always what I choose. If you choose your own settings, it may or may not register the registration marks once it is time to cut. This is not something that is specified anywhere, not even in the manual. _Also not specified, is that all the artwork that will be cut must remain not only 7

within the registration marks but also about .75 inches inside of them. If artwork is placed outside of that, the Cameo may or mayCnot U Tcut T Ithe N Gartwork YO Ucompletely. R OW NThis DESIGN is also something that I learned by trial and error since it is also not specified.

WITH THE SILHOUETTE CAMEO

Hide the “cut” layer and print on your chosen paper. _It is important that when you print, the artwork is printed at 100%. If not, the

9 10

Cameo will not be able to read the registration marks- once again, not specified. 11 Place your document on the top left corner of the cutting mat as shown in

Show the “cut” layer and hide the “print” layer in Illustrator.

Silhouette Connect. Send the document to Silhouette Cameo by going to File > Silhouette Connect > Send to _Document should be placed with the arrow facing up. This comes in handy later as Silhouette Connect. well so you know the orientation in which to insert it into the Cameo. Once in Silhouette Connect, choose the Page Properties, the Cutting Mat properties, and the 12 Open the Silhouette Cameo and place the blade on the blade size selector located in the left Cut Conditions. In this case everything will remain in the default settings. hand side of the Cameo. Turn to desired blade size, in this case 2. _ The cut settings will automatically pop up. However, there are also “Weed Settings,” _The directions inside the Cameo lid actually specify to use the gray cap that comes and “Send to Silhouette.” These two options are found on the right side at the very with the blade to adjust the blade size. Do not do this. It is dangerous (not sturdy top. They are not easy to find and the icons do not make much sense. Yet, if you at all) and you might cut yourself if it slips off your hands while turning it. I am not hover over the icons, it will tell you what they are for. You can also click on the sure why the directions do not just direct you to use the blade selector that is color wheel on the far right side to change the background color of the window. directly on the Cameo. Even if you decide to use the blade cap, it is not likely to However, you can only find that out by actually clicking on the icon–there is no last you long. It is small and the Cameo has nowhere to place it so it won’t get lost. hover for that icon and nothing specifying what it is. _The Cameo blade selector actually clicks each time a blade size is selected which is _Under “Cut Settings” > “Cut Conditions,” there are two options. One is to cut by a nice way of knowing when the blade size has changed. layer and one is to cut by color. The two icons for these are exactly the same Place the blade into cutting position and lock it in by turning the blue knob to the right. 13 except the cut by color icon is in red and blue which is a little confusing. _The blue knob is pretty easy to find considering it is the one of two things that are _Lets say you are cutting by layer but the paper that you printed on is actually blue. However, it reads “open” to be able to insert the blade and “close” to lock it cardstock, therefore you need a deeper cut. You cannot just go to “Material Type” in place. This is a bit confusing. Also, “open” and “close” are engraved on the knob and select cardstock. You must click on the actual layer then make the material type and not easily readable. selection (this is especially true if you have more than one cut layer). Otherwise, Make sure that the blue knob on the right is facing up. Otherwise, the metal pole that holds 14 your settings may or may not be selected. Another option is to double-click a the mat in place will not be locked in. material type and make your own selections as far as the blade settings. This is _This is something that is not specified on the Cameo itself but is very important if something that you learn as you go, and although it is included in the user manual, you want your cutting mat to lock in place. it is not easy to figure out on your own. Place cutting mat with document into the Cameo and while holding it in place, press “Enter ” 15 to load it into the Cameo. Click D I M E L S16 A PA LO S | the P a g e “Send 1 of 2

to Silhouette” icon on the top right side and then “Send to Silhouette”.

_The Silhouette Cameo will read the register marks and cut in the place specified. 17

Once the cut is complete, press “Enter ” to unload the cutting mat and document.

Gently pull off excess paper off the cutting mat that is not part of the composition.

Gently remove the final design from the cutting mat and place in new desired location.

01.6 _ I N T E R A C T I V E U S E R E X P E R I E N C E S I N V E S T I G A T I O N _ P A R T T W O

D I M E L S A PA LO S | P a g e 2 o f 2

D I M E L S A PA L O S _ FA L L 2 0 1 4

GR.107_PRINCIPLES OF USER EXPERIENCE

SUGGESTION S FOR A BETTER U S ER EXP ER I EN CE 1

B e s id e s t he p owe r a nd p a us e but t ons , t h e f r o n t p a n e l bu t t o n s o f t h e C a m e o a r e e x t r e m e ly confus ing . I have ye t t o e ve n u s e t h e l e f t a n d r i g h t a r r ow s a n d s t i l l c a n n o t fig ur e out w hy t he y a r e e ve n t he r e , it wo u l d b e b e s t t o r e m ove t h e m c o m p l e t e ly. T h e “ Ent e r ” but t on is t oo g e ne r a lize d b e ca u s e i t i s u s e d t o l o a d t h e c u t t i n g m a t , l o a d m e d i a , a nd unloa d a nyt hing a s we ll. I t hink it wo u l d h e l p t o g e t r i d o f t h e “ E n t e r ” a n d a r r ow but t ons a nd r e p la ce t he m w it h 3 d iffe r e n t bu t t o n s : o n e t h a t s ay s “ L o a d C u t t i n g M a t ,” one t ha t s ays “ L oa d M e d ia ,” a nd one t h a t s ay s “ U n l o a d .” T h i s wo u l d m a ke i t e a s i e r fo r t he us e r t o k now e x a ct ly w ha t t o d o at j u s t o n e g l a n c e w i t h o u t h av i n g t o g o t h r o u g h t h e m a nua l.

I f t he r e g is t e r m a r k s a r e not g oing t o re g i s t e r w h e n yo u c h a n g e t h e s e t t i n g s i n t h e “ R e g is t r a t ion M a r k s ” b ox , t he n it s hould n o t e ve n a l l ow t h e u s e r t o c h a n g e t h e m a t a l l . T he w hole p oint of includ ing r e g is t r a t i o n m a r k s i n a d o c u m e n t i s t o m a ke s u r e t h e

01.7 _ I N T E R A C T I V E U S E R E X P E R I E N C E S I N V E S T I G A T I O N _ P A R T T W O

C a m e o cut s w he r e you w a nt it t o. I f it d o e s n o t r e g i s t e r, t h e n i t w i l l c u t w h e r e ve r i t “ t hink s ” it s hould – w hich by t he w ay is n e ve r w h e r e t h e u s e r i n t e n d e d . I wo u l d g e t r i d o f a ll op t ions w it hin t he R e g is t r a t ion M a r k s b ox e x c e p t m ay b e t h e “ S t y l e ” w h i c h i s w h e r e you d e fine w hich S ilhoue t t e p r od uct yo u a r e u s i n g t o c u t . I wo u l d a l s o a l l ow t h e g u i d e s t o b e p la ce d on t he d ocum e nt s o t ha t t h e u s e r k n ow s t h a t t h e i r a r t wo r k mu s t f a l l w i t h i n t h e m . T h a t w ay, t h e u s e r c a n m a ke s u r e a l l t h e i r a r t wo r k w i l l b e c u t a n d t h a t i t i s w i t h i n t he g uid e line s . I would a ls o includ e a w a r n i n g w i t h i n t h i s R e g i s t r a t i o n M a r k s b ox l e t t i n g t he us e r k now t ha t t he y mus t p r int t he d o c u m e n t a t 1 0 0 % t o m a ke s u r e t h e r e g i s t e r m a r k s a r e r e a d cor r e ct ly by t he C a m e o w h e n i t i s t i m e t o c u t . 3

Alt houg h t he s m a ll icons in S ilhoue t t e C o n n e c t t e l l yo u w h a t t h e y fo r w h e n yo u h ove r ove r t he m , t he y a r e a ct ua lly not e a s y t o fi n d i f yo u h ave n e ve r u s e d S i l h o u e t t e C o n n e c t b e for e . I t hink it would b e ne fit t he us er t o h ave t h e s e i c o n s i n a c o l o r t h a t s t a n d s o u t fr om e ve r yt hing e ls e . I t m ay a ls o b e hel p f u l t o m a ke t h e m l a r g e r s o t h a t t h e y a r e n o t e a s ily m is s e d . I t hink it would a ls o he lp t o m a ke t h e s e i c o n s m o r e r e c o g n i z a bl e . T h e bla d e ( cut s e t t ing s ) icon would wor k b e t t e r i f i t l o o ke d m o r e l i ke t h e a c t u a l C a m e o bla d e for e x a m p le .

T he “ C ut by L aye r ” a nd “ C ut by C olor ” i c o n s a r e t h e s a m e b e s i d e s t h e c o l o r o f t h e m . I t hink it would he lp if t he s e t wo icons we r e c o m p l e t e ly d i f fe r e n t . I t wo u l d a l s o h e l p t o k now t ha t t he C a m e o could a ct ua lly cu t i n t h e s e t wo d i f fe r e n t s e t t i n g s b e fo r e r e a c h i n g S ilhoue t t e C a m e o. Pe r ha p s t he r e could b e a r e m i n d e r w h e n a d d i n g t h e R e g i s t r a t i o n M a r k s s o t he us e r k now s t ha t t his is a n o p t i o n l a t e r o n .

I t hink t he r e ne e d s a lit t le m or e d i r e c t i o n fo r t h e u s e r u n d e r “ C u t C o n d i t i o n s .” I wo u l d p r ov id e a s m a ll s t a t e m e nt t ha t sa i d s o m e t h i n g a l o n g t h e l i n e s o f “ C h o o s e h ow yo u wo u l d like S ilhoue t t e C a m e o t o cut ” a b ove t h e C u t by L aye r a n d C u t by C o l o r. T h e n s o m e t h i n g t ha t s a id “ S e le ct t he laye r you w i s h t o c u t a n d c h o o s e yo u r M a t e r i a l Ty p e , d o u bl e - c l i c k a ny m a t e r ia l t o cha ng e or e d it de f a u l t s e t t i n g s ” r i g h t u n d e r n e a t h i t . Po s s i bly t h e r e c o u l d b e a s m a ll “ R e m ove ins t r uct ions” bu t t o n i n t h i s a r e a s o t h a t w h e n t h e u s e r k n ow s t h i s infor m a t ion by he a r t , t he y no lo n g e r h ave t o s e e i t e a c h t i m e .

I would com p le t e ly r e m ove t he d i r e c t i o n s o n t h e l i d t o “ A d j u s t t h e B l a d e ” t h a t s t a t e t o us e t he g r ay ca p a nd r e p la ce t h e m w i t h d i r e c t i o n s o n u s i n g t h e bl a d e a d j u s t e r t h a t i s d ir e ct ly on t he C a m e o. T his wou l d a l s o a l l ow fo r t h e c a p t o n o t e ve n b e i n c l u d e d i n t h e bla d e p a ck a g e , m a k ing it m or e c o s t - e f fe c t i ve fo r t h e u s e r. I t h i n k t h e bl a d e a d j u s t e r o n t he C a m e o would a ls o b e ne fit fr o m b e i n g bl u e j u s t l i ke t h e k n o b w h e r e yo u i n s e r t t h e

“unlock” and pr inted in a color that contr asts against the blue so the user can read it easily. 7

I t hink it would b e b e s t t o cha n g e t h e bl u e k n o b o n t h e r i g h t ( t h a t c o n t r o l s t h e r o l l e r s a nd lock s t he cut t ing m a t in p lac e ) t o a c o m p l e t e ly d i f fe r e n t c o l o r. T h i s wo u l d s e t i t a p a r t fr om t he bla d e hold e r a nd a d j u s t o r. I wo u l d a l s o c o l o r- c o d e i t i n t h e i n s t r u c t i o n s s o t ha t t he us e r id e nt ifie s t he co l o r i n t h e d i r e c t i o n s a n d c a n e a s i ly fi n d i t o n t h e C a m e o. I t would a ls o b e ne fit fr om hav in g s ay i n g “ l o c k ” a n d “ u n l o c k .”

I t is t oo com p lica t e d t o g e t t he c u t t i n g m a t t o a d j u s t i n p l a c e i n s i d e t h e C a m e o w h i l e t r ying t o p us h t he loa d but t on at t h e s a m e t i m e . I t h i n k i t wo u l d h e l p t o h ave s e n s o r s w it hin t he C a m e o s o t ha t it loa d s a t l e a s t p a r t o f i t o n i t s ow n . T h a t wo u l d t h e n f r e e t h e us e r ’s ha nd s t o p r e s s e it he r t he “ L o a d C u t t i n g M a t ” o r “ L o a d M e d i a ” bu t t o n d e p e n d i n g on w ha t t he y we r e cut t ing . I t wo u l d a l s o m a ke fo r l e s s e r r o r s o n t h e u s e r ’s p a r t f r o m not loa d ing it cor r e ct ly b e ca us e o f h av i n g t o d o s o mu c h a t o n c e .

D I M E L S A PA L O S _ FA L L 2 0 1 4

01.8 _ I N T E R A C T I V E U S E R E X P E R I E N C E S I N V E S T I G A T I O N _ P A R T T W O

bla d e for cut t ing s o t ha t us e r ide n t i fi e s t h a t t h e s e t wo g o t o g e t h e r i n w ay. I wo u l d a l s o m a ke s ur e t ha t t he “ op e n” a nd “ c l o s e ” o n t h e e n g r ave d k n o b a r e c h a n g e d t o “ l o c k ” a n d

01.9 _ I N T E R A C T I V E U S E R E X P E R I E N C E S I N V E S T I G A T I O N _ P A R T T W O

GR.107_PRINCIPLES OF USER EXPERIENCE

P H OTO S O F U S E R E X P E R I E N C E

D I M E L S A PA L O S _ FA L L 2 0 1 4 01.10 _ I N T E R A C T I V E U S E R E X P E R I E N C E S I N V E S T I G A T I O N _ P A R T T W O

P H OTO S O F U S E R E X P E R I E N C E

GR.107_PRINCIPLES OF USER EXPERIENCE

Redesign of an Existing Website PROJECT GOAL

PA RT O N E _ P RO P O S AL

To r e d e s i g n a n e x i s t i n g d o g p a r k we b s i t e

D e s c r i b e yo u r t a r g e t a u d i e n c e , o u t l i n i n g

t o m a ke it m or e v is ua lly a p p e a ling a nd

yo u r we b s i t e ' s e x i s t i n g p e r s o n a , a n d

user fr iendly. All design choices should be

e x p l a i n w hy yo u t h i n k t h e we b s i t e n e e d s

m a d e w it h t he us e r in m ind .

a redesign.

DESIGN DIRECTION

PA RT T WO _ R ES EA R CH , S I T EMAP, AN D WI R EFR A MES

For t he color p a le t t e , I chos e color s t h a t g r a s p a t t e nt ion a nd fe e l b old e r a s I fe e l

Research, pencil & digital sketches, and

that going out with your dog is always an

pencil & digital wirefr ames for website .

02.1 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E

adventure since they are just a ton of fun. I also chose a bold typeface to compliment

PA RT T H R EE _ MO CKU P S

the color s and added shadows on some

D i g i t a l m o c k - u p s s h o u l d s h ow l i n k s ,

elements to create more depth. I also

buttons, navigation, text, and/or images.

tried applying heuristics to the site and did my best to anticipate issues that a user

PA RT FO U R _ P ROTOT Y P E

m ig ht com e a cr os s .

Refine your visual direction, and continue

FINAL OUTCOME

design process.

into the main prototype stage of the A c l e a r, u s e r- f r i e n d ly we b s i t e t h a t a l l ow s user s to quickly find a destination to take t he ir b e love d d og t o.

PA RT FI V E _ U S ER FL OW Select one example of user inter action from your website design and descr ibe the u s e r f l ow o f t h e i n t e r a c t i o n yo u s e l e c t e d .

PA RT S I X _ FI N A L DES I G N F i n a l r e d e s i g n o f we b s i t e .

D I M E L S A PA L O S _ FA L L 2 0 1 4

02.2 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E

GR.107_PRINCIPLES OF USER EXPERIENCE

PART ONE _ PROPOSAL De s cr ib e your t a r g e t a ud ie nce , out line yo u r we b s i t e ' s e x i s t i n g p e r s o n a , a n d e x p l a i n w hy

02.3 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T O N E _ P R O P O S A L

you t hink t he we b s it e ne e d s a r e d e s ig n .

S C R E E N S H OT S O F E X I S T I N G W E B S I T E D E S I G N

DOGGOES.COM

PROJECT

URL

YEAR FOUNDED & FOUNDERS

CURRENT PERSONA

Redesign of the doggoes.com website.

http://www.doggoes.com/

2007, Tracy & Greg Holsclaw

The current persona of doggoes.com is a younger (18-20) individual who has plenty of time to search for a dog park. This individual is attracted to the juvenile design and color scheme of the website, even though it is outdated.

TARGET AUDIENCE

_ 18-40 year-old individuals who want to find a dog-friendly place for their beloved dogs. _ Individuals who want to be able to quickly find a local dog park online and rapidly make decision on which dog park is best suited for their dog.

The current persona of the website limits its target audience. By expanding the target audience and designing for their needs, the website would be more successful.

SPECIFICS OF CURRENT DESIGN The front page is lacking any hierarchy and it is very confusing for the user to navigate. It is very difficult to figure out what the website is even promoting at first glance. It would help to provide a clear search area and either a photo or additional information that let the user know that it is website to find a dog park and/or dog-friendly businesses. The navigation tabs currently blend into the background due to the color choice. I think these should be part of the first reads. After selecting the “Parks” tab, there are several new options. One of these options is to “Find a Dog Park.” It leads to a map of the US which has a very childish look right now. After making a state and area selection (which is a 3-step process), doggoes.com provides a map with all dog parks. The map also includes useful information for dog owners such as if the park is fenced or not fenced, if the dog must be kept on leash, or if dogs are not allowed. These are color coded which helps find what the user is looking for a bit faster. However, the experience could be even more simplified if the user was able to click on the color coded icons and see only the options they choose to see so that the map would not be so cluttered. After selecting a particular dog park, the user is able to read more detailed information about the dog park such as operating hours, fees and park size as well as read reviews about it. If the user creates an account, they may also write their own review or submit a photo. It would be helpful to include additional information such as if the dog park is best suited for big or small dogs, or if there are separate areas for each. Another option on the “Parks” tab is “Latest Dog Videos.” This is hidden and blends into the right column which reads more like an advertisement column. The video option is important in my opinion. Dog owners who have not previously been to the dog park would highly benefit from learning the dog park etiquette and other important information prior to visiting the

02.4 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T O N E _ P R O P O S A L

WHY REDESIGN?

park.

D I M E L S A PA LO S | P a g e 1 o f 1

D I M E L S A PA L O S _ FA L L 2 0 1 4

GR.107_PRINCIPLES OF USER EXPERIENCE

PART TWO _ RESEARCH, SITEMAPS, AND WIREFRAMES 02.5 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T T W O _ R E S E A R C H , S I T E M A P S , A N D W I R E F R A M E S

R e s e a r ch, p e ncil & d ig it a l s ke t che s , a nd p e n c i l & d i g i t a l w i r e f r a m e s fo r we b s i t e .

RESEARCH

SITEMAPS

D I M E L S A PA L O S _ FA L L 2 0 1 4

02.6 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T T W O _ R E S E A R C H , S I T E M A P S , A N D W I R E F R A M E S

02.7 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T T W O _ R E S E A R C H , S I T E M A P S , A N D W I R E F R A M E S

GR.107_PRINCIPLES OF USER EXPERIENCE

WIREFRAMES _ OPTION ONE

WIREFRAMES _ OPTION TWO

D I M E L S A PA L O S _ FA L L 2 0 1 4

02.8 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T T W O _ R E S E A R C H , S I T E M A P S , A N D W I R E F R A M E S

02.9 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T T W O _ R E S E A R C H , S I T E M A P S , A N D W I R E F R A M E S

GR.107_PRINCIPLES OF USER EXPERIENCE

D I M E L S A PA L O S _ FA L L 2 0 1 4 02.10 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T T W O _ R E S E A R C H , S I T E M A P S , A N D W I R E F R A M E S

WIREFRAMES _ OPTION THREE

GR.107_PRINCIPLES OF USER EXPERIENCE

PART THREE & FOUR_ MOCKUPS & PROTOTYPE _ Dig it a l m ock -up s s hould s how link s , bu t t o n s , n av i g a t i o n , t e x t , a n d / o r i m a g e s . _ R e fine your one v is ua l d ir e ct ion, a nd c o n t i nu e i n t o t h e p r o t o t y p e s t a g e o f t h e

02.11 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T T H R E E

& F O U R _ M O C K U P S & P R OTOT Y P E

d e s ig n p r oce s s .

MOCKUPS

P R OTOT Y P E

D I M E L S A PA L O S _ FA L L 2 0 1 4

02.12 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T T H R E E

& F O U R _ M O C K U P S & P R OTOT Y P E

GR.107_PRINCIPLES OF USER EXPERIENCE

PART FIVE _ USER FLOW S e le ct one e x a m p le of us e r int e r a ct ion f r o m yo u r we b s i t e d e s i g n a n d d e s c r i b e t h e u s e r

02.13 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T F I V E _ U S E R F L O W

flow of t he int e r a ct ion you s e le ct e d .

USER FLOW

D I M E L S A PA L O S _ FA L L 2 0 1 4

02.14 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T F I V E _ U S E R F L O W

02.15 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T S I X _ F I N A L D E S I G N

GR.107_PRINCIPLES OF USER EXPERIENCE

PART SIX _ FINAL DESIGN Fina l r e d e s ig n of we b s it e .

PAG E O N E _ H O ME PAG E

S e a r c h by d e s t i n a t i o n , C i t y / S t a t e , o r b o t h . A n c h o r l i n k s fo r f a s t e r n av i g a t i o n .

Icon tells the user what type of destination it is. t h e d e s t i n a t i o n o r t o a d d t o t h e r i r f avo r i t e s .

U s e r c a n r o l l ove r i m a g e s t o e x p a n d i n fo r m a t i o n a n d s e e av a i l a bl e o p t i o n s .

D I M E L S A PA L O S _ FA L L 2 0 1 4

02.16 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T S I X _ F I N A L D E S I G N

User can click these icons to either read more about

02.17 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T S I X _ F I N A L D E S I G N

GR.107_PRINCIPLES OF USER EXPERIENCE

PAG E TWO _ F IND A DOG PARK _ B readcr umb infor mati on ca n b e found b e low t op link s . _ User can roll over imag e s t o e x p a nd infor m a t ion a nd s e e av ailable op tions.

PAG E T H R EE _ AL L DO G PAR KS _ U s e r c a n r o l l ove r t o p l i n k s u n d e r l o g o t o v i e w a drop-menu w i t h av a i l a bl e o p t i o n s . _ F i l t e r by c i t y / s t a t e o r v i e w i n a l p h a b e t i c a l o r d er. _ C h o o s e G r i d o r L i s t V i e w.

PAG E FO U R _ DO G PAR KS N EAR S EL ECT ED CI T Y, S TAT E Breadcr umb infor mation to help user find what page they are on.

G r i d o r L i s t V i e w. F i l t e r by u s e r s e l e c t e d o p t i o n s o r by a l p h a b e t i c a l o r der.

the destination.

User can roll over images to expand infor mation and see av a i l a bl e o p t i o n s .

D I M E L S A PA L O S _ FA L L 2 0 1 4

02.18 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T S I X _ F I N A L D E S I G N

U s e r c a n c l i c k o n l o c a t i o n t o s e e a "Q u i c k V i e w " o f

GR.107_PRINCIPLES OF USER EXPERIENCE

PAG E FI V E _ DES T I N AT I O N OV ERV I EW

I c o n s t o q u i c k ly s h ow u s e r i m p o r t a n t i n fo r m a t i o n a b o u t the location. A n c h o r l i n k s fo r f a s t e r n av i g a t i o n . M a p a n d ove r v i e w i n fo r m a t i o n .

02.19 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T S I X _ F I N A L D E S I G N

User r ating. User may also r ate the location, see reviews,

or add the location to their list of favor ites by clicking the appropiate links. P h o t o s . U s e r m ay v i e w p h o t o s o r a d d t h e i r ow n p h o t o s of the location.

User reviews.

D I M E L S A PA L O S _ FA L L 2 0 1 4

02.20 _ R E D E S I G N O F A N E X I S T I N G W E B S I T E _ P A R T S I X _ F I N A L D E S I G N

GR.107_PRINCIPLES OF USER EXPERIENCE

App Design PROJECT GOAL

PA RT O N E _ P RO P O S AL

To r e d e s i g n a n e x i s t i n g d o g p a r k we b s i t e

Propose an app design based on the website

w hile m a k ing it m or e v is ua lly a p p e a ling a n d

yo u r e d e s i g n e d .

user fr iendly. All design choices should be m a d e w it h t he us e r in m ind .

PA RT T WO _ R ES EA R CH & MO CKU P S

DESIGN DIRECTION

Research & pencil sketches for the app.

T he Dog g oe s a p p s hould s t ay t r ue in cer tain aspects to the website . All color s,

PA RT T H R EE _ P ROTOT Y P ES

us e of t yp og r a p hy, a nd icons y w ill r e m a i n

E x p l o r e t h r e e d i f fe r e n t i d e a s a n d c r e a t e

the same as the website as to not confuse

digital iterations.

t h e u s e r b e t we e n t h e we b s i t e a n d t h e a p p. o n t h e a p p t o q u i c k ly s e a r c h fo r a p l a c e t o

PA RT FO U R _ P ROTOT Y P ES R EFI N ED

t a ke t he ir d og , hie r a r chy a nd us a b ilit y n e e d

Refine your visual direction, and continue

However, being that a user is mostly likely

t o cha ng e .

into the main prototype stage of the design process.

03.1 _ A P P D E S I G N

FINAL OUTCOME

to quickly find a destination to take t h ei r

PA RT FI V E _ FI N AL AP P & P R ES EN TAT I O N

b e love d d og t o w hile on t he g o.

Final app design.

A c l e a r, u s e r- f r i e n d ly a p p t h a t a l l ow s user s

03.2 _ A P P D E S I G N D I M E L S A PA L O S _ FA L L 2 0 1 4

GR.107_PRINCIPLES OF USER EXPERIENCE

PART ONE _ PROPOSAL

03.3 _ A P P D E S I G N _ P A R T O N E _ P R O P O S A L

P r o p o s e a n a p p d e s i g n b a s e d o n t h e we b s i t e yo u r e d e s i g n e d .

DOGGOES.COM

APP FEATURES

Design of the doggoes.com app to complement the website redesign.

The Doggoes app should stay true in certain aspects to the website. All colors, use of typography, and iconography will remain the same as the website as to not confuse the user between the website and the app. However, being that a user is mostly likely on the app to quickly search for a place to take their dog, hierarchy and usability need to change.

The app would first prompt a user to either login or sign up the first time using the app. Then, the app would save the login information so that the user would not need to sign in anymore. By being logged in, the user could easily see their chosen “favorite” destinations by clicking the button named “favorites” at the bottom row of buttons that will appear throughout the app. This would allow them to quickly find a destination that they either found on the website or app in the past.

I would also like to include a “search nearby” button that would allow the user to click and search for dog friendly places with one click. They would then be able to narrow down their choices after seeing a map of all these places to dog parks, veterinaries, restaurants, or hotels. It would also have a button somewhere on the top that would allow them to view a list instead of a map. From there, they would be able to click on a particular place to see all the specific information of that place. Other buttons that could be included in the bottom row of buttons are a “browse” button for users that have more time to browse through places, and a “help” button for users who are not familiar with using the app.

After choosing a specific place, I think it would be helpful for the user to still see the icons used in the website as well as the overview, rating, and reviews. However, these would need to condensed in a way for the user to navigate through them without having to scroll down. In addition, by the address and phone number information, there could be a button to allow

03.4 _ A P P D E S I G N _ P A R T O N E _ P R O P O S A L

PROJECT

the user to “get directions” or “call.”

D I M E L S A PA LO S | P a g e 1 o f 1

D I M E L S A PA L O S _ FA L L 2 0 1 4

GR.107_PRINCIPLES OF USER EXPERIENCE

PART TWO _ RESEARCH & MOCKUPS

03.5 _ A P P D E S I G N _ P A R T T W O _ R E S E A R C H & M O C K U P S

Research & pencil sketches for the app.

VISUAL RESEARCH

D I M E L S A PA L O S _ FA L L 2 0 1 4

03.6 _ A P P D E S I G N _ P A R T T W O _ R E S E A R C H & M O C K U P S

03.7 _ A P P D E S I G N _ P A R T T W O _ R E S E A R C H & M O C K U P S

GR.107_PRINCIPLES OF USER EXPERIENCE

MOCKUPS _ OPTION ONE

03.8 _ A P P D E S I G N _ P A R T T W O _ R E S E A R C H & M O C K U P S MOCKUPS _ OPTION TWO

MOCKUPS _ OPTION THREE

D I M E L S A PA L O S _ FA L L 2 0 1 4

GR.107_PRINCIPLES OF USER EXPERIENCE

PART THREE _ PROTOTYPES

03.9 _ A P P D E S I G N _ P A R T T H R E E _ P R O T O T Y P E S

E x p l o r e t h r e e d i f fe r e n t i d e a s a n d c r e a t e d i g i t a l i t e r a t i o n s .

P R OTOT Y P E S _ O P T I O N O N E

03.10 _ A P P D E S I G N _ P A R T T H R E E _ P R O T O T Y P E S P R OTOT Y P E S _ O P T I O N T WO

D I M E L S A PA L O S _ FA L L 2 0 1 4

03.11 _ A P P D E S I G N _ P A R T T H R E E _ P R O T O T Y P E S

GR.107_PRINCIPLES OF USER EXPERIENCE

03.12 _ A P P D E S I G N _ P A R T T H R E E _ P R O T O T Y P E S P R OTOT Y P E S _ O P T I O N T H R E E

D I M E L S A PA L O S _ FA L L 2 0 1 4

GR.107_PRINCIPLES OF USER EXPERIENCE

PART FOUR _ PROTOTYPES REFINED Refine your visual direction, and continue i n t o t h e m a i n p r o t o t y p e s t a g e o f

03.13 _ A P P D E S I G N _ P A R T F O U R _ P R O T O T Y P E S R E F I N E D

the design process.

D I M E L S A PA L O S _ FA L L 2 0 1 4

03.14 _ A P P D E S I G N _ P A R T F O U R _ P R O T O T Y P E S R E F I N E D

GR.107_PRINCIPLES OF USER EXPERIENCE

PART FIVE _ FINAL APP & PRESENTATION

03.15 _ A P P D E S I G N _ P A R T F I V E _ F I N A L A P P & P R E S E N T A T I O N

Fina l a p p d e s ig n.

S CR EEN O N E _ H O ME S CR EEN

U s e r c a n s e a r c h by c i t y / s t a t e o r c h o o s e t o b r ow s e

User can choose to view details of location or add the location to their favor ites.

D I M E L S A PA L O S _ FA L L 2 0 1 4

03.16 _ A P P D E S I G N _ P A R T F I V E _ F I N A L A P P & P R E S E N T A T I O N

d e s t i n a t i o n s by c l i c k i n g t h e l i n k s b e l ow t h e s e a r c h b a r.

03.17 _ A P P D E S I G N _ P A R T F I V E _ F I N A L A P P & P R E S E N T A T I O N

GR.107_PRINCIPLES OF USER EXPERIENCE

S CR EE N T WO _ BROWSE N EAR S ELECT ED LOC ATION

S CR EEN T H R EE _ BROWS E N EA R S EL ECT ED L O C AT I O N : FI LT ER S

S CRE E N F O U R _ Q S EL E C T E D L O C AT

Us er can click on any o f t he icons t o

U s e r c a n e a s i ly m a ke a fi l t e r c h o i c e by

_ U s er may choose eithe

browse for a destination near their location.

c l i c k i n g o n a ny fi l t e r.

_ Q uick View gives user w i th one easy click.

S CR EEN FI V E _ DES T I N AT I O N DETAI L S

U s e r c a n q u i c k ly s e e t h e m o s t i m p o r t a n t i n fo r m a t i o n about the location.

03.18 _ A P P D E S I G N _ P A R T F I V E _ F I N A L A P P & P R E S E N T A T I O N

Buttons to facilitate user experience.

QUIC K VI E W O F T IO N

er Ma p o r Li s t Vi e w. se ver a l o pt i o n s

D I M E L S A PA L O S _ FA L L 2 0 1 4

03.19 _ A P P D E S I G N _ P A R T F I V E _ F I N A L A P P & P R E S E N T A T I O N

GR.107_PRINCIPLES OF USER EXPERIENCE

S CR EE N SIX _ U SER PROFILE _ A llows quick access to us e r p r e fe r e nce s a nd infor mation. _ All screens contain stationar y options that allow the user to quickly do the following:

_ View their p rofile

_ View their favor it e d e s t ina t ions

_ Search near their loca t ion

_ Browse d estinat ions

_ See the help scr e e n

S CR EEN S EV EN _ U S ER FAVO R I T ES T h i s s c r e e n a l l ow s t h e u s e r t o q u i c k ly g e t t h e m o s t i m p o r t a n t i n fo r m a t i o n fo r t h e i r s e l e c t e d f avo r i t e d e s t i n a t i o n s .

D I M E L S A PA L O S _ FA L L 2 0 1 4

03.20 _ A P P D E S I G N _ P A R T F I V E _ F I N A L A P P & P R E S E N T A T I O N

A c ademy of Ar t Uni ve r s i t y School of Gr aphic Desig n Sa n Fr ancisco, C A 9410 5 D esigner : Dimelsa Palos Co urse: Pr incip les of U s e r Ex p e r ie nce In structor : Lauren Rom a no Te rm: Fall 2014