U X D e s i g n | S o f t B a b y RESEARCH DOCUMENT This report has been prepared for you by V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e October 25, 2018 T A B L E O F C O N T E N T S Executive Summary.......................................................................... 3 Research Methods............................................................................. 4 Problem Statement............................................................................ 5 SoftBaby Business Model Canvas........................................................ 6 Screener Survey.................................................................................... 8 Competitive Feature Analysis.......................................................... 11 Comparative Feature Analysis...................,..................................... 14 Existing Website Usability Testing................................................. 17 Competitor Usability Testing.......................................................... 19 Post-Interview Comparison Questions.......................................... 21 User Interviews................................................................................ 22 Affinity Mapping.............................,............................................... 36 Personas.............................................,.................................................. 38 Site Map...............................................................,............................ 40 Task Flows..........................................................,............................ 41 Mid-Fidelity Usability Testing.............................,........................... 47 High-Fidelity Usability Testing...................,..................................... 49 Hi-Fi Prototype.....................................................,........................... 51 Next Steps.............................................................,............................ 52 S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 2 E X E C U T I V E S U M M A R Y Our team was brought on to improve the user experience of SoftBaby, a baby clothes e-commerce site, to increase sale conversions on the website and lower the homepage bounce rate. We began this process with extensive research about parents and others who buy baby clothes. These insights informed our re-design of the SoftBaby site with the expressed purpose of conversion increase and bounce rate decrease. After we created new designs based on our findings, we tested these new versions with usability testing. The learning from usability testing directly influenced our iterations as we finished our final, high-fidelity version of our redesign. This document details the research our team performed as we underwent this process towards the final product. S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 3 R E S E A R C H M E T H O D S Over the course of our design process, we performed numerous research methods to inform our choices. These methods included: ● P r o b l e m S t a t e me n t ● S o f t B a b y B u s i n e s s C a n v a s ● C o mp e t i t i v e / C o mp a r a t i v e F e a t u r e A n a l y s i s ● S c r e e n e r ● U s a b i l i t y T e s t i n g o f t h e E x i s t i n g S o f t B a b y W e b s i t e ● U s a b i l i t y T e s t i n g o f a C o mp e t i t o r W e b s i t e : P r i ma r y c o m ● P o s t -I n t e r v i e w C o mp a r i s o n Q u e s t i o n s ● U s e r I n t e r v i e w s ● A f f i n i t y M a p p i n g S y n t h e s i s o f U s e r I n t e r v i e w s ● P e r s o n a s ● S i t e M a p ● T a s k F l o w ● U s a b i l i t y T e s t i n g o f O u r M i d -F i d e l i t y R e d e s i g n ● U s a b i l i t y T e s t i n g o f O u r H i g h -F i d e l i t y R e d e s i g n S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 4 P R O B L E M S T A T E M E N T I n o r d e r t o f o c u s o u r r e s e a r c h a n d a l i g n t e a m g o a l s a r o u n d o n e s o l u t i o n f o r t h e S o f t B a b y r e d e s i g n , w e f o r mul a t e d a p r o b l e m s t a t e me n t T h i s p r o v i d e s c o n t e x t t o t h e w o r l d s u r r o u n d i n g o u r i d e a l u s e r s a n d s u mma r i z e s t h e i s s u e s t h a t o u r d e s i g n s e e k s t o s o l v e B e f o r e w e s t a r t e d o u r r e s e a r c h i n -d e p t h , w e c r e a t e d a p r e l i mi n a r y p r o b l e m s t a t e me n t t o t h e p r o b l e m o f t h e i d e a l S o f t B a b y u s e r Original Problem Statement Parents have various needs including volume, quality, price, and time limitations when it comes to getting clothes for their young children. How might we help parents get q ual ity baby clot hes t hat ƛits t heir needs? After we finished our user interviews and synthesized them through affinity mapping and persona creation, we revised our problem statement through research. Revised Problem Statement Parents buying baby clothes want to hit the golden trifecta for their needs: affordable, appealing, and high-quality material. Sometimes this can require busy parents to tediously go from site to site or store to store with a crying child just to get prepared for the upcoming season. How might we provide parents wit h a rel iable source for cute, q ual ity baby clot hes t hat do n’t break t he bank? S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 5 S O F T B A B Y ’ S B U S I N E S S M O D E L C A N V A S We mapped out the business model and activities of the SoftBaby as a company. This helped our team understand the size, history, goals, and needs of the business as it fits into the retail market for online baby clothes. This also helped our team to understand how the social causes advocated by members of SoftBaby fit into the business model. This documentation was developed through conversations with the client, Sharon Salmon. Figure 1. SoftBaby Business Canvas. This graphic outlines different aspects of SoftBaby’s business model. Key Insights from the SoftBaby Business Canvas ● We learned that the company was founded by the designer of SoftBaby products through her connections with overseas manufacturers. The speciality of the company is creating baby clothes made from a soft, organic cotton with a specific aesthetic of soft patterning. S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 6 The target audience is over 90% women and has a social presence on Facebook and Instagram. S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 7 S C R E E N E R In order to gain additional data and find correct users to interview, we created a screener survey. It was intended for parents of small children or anybody who is often buying baby clothes. On the survey, we asked them numerous questions about their relationship to buying baby clothes and what they valued, liked, or disliked when they did so. This screener provided us additional information to inform our design and gave us a steady group of interview subjects to interrogate further about their baby clothes buying habits. The link to our Google survey is below: h t t p s : / / g o o g l / f o r ms / D t j C 5 5 x z o f G 8 O w j 6 2 We also found some more research data from the screener survey, which is showcased below: Figure 2. Screener survey results from the question: “What’s the most important to you in baby clothes?” The recipients were given multiple choice answers to this question. The user base was the parents of small children and other people who buy baby clothes. S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 8 Figure 3. Screener survey results from the regarding respondeat age. The recipients were given multiple choice answers to this question. The user base was the parents of small children and other people who buy baby clothes. Figure 4. Screener survey results from the question “How do you usually acquire baby clothes?” The recipients were given multiple choice answers to this question. The user base was the parents of small children and other people who buy baby clothes. S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 9 Figure 5. Screener survey results from the question “How often do you get new baby clothes?” The recipients were given multiple choice answers to this question. The user base was the parents of small children and other people who buy baby clothes. Figure 6. Screener survey results from the question “From which retailers do you buy?” The recipients were allowed to answer freely into a text box. The user base was the parents of small children and other people who buy baby clothes. S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 1 0 C O M P E T I T I V E F E A T U R E A N A L Y S I S We examined the features found on the websites of SoftBaby and four competitors: Primary, Fin and Emma, Baby Gap, and Amazon, all businesses that sell baby clothes online. Looking at the features and aspects of our competitor sites allowed us to learn the strengths and growth points for SoftBaby as a website and gave us potential solutions for these issues. Furthermore, it told use how users might expect to interact with baby clothes ecommerce sites, informing us what might be considered industry standards in this retail space. Our findings are below: Website Feature SoftBaby Primary Fin and Emma Baby Gap Amazon H e r o I ma g e Y e s Y e s Y e s N o t o n B a b y G a p p a g e N o H o me p a g e " N e w I t e ms ! " c o n t e n t Y e s Y e s , i n t o p n a v Y e s , " N e w c o l l e c t i o n " Y e s Y e s B e s t S e l l e r s N o N o Y e s , y o u c a n s e a r c h b y " B e s t S e l l e r s " Y e s ? T h r e e t h i n g s f o r e a c h c a t e g o r y o n h o me Y e s L o g i n / C r e a t e A c c o u n t Y e s Y e s Y e s Y e s Y e s S e a r c h Y e s Y e s Y e s Y e s Y e s S e a r c h b y c o l o r N o Y e s Y e s Y e s N o S e a r c h b y s i z e N o N o Y e s Y e s Y e s O n C h i l d M o d e l N o Y e s , s o me t i me s ( b u t r e a l k i d ) Y e s , s o me t i me s , b u t n o t t h e f i r s t i ma g e N o t o f t e n N o t mo s t A d d t o R e g i s t r y N o N o Y e s N o Y e s R e v i e w s N o Y e s Y e s Y e s Y e s S e a s o n a l R e c o mme n d a t i o n ( l i k e h a l l o w e e n ) N o Y e s N o N o N o A l s o P u r c h a s e d Y e s ? H a s r e l a t e d p r o d u c t s Y e s N o Y e s , b u t A l s o V i e w e d a n d R e l a t e d Y e s S h a r e L i n k s Y e s , F a c e b o o k , T w i t t e r , P i n t r e s t , G o o g l e + , e ma i l Y e s , P i n t r e s t N o Y e s , F a c e b o o k , P i n t r e s t Y e s , F a c e b o o k , T w i t t e r , P i n t r e s t , E ma i l S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 1 1 C a r t Y e s Y e s Y e s Y e s Y e s S o c i a l M e d i a L i n k s Y e s , h e a d e r Y e s , f o o t e r Y e s N o N o ( ? ) I n s t a g r a m F e e d Y e s N o ( ? ) Y e s , a n d a l s o u n d e r e a c h i t e m N o N o G e n d e r e d O r g a n i z a t i o n Y e s , b u t h i d d e n N o ( ? ) Y e s Y e s Y e s " C o l l e c t i o n " n a me Y e s N o Y e s , y o u c a n s e a r c h b y " C o l l e c t i o n " Y e s , b u t f o r d i s n e y i t e ms N o A b o u t Y e s Y e s , " O u r S t o r y " i n f o o t e r Y e s , i n F o o t e r Y e s , F o o t e r Y e s , f o o t e r Q + A Y e s , h e a d e r u n d e r " A b o u t " Y e s , f o o t e r Y e s , i n F o o t e r Y e s , f o o t e r f o r " A b o u t " a n d t h e n n e w w e b s i t e , G A P i n c N o ? " O u r V a l u e s " -e s q u e P a g e Y e s N o t s p e c i f i c a l l y Y e s , i n A b o u t u s Y e s , f o o t e r f o r " A b o u t " a n d t h e n n e w w e b s i t e , G A P I n c Y e s , f o o t e r R e t u r n s Y e s , i n s i d e Q + A Y e s , f o o t e r Y e s , i n s i d e Q + A Y e s , F o o t e r Y e s " O u r P r o d u c t s " -e s q u e P a g e Y e s Y e s , i n " O u r S t o r y " Y e s , i n h o me s c r o l l N o N o ? G i v e B a c k P r o g r a m Y e s Y e s , f o r l o c a l s c h o o l s N o Y e s , " T h i s W a y A h e a d " P r o g r a m Y e s , " g i v e b a c k b o x " P r e s s Y e s , h e a d e r Y e s , f o o t e r Y e s , f o o t e r Y e s , f o o t e r f o r " A b o u t " a n d t h e n n e w w e b s i t e , G A P I n c Y e s , f o o t e r C o n t a c t Y e s , h e a d e r Y e s , d i r e c t i n f o i n f o o t e r Y e s , i n F o o t e r Y e s , f o o t e r f o r " A b o u t " a n d t h e n n e w w e b s i t e , G A P I n c Y e s , f o o t e r u n d e r " H e l p " B l o g Y e s , i n a c t i v e N o y e s , f o o t e r Y e s , f o o t e r f o r " A b o u t " a n d t h e n n e w w e b s i t e , G A P I n c Y e s , f o o t e r N e w s l e t t e r Y e s , i n f o o t e r Y e s , i n me mb e r s h i p Y e s , i n me mb e r s h i p ? Y e s , f o o t e r Y e s , i n me mb e r s h i p S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 1 2 R e w a r d P r o g r a m Y e s Y e s , i n s i d e t h e c a r t ! Y e s ? A f f l i a t e P r o g r a m Y e s , F o o t e r Y e s ( ? ) P r i me ? P a y P a l Y e s Y e s Y e s N o N o ? A p p l e P a y Y e s N o Y e s N o N o ? A ma z o n P a y N o N o Y e s N o Y e s PRODUCT FEATURES SoftBaby Primary Fin and Emma Baby Gap Amazon B a b y C l o t h e s Y e s Y e s Y e s Y e s Y e s K i d s C l o t h e s N o Y e s N o Y e s Y e s T o y s N o N o Y e s N o Y e s G e a r N o N o Y e s N o Y e s O r g a n i c Y e s N o t a l l Y e s N o N o t a l l C h e mi c a l -F r e e Y e s N o t a l l Y e s N o N o t a l l E t h i c a l l y -M a d e Y e s N o t a l l Y e s Y e s , P A C E P r o g r a m N o t a l l 1 0 0 % C o t t o n Y e s N o t a l l Y e s ? N o N o t a l l LAYOUT/COLOR FEATURES SoftBaby Primary Fin and Emma Baby Gap Amazon C o l o r A e s t h e t i c S o f t p a s t e l s , w h i t e S t r o n g p r i ma r y c o l o r s o n w h i t e C o o l t o n e p a s t e l s , n o w a r ms W h i t e a n d B l a c k D a r k A ma z o n b l u e t o n e s Key Insights from the Competitive Feature Analysis ● SoftBaby lacks some features that are more common to other sites. It could use more standard search features, like search by size, color, or type of clothing. ● SoftBaby would benefit from having more photos of each item on its site, and having some photos be of the product on a child. ● SoftBaby could include a rating and comment system for users to better understand the product before they buy. ● Lastly, SoftBaby could move some header items into the footer or other navigation, and some terms like “collections” should be changed to a more typical header. S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 1 3 C O M P A R A T I V E F E A T U R E A N A L Y S I S We also examined the features found on websites that were “comparators” to SoftBaby. A comparator is a business that operates in a completely different industry, but has some similarities to how it solves related business problems. We examined three other comparators: Patagonia, an outdoor brick-and-mortar clothing company, Melissa & Doug, toy manufacturing company, and Brooklyn Wolf, an online-only formal menswear pants company. Looking at the features of these websites provided additional, more unorthodox solutions to problems, and exposed our team to different ideas to solve ecommerce navigation outside the realm of baby clothing. Our findings are below: Website Features SoftBaby Patagonia Melissa & Doug Brooklyn Wolf L o g i n / C r e a t e A c c o u n t Y e s Y e s Y e s Y e s S e a r c h Y e s Y e s Y e s Y e s S e a r c h b y c o l o r N o Y e s ? N o N o S e a r c h b y s i z e N o Y e s N o N o ( b y f i t ? ) O n A M o d e l ( ? ) N o N o Y e s ( C e r t a i n t o y p i c t u r e s h o v e r t o s h o w t h e c h i l d p l a y i n g w i t h t o y ) Y e s S a v e f o r L a t e / A d d t o W i s h l i s t N o N o ? Y e s N o R e v i e w s N o Y e s Y e s Y e s A l s o P u r c h a s e d Y e s ? H a s r e l a t e d p r o d u c t s Y e s ? ( " S i mi l a r t o t h i s P r o d u c t " ) Y e s ( " W e t h i n k Y o u ' l l L i k e T h e s e " ) N o A b i t l i t y t o S h a r e Y e s , F a c e b o o k , T w i t t e r , P i n t r e s t , G o o g l e + , e ma i l Y e s ( F B , T w i t t e r , G + , P i n t r e s t ) Y e s ( F B , T w i t t e r , P i n t r e s t , E ma i l ) Y e s C a r t Y e s Y e s Y e s Y e s F i l t e r b y G e n d e r Y e s ( b u t h i d d e n ) Y e s N o ( C a n ' t e v e n d o g e n d e r r e l a t e d s e a r c h ! ) N o ( o n l y M e n ' s ) I n s t a g r a m F e e d Y e s N o N o Y e s R e t u r n s Y e s Y e s Y e s Y e s G i v e B a c k P r o g r a m Y e s Y e s N o N o S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 1 4 R e w a r d P r o g r a m Y e s N o N o N o P a y P a l Y e s Y e s Y e s Y e s A p p l e P a y Y e s N o N o N o A ma z o n P a y N o N o N o N o S t r i p e N o N o N o Y e s " O u r P r o d u c t s " -e s q u e P a g e ( d o e s t h i s me a n p r o d u c t p a g e ? ) Y e s Y e s Y e s Y e s B l o g Y e s Y e s Y e s Y e s Product Features SoftBaby Patagonia Melissa & Doug Brooklyn Wolf B a b y C l o t h e s Y e s Y e s N o N o K i d s C l o t h e s Y e s Y e s N o N o T o y s Y e s N o Y e s N o G e a r Y e s Y e s N o Y e s ? O r g a n i c Y e s Y e s ( S o me a r e , b u t t h a t ' s n o t t h e i r s e l l i n g p o i n t ) Y e s N o Layout / Color Features SoftBaby Patagonia Melissa & Doug Brooklyn Wolf C o l o r A e s t h e t i c S o f t p a s t e l s , w h i t e W h i t e w i t h d a r k b l u e t o n e s S o f t w h i t e s w i t h s t r o n g p r i ma r y c o l o r s W h i t e a n d d a r k e a r t h t o n e s H e r o I ma g e Y e s Y e s Y e s Y e s H o me p a g e " N e w I t e ms ! " c o n t e n t Y e s N o ? ( b u t a l i n k t o i t ) Y e s ? ( I t ' s u n c l e a r w h e t h e r t h e i t e ms o n t h e h o me p a g e a r e b e s t s e l l e r s , s i mp l y s u g g e s t e d , o r n e w i t e ms ) Y e s ? ( I t ' s u n c l e a r w h e t h e r t h e i t e ms o n t h e h o me p a g e a r e b e s t s e l l e r s , s i mp l y s u g g e s t e d , o r n e w i t e ms ) B e s t S e l l e r s Y e s ( t h r o u g h f i l t e r ? ) N o S o c i a l M e d i a L i n k s Y e s N o ? Y e s Y e s " C o l l e c t i o n " n a me Y e s Y e s Y e s ? N o A b o u t Y e s Y e s Y e s Y e s S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 1 5 Q + A Y e s Y e s Y e s Y e s " O u r V a l u e s " -e s q u e P a g e Y e s Y e s Y e s N o " O u r P r o d u c t s " -e s q u e P a g e ( d o e s t h i s me a n p r o d u c t p a g e ? ) Y e s Y e s Y e s Y e s B l o g Y e s Y e s Y e s Y e s Key Insights from the Comparative Feature Analysis ● As a whole, SoftBaby had many features standard to ecommerce websites. ● All comparators included reviews as a feature, something that Softbaby doesn’t currently have. ● SoftBaby was the only website that featured a reward program ● Only other one had a wishlist / save for later function similar to SoftBaby ● SoftBaby doesn’t have photos of the clothes on a baby. Most comparators features users interacting with their product, and SoftBaby should follow suit. ● Most comparators did not use gender-based searches, and most did not have a giveback program. S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 1 6 C U R R E N T S O F T B A B Y W E B S I T E U S A B I L I T Y T E S T I N G We performed Usability Testing on Softbaby’s current website. Usability testing is the process of examining and measuring user’s interactions with the product through a series of set tasks organized by our team. We tested the existing site with five buyers of baby clothes. These users were asked questions about their opinions on the site and asked to perform the following tasks as we measured their progress: TASKS: 1. Find a out for a two month-old and add it to cart 2. Find out material and construction of the product 3. Add a set to the cart 4. Share a product to social media 5. Find out if the company is connected to social causes As a whole, these tasks allowed our team to better understand how user interact with the existing site, so our team can discover what aspects should be maintained and what should be changed as we create a new design. Our results are charted below: Figure 7. Usability testing results for the existing SoftBaby website. Participants were asked to perform numerous tasks covering the functions of the site. Key Insights from the current Softbaby Website Usability Testing S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 1 7 ● Some content is blurry or too pixelated ● The hero is not descriptive enough to explain the premise of the site ● Some navigation items like Press and Advertising are not critical enough to preside on such an important piece of website real estate ● One strength of SoftBaby is the website’s aesthetic. The site is clean and uncluttered, which is appealing to users ● Accessibility issues with font color on text. This can be tested. ● Things should not be shown if they are out of stock ● The description is hard to find on product page ● The price is too high for a gift set or doesn't seem like a good enough value. ● Give Back page is not easily found ● The home page layout needs to be re-organized to what is important to a first time viewer ● There needs to be an additional footer for navigation ● The site needs alternative photos of the items, potentially on a child model S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 1 8 C O M P E T I T O R U S A B I L I T Y T E S T I N G We also performed usability testing on a client’s competitor, Primary.com on the same five users from the previous test. This allowed us to similarly see the strengths and weaknesses of that site and compare it to SoftBaby. Furthermore, our client asked us to examine the look and feel of SoftBaby’s site. Looking at Primary allows us to compare SoftBaby’s soft pastels to the robust primary color palette of Primary Figure 8. Usability testing results for the Primary.com, a competitor to SoftBaby. Participants were asked to perform numerous tasks covering the functions of the site. TASKS: 1. Find a out for a two month-old and add it to cart 2. Find out material and construction of the product 3. Add a set to the cart 4. Share a product to social media 5. Find out if the company is connected to social causes Key Insights from the Competitor Usability Testing S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 1 9 ● Site is overwhelming visually to many users due to the color scheme and busy layout. ● People want diversity in baby ethnicity ● People do not like intrusive pop-ups. Users prefer more subtle and helpful pop-ups. ● Unusual names for products like “babysuit” is confusing for users. This could imply that “collections” as a name is also difficult for users. ● Icons of products on the navigation are very helpful, but they often are confusing whether the the item is a link to a product listing or a specific product ● Users prefer seeing the clothes on a child ● Ten dollars is an appealing price for baby clothes for users ● Users are overwhelmed with too many choices in navigating the site. ● The header needs to more strongly signify that the user needs to interact with it ● Visuals need to be large enough to easily see ● 35 dollars for a gift set is a more manageable price. ● Share options need to include multiple options, like Facebook and Instagram ● The social good page is difficult to find ● Primary needs more context to who they are as a company ● Overall, Primary’s visuals are mostly unpopular with users, but their product listing and navigation is strong. S o f t B a b y R e p o r t | V a r s h a B a k s h a n i | T y r a M c N e i l | L o g a n H o u s e | P g 2 0