top of page

REDESIGNING PLUI'S WEBSITE

Children's Clothing E-commerce

Lead the UX Design and UI Design Process

E-COMMERCE REDESIGN

PLUI is currently experiencing production and product return challenges due to limitations with its website. The existing site prioritizes information over functionality, leading to a higher reliance on phone orders for purchases. The redesign of the e-commerce platform aims to streamline online purchases and eliminate the need for phone orders.

My Role

I was responsible for overseeing and guiding every aspect of user experience and interface design.

Tools

Illustrator, Figma, Balsamiq, WIX

ABOUT THE BRAND

PLUI's vision is for children to learn about nature, align with current trends in children's education and environmental awareness, and develop empathy and love for it through everyday items like clothing, backpacks, and toys. The brand has created more than 20 animal characters, each with a range of related products. Children adore these characters, which have gained widespread popularity, boosting the brand's appeal. Parents value PLUI for its outstanding product quality, which includes durability, unique designs, and market differentiation.

Timeline

14 weeks (2022)

PROJECT OBJECTIVES

  • One of the brand's primary goals is to educate through the use of their characters. Therefore, it is crucial that the website effectively showcases the different characters and their associated products.

  • Simplify the e-commerce layout and organize content to facilitate user exploration and understanding of the product range in the catalog. Implement interactive and user-friendly navigation features to enhance user engagement and ease of browsing.

  • Ensure clear indication of product availability to manage user expectations regarding stock availability.

  • Create a user interface that reflects Plui's playful brand identity to enhance user interaction and browsing experience.

WHAT IS?

Understanding the Current State of the PLUI Website

Interviewing the Owner

To understand the objectives of the brand's website redesign, I interviewed the owner to inquire about the specific goals, the current website situation, and any issues the brand was experiencing. 

Key Findings

Children are very familiar with the brand characters and want their parents to buy items featuring their specific favorites. However, parents often struggle to recognize the characters their children prefer and feel overwhelmed when navigating the product catalog.​

​Some customers have difficulty determining the correct size to buy, leading to a high number of returns.​

Because the brand accepts phone-based orders, it frequently faces issues with out-of-stock items. This directly impacts its ability to ensure timely production and delivery, leading to inconsistent product availability.

USABILITY TESTING

I conducted in-depth usability testing with four real customers to evaluate PLUI's e-commerce website. The objective was to assess how easily users could find products, complete purchases, and navigate the site.

 

A think-aloud protocol was implemented throughout the sessions, encouraging participants to verbalize their thoughts while completing the task of purchasing a rain cape for a child.

What Works:

  1. The color scheme is bright and vibrant. The website has a playful vibe that aligns well with the children's audience.

  2. Icons for navigation (e.g., language flags, contact, store) are recognizable and intuitive.

  3. The product images effectively showcase the products by category.

What Doesn't Work:

  1. The website does not effectively showcases the different characters and their associated products.

  2. Text are hard to read due to the font style and color contrast.

  3. The layout is quite busy, with many elements competing for attention.

  4. There are no clear call-to-action (CTA) buttons. 

  5. The landing page is purely informational, lacking an inviting call-to-action for online purchases, and fails to specify available products, causing confusion.

  6. Important elements like detailed product information, usage instructions, prices, and key features are missing, which are essential for inviting users to purchase the products.

  7. The layout for category listings can appear boring and monotonous, and it may prioritize products that are better positioned within the layout, potentially overshadowing other items.

  8. The available products do not match those shown in the category photographs, which can confuse users between similar items (for example, buying a towel instead of a rain cape).

  9. The product information does not provide any guidance on sizing.

WHAT IF?

Developing the website concept, and brainstorming features possibilities.

PERSONAS

EMPATHY MAP

HMW incorporate visual aids to help Camila understand the size and fit of products better?

VALUE PROPOSITION CANVAS

How Might We (HMW) create kid-friendly navigation with parental approval features that allow Olive to easily find and show his parents the products he likes?

VALUE PROPOSITION CANVAS

HMW ensure the website provides real-time inventory data to help Beatriz manage her stock levels effectively?

GOAL STATEMENT

To develop an innovative and user-friendly e-commerce platform for children's clothing that:

 

Provide accurate size information and trustworthy fit recommendations to help users confidently find the correct sizes for their children.

 

Streamline easy bulk purchasing and implement efficient inventory management for store owners, ensuring they can keep their store stocked on time.

 

Offer intuitive, engaging, and visually appealing navigation features designed specifically for children, empowering them to independently find and explore products they love.

BRAINSTORMING

Engaging Navigation:

  • Use large, colorful buttons and clear categories to make navigation easy and fun for children.

  • Enable users to search and browse by the brands characters, facilitating an easier discovery of the products

Bento Boxes Layout

  • Allow users to see multiple categories at once without any interaction. 

  • The grid layout can take up a lot of space, potentially requiring users to scroll down significantly to view all categories.

  • The uniform layout might highlight or prioritize specific categories.

  • Highlight specific categories one at a time, making each category stand out but not competing with each other. 

  • Add a dynamic Interaction.

  • Useful for space efficiency.

Carousel Layout

Streamlined Bulk Purchasing:

  • Bulk Order Options: Offer clear options for bulk purchasing, including discounts and special deals for large orders.

  • Inventory Management Tools: Incorporate inventory management features with real-time stock-level updates to streamline operations.

  • Easy Reordering: Enhance convenience by providing a "Reorder" button for frequently purchased items and utilizing past order templates for quick and easy reordering.

WHAT WOWS?

Focused on delight users and differentiate the website from competitors. This phase encompassed prototyping and testing concepts to measure user feedback.

LO-FI PROTOTYPE

To prioritize user experience and ensure equal visibility for all characters, I chose to present them in a wheel carousel format, enhancing user engagement and interaction with the characters. This method prevents any bias towards specific characters, allowing equal access to all characters in a balanced presentation. 

PROTOTYPE

Kid-Friendly Navigation

  • The clean, minimalist design with a black and white color scheme reduces visual clutter and focuses the user's attention on the product categories.

  • The navigation elements are clearly labeled with intuitive titles and recognizable Icons.

  • The presence of clickable navigation arrows for browsing suggest interactive elements.

  • The prominently displayed "Title" prompt at the top center guides users on the expected action.

  • Implement a "Share with mom" button, enables Kids to save and share his favorite products easily.

  • The UI prominently displays product categories such as "Jacket," "Towel," "Rain Cape," and "Bib," making it easy for users to identify and select the type of product they are interested in.

Size Information Chart

USABILITY TESTING

I developed a Hi-fi prototype using Figma and subsequently conducted a user test involving three participants.

 

In order to guide them through the tasks and assess the interface's usability and effectiveness, I interacted with each participant individually through Zoom video calls, during which calls they shared their screens with me.

TEST #1

TASK: Purchase a raccoon rain cape. 

Working mom of 2 kids

1. Feels overwhelmed by not knowing how many characters she needs to browse through.

2. Mentions that the product labels are not sufficiently visible.

3. After searching different products, the participant would like a way to remember which product is currently chosen.

CORRECTIONS

1. I implemented the use of a scrollbar that provides a visual cue indicating how much content has been viewed and how much remains.

2. I relocated the product labels to a more prominent and clear position.

3. I implemented a display in the corner of the image showing the currently selected product.

TEST #2

TASK: Purchase a raccoon rain cape. 

Woman looking for a gift

1. The title's was not as attention-grabbing as I though. The title should clearly outline the steps for using the size measurement tool effectively.

CORRECTIONS

1. I implemented the use of a scrollbar that provides a visual cue indicating how much content has been viewed and how much remains.

2. I relocated the product labels to a more prominent and clear position.

3. I implemented a display in the corner of the image showing the currently selected product.

WHAT WORKS?

Ideas from previous stages were evaluated and validated, and the design was refined based on their effectiveness for users and business objectives.

PROTOTYPE

You can see the major flows of the app in the following prototype video.

EXPECTED OUTCOME

The expected outcome for the PLUI e-commerce is to enhanced Customer Satisfaction:

  • Precise Size Information: Parents can confidently purchase the correct sizes for their children, reducing returns and increasing satisfaction. This accuracy also boosts sales as customers are more likely to make repeat purchases.

  • Bulk Purchasing Efficiency: Store owners can easily manage their inventory and make bulk purchases, leading to more efficient operations. This efficiency attracts more wholesale buyers, increasing order volumes and revenue.

  • Kid-Friendly Interaction: A user-friendly and efficient checkout process designed with children in mind ensures easy navigation and a pleasant shopping experience.

  • Competitive Advantage: Offering a tailored shopping experience for parents, store owners, and children sets the platform apart from competitors, attracting a wider audience and building a strong market presence.

REFLECTION

Engaging with the PLUI e-commerce platform project has been a rewarding and multifaceted journey. Tailoring solutions meticulously has been crucial in creating a personalized shopping experience for a diverse range of user personas. As a result, my understanding of user-centered design has deepened, challenging me to think creatively and empathetically, prompting consideration of user emotions and preferences in each design choice.


The project’s complexity required a holistic design approach. Navigating the unique requirements of diverse user groups presented challenges and infused excitement into the project, fostering a dynamic and engaging environment where collaboration and idea exchange thrived. This challenge propelled me to think about comprehensive solutions such as personalized features based on user preferences and tailor the interface with intuitive navigation to meet diverse needs. For instance, adjusting design strategies in response to user feedback refined my problem-solving abilities and underscored the importance of flexibility and adaptability in crafting user-centric solutions.

bottom of page