E-Commerce Web Development & UX Project

Background: I was approached by a local small business owner to design & build a website for his product.

The Product: Totloo is a toilet training device designed for children between the age of 18-36 months

My role in this project:

  • User research,
  • UX/ UI
  • Building and development of the website.

Project type: Freelance project

Date: 2021

The nature of toilet training

Toilet training is a dreaded time in the lives of many parents. It can be an incredibly stressful time for both children & families.

Children need the space, tools & encouragement to explore their own capabilities. Totloo is a tool that is designed to aid them in this discovery.

The nature of toilet training

Toilet training is a dreaded time in the lives of many parents. It can be an incredibly stressful time for both children & families.

Children need the space, tools & encouragement to explore their own capabilities. Totloo is a tool that is designed to aid them in this discovery.

Design thinking process

1. Empathise

  • Desk research
  • Competitor research
  • Interviews with parents

2. Define

  • Problem statements
  • Personas

3. Ideate

  • Ideate solutions
  • Brainstorming

4. Prototype

  • Low fi wireframes
  • Mid fi & Hi fi prototypes

5. Test

  • Usability testing with target users (x5)

1.0 Empathise

 

1.1 Desk Research, Competitor Analysis & Interviews

Desk Research

I began by researching the current market for toilet training devices. I perused mummy blogs, forums, HSE information pages and more to understand the target market audience and the problem space.

Comptetitor Analysis

I looked at other competitors in Ireland by researching e-commerce sites which sell toilet training devices. This helped to identify gaps in the market, the main one being that these sites appear to target children, rather than parents. 

User Interviews

I recruited five parents who represented our target market audience. The interviews explored wants, needs and goals surrounding toilet training. These interviews gleaned insights which provided clear goals and objectives for the design process.

2.0 Define

2.1 Problem statement & Personas

Problem statement:

Persona:

Stephen is a single dad to his two-year-old daughter Katie who needs help with toilet training because so far it has been an extremely stressful time for him and his daughter. 

The main information gathered from the research showed that we needed to focus on the following:

  • Reassuring parents that the product is safe to use and is endorsed by medical professionals and/or other parents.
  • Parents need to feel understood and have their experiences and struggles validated.
  • Cost, time and effort are major considerations for parents when contemplating a product for their child.

 

Persona:

3.0 Ideate

3.1 Moodboard, user journey mapping & sketching

Moodboard:

Sketching:

Moodboard:

  • I gathered images that reflected the user’s current struggles to which helped to set visual tone for the site design
  • I gathered visual elements which reflect the beautiful messiness of parenthood to a toddler which helped to inform design for how Totloo solves these problems

Sketching:

  • I began sketching on paper a basic layout of each of the site’s pages 
  • I outlined what the communication objectives were for each page 

User journey map:

  • I mapped out a new user’s journey through the site from discovery to purchasing a Totloo
  • I discovered potential problems and opportunities at points in the journey which helped to inform the designs

4.0 Prototype

4.1 Wireframes, working prototype on WordPress 

Low fi wireframes:

Working prototype, WordPress:

Low fi wireframes:

Working prototype, WordPress:

5.0 Test

5.1 Research plan, usability testing findings & changes post testing

Research plan

I formulated the research objectives in collaboration with the business owner (key stakeholder) via a stakeholder workshop.

The resulting objectives were:

  • To discover if users can easily find out key information about the product
  • To discover if users find the information provided useful 
  • To discover if users can successfully get through the checkout flow

Scenarios

  • You want to find out what age group the product is for, show me how you would find this information
  • You have a question about the product, show me how you would go about finding the answer
  • You want to order the product to your home address today, show me how you would go about doing this

5.1 Usability testing findings

5.1 Changes post testing – wireframes

Using the insights gained from usability testing, I revised the designs to reflect the top-priority findings, including:

  • Removal of large blocks of text & long sentences
  • More product images on the About page & more info about the product (removal of same from landing page)
  • Iconography & short text descriptions of the unique benefits of the product on the top of the home page

Homepage

Product Page

About Page

5.1 Changes post testing – Prototype

  • See the annotations for changes made

Outcomes 

Where the journey ended 

  • I compiled and delivered an informative  presentation of the research and design process to the business owner
  • I handed over the research and design work I had undertaken, as well as the files for the final site version in WordPress.
  • The business owner was satisfied with the results and plans to launch the first version of the site in early 2023