%20no%20frame.png){kind=small}
Bug-A-Bye Baby UX Design Project
UX Design Project, 2019
This project was an assignment for the Online Media Design module of my Diploma course. It was an individual project and I carried out all the steps from start to finish.
Being a mum of two myself, I have always found the experience of clothes shopping for my children frustrating. Physical shopping is time-consuming (especially if you bring your kids with you!), while products may differ from expectations when shopping online.
I realised other parents share similar frustrations. In view of this, I set out to come up with a solution for the problem statement of "How might we design a children's apparel website so that we can help customers make informed decisions about their purchases?".
The solution was built upon an infant apparel brand that I created for a separate, corporate identity project. User research was also performed as part of the creation of the brand. Please refer to the Bug-A-Baby Corporate Identity Project section for more details.
My design journey for this project are covered in the sections below:
How might we design a children's apparel website so that we can help customers make informed decisions about their purchases?
User Interviews
At the discovery phase of the project, I conducted user interviews to gain a better understanding of the motivations and frustrations of parents when clothes shopping online for their children.
The interviews were conducted face-to-face as opposed to a survey format, as I find that with the former approach it is easier to explain the context of the questions, and will allow interviewees to elaborate their answers.
I interviewed 5 mothers within the age range of 30-45, all of different nationalities, all mothers of two young children of ages 0-5.
Interview Questions
-
Age of the interviewee
-
Nationality of the interviewee
-
Age of their children
-
How often do you buy clothes for your children?
-
What qualities or feature do you look for in an item of children apparel (other than price) when you purchase?
-
What is your preferred way of shopping for children's clothes (physical vs online), and why?
-
Can you please list 1-3 things that frustrate you the most during online clothes shopping?
-
Can you name a website / app that provides you with a pleasant shopping experience, and name 1-3 things you like about it.
-
If the pain points for online shopping can be resolved, will you prefer shopping for kids apparel online or in a shop, and why?
-
Are there any other reasons that you prefer shopping online than going to a store?
Result Analysis
I used Affinity Mapping to analyse the interview results. I combed through the interview transcripts to identify words or phrases of interest, then wrote them on post-it notes. The post-it notes were colour-coded by user. I then categorised the notes by key themes.
The key themes were:
-
Reason parents prefer shopping for kids clothes in physical stores
-
Pain points of shopping for kids clothes online
-
Benefits of shopping for kids clothes online
-
Good features of online clothes store
One interesting finding from the interviews is that although parents acknowledge there are many benefits to buying kids clothes online, they still prefer going to a physical shop. However they will shop online for a brand that they are familiar with in terms of sizing and quality.
"I like to actually see and touch the items. "
Insights
The insights I have derived from the interview findings include the following:
-
To help parents overcome their resistance to online kids clothes shopping, we need to build up their trust and confidence in the product.
-
One way is by providing accurate sizing information to the customer.
-
Another way is to allow customers to interact with the product (directly or virtually) to get a better look and feel of the product.
"I prefer buying clothes for my children from a physical shop as I can make sure they fit correctly as kids are changing so often."
Persona
Based on the results from my User Interviews, I set up a persona to help me focus on the users' experiences and needs during my ideation phase. Only one persona was created as I felt the users' experiences and pain points are fairly aligned.
This persona helped me shape several solutions that are aimed at providing customers more product information during the shopping process, which will improve their overall shopping experience and build up trust in the brand.
"Going to the shop with kids is a pain! Generally I prefer shopping online as it saves time, and allows me to shop at anytime that suits me."
Ideation and Storyboards
I came up with several ideas to address my problem statement, then settled on two of them to create storyboards for. The storyboards were initially sketched on paper, then illustrated using Adobe Illustrator.
One of these ideas is development of a 'virtual fitting room', where upon uploading of the front and back view photos of a child onto the app, the app can calculate the measurements of the child and thereby recommend the correct clothes size for that child. At the time of the project, the technology existed but was in testing phase.
The second idea is a door-to-door fitting service, whereby customers can order online, those items they wish to try on physically. Upon delivery, customers can try on the items and only pay for those they wish to keep. If they do not purchase anything, they will be charged a set handling fee. The customer will be charged when they confirm online the items they are buying after the fitting is completed, using the payment details they provided during the ordering phase.
Between the two storyboards, I decided to go with the door-to-door service as the technology required is fairly simple, but would offer a better customer experience.
Wireframes and Prototypes
I did four iterations of wireframes in total.
The first iteration was created at low fidelity using pencil and paper, as it is easier to make changes given that there were still a lot of uncertainties with the layout at this stage. These wireframes were then uploaded to InVision for user testing.
Second Iteration
Incorporating changes suggested in round 1 testing, a set of higher fidelity wireframes were created using Illustrator, and again uploaded to InVision for prototyping. At this stage, the wireframes created covered the main user journey of ordering and booking delivery date and time, and the purchase confirmation subsequent to the delivery.
Third and Fourth Iterations
In my last two iterations, I set about to create a prototype that captures the complete user journey of someone browsing the website from the point they reach the landing page, choosing product, account registration, choosing delivery date and time, entering payment details, logging in as existing user, through to purchase confirmation. More attention was paid to the UI design as well, especially on the landing page.
In order to speed up the design process I used Adobe XD to create the prototypes. Having a similar UI to other Adobe softwares makes it easy to pick up; I could use ready-made assets or create my own assets that can be repeatedly used in multiple artboards.
User Testing
User testing was done on each iteration of wireframe / prototype to reveal any usability problems.
Due to time constraints each of the first three iterations were tested by 2-3 of my course mates, none of which are in my target group. Only the last iteration was tested by a target user.
Despite this, the user tests have highlighted certain usability issues such as hot spot locations, excess buttons, lack of multiple account sign up / log in options, and lack of order number upon order.
As for the core feature of booking home delivery date and time, changes were made to the select delivery date and time pages respectively, to grey out unavailable dates / time (fully booked or too far in advance) based on user feedback. The post-delivery screen for selecting items to purchase have also been simplified from 'yes/no' options to check boxes.
Some issues with the hyperlink between screens were also identified during testing e.g. linking to wrong screen, which were subsequently rectified.
Before vs After Screens
Registration / Log-In Screen
Delivery Date Selection Screen
Delivery Time Selection Screen
Post-Delivery Purchase Confirmation Screen
UI Design
Since the third and fourth iterations were done to high fidelity, I also obtained feedback on the UI design. The biggest issue was the landing page - the first version had no focal point and lacked visual hierarchy - users find it hard to navigate through the page. This was rectified in the final version.
I added a large banner with an engaging image of a toddler gazing up to create a visual focal point.
Rather than using a large block of text to explain how the delivery service works, a simple flow diagram using icons was created which is easy to understand.
In the first version of the landing page users could not quite work out what the product is or what the selling points are. I therefore added a section using different icons to illustrate the different features of the product.
The colour palette are mostly pastel colours - teal, pink, blue - as it provides a sense of comfort and security, a sentiment I want users to associate with the product.
Before
1
After
On-boarding features:
1) Product Introduction:
-
Highlights main features of the product
-
Hyperlinks directing users to two main product categories – Baby and Toddler
3) New Account Sign Up Incentive
5) Promoting Products on Sale
4) Promoting New Product Range
Hyperlink
2) Home Fitting & Delivery Service Step-by-Step Guide:
-
Use of icons and concise instructions to explain how the service works
-
‘Click Here to Learn More’ hyperlink to separate page for more information.
2
3
4
5
Final Design
The video below is a demo of the website prototype created in Adobe XD. Further down is a User Flow Diagram to illustrate the steps a customer will experience when shopping on the website.
Reflections
Through this project I came to appreciate the merits of a human-centred design approach. Before the user interviews, I assumed parents would all prefer shopping online - however to my surprise, this was not the case. It then led me to discover the pain points for parents that are putting them off a shopping platform that seemingly have so many advantages to offer.
By empathising with parents on their needs (well-fitted and good quality clothes for their children), I felt that I have come up with a solution that will offer them the best of both worlds.
I also came to appreciate how many details need to be taken into consideration when designing a website, and hence the value of user testing.
Sometimes one screen can have multiple hyperlinks to various screens. In addition to going from one step to the next, I also had to consider the option for users to return to a previous screen.
During testing, the designer may encounter ways users browse a website that he or she did not anticipate. For example, the user expects that by clicking on the logo in the website header it will take them back to the homepage.
What went well
I enjoyed the user interview process. I felt that my questions were sufficient in capturing the needs and pain points of the users. I also liked the face-to-face interview approach, as I could engage better with the interviewee and draw more information from them.
The multiple rounds of testing were beneficial in helping to refine the prototype. At each stage something I had not previously considered was raised.
I am pleased with how the final prototype has turned out - in particular the landing page. I spent a long time perfecting the landing page as it forms the first impression of the product.
What I would have done differently
Ideally I would have my target users (i.e. parents) to perform testing of each iteration of my prototype. However this was not possible as it was hard to find time with the target users I know. As such, some of my (younger) course mates performed majority of the user tests, and only the final iteration was tested by my target users.
Secondly, regarding the wireframing process, on hindsight I should have done all the high fidelity prototypes in Adobe XD to save time. Using Illustrator to create the various screens was time-consuming.
Thirdly, during prototyping, my screen artboards were not as well organised as it should be, making it hard to track the correct order. As such, I had to amend the links between screens quite a few times.
Last Thoughts
It occured to me that, after completion of this project, that the website alone does not provide the optimal user experience. For example, after the customer has tried on the ordered items, they will need to confirm the items they want to purchase at the end of the fitting session. It is not very efficient if the customer has to complete this process by logging onto a website on a computer.
To overcome this issue, I decided to design a mobile app to complement the website to provide a smoother user experience. Please see the section on Bug-A-Bye Baby Mobile App for more information.
"Over the course of 12 weeks working with Ivy on her class project Bug-A-Buy-Baby, Ivy has demonstrated attention to detail in her work. She graduated as one of the top students in the module because she always delivers more than what is required and demonstrates a firm understanding in the principles and process of User Experience (UX) design."
Daylon Soh, Design Educator and ex-Global eCommerce Architect at Razer