- RESPONSIVE WEBSITE
Building an Online Presence for a Local Baby Shoe Brand
Project Overview
The feet of newborns are not meant for walking when they are born. During their development, their little feet will need shoes that protect them from cold, warm or uncomfortable surfaces, without affecting their natural development. Oratile Baby shoes are hand-crafted from genuine leather. They mimic the feeling of being barefoot and the flexible non-slip sole allow the baby’s foot to move and flex which is also essential for proper muscle and bone development, thereby allowing babies’ feet to grow and develop without restrictions.
Oratile Kids was founded by Tsepiso Monamedi, after she struggled to find affordable, quality shoes for her toddler. What began as a personal project quickly grew into a small business, with her handcrafted, genuine leather shoes being sold in local markets and eventually stocked by leading baby retailers.
4 Weeks
UX + UI Design, Visual design, Branding, User flow, Research, Prototyping + Testing
Figma, Fig jam, Zoom, Google Forms
Oratile Kids need a responsive eCommerce Website.
For the last three years, Oratile Kids baby shoes have been available in leading physical retail outlets and weekend markets. The brand however, has longed to bypass intermediaries to gain control over their product distribution by selling directly to customers online. Establishing a responsive eCommerce website will enable Oratile Kids to reach their customers directly, reduce expenses and broaden their market reach, all factors linked to maintaining a physical brick and mortar store. This platform will cater to busy parents; their primary customer base, who often lack the time to visit stores in person. Moreover, it will enable sales to continue beyond regular business hours.
To create a responsive website with eCommerce functionality that reduces Oratile Kids’ reliance on third-party retailers. A strong online presence will also increase brand awareness, streamline the customer purchasing journey and ultimately grow the business.
My Design Process
Research
The project began with an exploration of the current market and user needs. I conducted a competitive market analysis of four other local baby shoe brands, Wiggle Giggle, Pitta-Patta, Lielie Baai and Bubba Due. All four competitors had an online store where customers could make a purchase.
Strengths
- Has a handmade aesthetic that speaks to the craft nature of the products
- Responsive website eCommerce functionality
Weaknesses
- Inconsistent use of colour
- CTAs are not as visible
- The handwritten font can be illegible in some instances
- Lack of visual hierachy
Features
- eCommerce
- Responsive
- Shop Page Filters
- Pay Via Website
- Product reviews and ratings
- Contact Form
- Newsletter Signup
Strengths
- The website has a clean and minimal
- Purchases are easy to do and understand.
- Font choice soft and legible.
Weaknesses
- Inconsistent use of fonts and banner
- UI design could be improved.
Features
- eCommerce
- Responsive
- Shop Page Filters
- Pay Via Website
- Product reviews and ratings
- Contact Form
- Newsletter Signup
Strengths
- Clean aesthetic R
- Lots of product details
- Clear product photography plus reviews
Weaknesses
- Inconsistent CTAs
- Missed opportunity for conversion on the hero section of the website
Features
- eCommerce
- Responsive
- Shop Page Filters
- Pay Via Website
- Product reviews and ratings
- Contact Form
- Newsletter Signup
Strengths
- Clean and modern Interface
- Consistent branding and UI Design
- Ease of shopping due to a variety of shop filters
- Responsive
Weaknesses
- Fonts illegible in some instances
- Not enough visual contrast between background colour vs Font colour
Features
- eCommerce
- Responsive
- Shop Page Filters
- Pay Via Website
- Product reviews and ratings
- Contact Form
- Newsletter Signup
Oratile Kids’ primary customers are busy parents who value convenience, trustworthiness and the ability to shop beyond traditional retail hours. To understand these users better, I conducted interviews with five parents who had children under the age of two. The goal was to discover their online shopping behaviours, pain points and preferences when purchasing baby shoes.
Key Questions
What factors influence a customer's decision to make a purchase when shopping for baby items online?
Are there any specific details or specifications that are essential to know before making the purchase?
What features or design elements would make them more likely to explore and stay on a baby shoe website?
This is what I found:
High-Quality Product Images Are Crucial.
All interviewees emphasized the importance of clear, high-quality images when shopping for baby shoes and clothes online. The visual representation of products, including multiple angles and lifestyle images, significantly influenced their purchasing decisions, as it helped them assess the quality and make informed decisions.
Trust and Security is very important when Shopping online.
Many respondents highlighted the importance of trust and security when making online purchases. They consider factors like trustworthy websites, secure payment options and familiarity with the brand to ensure a safe shopping experience. Concerns about online fraud and the legitimacy of websites often influence their decision to complete a purchase.
The Importance of Detailed Sizing Information
Accurate and detailed sizing information is a critical factor for parents when purchasing baby shoes online. Interviewees stressed the need for clear size guides, as well as easy returns and exchanges, due to the challenges of finding the right fit for their rapidly growing infants.
User Personas
With insights gathered from the interviews, I developed personas to represent the primary user groups. These personas helped in understanding the unique qualities, preferences, and behaviors of Oratile Kids’ customers.
With the persona established, I translated the insights and needs into clear Point of View statements and crafted How Might We questions to guide my design. By defining the design challenge and framing it as a question, I set the stage for ideation, paving the way for a range of innovative solutions.
Points of View
Busy parents need a convenient way to shop for high-quality baby shoes online because they often lack the time to visit physical stores, but still desire a trustworthy, seamless shopping experience that matches the ease and reliability they associate with in-person purchases.
How Might We
How might we develop a user-friendly eCommerce website for Oratile Kids that caters to the needs and preferences of busy parents?
Project Goals
Before heading in to finding ideas for a solution, I mapped out business goals, user goals and technical considerations.
User Flow
Before diving into the design, I mapped out the user flow, focusing on simplifying the purchasing process. Given that parents are the primary users, I prioritized reducing the number of steps required to complete a purchase.
Sitemap
The sitemap for the website was relatively simple to keep the user experience intuitive.
Low - Mid Fidelity Wireframes
I started with low-fidelity wireframes to explore different layouts and navigation options. These wireframes focused on essential features like product browsing, cart functionality and checkout processes.
Mid-Fidelity Frames
Once the basic structure was established, I progressed to mid-fidelity wireframes. These included more detailed elements and began to incorporate branding elements to align with Oratile Kids’ identity.
Branding
After rebranding Oratile Kids with a playful colour palette and a soft, friendly, rounded font, I moved on to the high-fidelity prototype. This phase focused on creating a visually appealing and functional design that reflected the brand’s handcrafted quality.
- A clean, minimalistic aesthetic that speaks to the craft nature of Oratile Kids’ products.
- A responsive design that adapts seamlessly across desktop and mobile devices.
- Enhanced product pages with multiple high-quality images, detailed descriptions and clear sizing information.
OLD/CURRENT LOGO
NEW LOGO
High Fidelity Frames
After coming up with a rebrand for Oratile kids that consists of a playful colour palette and a soft, friendly, rounded font, I proceeded with designing the High fidelity prototype.
Home Page
Shop Page
Product Page
About Page
Cart
Usability Testing
I conducted usability tests with four users, presenting them with the desktop prototype and a scenario to simulate a real-life shopping experience. The objective was to identify any barriers that could prevent users from having a smooth and satisfying shopping experience.
Scenario: “It’s your baby’s birthday in a few days and you’ve decided to purchase new shoes for the occasion. Go to the Oratile Kids website, browse the shoes and decide if you have enough information to make a purchase. How easy was it to find a pair of shoes you liked?”
All the users were able to successfully browse the site using both view ports with minimal friction.
Task Completion Success on Desktop
Task Completion Success on Mobile
All the users were able to successfully browse the site using both view ports with minimal friction.
All users were able to open the prototype and felt that the interface was very familiar. They completed the scenario with minimal friction independently.
All Users could easily type a message and spotted the scheduling tooltip prompt.
All users could Schedule the message to be sent 15 minutes before school dismisses at 15:00
User Feedback:
I would love to see the shipping info upfront. This will help me to make informed decisions especially if I need the product by a certain date.
It would be great to be able to add products to the cart without having to click within the actual product.
I like how the design is so friendly and playful looking! The shoes are so cute. How do I care for the them?
Iterations
Added an ‘Add to Bag’ button that users can use to add items into their bag/cart without actually clicking on an individual product. Before, users had to click into a product before being able to ‘Add it to Cart’
Before
After
Iterations
Secondly, I made the sizing very apparent. I also added a ‘Care instructions’ section under the accordion. I also made the content state ’open’.
Before
After
Experience The Prototypes
The final design successfully met the project’s objectives, providing Oratile Kids with a responsive eCommerce platform that caters to busy parents. The new website not only reflects the brand’s handcrafted quality, but also offers a seamless and trusted shopping experience.
Future Impact
For future iterations, I plan to further refine the user experience by incorporating additional feedback from users as the site goes live. Continuous testing and updates will ensure that the website remains user-friendly and continues to meet the ever-growing needs of Oratile Kids’ customers.
- RESPONSIVE WEBSITE
Building an Online Presence for a Local Baby Shoe Brand
Project Overview
The feet of newborns are not meant for walking when they are born. During their development, their little feet will need shoes that protect them from cold, warm or uncomfortable surfaces, without affecting their natural development. Oratile Baby shoes are hand-crafted from genuine leather. They mimic the feeling of being barefoot and the flexible non-slip sole allow the baby’s foot to move and flex which is also essential for proper muscle and bone development, thereby allowing babies’ feet to grow and develop without restrictions.
Oratile Kids was founded by Tsepiso Monamedi, after she struggled to find affordable, quality shoes for her toddler. What began as a personal project quickly grew into a small business, with her handcrafted, genuine leather shoes being sold in local markets and eventually stocked by leading baby retailers.
4 Weeks
UX + UI Design, Visual design, Branding, User flow, Research, Prototyping + Testing
Figma, Fig jam, Zoom, Google Forms
Oratile Kids need a responsive eCommerce Website.
For the last three years, Oratile Kids baby shoes have been available in leading physical retail outlets and weekend markets. The brand however, has longed to bypass intermediaries to gain control over their product distribution by selling directly to customers online. Establishing a responsive eCommerce website will enable Oratile Kids to reach their customers directly, reduce expenses and broaden their market reach, all factors linked to maintaining a physical brick and mortar store. This platform will cater to busy parents; their primary customer base, who often lack the time to visit stores in person. Moreover, it will enable sales to continue beyond regular business hours.
To create a responsive website with eCommerce functionality that reduces Oratile Kids’ reliance on third-party retailers. A strong online presence will also increase brand awareness, streamline the customer purchasing journey and ultimately grow the business.
My Design Process
Research
The project began with an exploration of the current market and user needs. I conducted a competitive market analysis of four other local baby shoe brands, Wiggle Giggle, Pitta-Patta, Lielie Baai and Bubba Due. All four competitors had an online store where customers could make a purchase.
Strengths
- Has a handmade aesthetic that speaks to the craft nature of the products
- Responsive website eCommerce functionality
Weaknesses
- Inconsistent use of colour
- CTAs are not as visible
- The handwritten font can be illegible in some instances
- Lack of visual hierachy
Features
- eCommerce
- Responsive
- Shop Page Filters
- Pay Via Website
- Product reviews and ratings
- Contact Form
- Newsletter Signup
Strengths
- The website has a clean and minimal
- Purchases are easy to do and understand.
- Font choice soft and legible.
Weaknesses
- Inconsistent use of fonts and banner
- UI design could be improved.
Features
- eCommerce
- Responsive
- Shop Page Filters
- Pay Via Website
- Product reviews and ratings
- Contact Form
- Newsletter Signup
Strengths
- Clean aesthetic R
- Lots of product details
- Clear product photography plus reviews
Weaknesses
- Inconsistent CTAs
- Missed opportunity for conversion on the hero section of the website
Features
- eCommerce
- Responsive
- Shop Page Filters
- Pay Via Website
- Product reviews and ratings
- Contact Form
- Newsletter Signup
Strengths
- Clean and modern Interface
- Consistent branding and UI Design
- Ease of shopping due to a variety of shop filters
- Responsive
Weaknesses
- Fonts illegible in some instances
- Not enough visual contrast between background colour vs Font colour
Features
- eCommerce
- Responsive
- Shop Page Filters
- Pay Via Website
- Product reviews and ratings
- Contact Form
- Newsletter Signup
Oratile Kids’ primary customers are busy parents who value convenience, trustworthiness and the ability to shop beyond traditional retail hours. To understand these users better, I conducted interviews with five parents who had children under the age of two. The goal was to discover their online shopping behaviours, pain points and preferences when purchasing baby shoes.
Key Questions
What factors influence a customer's decision to make a purchase when shopping for baby items online?
Are there any specific details or specifications that are essential to know before making the purchase?
What features or design elements would make them more likely to explore and stay on a baby shoe website?
This is what I found:
High-Quality Product Images Are Crucial.
All interviewees emphasized the importance of clear, high-quality images when shopping for baby shoes and clothes online. The visual representation of products, including multiple angles and lifestyle images, significantly influenced their purchasing decisions, as it helped them assess the quality and make informed decisions.
Trust and Security is very important when Shopping online.
Many respondents highlighted the importance of trust and security when making online purchases. They consider factors like trustworthy websites, secure payment options and familiarity with the brand to ensure a safe shopping experience. Concerns about online fraud and the legitimacy of websites often influence their decision to complete a purchase.
The Importance of Detailed Sizing Information
Accurate and detailed sizing information is a critical factor for parents when purchasing baby shoes online. Interviewees stressed the need for clear size guides, as well as easy returns and exchanges, due to the challenges of finding the right fit for their rapidly growing infants.
User Personas
With insights gathered from the interviews, I developed personas to represent the primary user groups. These personas helped in understanding the unique qualities, preferences, and behaviors of Oratile Kids’ customers.
With the persona established, I translated the insights and needs into clear Point of View statements and crafted How Might We questions to guide my design. By defining the design challenge and framing it as a question, I set the stage for ideation, paving the way for a range of innovative solutions.
Points of View
Busy parents need a convenient way to shop for high-quality baby shoes online because they often lack the time to visit physical stores, but still desire a trustworthy, seamless shopping experience that matches the ease and reliability they associate with in-person purchases.
How Might We
How might we develop a user-friendly eCommerce website for Oratile Kids that caters to the needs and preferences of busy parents?
Project Goals
Before heading in to finding ideas for a solution, I mapped out business goals, user goals and technical considerations.
User Flow
Before diving into the design, I mapped out the user flow, focusing on simplifying the purchasing process. Given that parents are the primary users, I prioritized reducing the number of steps required to complete a purchase.
Sitemap
The sitemap for the website was relatively simple to keep the user experience intuitive.
Low - Mid Fidelity Wireframes
I started with low-fidelity wireframes to explore different layouts and navigation options. These wireframes focused on essential features like product browsing, cart functionality and checkout processes.
Mid-Fidelity Frames
Once the basic structure was established, I progressed to mid-fidelity wireframes. These included more detailed elements and began to incorporate branding elements to align with Oratile Kids’ identity.
Branding
After rebranding Oratile Kids with a playful colour palette and a soft, friendly, rounded font, I moved on to the high-fidelity prototype. This phase focused on creating a visually appealing and functional design that reflected the brand’s handcrafted quality.
- A clean, minimalistic aesthetic that speaks to the craft nature of Oratile Kids’ products.
- A responsive design that adapts seamlessly across desktop and mobile devices.
- Enhanced product pages with multiple high-quality images, detailed descriptions and clear sizing information.
OLD/CURRENT LOGO
NEW LOGO
High Fidelity Frames
After coming up with a rebrand for Oratile kids that consists of a playful colour palette and a soft, friendly, rounded font, I proceeded with designing the High fidelity prototype.
Home Page
Shop Page
Product Page
About Page
Cart
Usability Testing
I conducted usability tests with four users, presenting them with the desktop prototype and a scenario to simulate a real-life shopping experience. The objective was to identify any barriers that could prevent users from having a smooth and satisfying shopping experience.
Scenario: “It’s your baby’s birthday in a few days and you’ve decided to purchase new shoes for the occasion. Go to the Oratile Kids website, browse the shoes and decide if you have enough information to make a purchase. How easy was it to find a pair of shoes you liked?”
All the users were able to successfully browse the site using both view ports with minimal friction.
Task Completion Success on Desktop
Task Completion Success on Mobile
All the users were able to successfully browse the site using both view ports with minimal friction.
All users were able to open the prototype and felt that the interface was very familiar. They completed the scenario with minimal friction independently.
All Users could easily type a message and spotted the scheduling tooltip prompt.
All users could Schedule the message to be sent 15 minutes before school dismisses at 15:00
User Feedback:
I would love to see the shipping info upfront. This will help me to make informed decisions especially if I need the product by a certain date.
It would be great to be able to add products to the cart without having to click within the actual product.
I like how the design is so friendly and playful looking! The shoes are so cute. How do I care for the them?
Iterations
Added an ‘Add to Bag’ button that users can use to add items into their bag/cart without actually clicking on an individual product. Before, users had to click into a product before being able to ‘Add it to Cart’
Before
After
Iterations
Secondly, I made the sizing very apparent. I also added a ‘Care instructions’ section under the accordion. I also made the content state ’open’.
Before
After
Experience The Prototypes
The final design successfully met the project’s objectives, providing Oratile Kids with a responsive eCommerce platform that caters to busy parents. The new website not only reflects the brand’s handcrafted quality, but also offers a seamless and trusted shopping experience.
Future Impact
For future iterations, I plan to further refine the user experience by incorporating additional feedback from users as the site goes live. Continuous testing and updates will ensure that the website remains user-friendly and continues to meet the ever-growing needs of Oratile Kids’ customers.